.editorial-intro {
  position: relative;
  height: 240svh;
  background: var(--ivory);
  color: var(--navy);
  --sage: #a3b18a;
  --sky: #8dbce2;
  --gold: #d4af37;
}

.editorial-intro__stage {
  position: sticky;
  top: 0;
  display: grid;
  align-items: center;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
}

.editorial-intro__inner {
  position: relative;
  z-index: 1;
  width: var(--stage-width);
  margin-inline: auto;
  padding: clamp(4rem, 6vh, 6rem) var(--stage-inset);
}

.editorial-intro__curves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.editorial-intro__curve { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.editorial-intro__curve--sky { stroke: rgba(85, 139, 180, .23); }
.editorial-intro__curve--gold { stroke: rgba(167, 123, 13, .22); }
.editorial-intro__curve--echo { stroke: rgba(13, 27, 42, .09); }
.editorial-intro__curve--inner { stroke: rgba(13, 27, 42, .065); }
.editorial-intro__nest {
  position: absolute;
  right: var(--stage-inset);
  top: 18%;
  width: 28%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.editorial-intro__mark { width: clamp(150px, 16vw, 245px); }
/* Enlarge the rings, keeping the measured mark and background geometry fixed.
   A 136% ring diameter is 1.7 times the original 80% diameter. */
.editorial-intro__mark .nest-ring { inset: -18%; }
.editorial-intro.is-ready .editorial-intro__nest { opacity: 0; visibility: hidden; }
.editorial-intro.is-ready .editorial-intro__nest.is-visible { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.editorial-intro__nest.is-woven .editorial-intro__mark { animation: nest-breathe 8s var(--ease) infinite; }
.editorial-intro__nest.is-woven .nest-ring { transition: transform .72s cubic-bezier(.2,.72,.2,1); }
.editorial-intro__nest.is-woven:hover .nest-ring--navy { transform: rotate(8deg) scale(1.14, 1.28); }
.editorial-intro__nest.is-woven:hover .nest-ring--sage { transform: rotate(52deg) scale(1.3, 1.1); }
.editorial-intro__nest.is-woven:hover .nest-ring--gold { transform: rotate(94deg) scale(1.12, 1.32); }
.editorial-intro__nest.is-woven:hover .nest-ring--sky { transform: rotate(132deg) scale(1.32, 1.14); }
.editorial-intro__inner > .editorial-intro__reveal,
.editorial-intro__row { width: 64%; }

.editorial-intro__reveal {
  /* Opacity-only reveals need no clipping; allow glyph edges to overhang. */
  overflow: visible;
}

.editorial-intro__reveal--headline {
  padding: 1.25rem;
  margin: -1.25rem;
}

.editorial-intro.is-ready .editorial-intro__reveal > * {
  opacity: 0;
  transition: opacity .6s ease-out;
}

.editorial-intro.is-ready .editorial-intro__reveal.is-visible > * {
  opacity: 1;
}

.editorial-intro__headline {
  max-width: 15ch;
  margin: 0;
  font-family: "Aptos Display", "Segoe UI Variable Display", "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(3.8rem, 5.7vw, 6.5rem);
  font-weight: 450;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.editorial-intro__word {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.editorial-intro__row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(1.4rem, 3vh, 2.25rem);
  align-items: start;
  margin-top: clamp(2rem, 4.5vh, 3.5rem);
}

.editorial-intro__thought {
  max-width: 38ch;
  margin: 0;
  font-size: clamp(1.6rem, 2.15vw, 2.4rem);
  font-weight: 450;
  letter-spacing: -0.035em;
  line-height: 1.16;
}

.editorial-intro__thought span { display: block; }

.editorial-intro__explanation {
  max-width: 53ch;
  margin: 0;
  color: var(--navy-soft);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.52;
}

@media (max-width: 850px) {
  .editorial-intro__inner { padding-block: 4rem; }
  .editorial-intro__headline { max-width: 13ch; font-size: clamp(3.1rem, 6.5vw, 5.7rem); }
  .editorial-intro__mark { width: clamp(110px, 16vw, 160px); }
}

@media (max-width: 700px) {
  .editorial-intro { height: 220svh; }
  .editorial-intro__stage { min-height: 0; }
}

@media (max-width: 620px) {
  .editorial-intro__inner { padding: 7.75rem 1.5rem 2.5rem; }
  .editorial-intro__inner > .editorial-intro__reveal,
  .editorial-intro__row { width: 100%; }
  .editorial-intro__nest { top: .9rem; right: 2rem; width: 100px; }
  .editorial-intro__mark { width: 92px; }
  .editorial-intro__mark .nest-ring { inset: 10%; }
  .editorial-intro__headline { max-width: 12ch; font-size: clamp(2.85rem, 11.2vw, 4.35rem); line-height: 1.04; }
  .editorial-intro__row { row-gap: 1.3rem; margin-top: 1.8rem; }
  .editorial-intro__thought { font-size: clamp(1.4rem, 5.5vw, 1.8rem); }
  .editorial-intro__explanation { font-size: 1rem; line-height: 1.48; }
}

@media (max-height: 700px) and (min-width: 621px) {
  .editorial-intro__stage { min-height: 0; }
  .editorial-intro__inner { padding-block: 2rem; }
  .editorial-intro__headline { font-size: clamp(2.8rem, 5vw, 4.4rem); }
  .editorial-intro__row { margin-top: 1.5rem; row-gap: 1rem; }
  .editorial-intro__thought { font-size: 1.5rem; }
  .editorial-intro__explanation { font-size: 1rem; }
}

@media (max-height: 700px) and (max-width: 620px) {
  .editorial-intro__inner { padding-top: 6rem; padding-bottom: 1.5rem; }
  .editorial-intro__nest { top: .3rem; width: 80px; }
  .editorial-intro__mark { width: 74px; }
  .editorial-intro__headline { font-size: 2.65rem; }
  .editorial-intro__row { margin-top: 1.4rem; row-gap: 1rem; }
  .editorial-intro__thought { font-size: 1.35rem; }
  .editorial-intro__explanation { font-size: .95rem; }
}

@media (max-width: 380px) {
  .editorial-intro__headline { font-size: clamp(2.75rem, 11vw, 3.15rem); }
  .editorial-intro__reveal--headline { padding: .7rem; margin: -.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-intro { height: auto; }
  .editorial-intro__stage { position: relative; min-height: 100svh; height: auto; overflow: visible; }
  .editorial-intro.is-ready .editorial-intro__reveal > * { opacity: 1; transform: none; transition: none; }
  .editorial-intro.is-ready .editorial-intro__curve { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .editorial-intro.is-ready .editorial-intro__nest { opacity: 1; transition: none; }
  .editorial-intro__nest.is-woven .editorial-intro__mark { animation: none; }
  .editorial-intro__nest.is-woven .nest-ring { transition: none; }
}

/* Short mobile screens need enough real document height for all intro copy. */
@media (max-width: 900px) and (max-height: 700px) {
  .editorial-intro { height: auto; }
  .editorial-intro__stage { position: relative; height: auto; min-height: 100svh; }
  .editorial-intro.is-ready .editorial-intro__reveal > * { opacity: 1; transform: none; }
}

/* More room to read the overlap, form the nest, and turn before departure. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .editorial-intro { height: 520svh; }
}