/* ==========================================================================
   Feature story scaffold
   ==========================================================================
   Shared frame for every editorial "story" section: an editorial copy column
   on one side, an open kinetic stage on the other. Each art family (the
   waterline, the layers, the verdict key, the ledger of terrains…) owns its own
   choreography in its own section folder; this file owns only the frame, the
   type scale and the responsive reshaping, so a page can load a single story
   without dragging in the others.
   ========================================================================== */

.feat-stories {
  position: relative;
  overflow: clip;
}

/* A band of stories is threaded by a centre spine; a solo story opts out. */
.feat-stories:not(.feat-stories--solo)::before {
  content: '';
  position: absolute;
  top: 8rem;
  bottom: 8rem;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    transparent,
    rgba(var(--feat-violet-rgb), 0.34) 18%,
    rgba(90, 116, 255, 0.18) 44%,
    rgba(245, 169, 82, 0.25) 68%,
    rgba(var(--feat-mint-rgb), 0.34) 86%,
    transparent
  );
}

.feat-story {
  --story-accent: var(--feat-violet-soft);
  --story-accent-rgb: 169, 144, 255;
  position: relative;
  z-index: 1;
}

.feat-story + .feat-story {
  border-top: 1px solid rgba(176, 173, 224, 0.08);
}

/* The ambient glow behind a story. `closest-side` is load-bearing: a gradient
   sized on the default farthest-corner still carries ~1% alpha when this box's
   own top edge cuts it off, and that clip draws a visible horizontal line where
   two stories meet over the shared page background. Fading to zero at the
   nearest side — always the top or bottom here, the box being 136% wide —
   guarantees there is nothing left to clip. */
.feat-story::before {
  content: '';
  position: absolute;
  inset: 8% -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle closest-side at 72% 48%,
    rgba(var(--story-accent-rgb), 0.105),
    transparent
  );
}

/* Copy left, visual right. A story that wants the mirror states it in its own
   sheet — the scaffold ships one direction because only one is in use, and an
   unused second one is a promise nobody keeps. */
.feat-story__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  min-height: min(700px, 82vh);
}

.feat-story__copy {
  max-width: 535px;
}

.feat-story__title {
  margin: 0;
  color: var(--feat-text);
  font-size: var(--feat-title-story-size);
  font-weight: 850;
  letter-spacing: -0.067em;
  line-height: 0.94;
  text-wrap: balance;
}

.feat-story__title > span {
  display: block;
}

.feat-story__title-accent {
  width: fit-content;
  padding: 0 0.05em 0.08em;
  margin: 0 -0.05em;
  color: transparent;
  background: linear-gradient(100deg, var(--story-accent), #5a74ff 58%, #68d9ee);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Justified like every other section subtitle in the family (PageStyles
   .feat-lede), hyphenated so a 47ch measure does not open rivers. */
.feat-story__body {
  max-width: 47ch;
  margin: 1.65rem 0 0;
  color: var(--feat-body);
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  letter-spacing: -0.015em;
  line-height: 1.72;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.feat-story__notes {
  display: grid;
  padding: 0;
  margin: 2.15rem 0 0;
  list-style: none;
  border-top: 1px solid var(--feat-line);
}

.feat-story__notes li {
  display: grid;
  grid-template-columns: 0.55rem 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--feat-line);
  color: var(--feat-muted);
  font-family: var(--feat-mono);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
}

.feat-story__note-mark {
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--story-accent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px var(--feat-bg),
    0 0 11px rgba(var(--story-accent-rgb), 0.58);
}

.feat-story__visual {
  position: relative;
  min-width: 0;
}

.feat-story__visual::before {
  content: '';
  position: absolute;
  inset: 15% 6%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(var(--story-accent-rgb), 0.16);
  filter: blur(72px);
}

.feat-art-stage {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 590px;
  isolation: isolate;
  transform: perspective(1100px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.feat-art-stage::before,
.feat-art-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.feat-art-stage::before {
  inset: 4% 2%;
  border: 1px solid rgba(var(--story-accent-rgb), 0.13);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.feat-art-stage::after {
  top: 8%;
  right: 0;
  bottom: 8%;
  left: 0;
  border-block: 1px solid rgba(176, 173, 224, 0.1);
}

.feat-art-stage__caption {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  z-index: 8;
  color: var(--story-accent);
  font-family: var(--feat-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --- Scaffold motion and responsive reshaping ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .feat-art-stage {
    transform: none;
    transition: none;
  }
}

/* Same rule the hero lede follows: justification only pays off on the wide
   desktop column, so below it the body returns to its natural edge. */
@media (max-width: 1100px) {
  .feat-story__body {
    text-align: left;
  }
}

@media (max-width: 960px) {
  .feat-stories::before {
    display: none;
  }

  /* One column. The scaffold never sets `order`, so it has none to take back —
     a story that mirrors itself on desktop undoes that in its own breakpoint
     sheet (see TailoredSection), which is the only sheet loaded late enough to
     outrank the rule that set it. */
  .feat-stories .feat-story__layout {
    grid-template-columns: 1fr;
    gap: 3.6rem;
    min-height: 0;
  }

  .feat-stories .feat-story__copy {
    max-width: 680px;
  }

  .feat-stories .feat-story__body {
    max-width: 60ch;
  }

  .feat-stories .feat-story__visual {
    width: min(100%, 680px);
  }
}

@media (max-width: 640px) {
  .feat-stories .feat-story__title {
    font-size: var(--feat-title-story-size-mobile);
  }

  .feat-stories .feat-story__body {
    font-size: 1.02rem;
  }

  .feat-stories .feat-art-stage {
    min-height: 520px;
    transform: none;
  }

  .feat-art-stage__caption {
    left: 0.5rem;
  }
}

/* Forced colours remove the gradient these words are painted with, and the
   glyphs are transparent without it. Give the system its own ink back. */
@media (forced-colors: active) {
  .feat-story__title-accent {
    color: CanvasText;
    background: none;
  }
}