@layer sections {
  .story { position: relative; overflow-x: clip; padding-top: var(--section-y); isolation: isolate; }
  .story > *:not(.sunburst) { position: relative; z-index: 1; }
  .story__intro { display: grid; gap: 1.6rem; justify-items: start; padding-bottom: calc(var(--section-y) * 0.75); }
  .story__heading { max-width: 14ch; }
  .story__statement { max-width: 30ch; font-family: var(--font-display); font-size: clamp(1.55rem, 0.95rem + 2.3vw, 3.2rem); line-height: 1.24; letter-spacing: -0.016em; font-variation-settings: 'SOFT' var(--heading-soft, 40); font-weight: 400; text-wrap: pretty; }
  .story__statement .sf { opacity: 0.2; transition: opacity 0.45s var(--ease-out), color 0.45s; }
  .story__statement .sf.is-lit { opacity: 1; }
  .html-no-js .story__statement .sf, html:not(.js) .story__statement .sf { opacity: 1; }

  /* ---- chapters (static layout: no JS / reduced motion) ---- */
  .story__sticky { display: grid; gap: clamp(4rem, 9vw, 9rem); padding-bottom: var(--section-y); }
  .chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: center; width: min(100% - 2 * var(--gutter), var(--page-width, 1440px)); margin-inline: auto; }
  .chapter__top { grid-column: 1 / 8; grid-row: 1; align-self: end; }
  .chapter__copy { grid-column: 1 / 7; grid-row: 2; display: grid; gap: 1rem; align-content: start; justify-items: start; }
  .chapter__media { grid-column: 8 / 13; grid-row: 1 / 3; position: relative; }
  .chapter__year { --ghost: color-mix(in oklab, var(--c-gold) 15%, transparent); font-family: var(--font-display); font-weight: 800; font-size: clamp(5.5rem, 2rem + 15vw, 18rem); line-height: 0.82; letter-spacing: -0.06em; font-variation-settings: 'SOFT' 100; color: var(--ghost); transition: color 1.4s var(--ease-out); }
  /* ghost numerals that fill with a honey gradient when their chapter is active (the fill lives on each digit so it survives the roll-in) */
  .chapter__year, .chapter__digits .dg i { background: linear-gradient(180deg, var(--c-honey), var(--c-gold) 60%, #b4741f) no-repeat 0 100% / 100% 0%; -webkit-background-clip: text; background-clip: text; }
  .chapter.is-active .chapter__year { color: transparent; }
  .chapter.is-active .chapter__year, .chapter.is-active .chapter__digits .dg i { background-size: 100% 100%; }
  .chapter__digits { display: inline-flex; }
  .chapter__digits .dg { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.05em 0.08em; margin: -0.05em -0.08em; }
  .chapter__digits .dg i { display: inline-block; font-style: normal; padding-inline: 0.04em; margin-inline: -0.04em; transform: translateY(0); transition: transform 1.1s var(--ease-out), background-size 1.4s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
  .chapter__title { max-width: 14ch; }
  .chapter__text { max-width: 46ch; color: var(--fg-soft); font-size: var(--fs-l); line-height: 1.7; }
  .chapter__text--soft { font-size: var(--fs-m); opacity: 0.85; }
  .chapter__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); background: var(--c-ink); box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.8); }
  .chapter__img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
  .chapter__caption { margin-top: 1rem; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); }
  .story__rail { display: none; }

  /* ---- pinned storytelling (activated by motion.js: .is-pinned) ---- */
  .story.is-pinned .story__stage { height: calc(var(--chapters, 3) * 110svh); }
  .story.is-pinned .story__sticky { position: sticky; top: 0; display: block; height: 100svh; padding: 0; overflow: hidden; }
  .story.is-pinned .chapter {
    position: absolute; inset: 0; width: auto; margin: 0; align-content: center; padding: calc(var(--header-h) + 1.5rem) max(var(--gutter), calc((100% - var(--page-width, 1440px)) / 2)) 3rem;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.9s var(--ease-out), visibility 0s 0.9s;
  }
  .story.is-pinned .chapter.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.9s var(--ease-out), visibility 0s; }
  .story.is-pinned .chapter__frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out); }
  .story.is-pinned .chapter.is-active .chapter__frame { clip-path: inset(0 0 0 0); }
  .story.is-pinned .chapter__img { transform: scale(1.25); transition: transform 2.2s var(--ease-out); }
  .story.is-pinned .chapter.is-active .chapter__img { transform: scale(1.02); }
  .story.is-pinned .chapter__digits .dg i { transform: translateY(105%); }
  .story.is-pinned .chapter.is-active .chapter__digits .dg i { transform: none; }
  .story.is-pinned .chapter__copy > * { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 1s var(--ease-out); }
  .story.is-pinned .chapter.is-active .chapter__copy > * { opacity: 1; transform: none; transition-delay: calc(0.35s + var(--k, 0) * 90ms); }
  .story.is-pinned .chapter__copy > :nth-child(2) { --k: 1; }
  .story.is-pinned .chapter__copy > :nth-child(3) { --k: 2; }
  .story.is-pinned .chapter__copy > :nth-child(4) { --k: 3; }
  .story.is-pinned .chapter__caption { opacity: 0; transition: opacity 0.8s 0.9s; }
  .story.is-pinned .chapter.is-active .chapter__caption { opacity: 1; }

  .story.is-pinned .story__rail { position: absolute; right: calc(var(--gutter) * 0.6); top: 50%; translate: 0 -50%; z-index: 4; display: grid; gap: 1.35rem; list-style: none; margin: 0; padding: 0; justify-items: end; }
  .story__tick { display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); }
  .story__tick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the big numerals already name the chapter */
  .story__tick::after { content: ''; width: 0.8rem; height: 0.92rem; background: color-mix(in oklab, var(--fg) 28%, transparent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background var(--dur-m), transform 0.7s var(--ease-spring); }
  .story__tick.is-active { color: var(--c-gold); }
  .story__tick.is-active::after { background: var(--c-gold); transform: scale(1.5); }

  @media (max-width: 989px) {
    .chapter { grid-template-columns: 1fr; }
    .chapter__top, .chapter__copy, .chapter__media { grid-column: 1; grid-row: auto; }
    .chapter__frame { aspect-ratio: 5 / 4; }
    .story.is-pinned .chapter { align-content: start; gap: 1rem; padding-top: calc(var(--header-h) + 0.5rem); }
    .story.is-pinned .chapter__top { order: 1; }
    .story.is-pinned .chapter__media { order: 2; }
    .story.is-pinned .chapter__copy { order: 3; }
    .story.is-pinned .chapter__year { font-size: clamp(4.5rem, 24vw, 8rem); }
    .story.is-pinned .chapter__frame { aspect-ratio: 16 / 10; }
    .story.is-pinned .chapter__text { font-size: var(--fs-m); }
    .story.is-pinned .story__rail { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .story.is-pinned .story__stage { height: auto; }
  }
}