/* ============================================================
   COERE — Single article visual system, August 2026
   Dark interactive entry, calm white editorial reading surface.
   ============================================================ */

@property --interior-shift-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --interior-shift-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --interior-shift-x-soft {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --interior-shift-y-soft {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.post-redesign {
  --interior-shift-x: 0%;
  --interior-shift-y: 0%;
  --interior-shift-x-soft: 0%;
  --interior-shift-y-soft: 0%;
  background: var(--white);
  color: var(--graphite-green);
}

.post-redesign main,
.post-redesign article,
.post-redesign .post-section {
  background: var(--white);
}

.post-redesign .post-hero {
  position: relative;
  min-height: clamp(610px, 72svh, 760px);
  padding-block: 174px 142px;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 84% 8%, rgba(76, 117, 88, 0.28), transparent 38%),
    linear-gradient(145deg, #07130e 0%, #10251b 52%, #193a2b 100%);
  color: var(--mist-gray);
}

.post-redesign .post-hero::before {
  position: absolute;
  z-index: -1;
  inset: -24%;
  background:
    radial-gradient(ellipse 45% 36% at calc(78% + var(--interior-shift-x)) calc(18% + var(--interior-shift-y)), rgba(76, 117, 88, 0.48), transparent 68%),
    radial-gradient(ellipse 50% 38% at calc(18% - var(--interior-shift-x-soft)) calc(82% - var(--interior-shift-y-soft)), rgba(43, 82, 58, 0.38), transparent 70%),
    radial-gradient(ellipse 34% 24% at calc(54% + var(--interior-shift-x-soft)) calc(50% - var(--interior-shift-y)), rgba(235, 205, 80, 0.075), transparent 74%);
  content: "";
  pointer-events: none;
  transform: scale(1.08);
  transition:
    --interior-shift-x 420ms cubic-bezier(0.16, 1, 0.3, 1),
    --interior-shift-y 420ms cubic-bezier(0.16, 1, 0.3, 1),
    --interior-shift-x-soft 580ms cubic-bezier(0.16, 1, 0.3, 1),
    --interior-shift-y-soft 580ms cubic-bezier(0.16, 1, 0.3, 1);
}

.post-redesign .post-hero::after {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: -10%;
  width: min(52vw, 780px);
  aspect-ratio: 1.4;
  background: radial-gradient(ellipse, rgba(108, 151, 119, 0.13), transparent 68%);
  content: "";
  pointer-events: none;
  transform: translate3d(var(--interior-shift-x-soft), var(--interior-shift-y-soft), 0);
}

.post-redesign .post-hero__content {
  position: relative;
  z-index: 1;
  align-items: end;
}

.post-redesign .post-back-link {
  margin-bottom: clamp(26px, 3vw, 42px);
  color: rgba(240, 240, 240, 0.72);
}

.post-redesign .post-back-link:hover,
.post-redesign .post-back-link:focus-visible {
  color: var(--mist-gray);
}

.post-redesign .post-hero .article-meta {
  margin-bottom: clamp(22px, 2.4vw, 34px);
  color: rgba(240, 240, 240, 0.58);
}

.post-redesign .post-hero .article-meta > * + *::before {
  background: rgba(240, 240, 240, 0.34);
}

.post-redesign .post-hero .coere-display {
  grid-column: 1 / span 7;
  max-width: 10ch;
  color: var(--mist-gray);
  line-height: 0.91;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

.post-redesign .post-hero .coere-lead {
  grid-column: 9 / span 3;
  max-width: 34ch;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(235, 205, 80, 0.52);
  color: rgba(240, 240, 240, 0.66);
  line-height: 1.55;
}

.post-redesign .post-cover {
  height: clamp(460px, 51vw, 700px);
  margin-top: -82px;
  background: #e8ece9;
  border: 0;
  border-radius: 32px;
  box-shadow: 0 34px 90px rgba(6, 20, 13, 0.18);
}

.post-redesign .post-section {
  padding-top: clamp(88px, 8vw, 128px);
  padding-bottom: clamp(112px, 12vw, 184px);
}

.post-redesign .post-aside {
  top: 116px;
}

.post-redesign .post-content {
  color: #45534c;
}

.post-redesign .post-content__intro,
.post-redesign .post-content h2 {
  color: var(--graphite-green);
}

.post-redesign .post-content blockquote {
  background: #f3f6f4;
}

@media (max-width: 1100px) {
  .post-redesign .post-hero .coere-display {
    grid-column: 1 / span 8;
  }

  .post-redesign .post-hero .coere-lead {
    grid-column: 9 / -1;
  }
}

@media (max-width: 899px) {
  .post-redesign .post-hero {
    min-height: 680px;
    padding-block: 150px 126px;
  }

  .post-redesign .post-hero .coere-display {
    grid-column: 1 / -1;
    max-width: 11ch;
  }

  .post-redesign .post-hero .coere-lead {
    grid-column: 6 / -1;
    margin-top: 36px;
  }
}

@media (max-width: 767px) {
  .post-redesign .post-hero {
    min-height: 720px;
    padding-block: 132px 112px;
  }

  .post-redesign .post-hero__content {
    display: block;
  }

  .post-redesign .post-back-link {
    margin-bottom: 32px;
  }

  .post-redesign .post-hero .article-meta {
    margin-bottom: 24px;
  }

  .post-redesign .post-hero .coere-lead {
    max-width: 38ch;
    margin-top: 34px;
  }

  .post-redesign .post-cover {
    width: calc(100% - 32px);
    height: 390px;
    margin-top: -54px;
    border-radius: 24px;
  }

  .post-redesign .post-section {
    padding-top: 80px;
    padding-bottom: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-redesign .post-hero::before,
  .post-redesign .post-hero::after {
    transition: none;
  }
}