/* ===================================================== */
/* INDEX PAGE STYLES                                     */
/* ----------------------------------------------------- */
/* Homepage-only styling and composition tuning.         */
/* This file loads after css/styles.css and should only  */
/* hold rules that describe index.html specifically.     */
/* ===================================================== */

/* ===================================================== */
/* CSS GUIDE | HOW TO READ THIS FILE                     */
/* ----------------------------------------------------- */
/* This stylesheet is the homepage layer. It follows the */
/* shared system in css/styles.css and only adds index-  */
/* specific tokens, scene compositions, and responsive   */
/* overrides. Read it from top to bottom.                */
/*                                                       */
/* 1. INDEX PAGE TOKENS                                  */
/*    Homepage control panel: splash timing and Book     */
/*    Frame sizing tokens that are not shared globally.  */
/*                                                       */
/* 2. SPLASH OVERLAY                                     */
/*    Homepage-only opening wordmark overlay.            */
/*                                                       */
/* 3. INDEX PAGE / MENU REVEAL STATES                    */
/*    Homepage-specific header/menu reveal states.       */
/*                                                       */
/* 4. SCENE ONE: INTRO SPREAD                            */
/*    Opening Spread Scene art direction and headline    */
/*    tuning while Book Frame migration is stabilized.   */
/*                                                       */
/* 5. SCENE TWO: THINKERS REVEAL                         */
/*    Page-specific tuning for the reusable reveal scene.*/
/*                                                       */
/* 6. SCENE THREE: DISCIPLINES REVEAL                    */
/*    Homepage-only sticky accordion scene, including    */
/*    layout tokens read by js/pages/index.js.           */
/*                                                       */
/* 7. SCENE FOUR: FULLSCREEN CODED FILM                  */
/*    Homepage-only coded film playback and crop hooks.  */
/*                                                       */
/* 8. SCENE FIVE: ROUTE SELECTION                        */
/*    Homepage route list and CTA composition.           */
/*                                                       */
/* 9. INDEX RESPONSIVE BREAKPOINTS                       */
/*    Homepage breakpoint token overrides and the few    */
/*    structural overrides needed by individual blocks.  */
/* ===================================================== */

/* ===================================================== */
/* 1. INDEX PAGE TOKENS                                  */
/* ----------------------------------------------------- */
/* Page-level control panel for homepage-only features.  */
/* Shared site tokens should stay in css/styles.css.     */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* SPLASH OVERLAY TOKENS                                 */
  /* ----------------------------------------------------- */
  /* Homepage intro overlay with logo mark.                */
  /* ===================================================== */
  --splash-bg: #ffffff;
  --splash-z: 1000;
  --splash-logo-width: 424px;
  --splash-design-width: 1440px;
  --splash-logo-x: 480px;
  --splash-logo-center-x: calc(var(--splash-logo-x) + (var(--splash-logo-width) / 2));
  --splash-logo-offset-y: -24px;
  --splash-shrink-scale: 0.98;
  --splash-delay: 450ms;
  --splash-shrink-duration: 800ms;
  --splash-hold-after-shrink: 200ms;
  --splash-fade-duration: 300ms;
  --splash-ease: cubic-bezier(0.25, 1, 0.3, 1);

  /* ===================================================== */
  /* RESPONSIVE INTRO PAGE TOKENS                          */
  /* ----------------------------------------------------- */
  /* Scene One has three responsive modes: scaled Open     */
  /* Spread for landscape-capable widths, true stacked     */
  /* pages for portrait/tablet and phone, and a shared     */
  /* Single Page ruler for the non-fullscreen scenes.      */
  /* ===================================================== */
  --index-book-frame-open-spread-width: var(--book-frame-source-width);
  --index-book-frame-open-spread-height: var(--book-frame-source-height);
  --index-book-frame-page-stack-gap: 0px;
  --index-book-frame-single-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px),
    calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
  );
  --index-book-frame-single-page-height: calc(var(--index-book-frame-single-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --index-book-frame-single-page-gap: max(
    0px,
    calc(
      var(--app-viewport-height)
      - var(--header-clearance)
      - (var(--book-frame-viewport-clearance, 16px) * 2)
      - var(--index-book-frame-single-page-height)
    )
  );
  --index-book-frame-stacked-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px)
  );
  --index-book-frame-stacked-page-height: calc(var(--index-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));

  /* ===================================================== */
  /* INDEX BOOK FRAME DERIVED TOKENS                       */
  /* ----------------------------------------------------- */
  /* These are homepage-specific Book Frame measurements   */
  /* used by responsive Canvas Scenes.                     */
  /* ===================================================== */
  --index-book-frame-open-spread-scale: calc(var(--index-book-frame-open-spread-width) / var(--book-frame-source-width));
  --index-book-frame-single-page-scale: calc(var(--index-book-frame-single-page-width) / var(--book-frame-single-page-source-width));
  --index-book-frame-stacked-page-scale: calc(var(--index-book-frame-stacked-page-width) / var(--book-frame-single-page-source-width));
  --index-book-frame-layout-width: var(--index-book-frame-open-spread-width);
  --index-book-frame-layout-height: var(--index-book-frame-open-spread-height);
  --index-book-frame-layout-scale: var(--index-book-frame-open-spread-scale);
  --index-book-frame-source-canvas-width: 1040px;
  --index-book-frame-open-canvas-width: calc(var(--index-book-frame-open-spread-width) * 0.8666667);
  --index-book-frame-single-canvas-width: var(--index-book-frame-single-page-width);
  --index-book-frame-stacked-canvas-width: var(--index-book-frame-stacked-page-width);

  /* Shared Book Frame router for Canvas Scenes.                 */
  /* These describe the same rectangle Scene One's .spread__book */
  /* renders at the active breakpoint, so Canvas Scenes (like    */
  /* Scene Two) can read one consistent active Book Frame rather */
  /* than re-deriving frame/top math per breakpoint.             */
  /*                                                             */
  /*   layout-top         viewport-y of the active book frame    */
  /*                       (matches where Scene One's            */
  /*                       .spread__book starts vertically)      */
  /*   layout-canvas-width paragraph field width inside the      */
  /*                       active book frame                     */
  --index-book-frame-layout-top: var(--header-clearance);
  --index-book-frame-layout-canvas-width: var(--index-book-frame-open-canvas-width);

  /* Scene One headline scales from the same Book Frame   */
  /* ruler as its page. The 1440 value stays the source.  */
  --scene-one-source-headline-size: var(--chapter-size);
  --scene-one-source-page-inset-top: 104px;
  --scene-one-source-page-inset-bottom: 144px;
  --scene-one-source-page-inset-gutter: 144px;
  --scene-one-source-page-inset-outer: 80px;
  --scene-one-source-text-field-width: 376px;
  --scene-one-source-text-offset-y: 96px;
  /* Firefox rejects custom-property chains that depend on
     length/length division. These ratios preserve the same 1440
     source measurements without routing Scene One text through an
     invalid scale value. */
  --scene-one-active-page-width: calc(var(--index-book-frame-layout-width) * 0.5);
  --scene-one-active-headline-size: calc(var(--scene-one-active-page-width) * 0.12);
  --scene-one-active-page-inset-top: calc(var(--index-book-frame-layout-height) * 0.1340206);
  --scene-one-active-page-inset-bottom: calc(var(--index-book-frame-layout-height) * 0.185567);
  --scene-one-active-page-inset-gutter: calc(var(--scene-one-active-page-width) * 0.24);
  --scene-one-active-page-inset-outer: calc(var(--scene-one-active-page-width) * 0.1333333);
  --scene-one-active-text-field-width: calc(var(--scene-one-active-page-width) * 0.6266667);
  --scene-one-active-text-offset-y: calc(var(--index-book-frame-layout-height) * 0.1237113);
}

/* ===================================================== */
/* 2. SPLASH OVERLAY                                     */
/* ----------------------------------------------------- */
/* Homepage-only intro overlay. The JS removes this node */
/* after the fade animation completes.                   */
/* ===================================================== */

.splash {
  position: fixed;
  inset: 0;
  background: var(--splash-bg);
  z-index: var(--splash-z);
  opacity: 1;
  animation: splash-fade var(--splash-fade-duration) var(--splash-ease)
    calc(var(--splash-delay) + var(--splash-shrink-duration) + var(--splash-hold-after-shrink)) forwards;
}

.splash__logo {
  position: absolute;
  top: calc(50% + var(--splash-logo-offset-y));
  left: calc(50% - (var(--splash-design-width) / 2) + var(--splash-logo-center-x));
  width: var(--splash-logo-width);
  height: auto;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  animation: splash-shrink var(--splash-shrink-duration) var(--splash-ease) var(--splash-delay) forwards;
  will-change: transform;
  pointer-events: none;
}

@keyframes splash-shrink {
  to {
    transform: translate(-50%, -50%) scale(var(--splash-shrink-scale));
  }
}

@keyframes splash-fade {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash__logo {
    animation: none !important;
  }

  .splash {
    display: none;
  }
}

/* ===================================================== */
/* 3. INDEX PAGE / MENU REVEAL STATES                    */
/* ----------------------------------------------------- */
/* Homepage-only menu states. The index page starts with */
/* the compact menu button and reveals the full menu by  */
/* interaction or scroll.                                */
/* ===================================================== */

/* Hidden by default on the index page */
body.menu-router-open {
  overflow: hidden;
}

.menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(40px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.6s;
}

.menu a {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Revealed state */
.site-header.menu-revealed .menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0s linear 0s;
}

.site-header.menu-revealed .menu a {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger */
.site-header.menu-revealed .menu a:nth-child(1) { transition-delay: 0.05s; }
.site-header.menu-revealed .menu a:nth-child(2) { transition-delay: 0.11s; }
.site-header.menu-revealed .menu a:nth-child(3) { transition-delay: 0.17s; }
.site-header.menu-revealed .menu a:nth-child(4) { transition-delay: 0.23s; }
.site-header.menu-revealed .menu a:nth-child(5) { transition-delay: 0.29s; }

/* Hide the menu button after reveal */
.site-header.menu-revealed .menu-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

/* Portrait Book Frame mode: use the shared full-screen route menu. */
@media (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  .menu {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-18px);
    transition:
      opacity 0.2s ease,
      clip-path 0.76s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.76s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.76s;
  }

  .menu a {
    transform: translateY(-16px);
  }

  .site-header.menu-revealed .menu {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    transition:
      opacity 0.2s ease,
      clip-path 0.76s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.76s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  .site-header.menu-revealed .menu a {
    transform: translateY(0);
  }

  .site-header.menu-revealed .menu-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
  }
}

/* ===================================================== */
/* 4. SCENE ONE: INTRO SPREAD                            */
/* ----------------------------------------------------- */
/* Homepage-specific art direction for the opening image */
/* inside the shared spread system.                      */
/* ===================================================== */

.spread--intro {
  display: flex;
  align-items: stretch;
}

/* --- Opening image crop --- */
.home-intro-media-frame {
  --spread-media-position: 50% 78%;
  --spread-media-scale: 1.2;
}

.spread--intro .text-chapter {
  font-size: var(--scene-one-active-headline-size);
  width: min-content;
}

.spread--intro .spread__page--right .spread__inner {
  padding-top: var(--scene-one-active-page-inset-top);
  padding-bottom: var(--scene-one-active-page-inset-bottom);
  padding-left: var(--scene-one-active-page-inset-gutter);
  padding-right: var(--scene-one-active-page-inset-outer);
}

.spread--intro .spread__page--right .spread__text {
  max-width: var(--scene-one-active-text-field-width);
  padding-top: var(--scene-one-active-text-offset-y);
}

/* ===================================================== */
/* 5. SCENE TWO: THINKERS REVEAL                         */
/* ----------------------------------------------------- */
/* Homepage-specific tuning for the reusable reveal      */
/* scene system defined in css/styles.css. Scene Two is   */
/* a Canvas Scene: it is designed across the Book Frame   */
/* as one continuous composition, not as assigned left    */
/* and right HTML pages.                                 */
/* ===================================================== */

#revealScene {
  /* --- Scene container ---                                      */
  /* PIXEL-BUDGET PACING (unified across every breakpoint).       */
  /* The reveal is paced by a fixed pixel budget instead of a     */
  /* multiple of viewport height, so each user swipe advances a   */
  /* beat by the same physical distance on every screen size.     */
  /* The sticky runway is exactly viewport + budget, so the scene */
  /* releases the moment the 7th beat lands (no dead pinned       */
  /* scroll). To pace the whole reveal faster/slower, change      */
  /* --reveal-reveal-budget ONLY.                                 */
  /*                                                              */
  /* --reveal-progress-scroll-vh: 0 routes js/pages/index.js      */
  /* through its `: total` fallback, making progressTotal equal   */
  /* the pixel budget (offsetHeight - viewport). The authored     */
  /* step thresholds below (settle 0.28/0.32, masks 0.36..0.54)   */
  /* are UNCHANGED, so the reveal SEQUENCE is identical; only its */
  /* pacing unit changed from viewport-height to pixels.          */
  /*                                                              */
  /* Budget 3400px is the 1440 build's effective reveal distance  */
  /* (400vh at the ~850px reference height), now FIXED in px so   */
  /* the beats land 0.04-0.05*3400 ~= 136-170px apart on EVERY    */
  /* screen instead of scaling with viewport height. This is the  */
  /* core fix and must stay a pixel value.                        */
  /*                                                              */
  /* The lead stays VIEWPORT-RELATIVE (100vh, the original). It   */
  /* only shifts WHERE progress = 0 sits in the approach, which   */
  /* controls the Scene One -> Two handoff: Scene Two's words     */
  /* ride in right behind Scene One's headline with no white gap, */
  /* and because the lead scales with the viewport that handoff   */
  /* holds on every screen (tall desktop, laptop, tablet, phone). */
  /* Crucially the lead does NOT change beat SPACING -- beats are */
  /* fixed px apart (budget-driven); the lead only offsets the    */
  /* whole sequence -- so the cross-breakpoint fix is preserved.  */
  /* To re-pace, change BUDGET; the Scene Three handoff overlap   */
  /* references the budget value -- see #disciplinesScene.        */
  --reveal-reveal-budget: 3400px;
  --reveal-scene-scroll-height: calc(var(--app-viewport-height) + var(--reveal-reveal-budget));
  --reveal-progress-start-lead: 100vh;
  --reveal-progress-scroll-vh: 0;

  /* --- Source placement tokens (1440 Book Frame) ---           */
  /* Source measurements are recorded against the 1440 Book      */
  /* Frame rectangle Scene One renders: 1200x776. The canvas is  */
  /* the paragraph field inside that frame (1040x252 at source). */
  /*                                                             */
  /* Vertical placement is Book Frame-anchored to the visual      */
  /* midpoint relationship: line 2's center lands at 326px in    */
  /* the 776px source frame. Active breakpoints preserve that    */
  /* 326 / 776 ratio, then subtract the scaled line-2 offset     */
  /* inside the paragraph field to recover the composition top.  */
  --scene-two-source-book-frame-width: var(--book-frame-source-width);
  --scene-two-source-book-frame-height: var(--book-frame-source-height);
  --scene-two-source-canvas-width: 1040px;
  --scene-two-source-composition-height: 252px;
  --scene-two-source-offset-x: 0px;
  /* Source record: the approved 1440 paragraph box center is 56px
     above the Book Frame center. Placement now uses the measured
     line-2 anchor below so portrait mode preserves the same visual
     midpoint relationship instead of only preserving box center. */
  --scene-two-source-vertical-shift-from-centered: -56px;
  --scene-two-source-line-two-center-y: 326px;
  --scene-two-source-line-two-center-y-ratio: 0.4201031;
  --scene-two-source-line-two-offset-inside-composition: 120px;
  --scene-two-source-handoff-lead-y: 183px;
  --scene-two-source-handoff-lead-y-ratio: 0.2358247;
  --scene-two-source-canvas-width-ratio: 0.8666667;
  --scene-two-source-composition-height-ratio: 0.2423077;
  --scene-two-source-text-size-base-ratio: 0.0543269;
  --scene-two-source-text-size-expression-ratio: 0.0692308;
  --scene-two-source-text-line-height-ratio: 0.0769231;
  --scene-two-source-text-size-base: var(--heading-size);
  --scene-two-source-text-size-expression: 72px;
  --scene-two-source-text-line-height: 80px;
  --scene-two-source-track-line-1: -0.128em;
  --scene-two-source-track-line-2: -0.132em;
  --scene-two-source-track-line-3: -0.125em;

  /* --- Active Book Frame (one router shared with Scene One) ---*/
  /* Active frame = the same rectangle Scene One renders at the  */
  /* current breakpoint. Canvas (paragraph) lives inside it.     */
  --scene-two-active-book-frame-width: var(--index-book-frame-layout-width);
  --scene-two-active-book-frame-height: var(--index-book-frame-layout-height);
  --scene-two-active-book-frame-top: var(--index-book-frame-layout-top);
  --scene-two-active-canvas-width: var(--index-book-frame-layout-canvas-width);

  /* --- Active composition (scales from canvas + Book Frame) ---*/
  /* Typography scales from the paragraph (canvas) width so the  */
  /* type preserves its 1440 measure relationship. Composition   */
  /* height = text-line-height x 3.15 (three lines).             */
  /*                                                             */
  /* Vertical placement:                                         */
  /*   1. Scale the approved source line-2 center against the    */
  /*      active Book Frame height.                              */
  /*   2. Subtract the scaled line-2 offset inside the paragraph */
  /*      field to recover the composition top.                  */
  /*   3. Add the active Book Frame top so the final value is    */
  /*      a viewport-y for translateY against a stage that is    */
  /*      align-items: flex-start.                               */
  --scene-two-active-composition-height: calc(var(--scene-two-active-canvas-width) * var(--scene-two-source-text-line-height-ratio) * 3.15);
  --scene-two-active-line-two-center-y: calc(var(--scene-two-active-book-frame-height) * var(--scene-two-source-line-two-center-y-ratio));
  --scene-two-active-line-two-offset-inside-composition: calc(var(--scene-two-active-canvas-width) * var(--scene-two-source-text-line-height-ratio) * 1.5);
  --scene-two-active-content-y: calc(var(--scene-two-active-line-two-center-y) - var(--scene-two-active-line-two-offset-inside-composition));
  --scene-two-active-offset-x: var(--scene-two-source-offset-x);
  --scene-two-active-offset-y: calc(var(--scene-two-active-book-frame-top) + var(--scene-two-active-content-y));
  --scene-two-active-handoff-lead-y: calc(var(--scene-two-active-book-frame-height) * var(--scene-two-source-handoff-lead-y-ratio));
  --scene-two-active-start-overlap: max(0px, calc(var(--scene-two-active-offset-y) - var(--scene-two-active-handoff-lead-y)));
  --scene-two-active-text-size-base: calc(var(--scene-two-active-canvas-width) * var(--scene-two-source-text-size-base-ratio));
  --scene-two-active-text-size-expression: calc(var(--scene-two-active-canvas-width) * var(--scene-two-source-text-size-expression-ratio));
  --scene-two-active-text-line-height: calc(var(--scene-two-active-canvas-width) * var(--scene-two-source-text-line-height-ratio));
  --scene-two-active-track-line-1: var(--scene-two-source-track-line-1);
  --scene-two-active-track-line-2: var(--scene-two-source-track-line-2);
  --scene-two-active-track-line-3: var(--scene-two-source-track-line-3);

  /* --- Composition field --- */
  --reveal-composition-width: var(--scene-two-active-canvas-width);
  --reveal-composition-height: var(--scene-two-active-composition-height);
  --reveal-composition-offset-x: var(--scene-two-active-offset-x);
  --reveal-composition-offset-y: var(--scene-two-active-offset-y);
  --reveal-scene-start-overlap: var(--scene-two-active-start-overlap);

  /* --- Base reveal typography --- */
  --reveal-text-family-base: var(--font-secondary);
  --reveal-text-size-base: var(--scene-two-active-text-size-base);
  --reveal-text-weight-base: var(--heading-weight);
  --reveal-text-tracking: 0;
  --reveal-text-line-height: var(--scene-two-active-text-line-height);

  /* --- Emphasis (typographic climax) --- */
  --reveal-text-family-expression: var(--font-primary);
  --reveal-text-size-expression: var(--scene-two-active-text-size-expression);
  --reveal-text-weight-expression: 700;

  /* --- Authored tracking for the homepage sentence (character spacing) --- */
  --reveal-track-line-1: var(--scene-two-active-track-line-1); /* We work...to heighten their */
  --reveal-track-line-2: var(--scene-two-active-track-line-2); /* expression across film...    */
  --reveal-track-line-3: var(--scene-two-active-track-line-3); /* education, and identity.    */
  --reveal-track-expression: 0em;  /* expression                  */

  /* Word spacing is kept separate from tracking so spaces */
  /* do not visually collapse under heavy negative tracking.*/
  --reveal-word-space-line-1: 0em;
  --reveal-word-space-line-2: 0em;
  --reveal-word-space-line-3: 0em;

  /* --- Scrolls 1 and 2: scroll-driven arrival --- */
  --reveal-step-1-start: 368px;
  --reveal-step-2-start: 3500px;
  --reveal-step-1-start-progress: 0;
  --reveal-step-2-start-progress: 0.06;
  --reveal-step-1-settle: 0.28;
  --reveal-step-2-settle: 0.32;

  /* --- Scrolls 3-7: authored reveal thresholds --- */
  --reveal-step-3-threshold: 0.36;
  --reveal-step-4-threshold: 0.40;
  --reveal-step-5-threshold: 0.44;
  --reveal-step-6-threshold: 0.49;
  --reveal-step-7-threshold: 0.54;

  /* Scrolls 3, 4, 5: bottom-to-top veil lift */
  --reveal-mask-up-duration: 500ms;
  --reveal-mask-up-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Scroll 6: left-to-right mask */
  --reveal-mask-left-duration: 550ms;
  --reveal-mask-left-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Scroll 7: top-to-bottom drop for expression */
  --reveal-mask-down-duration: 650ms;
  --reveal-mask-down-ease: cubic-bezier(0.3, 0.8, 0.2, 1);

  /* --- Scene Three handoff fade --- */
  --reveal-block-two-opacity: 1;

  margin-top: calc(-1 * var(--reveal-scene-start-overlap));
}

/* Scene Two stage is top-aligned so the composition's resting
   position is viewport y=0. --reveal-composition-offset-y resolves
   to (active Book Frame top + content-y inside the Book Frame), so
   translateY(offset-y) places the composition top at an absolute
   viewport-y derived entirely from the active Book Frame. This is
   why placement locks to a fixed ratio of the overlay at every
   breakpoint instead of drifting with viewport-center math. */
#revealScene .reveal-scene__stage {
  align-items: flex-start;
}

#revealScene .reveal-composition {
  opacity: var(--reveal-block-two-opacity);
  transform:
    translateX(var(--reveal-composition-offset-x))
    translateY(var(--reveal-composition-offset-y));
  transition: opacity 120ms linear;
}

/* ===================================================== */
/* 6. SCENE THREE: DISCIPLINES REVEAL                    */
/* ----------------------------------------------------- */
/* Canvas Scene (same Book Frame contract as Scene Two): */
/* `--index-book-frame-layout-*` drives placement, field   */
/* width, type scale, and scroll-driven motion distances.  */
/* Breakpoint bands only tune scroll length and row shape  */
/* (e.g. body-below-label); they do not re-author frame Y. */
/* Scroll/accordion behavior: js/pages/index.js →        */
/* initDisciplinesScene().                                 */
/* ===================================================== */

/* ----------------------------------------------------- */
/* Scene Three tokens                                    */
/* ----------------------------------------------------- */
/* Canvas Scene (same contract as Scene Two): placement   */
/* and measure read from `--index-book-frame-layout-*`    */
/* (width, height, top, canvas-width) so the sticky field  */
/* tracks Scene One’s `.spread__book` at every band.    */
/* Verticals use height ratios against source 776; widths */
/* use the active canvas (1040 at 1440). Typography uses  */
/* the same canvas-width ratios as Scene Two line sizes. */
/* JS reads scroll timing from these CSS variables.      */
/* ----------------------------------------------------- */
#disciplinesScene {
  /* --- Scene container ---                                      */
  /* PIXEL-BUDGET PACING (same mechanism as Scene Two; unified    */
  /* across every breakpoint). Sticky runway = viewport + budget, */
  /* so the scene releases as the last row opens (no dead pinned  */
  /* scroll).                                                     */
  /*                                                              */
  /* Budget note: the four accordion rows sit at progress         */
  /* 0.50/0.60/0.70/0.80, i.e. 0.10 apart. At the 1440 build that */
  /* was 0.10 * 520vh ~= 468px per row -- 2-3 swipes to open one  */
  /* row, which is a main cause of "my swipe revealed nothing."   */
  /* So this is the ONE place we intentionally tighten below the  */
  /* literal 1440 distance: 2400px budget -> rows land ~240px     */
  /* apart (one swipe each) on every screen. The statement /      */
  /* kicker / accordion assembly (progress 0.06-0.40) keeps its   */
  /* authored thresholds, so that motion reads exactly as before. */
  /*                                                              */
  /* --disciplines-scene-overlap is the Scene Two -> Three        */
  /* handoff. Sized so Scene Three begins pinning while Scene Two */
  /* is ~63% through its reveal (the SAME relative handoff point  */
  /* the 1440 build used), so the statement peeks against the     */
  /* real Scene Two sentence instead of duplicating it.           */
  /* Derivation (handoff p_h = 0.625, Scene Two lead = budget/4): */
  /*   overlap = viewport + sceneTwoBudget * (1.25 - p_h)         */
  /*           = viewport + 3400 * 0.625  = viewport + 2125px     */
  /* If you re-pace Scene Two's budget, update the 2125 here:     */
  /* overlap = viewport + sceneTwoBudget * 0.625.                 */
  /* --disciplines-progress-scroll-vh: 0 -> px-budget fallback.   */
  --disciplines-reveal-budget: 2400px;
  --disciplines-scene-scroll-height: calc(var(--app-viewport-height) + var(--disciplines-reveal-budget));
  --disciplines-scene-overlap: calc(var(--app-viewport-height) + 2125px);
  --disciplines-progress-scroll-vh: 0;
  /* When a row is open: space between line 1 ("Identity") and     */
  /* line 2 ("Design"). Uses margin-top (not flex gap) so edits */
  /* reliably show. Increase for more air (e.g. 0.65em or 12px).  */
  --disciplines-label-open-split-gap: 0.55em;
  /* Collapsed (single line): space between first word and       */
  /* "design" (gap span is empty; no HTML word space). Tighten    */
  /* with smaller values (e.g. 0.04em); loosen with ~0.12em+.    */
  --disciplines-label-collapsed-word-gap: 0.55em;

  /* --- Source map (1440 Book Frame 1200×776) ---          */
  /* Record px for documentation; active layout uses ratios */
  /* only (Firefox-safe: no length/length scale chains).   */
  --scene-three-source-book-frame-width: var(--book-frame-source-width);
  --scene-three-source-book-frame-height: var(--book-frame-source-height);
  --scene-three-source-content-width: 1040px;
  --scene-three-source-content-y: 108px;
  --scene-three-source-statement-y-from-frame-top: 146px;
  --scene-three-source-statement-space-height: 85px;
  --scene-three-source-accordion-y-from-frame-top: 208px;
  --scene-three-source-accordion-height: 416px;
  --scene-three-source-stage-side-padding: 24px;
  --scene-three-source-body-x-inside-content: 280px;
  --scene-three-source-body-width: 568px;
  /* Width / frame and canvas / spread (1040/1200) */
  --scene-three-source-content-width-ratio: 0.8666667;
  /* Y inside frame / 776 */
  --scene-three-source-content-y-ratio: 0.1391753;
  /* Statement translate target: frameTop + 146px at source */
  --scene-three-source-statement-y-ratio: 0.1881443;
  /* Kicker → accordion gap row / 776 (= 85/776) */
  --scene-three-source-statement-space-height-ratio: 0.1095361;
  --scene-three-source-accordion-y-ratio: 0.2680412;
  --scene-three-source-accordion-height-ratio: 0.5360825;
  /* Portrait rebases the composition so the kicker starts at frame top.
     These ratios normalize 1440 y-values against the source area from
     content top (108px) to frame bottom (776px). */
  --scene-three-source-portrait-statement-y-ratio: 0.0568862;
  --scene-three-source-portrait-accordion-y-ratio: 0.1497006;
  --scene-three-source-portrait-right-text-x-ratio: 0.24;
  --scene-three-source-portrait-right-text-width-ratio: 0.6267;
  /* content-width / font-size that keeps the full statement on one line */
  --scene-three-source-portrait-statement-single-line-ch: 21.5;
  --scene-three-source-stage-side-padding-ratio: 0.02;
  --scene-three-source-body-x-inside-content-ratio: 0.2692308;
  --scene-three-source-body-width-ratio: 0.5461538;
  /* Type sizes / source canvas 1040 (Scene Two pattern) */
  --scene-three-source-kicker-size-ratio: 0.0115384615;
  --scene-three-source-statement-size-ratio: 0.025;
  --scene-three-source-row-label-size-ratio: 0.0240384615;
  --scene-three-source-body-size-ratio: 0.0163461538;
  /* Motion distances / source frame height 776 */
  --scene-three-source-kicker-rise-ratio: 0.1443298969;
  --scene-three-source-accordion-rise-ratio: 0.1958762887;
  --scene-three-source-statement-peak-inset-ratio: 0.0554123711;
  /* Open row height / 776 */
  --scene-three-source-row-open-height-ratio: 0.3350515464;
  /* Row horizontal padding / source spread 1200 */
  --scene-three-source-row-padding-x-ratio: 0.02;

  --scene-three-content-y-nudge: 0px;
  --scene-three-statement-y-nudge: 0px;
  --scene-three-accordion-y-nudge: 0px;

  /* --- Active Book Frame (shared router, same as Scene Two) --- */
  --scene-three-active-book-frame-width: var(--index-book-frame-layout-width);
  --scene-three-active-book-frame-height: var(--index-book-frame-layout-height);
  --scene-three-active-book-frame-top: var(--index-book-frame-layout-top);
  --scene-three-active-design-width: var(--scene-three-active-book-frame-width);
  --scene-three-active-content-width: var(--index-book-frame-layout-canvas-width);

  /* --- Active geometry (viewport y and field sizes) --- */
  --scene-three-active-content-final-top: calc(
    var(--scene-three-active-book-frame-top)
    + (var(--scene-three-active-book-frame-height) * var(--scene-three-source-content-y-ratio))
  );
  --scene-three-active-statement-final-top: calc(
    var(--scene-three-active-book-frame-top)
    + (var(--scene-three-active-book-frame-height) * var(--scene-three-source-statement-y-ratio))
  );
  --scene-three-active-kicker-y: var(--scene-three-active-content-final-top);
  --scene-three-active-statement-y: var(--scene-three-active-statement-final-top);
  --scene-three-active-accordion-y: calc(
    var(--scene-three-active-book-frame-top)
    + (var(--scene-three-active-book-frame-height) * var(--scene-three-source-accordion-y-ratio))
  );
  --scene-three-active-statement-space-height: calc(
    var(--scene-three-active-book-frame-height) * var(--scene-three-source-statement-space-height-ratio)
  );
  --scene-three-active-accordion-height: calc(
    var(--scene-three-active-book-frame-height) * var(--scene-three-source-accordion-height-ratio)
  );
  --scene-three-active-stage-side-padding: calc(
    var(--scene-three-active-book-frame-width) * var(--scene-three-source-stage-side-padding-ratio)
  );
  --scene-three-active-body-canvas-x: calc(var(--scene-three-active-content-width) * var(--scene-three-source-body-x-inside-content-ratio));
  --scene-three-active-body-width: calc(var(--scene-three-active-content-width) * var(--scene-three-source-body-width-ratio));
  --scene-three-active-body-x: var(--scene-three-active-body-canvas-x);

  --scene-three-final-content-top: calc(
    var(--scene-three-active-kicker-y)
    + var(--scene-three-content-y-nudge)
  );
  --scene-three-final-statement-top: calc(
    var(--scene-three-active-statement-y)
    + var(--scene-three-statement-y-nudge)
  );
  --scene-three-final-accordion-y: calc(
    var(--scene-three-final-content-top)
    + var(--scene-three-active-statement-space-height)
    + var(--scene-three-accordion-y-nudge)
  );
  --scene-three-final-statement-space-height: calc(
    var(--scene-three-active-statement-space-height)
    + var(--scene-three-accordion-y-nudge)
  );

  /* --- Composition field (JS reads statement-final-top) --- */
  --disciplines-design-width: var(--scene-three-active-design-width);
  --disciplines-content-width: var(--scene-three-active-content-width);
  --disciplines-content-final-top: var(--scene-three-final-content-top);
  --disciplines-statement-final-top: var(--scene-three-final-statement-top);
  --disciplines-statement-space-height: var(--scene-three-final-statement-space-height);
  --disciplines-accordion-height: var(--scene-three-active-accordion-height);
  --disciplines-stage-side-padding: var(--scene-three-active-stage-side-padding);

  /* --- Surface colors --- */
  --disciplines-bg: transparent;
  --disciplines-row-bg: #eeeeec;
  --disciplines-row-bg-hover: var(--disciplines-row-bg-open);
  --disciplines-row-bg-open: #000000;
  --disciplines-row-fg: #111111;
  --disciplines-row-fg-open: #ffffff;
  --disciplines-accordion-radius: 10px;
  --disciplines-row-radius: 12px;
  --disciplines-row-divider: rgba(17, 17, 17, 0.06);

  /* --- Row metrics (accordion height + Book Frame width) --- */
  --disciplines-row-slot-height: calc(var(--disciplines-accordion-height) / 4);
  --disciplines-row-open-height: calc(
    var(--scene-three-active-book-frame-height) * var(--scene-three-source-row-open-height-ratio)
  );
  --disciplines-row-open-max-height: var(--disciplines-row-open-height);
  --disciplines-row-closed-min-height: 0px;
  --disciplines-row-padding-x: calc(
    var(--scene-three-active-book-frame-width) * var(--scene-three-source-row-padding-x-ratio)
  );
  --disciplines-row-padding-y: 0px;
  --disciplines-row-label-inset: 0px;
  --disciplines-row-number-inset: 0px;
  --disciplines-row-open-button-padding-top: 0px;
  --disciplines-row-button-min-height: var(--disciplines-row-slot-height);
  --disciplines-gap: 0px;

  /* --- Type (canvas-width ratios, like Scene Two) --- */
  --disciplines-kicker-line-height: 1.25;
  --disciplines-kicker-size: max(
    11px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-three-source-kicker-size-ratio))
  );
  --disciplines-kicker-line-box-height: calc(var(--disciplines-kicker-size) * var(--disciplines-kicker-line-height));
  --disciplines-kicker-tracking: 0.08em;
  --disciplines-kicker-family: var(--font-secondary);
  --disciplines-kicker-weight: 400;

  --disciplines-statement-line-height: 1.2;
  --disciplines-statement-size: max(
    15px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-three-source-statement-size-ratio))
  );
  --disciplines-statement-weight: 700;
  --disciplines-statement-family: var(--font-primary);

  --disciplines-row-label-line-height: 1.2;
  --disciplines-row-label-size: max(
    16px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-three-source-row-label-size-ratio))
  );
  --disciplines-row-label-family: var(--font-secondary);
  --disciplines-row-label-weight: 300;
  --disciplines-row-label-tracking: 0.02em;

  --disciplines-body-line-height: 1.42;
  --disciplines-body-size: max(
    13px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-three-source-body-size-ratio))
  );
  --disciplines-body-family: var(--font-secondary);
  --disciplines-body-weight: 300;
  --disciplines-body-canvas-x: var(--scene-three-active-body-canvas-x);
  --disciplines-body-x: var(--scene-three-active-body-x);
  --disciplines-body-width: var(--scene-three-active-body-width);
  --disciplines-body-edge-padding: calc(
    (var(--disciplines-row-slot-height) - (var(--disciplines-row-label-size) * var(--disciplines-row-label-line-height))) / 2
  );

  /* --- Arrival controls (vertical motion vs Book Frame height) --- */
  --disciplines-statement-peak-y: auto;
  --disciplines-statement-peak-inset: calc(
    var(--scene-three-active-book-frame-height) * var(--scene-three-source-statement-peak-inset-ratio)
  );
  --disciplines-kicker-rise: calc(
    var(--scene-three-active-book-frame-height) * var(--scene-three-source-kicker-rise-ratio)
  );
  --disciplines-accordion-rise: calc(
    var(--scene-three-active-book-frame-height) * var(--scene-three-source-accordion-rise-ratio)
  );
  --disciplines-accordion-page-fill-height: calc(
    var(--scene-three-active-book-frame-top)
    + var(--scene-three-active-book-frame-height)
    - var(--scene-three-final-content-top)
    - var(--disciplines-kicker-line-box-height)
    - var(--scene-three-final-statement-space-height)
  );

  /* --- Authored scroll progress thresholds --- */
  /* Real Scene Two sentence handoff fade-out             */
  --disciplines-block-two-fade-start: 0.11;
  --disciplines-block-two-fade-end: 0.18;
  /* Statement peak and final landing                    */
  --disciplines-statement-peak-settle: 0.06;
  --disciplines-statement-rise-start: 0.105;
  --disciplines-statement-rise-end: 0.18;
  /* Kicker ("Disciplines:")                             */
  --disciplines-heading-start: 0.21;
  --disciplines-heading-settle: 0.30;
  /* Accordion field                                     */
  --disciplines-field-start: 0.30;
  --disciplines-field-settle: 0.40;
  /* Word swap that → your                               */
  --disciplines-word-swap-threshold: 0.20;
  /* Accordion sequence                                  */
  --disciplines-systems-threshold: 0.50;
  --disciplines-information-threshold: 0.60;
  --disciplines-film-design-threshold: 0.70;
  --disciplines-identity-threshold: 0.80;

  /* --- Motion timing --- */
  --disciplines-rise-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --disciplines-swap-duration: 1000ms;
  --disciplines-swap-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --disciplines-row-duration: 520ms;
  --disciplines-row-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- JS-written live values (fallbacks keep the       */
  /*     block readable if JS fails to load)          --- */
  --disciplines-statement-y: var(--disciplines-statement-final-top);
  --disciplines-kicker-offset: 0px;
  --disciplines-accordion-opacity: 1;
  --disciplines-accordion-offset: 0px;
}

/* ----------------------------------------------------- */
/* Scene + sticky stage                                  */
/* ----------------------------------------------------- */

.disciplines-scene {
  position: relative;
  height: var(--disciplines-scene-scroll-height);
  margin-top: calc(-1 * var(--disciplines-scene-overlap));
  background: var(--disciplines-bg);
  z-index: 2;
}

.disciplines-scene__stage {
  position: sticky;
  top: 0;
  height: var(--app-viewport-height);
  width: 100%;
  overflow: hidden;
}

/* ----------------------------------------------------- */
/* Stage transition frame                                */
/* ----------------------------------------------------- */
/* Handoff and statement are layered in one sticky stage */
/* so the sentence peeks/rises instead of repeating in a */
/* normal vertical stack.                                */
/* ----------------------------------------------------- */

.disciplines-transition-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* ----------------------------------------------------- */
/* Content frame                                         */
/* ----------------------------------------------------- */
/* Final editorial composition: label, statement space,  */
/* and the unified disciplines accordion field.          */
/* ----------------------------------------------------- */

.disciplines-content-frame {
  position: absolute;
  z-index: 4;
  top: var(--disciplines-content-final-top);
  left: 50%;
  width: var(--disciplines-content-width);
  max-width: calc(100% - (var(--disciplines-stage-side-padding) * 2));
  display: grid;
  grid-template-rows: auto var(--disciplines-statement-space-height) auto;
  row-gap: 0;
  transform: translateX(-50%);
  box-sizing: border-box;
  pointer-events: none;
}

/* ----------------------------------------------------- */
/* Kicker "Disciplines:"                                 */
/* ----------------------------------------------------- */

.disciplines-kicker {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: var(--disciplines-kicker-family);
  font-size: var(--disciplines-kicker-size);
  font-weight: var(--disciplines-kicker-weight);
  letter-spacing: var(--disciplines-kicker-tracking);
  line-height: var(--disciplines-kicker-line-height);
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  overflow: hidden;
}

.disciplines-kicker__inner {
  display: inline-block;
  will-change: transform;
  transform: translateY(var(--disciplines-kicker-offset, 0px));
}

.disciplines-statement-space {
  min-height: var(--disciplines-statement-space-height);
}

/* ----------------------------------------------------- */
/* Statement sentence                                    */
/* ----------------------------------------------------- */

.disciplines-statement {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  width: var(--disciplines-content-width);
  max-width: calc(100% - (var(--disciplines-stage-side-padding) * 2));
  font-family: var(--disciplines-statement-family);
  font-size: var(--disciplines-statement-size);
  font-weight: var(--disciplines-statement-weight);
  line-height: var(--disciplines-statement-line-height);
  color: var(--color-text);
  overflow: hidden;
  transform: translate(-50%, var(--disciplines-statement-y));
  will-change: transform;
  z-index: 5;
}

.disciplines-statement__inner {
  display: inline-block;
}

/* --- Word-swap stack: that / your ----------------------*/
/* The swap starts at the natural width of "that"; when  */
/* active, JS-measured width lets "your" make room.      */
/* ------------------------------------------------------*/

.disciplines-swap {
  position: relative;
  display: inline-block;
  width: var(--disciplines-swap-that-width, auto);
  vertical-align: baseline;
  transition: width var(--disciplines-swap-duration) var(--disciplines-swap-ease);
}

.disciplines-swap__word {
  display: inline-block;
  white-space: nowrap;
}

/* "that" is visible by default and masks away top-down  */
/* when the swap activates, so the new word feels like   */
/* it sweeps up through the old one.                     */
.disciplines-swap__word--that {
  position: relative;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--disciplines-swap-duration) var(--disciplines-swap-ease),
    opacity var(--disciplines-swap-duration) var(--disciplines-swap-ease);
}

/* "your" is curtained up from the bottom, matching the  */
/* reveal language used on "photography" in Scene Two.   */
.disciplines-swap__word--your {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  transition: clip-path var(--disciplines-swap-duration) var(--disciplines-swap-ease);
}

.disciplines-scene.is-swap-active .disciplines-swap {
  width: var(--disciplines-swap-your-width, auto);
}

.disciplines-scene.is-swap-active .disciplines-swap__word--that {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
}

.disciplines-scene.is-swap-active .disciplines-swap__word--your {
  clip-path: inset(0 0 0 0);
}

/* ----------------------------------------------------- */
/* Accordion field                                       */
/* ----------------------------------------------------- */

.disciplines-accordion {
  width: 100%;
  height: var(--disciplines-accordion-height);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--disciplines-gap);
  background: var(--disciplines-row-bg);
  border-radius: var(--disciplines-accordion-radius);
  opacity: var(--disciplines-accordion-opacity);
  overflow: hidden;
  pointer-events: auto;
  will-change: transform;
  transform: translateY(var(--disciplines-accordion-offset, 0px));
}

/* --- Row shell --------------------------------------- */

.disciplines-row {
  position: relative;
  min-height: var(--disciplines-row-closed-min-height, 0px);
  flex: 1 1 var(--disciplines-row-slot-height);
  display: flex;
  flex-direction: column;
  background: var(--disciplines-row-bg);
  color: var(--disciplines-row-fg);
  border-top: 1px solid var(--disciplines-row-divider);
  overflow: hidden;
  transition:
    flex-basis var(--disciplines-row-duration) var(--disciplines-row-ease),
    background-color var(--disciplines-row-duration) var(--disciplines-row-ease),
    border-radius var(--disciplines-row-duration) var(--disciplines-row-ease),
    color var(--disciplines-row-duration) var(--disciplines-row-ease);
}

.disciplines-row:first-child {
  border-top: 0;
}

.disciplines-row__heading {
  margin: 0;
  flex: 0 0 auto;
  height: 100%;
}

.disciplines-row__button {
  all: unset;
  /* `all: unset` drops inherited custom properties on the button; inner spans use
     var(--disciplines-label-* ) on margin — re-bridge from #disciplinesScene. */
  --disciplines-label-collapsed-word-gap: inherit;
  --disciplines-label-open-split-gap: inherit;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--disciplines-row-padding-y) var(--disciplines-row-padding-x);
  cursor: pointer;
  font-family: var(--disciplines-row-label-family);
  font-size: var(--disciplines-row-label-size);
  font-weight: var(--disciplines-row-label-weight);
  letter-spacing: var(--disciplines-row-label-tracking);
  line-height: var(--disciplines-row-label-line-height);
  color: inherit;
  transition: color var(--disciplines-row-duration) var(--disciplines-row-ease);
}

.disciplines-row__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.disciplines-row__label {
  display: inline-block;
  padding-left: var(--disciplines-row-label-inset);
}

/* Collapsed: "System design" reads as one horizontal phrase (gap span empty;
   spacing = margin-left on .disciplines-row__label-design).
   Open: first word on line 1, "design" on line 2 (gap span hidden).
   Horizontal (collapsed): `--disciplines-label-collapsed-word-gap` on #disciplinesScene.
   Vertical (open): `--disciplines-label-open-split-gap`. */
.disciplines-row__label-stack {
  display: inline;
}
.disciplines-row__label-word,
.disciplines-row__label-gap,
.disciplines-row__label-design {
  display: inline;
}
.disciplines-row:not(.is-open) .disciplines-row__label-design {
  margin-left: var(--disciplines-label-collapsed-word-gap);
}
.disciplines-row.is-open .disciplines-row__label-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: .8;
}
.disciplines-row.is-open .disciplines-row__label-design {
  display: block;
  margin-top: var(--disciplines-label-open-split-gap);
  margin-left: 0;
}
.disciplines-row.is-open .disciplines-row__label-gap {
  display: none;
}

.disciplines-row__number {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: var(--disciplines-row-number-inset);
}

/* --- Hover state ------------------------------------- */

.disciplines-row:not(.is-open):hover {
  background: var(--disciplines-row-bg-hover);
  border-radius: var(--disciplines-row-radius);
  color: var(--disciplines-row-fg-open);
}

/* --- Panel (collapsing body) ------------------------- */

.disciplines-row__panel {
  display: none;
}

.disciplines-row__panel > * {
  min-height: 0;
}

.disciplines-row__body {
  margin: 0;
  padding: var(--disciplines-body-edge-padding) 0;
  width: var(--disciplines-body-width);
  max-width: var(--disciplines-body-width);
  font-family: var(--disciplines-body-family);
  font-size: var(--disciplines-body-size);
  font-weight: var(--disciplines-body-weight);
  letter-spacing: 0;
  line-height: var(--disciplines-body-line-height);
  text-align: left;
  white-space: normal;
  color: inherit;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--disciplines-row-duration) var(--disciplines-row-ease),
    transform var(--disciplines-row-duration) var(--disciplines-row-ease);
}

.disciplines-row__line {
  display: block;
  width: var(--disciplines-body-width);
  letter-spacing: var(--disciplines-line-tracking, 0px);
  white-space: nowrap;
}

.disciplines-row__line--final {
  letter-spacing: 0;
}

/* --- Open state -------------------------------------- */

.disciplines-row.is-open {
  flex: 0 0 min(
    var(--disciplines-row-open-height, 260px),
    var(--disciplines-row-open-max-height, var(--disciplines-row-open-height, 260px))
  );
  background: var(--disciplines-row-bg-open);
  border-radius: var(--disciplines-row-radius);
  color: var(--disciplines-row-fg-open);
  z-index: 2;
}

.disciplines-row.is-open .disciplines-row__heading,
.disciplines-row.is-open .disciplines-row__button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--disciplines-row-slot-height);
}

.disciplines-row.is-open .disciplines-row__heading {
  z-index: 2;
  height: var(--disciplines-row-slot-height);
}

.disciplines-row.is-open .disciplines-row__button {
  align-items: center;
  height: var(--disciplines-row-slot-height);
  padding-top: var(--disciplines-row-open-button-padding-top);
  pointer-events: auto;
}

.disciplines-row.is-open .disciplines-row__button:focus,
.disciplines-row.is-open .disciplines-row__button:focus-visible {
  outline: 0;
}

.disciplines-row.is-open .disciplines-row__panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: var(--disciplines-body-x);
  pointer-events: none;
}

.disciplines-row.is-open .disciplines-row__body {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------- */
/* Reduced motion                                        */
/* ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .disciplines-kicker__inner,
  .disciplines-accordion {
    transform: none !important;
  }

  .disciplines-swap__word--that,
  .disciplines-swap__word--your,
  .disciplines-row,
  .disciplines-row__panel {
    transition: none !important;
  }
}

/* ===================================================== */
/* 7. SCENE FOUR: FULLSCREEN CODED FILM                  */
/* ----------------------------------------------------- */
/* Homepage-only cinematic media hold. The scene uses a  */
/* sticky full-screen stage, coded film preview, and a   */
/* layer above the fixed header while active.            */
/* ===================================================== */

#videoScene {
  /* --- Scene container --- */
  --video-scene-scroll-height: 130vh;
  /* Scene Three -> Four handoff. The film "pushes the book-frame      */
  /* boundary up": it enters from the bottom exactly as Scene Three    */
  /* releases and lifts the whole pinned stage (frame + accordion)     */
  /* upward, so its top edge never overlaps the still-pinned rows.     */
  /*                                                                   */
  /* Why 0 (no negative overlap): Scene Three's sticky stage fills the */
  /* viewport while pinned, and an OPEN row's panel can extend most of */
  /* the way down it (lower on short/narrow screens). Any positive     */
  /* overlap pulls the film up into the still-pinned stage and can     */
  /* touch that open row -- which is exactly what 120vh (and even a    */
  /* book-frame-bottom value) did. With 0 the film box sits directly   */
  /* after Scene Three's box, below the entire stage, so on EVERY      */
  /* breakpoint the rows scroll up and clear before the film reaches   */
  /* their level. The reveal still has its hold: rows finish at        */
  /* progress 0.80 and the stage stays pinned until 1.0 (~480px) before */
  /* the film begins. To trade a little of that guarantee for a visible */
  /* pre-release push, raise this slightly -- but it is then viewport- */
  /* sensitive and can touch the open row on short screens.            */
  --video-scene-overlap: 0px;

  /* --- Layering + surfaces --- */
  --video-scene-z: 20;
  --video-scene-bg: #000000;

  /* --- Media crop tuning --- */
  --video-scene-focal-x: 50%;
  --video-scene-focal-y: 50%;
  --video-scene-media-position: var(--video-scene-focal-x) var(--video-scene-focal-y);
  --video-scene-media-scale: 1;

  /* --- Readiness polish --- */
  --video-scene-ready-duration: 240ms;
  --video-scene-ready-ease: cubic-bezier(0.22, 1, 0.36, 1);

}

.video-scene {
  position: relative;
  height: var(--video-scene-scroll-height);
  margin-top: calc(-1 * var(--video-scene-overlap));
  background: var(--video-scene-bg);
  z-index: var(--video-scene-z);
}

.video-scene__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--app-viewport-height);
  overflow: hidden;
}

.video-scene__media-shell {
  position: absolute;
  inset: 0;
  background: var(--video-scene-bg);
}

.video-scene__media {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--video-scene-bg);
  transform: scale(var(--video-scene-media-scale));
  transform-origin: center;
  display: block;
  opacity: 0;
  transition: opacity var(--video-scene-ready-duration) var(--video-scene-ready-ease);
}

.video-scene.is-ready .video-scene__media {
  opacity: 1;
}

/* ===================================================== */
/* 8. SCENE FIVE: ROUTE SELECTION                        */
/* ----------------------------------------------------- */
/* Editorial index: intro headline, two-column route     */
/* rows (label | description), left-aligned CTA.         */
/* ===================================================== */

#homeRoutes {
  /* --- Sticky scene container --- */
  --scene-five-source-scroll-height: 128vh;

  /* --- Source map (1440 Book Frame 1200×776) --- */
  /* Record px for documentation; active layout uses ratios */
  /* only (Firefox-safe: no length/length scale chains).   */
  --scene-five-source-book-frame-width: var(--book-frame-source-width);
  --scene-five-source-book-frame-height: var(--book-frame-source-height);
  /* Left-page text-safe box (spread guide / Scene One left page). */
  --scene-five-source-left-text-x: 80px;
  --scene-five-source-left-text-box-top-from-frame-top: 104px;
  --scene-five-source-intro-below-text-box-top: 48px;
  --scene-five-source-first-row-below-text-box-top: 152px;
  --scene-five-source-composition-width: 1040px;
  --scene-five-source-inner-y-from-frame-top: 98px;
  --scene-five-source-label-y-from-frame-top: 108px;
  --scene-five-source-list-top-space: 79px;
  --scene-five-source-item-height: 80px;
  --scene-five-source-cta-below-last-row: 80px;
  --scene-five-source-stage-side-padding: 24px;
  --scene-five-source-item-padding-y: 0px;
  --scene-five-source-item-padding-x: 18px;
  --scene-five-source-item-gap: 8px;
  --scene-five-source-item-copy-width: 100%;
  --scene-five-intro-y-nudge: 0px;
  --scene-five-routes-y-nudge: 0px;
  --scene-five-cta-y-nudge: 0px;

  /* Width / spread (1040/1200) and left text x / spread (80/1200). */
  --scene-five-source-composition-width-ratio: 0.8666667;
  --scene-five-source-left-text-x-ratio: 0.0666667;
  /* Y inside frame / 776 (left-page text-safe and locked composition). */
  --scene-five-source-left-text-box-top-ratio: 0.1340206;
  --scene-five-source-inner-y-from-frame-top-ratio: 0.1262887;
  --scene-five-source-label-y-ratio: 0.1391753;
  --scene-five-source-intro-below-text-box-top-ratio: 0.0618557;
  --scene-five-source-first-row-below-text-box-top-ratio: 0.1958763;
  --scene-five-source-list-top-space-ratio: 0.1018041;
  --scene-five-source-item-height-ratio: 0.1030928;
  --scene-five-source-cta-below-last-row-ratio: 0.1030928;
  /* Single-page portrait: full page width; text breathes at outer inset. */
  --scene-five-source-single-page-outer-inset-x-ratio: 0.1333333;
  --scene-five-source-single-page-inset-x-ratio: 0.24;
  --scene-five-source-single-page-text-width-ratio: 0.6266667;
  /* Portrait intro y matches Scene Three's portrait statement ratio;
     landscape keeps the 1440 source intro offset ratio. */
  --scene-five-source-portrait-intro-y-ratio: 0.0568862;
  --scene-five-source-portrait-intro-single-line-ch: 21.5;
  --scene-five-source-portrait-intro-hierarchy-base-ratio: 0.0115384615;
  --scene-five-source-portrait-intro-hierarchy-multiplier: 1.85;
  --scene-five-source-portrait-description-x-ratio: 0.24;
  --scene-five-source-portrait-description-width-ratio: 0.6267;
  /* Type sizes / source canvas 1040 (Scene Two / Three pattern). */
  --scene-five-source-label-size-ratio: 0.0115384615;
  --scene-five-source-intro-size-ratio: 0.025;
  --scene-five-source-title-size-ratio: 0.0192308;
  --scene-five-source-description-size-ratio: 0.0134615;
  --scene-five-source-item-padding-x-ratio: 0.015;
  --scene-five-source-stage-side-padding-ratio: 0.02;
  /* Breakpoint aliases (legacy token names). */
  --scene-five-source-intro-margin-from-frame-top-ratio: var(--scene-five-source-intro-below-text-box-top-ratio);
  --scene-five-source-inner-offset-from-frame-top-ratio: var(--scene-five-source-inner-y-from-frame-top-ratio);
  --scene-five-source-cta-top-space-ratio: var(--scene-five-source-cta-below-last-row-ratio);
  --scene-five-source-left-page-outer-inset-x-ratio: var(--scene-five-source-left-text-x-ratio);

  /* --- Active Book Frame (shared router, same as Scene Two / Three) --- */
  --scene-five-active-book-frame-width: var(--index-book-frame-layout-width);
  --scene-five-active-book-frame-height: var(--index-book-frame-layout-height);
  --scene-five-active-book-frame-top: var(--index-book-frame-layout-top);
  --scene-five-active-composition-width: var(--index-book-frame-layout-canvas-width);
  --scene-five-active-left-text-x: calc(
    var(--scene-five-active-book-frame-width) * var(--scene-five-source-left-text-x-ratio)
  );
  --scene-five-active-left-text-box-top: calc(
    var(--scene-five-active-book-frame-top)
    + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-left-text-box-top-ratio))
  );
  --scene-five-active-inner-y: calc(
    var(--scene-five-active-book-frame-top)
    + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-inner-y-from-frame-top-ratio))
  );
  --scene-five-active-label-y: calc(
    var(--scene-five-active-book-frame-top)
    + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-label-y-ratio))
  );
  --scene-five-active-intro-margin-top: calc(
    var(--scene-five-active-book-frame-height) * var(--scene-five-source-intro-below-text-box-top-ratio)
  );
  --scene-five-active-list-top-space: calc(
    var(--scene-five-active-book-frame-height) * var(--scene-five-source-list-top-space-ratio)
  );
  --scene-five-active-item-height: calc(
    var(--scene-five-active-book-frame-height) * var(--scene-five-source-item-height-ratio)
  );
  --scene-five-active-cta-top-space: calc(
    var(--scene-five-active-book-frame-height) * var(--scene-five-source-cta-below-last-row-ratio)
  );
  --scene-five-active-stage-side-padding: calc(
    var(--scene-five-active-book-frame-width) * var(--scene-five-source-stage-side-padding-ratio)
  );
  --scene-five-active-item-padding-y: var(--scene-five-source-item-padding-y);
  --scene-five-active-item-padding-x: calc(
    var(--scene-five-active-book-frame-width) * var(--scene-five-source-item-padding-x-ratio)
  );
  --scene-five-active-item-gap: var(--scene-five-source-item-gap);
  --scene-five-active-item-copy-width: var(--scene-five-source-item-copy-width);
  --scene-five-active-scroll-height: var(--scene-five-source-scroll-height);

  /* --- Final composition (viewport y; nudges optional) --- */
  --scene-five-final-inner-y: calc(
    var(--scene-five-active-inner-y)
    + var(--scene-five-intro-y-nudge)
  );
  --scene-five-final-label-top: var(--scene-five-active-label-y);
  --scene-five-final-list-top-space: calc(
    var(--scene-five-active-list-top-space)
    + var(--scene-five-routes-y-nudge)
  );
  --scene-five-final-cta-top-space: calc(
    var(--scene-five-active-cta-top-space)
    + var(--scene-five-cta-y-nudge)
  );
  /* Legacy aliases for breakpoint blocks not yet converted. */
  --scene-five-active-content-width: var(--scene-five-active-composition-width);
  --scene-five-active-content-top: var(--scene-five-active-inner-y);
  --scene-five-active-content-inset-x: var(--scene-five-active-left-text-x);
  --scene-five-active-intro-y: var(--scene-five-active-inner-y);
  --scene-five-final-content-top: var(--scene-five-final-inner-y);

  /* --- Section spacing + width --- */
  --home-routes-scroll-height: var(--scene-five-active-scroll-height);
  --home-routes-content-width: var(--scene-five-active-composition-width);
  --home-routes-content-top: var(--scene-five-final-inner-y);
  --home-routes-stage-side-padding: var(--scene-five-active-stage-side-padding);
  --home-routes-label-width: var(--scene-five-active-composition-width);
  --home-routes-label-top: var(--scene-five-final-label-top);
  --home-routes-label-size: max(
    11px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-five-source-label-size-ratio))
  );
  --home-routes-label-line-height: 1.25;
  --home-routes-label-tracking: 0.08em;
  --home-routes-label-family: var(--font-secondary);
  --home-routes-label-weight: 400;
  --home-routes-intro-margin-top: var(--scene-five-active-intro-margin-top);
  --home-routes-list-top-space: var(--scene-five-final-list-top-space);
  --home-routes-item-height: var(--scene-five-active-item-height);
  --home-routes-item-padding-y: var(--scene-five-active-item-padding-y);
  --home-routes-item-padding-x: var(--scene-five-active-item-padding-x);
  --home-routes-item-gap: var(--scene-five-active-item-gap);
  --home-routes-item-copy-width: var(--scene-five-active-item-copy-width);
  --home-routes-item-columns: minmax(0, 1fr);
  --home-routes-item-column-gap: 0px;
  --home-routes-divider: rgba(17, 17, 17, 0.1);

  /* --- Intro line --- */
  --home-routes-intro-size: max(
    20px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-five-source-intro-size-ratio))
  );
  --home-routes-intro-line-height: 1.2;
  --home-routes-intro-weight: 700;
  --home-routes-intro-family: var(--font-primary);

  /* --- Route titles + descriptions --- */
  --home-routes-title-size: max(
    16px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-five-source-title-size-ratio))
  );
  --home-routes-title-line-height: 1.15;
  --home-routes-title-weight: 400;
  --home-routes-description-size: max(
    13px,
    calc(var(--index-book-frame-layout-canvas-width) * var(--scene-five-source-description-size-ratio))
  );
  --home-routes-description-weight: 400;
  --home-routes-description-line-height: 1.45;
  --home-routes-description-color: rgba(17, 17, 17, 0.58);

  /* --- CTA button --- */
  --home-routes-cta-gap: 8px;
  --home-routes-cta-top-space: var(--scene-five-final-cta-top-space);
  --home-routes-button-height: 32px;
  --home-routes-button-width: 232px;
  --home-routes-button-copied-width: 120px;
  --home-routes-button-padding-x: 16px;
  --home-routes-button-radius: 0px;
  /* Matches Scene Three --disciplines-row-radius (12px). */
  --home-routes-item-hover-radius: 12px;
  --home-routes-button-size: 11px;
  --home-routes-button-bg: transparent;
  --home-routes-button-fg: rgba(17, 17, 17, 0.72);
  --home-routes-button-border: rgba(17, 17, 17, 0.24);
  --home-routes-button-hover-bg: rgba(17, 17, 17, 0.04);
  --home-routes-button-weight: 400;
  --home-routes-button-tracking: 0.08em;
  --home-routes-status-size: 12px;
  --home-routes-status-weight: 400;
  --home-routes-status-line-height: 1.35;
  --home-routes-status-min-height: 17px;

  /* --- Motion --- */
  --home-routes-hover-bg: #000000;
  --home-routes-hover-shift: 0px;
  --home-routes-transition-duration: 220ms;
  --home-routes-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.home-routes {
  position: relative;
  height: var(--home-routes-scroll-height);
  background: #ffffff;
  z-index: 1;
}

.home-routes__stage {
  position: sticky;
  top: 0;
  height: var(--app-viewport-height);
  overflow: hidden;
}

.home-routes__label {
  position: absolute;
  z-index: 2;
  top: var(--home-routes-label-top);
  left: 50%;
  width: var(--home-routes-label-width);
  max-width: calc(100% - (var(--home-routes-stage-side-padding) * 2));
  margin: 0;
  box-sizing: border-box;
  font-family: var(--home-routes-label-family);
  font-size: var(--home-routes-label-size);
  font-weight: var(--home-routes-label-weight);
  letter-spacing: var(--home-routes-label-tracking);
  line-height: var(--home-routes-label-line-height);
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}

.home-routes__label-inner {
  display: inline-block;
}

.home-routes__inner {
  position: absolute;
  top: var(--home-routes-content-top);
  left: calc(
    50%
    - (var(--scene-five-active-book-frame-width) * 0.5)
    + var(--scene-five-active-left-text-x)
  );
  width: var(--home-routes-content-width);
  max-width: calc(100% - (var(--home-routes-stage-side-padding) * 2));
  transform: none;
  box-sizing: border-box;
}

.home-routes__intro {
  margin: 0;
  margin-top: var(--home-routes-intro-margin-top);
  font-family: var(--home-routes-intro-family);
  font-size: var(--home-routes-intro-size);
  line-height: var(--home-routes-intro-line-height);
  font-weight: var(--home-routes-intro-weight);
  text-align: left;
  color: #111111;
}

.home-routes__list {
  margin-top: var(--home-routes-list-top-space);
  border-top: 1px solid var(--home-routes-divider);
}

.home-routes__item {
  display: grid;
  grid-template-columns: var(--home-routes-item-columns);
  column-gap: var(--home-routes-item-column-gap);
  row-gap: var(--home-routes-item-gap);
  align-items: center;
  justify-items: stretch;
  min-height: var(--home-routes-item-height);
  padding: var(--home-routes-item-padding-y) var(--home-routes-item-padding-x);
  border: solid transparent;
  border-width: 0 0 1px;
  border-bottom-color: var(--home-routes-divider);
  text-decoration: none;
  color: inherit;
  transition:
    background-color var(--home-routes-transition-duration) var(--home-routes-transition-ease),
    border-color var(--home-routes-transition-duration) var(--home-routes-transition-ease),
    border-radius var(--home-routes-transition-duration) var(--home-routes-transition-ease),
    color var(--home-routes-transition-duration) var(--home-routes-transition-ease);
}

.home-routes__item:hover,
.home-routes__item:focus-visible {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding-top: calc(var(--home-routes-item-padding-y) + 1px);
  background: var(--home-routes-hover-bg);
  border-top: 1px solid var(--home-routes-hover-bg);
  border-bottom-color: var(--home-routes-hover-bg);
  border-radius: var(--home-routes-item-hover-radius);
  color: #ffffff;
  isolation: isolate;
}

.home-routes__item:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.2);
  outline-offset: 4px;
}

.home-routes__title {
  display: block;
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 55%;
  font-family: var(--font-header);
  font-size: var(--home-routes-title-size);
  line-height: var(--home-routes-title-line-height);
  font-weight: var(--header-font-weight);
  letter-spacing: var(--header-letter-spacing);
  justify-self: start;
  text-align: left;
  color: inherit;
}

.home-routes__description {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: max-content;
  max-width: calc(100% - (var(--home-routes-item-padding-x) * 2));
  margin-inline: auto;
  font-family: var(--font-secondary);
  font-size: var(--home-routes-description-size);
  line-height: var(--home-routes-description-line-height);
  font-weight: var(--home-routes-description-weight);
  color: var(--home-routes-description-color);
  justify-self: center;
  text-align: center;
  text-wrap: pretty;
  pointer-events: none;
}

.home-routes__item:hover .home-routes__description,
.home-routes__item:focus-visible .home-routes__description {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.home-routes__cta {
  display: grid;
  justify-items: start;
  gap: var(--home-routes-cta-gap);
  margin-top: var(--home-routes-cta-top-space);
}

.home-routes__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--home-routes-button-width);
  min-width: 0;
  height: var(--home-routes-button-height);
  min-height: var(--home-routes-button-height);
  padding: 0 var(--home-routes-button-padding-x);
  border: 1px solid var(--home-routes-button-border);
  border-radius: var(--home-routes-button-radius);
  background: var(--home-routes-button-bg);
  color: var(--home-routes-button-fg);
  font-family: var(--font-secondary);
  font-size: var(--home-routes-button-size);
  line-height: 1;
  font-weight: var(--home-routes-button-weight);
  letter-spacing: var(--home-routes-button-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    width var(--home-routes-transition-duration) var(--home-routes-transition-ease),
    background-color var(--home-routes-transition-duration) var(--home-routes-transition-ease),
    border-color var(--home-routes-transition-duration) var(--home-routes-transition-ease),
    color var(--home-routes-transition-duration) var(--home-routes-transition-ease);
}

.home-routes__cta-button:hover,
.home-routes__cta-button:focus-visible {
  background: var(--home-routes-button-hover-bg);
  border-color: rgba(17, 17, 17, 0.38);
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-routes__cta-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.home-routes__cta-button.is-copied {
  width: var(--home-routes-button-copied-width);
  background: var(--home-routes-button-hover-bg);
  border-color: rgba(17, 17, 17, 0.38);
  color: #111111;
}

.home-routes__cta-button.is-error {
  background: var(--home-routes-button-hover-bg);
  border-color: rgba(17, 17, 17, 0.38);
  color: #111111;
}

.home-routes__cta-status {
  min-height: var(--home-routes-status-min-height);
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--home-routes-status-size);
  line-height: var(--home-routes-status-line-height);
  font-weight: var(--home-routes-status-weight);
  letter-spacing: 0.04em;
  color: rgba(17, 17, 17, 0.58);
  text-align: left;
}


@media (prefers-reduced-motion: reduce) {
  .home-routes__item,
  .home-routes__cta-button {
    transition: none !important;
  }
}

/* ===================================================== */
/* 9. INDEX RESPONSIVE BREAKPOINTS                       */
/* ----------------------------------------------------- */
/* This section is the homepage responsive layer. It     */
/* does not invent a new layout system; it adjusts the   */
/* existing homepage tokens and only adds structural     */
/* overrides where a scene must change shape.            */
/*                                                       */
/* Current responsive states:                            */
/*   1. Desktop source          : 1301+ normal height    */
/*   2. Short-height desktop    : 1301+ / max-height 895 */
/*      Global spread scaling lives in css/styles.css;   */
/*      this file inherits that scaled spread.           */
/*   3. Narrow Desktop / Laptop : 1100–1300              */
/*   4. Tablet Landscape        : 900–1099               */
/*   5. Tablet Portrait         : 768–899                */
/*   6. Phone                   : 481–767                */
/*   7. Small Phone (primary)   : 0–480                  */
/*                                                       */
/* Organization rule: keep breakpoint values as tokens   */
/* inside the named bands first. Add structural rules     */
/* after the token bands only when the existing shared    */
/* system needs a homepage-specific shape change, such   */
/* as Scene One phone stacking, the tablet scaled spread, */
/* Scene Two phone scaling, viewport-height fixes, and   */
/* video orientation focal controls.                     */
/*                                                       */
/* Current scene behavior:                               */
/*   - Scene One keeps the desktop image crop across     */
/*     breakpoints. Tablet widths use a scaled two-page  */
/*     spread; phone widths use stacked page fields.     */
/*   - Scene Two: three-line reveal; placement and scale   */
/*     from `--index-book-frame-layout-*`.                 */
/*   - Scene Three: disciplines field; same router +       */
/*     source height/canvas ratios; bands only adjust      */
/*     scroll timing and row structure (not frame Y).      */
/*   - Scene Four exposes breakpoint/orientation crop    */
/*     tokens for the coded film playback slot.          */
/*   - Scene Five CTA is full-width with the route field */
/*     below desktop.                                    */
/* ===================================================== */

/* ====================================================== */
/* ACTIVE BOOK FRAME SYNC                                */
/* ------------------------------------------------------ */
/* The 1440 source band keeps the source 1200x776 frame.  */
/* Bands where the shared spread has already scaled in    */
/* css/styles.css read that rendered spread back into the */
/* index Book Frame tokens. Tablet widths below the       */
/* shared spread threshold opt Scene One into a fitted     */
/* two-page spread without changing global spread tokens. */
/* ====================================================== */
@media (min-width: 1301px) and (max-height: 895px),
       (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --index-book-frame-open-spread-width: var(--spread-max-width);
    --index-book-frame-open-spread-height: var(--spread-height);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  :root {
    --index-book-frame-open-spread-width: min(
      var(--book-frame-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - var(--book-frame-viewport-clearance, 16px)) * var(--book-frame-width-from-height-ratio, 1.5464))
    );
    --index-book-frame-open-spread-height: calc(var(--index-book-frame-open-spread-width) * var(--book-frame-source-ratio, 0.6467));
  }
}

/* ====================================================== */
/* SHORT-HEIGHT DESKTOP : 1301+ / UNDER 896 HEIGHT        */
/* ------------------------------------------------------ */
/* The 1440 source layout remains untouched at full       */
/* height. When only the height shrinks, scale the intro  */
/* headline with the active spread so it stays inside the */
/* same text-safe field as the guide.                     */
/* ====================================================== */
/* ====================================================== */
/* NARROW DESKTOP / LAPTOP : 1100–1300                    */
/* ------------------------------------------------------ */
/* Preserves the desktop editorial feeling while fitting  */
/* common laptop windows (1280, 1200, 1100). The spread   */
/* stays side-by-side; Scene Three stays on the shared    */
/* Book Frame router (body x/width scale from canvas).    */
/* The lower bound matches the spread side-by-side         */
/* activation threshold in css/styles.css exactly (no 1px */
/* gap at 1100).                                          */
/* ====================================================== */
@media (min-width: 1100px) and (max-width: 1300px) {
  /* Splash leaves the 1440 canvas-x and centers honestly. */
  .splash__logo {
    left: 50%;
    width: 380px;
    max-width: calc(100vw - 64px);
  }

  /* Scene Two: placement comes from --index-book-frame-layout-*  */
  /* which already resolves to the scaled Open Spread at this    */
  /* band. Authored tracking is preserved by source ratios.      */

  /* Scene Three geometry reads from --index-book-frame-layout-* in
     the base scene tokens. */

  /* Scene Four: narrow-desktop focal controls. Keep these
     explicit so the video can be tuned without hunting through
     the base scene. */
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1;
  }

  /* Scene Five: Book Frame ratios (open-spread left page field). */
  #homeRoutes {
    --scene-five-active-book-frame-top: var(--index-book-frame-layout-top);
    --scene-five-active-book-frame-height: var(--index-book-frame-layout-height);
    --scene-five-active-content-width: var(--index-book-frame-open-canvas-width);
    --scene-five-active-content-top: calc(
      var(--index-book-frame-layout-top)
      + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-inner-offset-from-frame-top-ratio))
    );
    --home-routes-intro-margin-top: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-intro-margin-from-frame-top-ratio)
    );
    --scene-five-active-list-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-list-top-space-ratio)
    );
    --scene-five-active-item-height: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-item-height-ratio)
    );
    --scene-five-active-cta-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-cta-top-space-ratio)
    );
    --scene-five-active-item-padding-x: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-item-padding-x-ratio)
    );
    --home-routes-title-size: max(
      16px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-title-size-ratio))
    );
    --home-routes-description-size: max(
      13px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-description-size-ratio))
    );
    --home-routes-intro-size: max(
      20px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-intro-size-ratio))
    );
  }
}

/* ====================================================== */
/* TABLET LANDSCAPE / SMALL LAPTOP : 900–1099             */
/* ------------------------------------------------------ */
/* Scene One now stays as a scaled two-page spread here.  */
/* Scene Three uses the same Book Frame router; Scene Five */
/* CTA drops below the route list and becomes full-width  */
/* (rule below). Sticky scenes remain active.             */
/* ====================================================== */
@media (min-width: 900px) and (max-width: 1099px) {
  .splash__logo {
    left: 50%;
    width: 320px;
    max-width: calc(100vw - 64px);
  }

  /* Scene Two: scroll pacing (budget) is unified at the base      */
  /* #revealScene rule. Only the phrase ENTRANCE distances are     */
  /* tuned per band so the arriving lines rise a screen-           */
  /* proportional amount and the Scene One -> Two handoff has no   */
  /* white gap at this width. Layout placement still comes from    */
  /* --index-book-frame-layout-* (Scene One book frame).           */
  #revealScene {
    --reveal-step-1-start: 280px;
    --reveal-step-2-start: 1800px;
  }

  /* Scene Three: geometry from `--index-book-frame-layout-*`;    */
  /* scroll pacing + handoff overlap are unified at the base       */
  /* #disciplinesScene rule (pixel budget). Nothing to tune here.  */

  /* Scene Four: provisional crop. Re-tune after visual review. */
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.02;
  }

  /* Scene Five: Book Frame ratios (open-spread left page field). */
  #homeRoutes {
    --scene-five-active-book-frame-top: var(--index-book-frame-layout-top);
    --scene-five-active-book-frame-height: var(--index-book-frame-layout-height);
    --scene-five-active-content-width: var(--index-book-frame-open-canvas-width);
    --scene-five-active-content-top: calc(
      var(--index-book-frame-layout-top)
      + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-inner-offset-from-frame-top-ratio))
    );
    --home-routes-intro-margin-top: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-intro-margin-from-frame-top-ratio)
    );
    --scene-five-active-list-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-list-top-space-ratio)
    );
    --scene-five-active-item-height: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-item-height-ratio)
    );
    --scene-five-active-cta-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-cta-top-space-ratio)
    );
    --scene-five-active-item-padding-x: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-item-padding-x-ratio)
    );
    --home-routes-title-size: max(
      16px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-title-size-ratio))
    );
    --home-routes-description-size: max(
      13px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-description-size-ratio))
    );
    --home-routes-intro-size: max(
      19px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-intro-size-ratio))
    );
    --scene-five-active-scroll-height: 122vh;
  }
}

/* Scene Four: orientation focal controls for 900-1099. */
@media (min-width: 900px) and (max-width: 1099px) and (orientation: landscape) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.04;
  }
}

@media (min-width: 900px) and (max-width: 1099px) and (orientation: portrait) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.1;
  }
}

/* ====================================================== */
/* TABLET PORTRAIT : 768–899                              */
/* ------------------------------------------------------ */
/* Keep the open-book relationship as long as a scaled    */
/* spread can still fit. Sticky scenes still feel         */
/* intentional but use shorter runways.                   */
/* Scene Two keeps all seven reveal steps with a tablet-  */
/* sized horizontal composition (no vertical stack yet).  */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 899px) {
  .splash__logo {
    left: 50%;
    width: 300px;
    max-width: calc(100vw - 64px);
  }

  /* Scene One image crop stays locked to the desktop crop. */
  .home-intro-media-frame {
    --spread-media-position: 50% 78%;
    --spread-media-scale: 1.2;
  }

  /* Scene Two: scroll pacing unified at base; only the phrase    */
  /* entrance distances are tuned so the Scene One -> Two handoff  */
  /* keeps its overlap (no white gap) at this width. Layout from  */
  /* --index-book-frame-layout-* (Scene One book frame).          */
  #revealScene {
    --reveal-step-1-start: 220px;
    --reveal-step-2-start: 1200px;
  }

  /* Scene Three: geometry from `--index-book-frame-layout-*`;    */
  /* scroll pacing unified at base. Only the looser body          */
  /* line-height is tuned for this band.                          */
  #disciplinesScene {
    --disciplines-body-line-height: 1.5;
  }

  /* Scene Four: provisional portrait-leaning crop. */
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.08;
  }

  #homeRoutes {
    --scene-five-active-book-frame-top: var(--index-book-frame-layout-top);
    --scene-five-active-book-frame-height: var(--index-book-frame-layout-height);
    --scene-five-active-content-width: var(--index-book-frame-open-canvas-width);
    --scene-five-active-content-top: calc(
      var(--index-book-frame-layout-top)
      + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-inner-offset-from-frame-top-ratio))
    );
    --home-routes-intro-margin-top: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-intro-margin-from-frame-top-ratio)
    );
    --scene-five-active-list-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-list-top-space-ratio)
    );
    --scene-five-active-item-height: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-item-height-ratio)
    );
    --scene-five-active-cta-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-cta-top-space-ratio)
    );
    --scene-five-active-item-padding-x: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-item-padding-x-ratio)
    );
    --home-routes-title-size: max(
      16px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-title-size-ratio))
    );
    --home-routes-description-size: max(
      13px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-description-size-ratio))
    );
    --home-routes-intro-size: max(
      20px,
      calc(var(--index-book-frame-open-canvas-width) * var(--scene-five-source-intro-size-ratio))
    );
    --scene-five-active-scroll-height: 122vh;
  }
}

/* Scene Four: orientation focal controls for 768-899. */
@media (min-width: 768px) and (max-width: 899px) and (orientation: landscape) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.04;
  }
}

@media (min-width: 768px) and (max-width: 899px) and (orientation: portrait) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.1;
  }
}

/* ====================================================== */
/* PHONE : 481–767                                        */
/* ------------------------------------------------------ */
/* Single-page-width scene with simpler geometry. Scene   */
/* Two keeps the original three authored horizontal lines */
/* and scales them to the same page ruler as later scenes.*/
/* ====================================================== */
@media (min-width: 481px) and (max-width: 767px) {
  .splash__logo {
    left: 50%;
    width: 280px;
    max-width: calc(100vw - 48px);
  }

  /* Scene One image crop stays locked to the desktop crop. */
  .home-intro-media-frame {
    --spread-media-position: 50% 78%;
    --spread-media-scale: 1.2;
  }

  /* Scene Two on phone: --index-book-frame-layout-* already    */
  /* resolves to the stacked single page (handled at the global */
  /* @media (max-width: 767px) :root redirect). Scroll pacing   */
  /* (budget + lead) is unified at base; only the phrase arrival */
  /* distances stay phone-sized so the rise is proportional to   */
  /* the smaller portrait text (these are entrance distances,    */
  /* not scroll timing -- they settle by their authored          */
  /* thresholds regardless of budget).                          */
  #revealScene {
    --reveal-step-1-start: 200px;
    --reveal-step-2-start: 700px;
  }

  #disciplinesScene {
    --disciplines-body-line-height: 1.55;
    /* The row is too narrow at this band to sit body and label
       side-by-side, so push body content BELOW the label slot
       instead of overlaying it. The 12px gives breathing room
       between the closed-row label area and the opened body. */
    --disciplines-body-edge-padding: calc(var(--disciplines-row-slot-height) + 12px);
  }

  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.12;
  }

  #homeRoutes {
    --scene-five-active-book-frame-top: var(--index-book-frame-layout-top);
    --scene-five-active-book-frame-height: var(--index-book-frame-layout-height);
    --scene-five-active-content-inset-x: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-single-page-inset-x-ratio)
    );
    --scene-five-active-content-width: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-single-page-text-width-ratio)
    );
    --scene-five-active-content-top: calc(
      var(--index-book-frame-layout-top)
      + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-inner-offset-from-frame-top-ratio))
    );
    --home-routes-intro-margin-top: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-intro-margin-from-frame-top-ratio)
    );
    --scene-five-active-list-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-list-top-space-ratio)
    );
    --scene-five-active-item-height: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-item-height-ratio)
    );
    --scene-five-active-cta-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-cta-top-space-ratio)
    );
    --scene-five-active-item-padding-x: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-item-padding-x-ratio)
    );
    --home-routes-title-size: max(
      16px,
      calc(var(--index-book-frame-stacked-canvas-width) * var(--scene-five-source-title-size-ratio))
    );
    --home-routes-description-size: max(
      13px,
      calc(var(--index-book-frame-stacked-canvas-width) * var(--scene-five-source-description-size-ratio))
    );
    --home-routes-intro-size: max(
      19px,
      calc(var(--index-book-frame-stacked-canvas-width) * var(--scene-five-source-intro-size-ratio))
    );
    --scene-five-active-scroll-height: 118vh;
  }
}

/* Scene Four: orientation focal controls for 481-767. */
@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.08;
  }
}

@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.18;
  }
}

/* ====================================================== */
/* SMALL PHONE : 0–480 (PRIMARY MOBILE TARGET)            */
/* ------------------------------------------------------ */
/* Primary mobile design target is 390px (Updates_005).   */
/* Scene Two keeps the original 1440 three-line sentence  */
/* format, scaled down to the single portrait page ruler. */
/* ====================================================== */
@media (max-width: 480px) {
  .splash__logo {
    left: 50%;
    width: 240px;
    max-width: calc(100vw - 40px);
  }

  /* Scene One image crop stays locked to the desktop crop. */
  .home-intro-media-frame {
    --spread-media-position: 50% 78%;
    --spread-media-scale: 1.2;
  }

  /* Scene Two on small phone: --index-book-frame-layout-*      */
  /* already resolves to the stacked single page. Scroll pacing */
  /* (budget + lead) is unified at base; only the phrase arrival */
  /* distances stay phone-sized (entrance distances, not scroll  */
  /* timing).                                                   */
  #revealScene {
    --reveal-step-1-start: 160px;
    --reveal-step-2-start: 600px;
  }

  #disciplinesScene {
    --disciplines-body-line-height: 1.55;
    /* Same reasoning as the phone band: at small-phone widths the
       row cannot honestly hold body and label side-by-side, so
       body content drops below the label slot. */
    --disciplines-body-edge-padding: calc(var(--disciplines-row-slot-height) + 10px);
  }

  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.18;
  }

  #homeRoutes {
    --scene-five-active-book-frame-top: var(--index-book-frame-layout-top);
    --scene-five-active-book-frame-height: var(--index-book-frame-layout-height);
    --scene-five-active-content-inset-x: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-single-page-inset-x-ratio)
    );
    --scene-five-active-content-width: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-single-page-text-width-ratio)
    );
    --scene-five-active-content-top: calc(
      var(--index-book-frame-layout-top)
      + (var(--scene-five-active-book-frame-height) * var(--scene-five-source-inner-offset-from-frame-top-ratio))
    );
    --home-routes-intro-margin-top: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-intro-margin-from-frame-top-ratio)
    );
    --scene-five-active-list-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-list-top-space-ratio)
    );
    --scene-five-active-item-height: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-item-height-ratio)
    );
    --scene-five-active-cta-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-cta-top-space-ratio)
    );
    --scene-five-active-item-padding-x: calc(
      var(--index-book-frame-layout-width) * var(--scene-five-source-item-padding-x-ratio)
    );
    --home-routes-title-size: max(
      15px,
      calc(var(--index-book-frame-stacked-canvas-width) * var(--scene-five-source-title-size-ratio))
    );
    --home-routes-description-size: max(
      12px,
      calc(var(--index-book-frame-stacked-canvas-width) * var(--scene-five-source-description-size-ratio))
    );
    --home-routes-intro-size: max(
      18px,
      calc(var(--index-book-frame-stacked-canvas-width) * var(--scene-five-source-intro-size-ratio))
    );
    --scene-five-active-scroll-height: 112vh;
  }
}

/* Scene Four: orientation focal controls for 0-480. */
@media (max-width: 480px) and (orientation: landscape) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.08;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  #videoScene {
    --video-scene-focal-x: 50%;
    --video-scene-focal-y: 50%;
    --video-scene-media-scale: 1.18;
  }
}

/* ====================================================== */
/* SCENE THREE: BODY-BELOW-LABEL ASYMMETRIC PADDING       */
/* ------------------------------------------------------ */
/* At phone widths the row pushes body content below the  */
/* label slot via --disciplines-body-edge-padding. That   */
/* token is symmetric (top + bottom), which would leave   */
/* an oversized bottom margin inside the open row. Trim   */
/* the bottom padding so the row breathes naturally.      */
/* ====================================================== */
@media (max-width: 767px) and (orientation: landscape) {
  .disciplines-statement {
    overflow: visible;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .disciplines-row__body {
    padding-bottom: 18px;
  }
}

@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  :root {
    --header-clearance: 113px;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  :root {
    --header-clearance: 96px;
  }
}

/* ====================================================== */
/* SCENE ONE STACKED ORDER + PAGE MODEL                   */
/* ------------------------------------------------------ */
/* The Book Frame switches Spread Scenes into a stacked   */
/* Single Page model at phone widths and portrait tablet/ */
/* small-laptop windows. Landscape tablet widths are      */
/* restored to a scaled Open Spread in the next rule.     */
/*                                                       */
/* The image page leads, then the text page follows,      */
/* preserving the original 600x776 page proportion        */
/* instead of becoming loose full-width content.          */
/* ====================================================== */
@media (max-width: 767px) {
  :root {
    /* Option 1 test: phone portrait keeps one fitted 600x776 page
       but removes the leftover viewport gap, so the text page
       begins immediately after the image page. */
    --index-book-frame-stacked-page-width: min(
      var(--book-frame-single-page-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
    );
    --index-book-frame-stacked-page-height: calc(var(--index-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
    --index-book-frame-page-stack-gap: 0px;
    --index-book-frame-layout-width: var(--index-book-frame-stacked-page-width);
    --index-book-frame-layout-height: var(--index-book-frame-stacked-page-height);
    --index-book-frame-layout-scale: var(--index-book-frame-stacked-page-scale);
    --index-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --index-book-frame-layout-canvas-width: var(--index-book-frame-stacked-canvas-width);
    --scene-one-active-page-width: var(--index-book-frame-layout-width);
  }

}

@media (max-width: 767px) and (max-aspect-ratio: 6/5) {
  #disciplinesScene {
    /* Scene Three portrait uses the viewport as the Book Frame. The
       kicker is rebased to frame top. The bottom clearance mirrors the
       visual gap from the header line to the Book Frame top. */
    --scene-three-portrait-frame-edge-gap: max(
      0px,
      calc(var(--scene-three-active-book-frame-top) - var(--header-logo-line-y))
    );
    --scene-three-active-book-frame-height: max(
      0px,
      calc(
        var(--app-viewport-height)
        - var(--scene-three-active-book-frame-top)
        - var(--scene-three-portrait-frame-edge-gap)
      )
    );
    --scene-three-active-kicker-y: var(--scene-three-active-book-frame-top);
    --scene-three-active-statement-y: calc(
      var(--scene-three-active-book-frame-top)
      + (var(--scene-three-active-book-frame-height) * var(--scene-three-source-portrait-statement-y-ratio))
    );
    --scene-three-active-statement-space-height: max(
      0px,
      calc(
        (var(--scene-three-active-book-frame-height) * var(--scene-three-source-portrait-accordion-y-ratio))
        - var(--disciplines-kicker-line-box-height)
      )
    );
    /* One line only: hierarchy from 1440 ratios, then shrink to fit the
       active content width. Do not use a book-frame-width multiplier. */
    --disciplines-statement-size: min(
      max(
        calc(var(--disciplines-kicker-size) * 1.85),
        calc(
          var(--index-book-frame-layout-canvas-width)
          * var(--scene-three-source-statement-size-ratio)
        )
      ),
      calc(
        var(--disciplines-content-width)
        / var(--scene-three-source-portrait-statement-single-line-ch)
      )
    );
    --scene-three-active-accordion-height: var(--disciplines-accordion-page-fill-height);
    --disciplines-row-closed-min-height: max(
      44px,
      calc((var(--disciplines-row-label-size) * var(--disciplines-row-label-line-height)) + 24px)
    );
    --disciplines-row-open-max-height: max(
      var(--disciplines-row-closed-min-height),
      calc(
        var(--disciplines-accordion-height)
        - (var(--disciplines-row-closed-min-height) * 3)
      )
    );
    --disciplines-body-edge-padding: calc(
      (var(--disciplines-row-slot-height) - (var(--disciplines-body-size) * var(--disciplines-body-line-height))) / 2
    );
    --disciplines-row-open-button-padding-top: max(
      18px,
      calc(var(--disciplines-row-slot-height) * 0.18)
    );
    --disciplines-body-x: calc(
      var(--scene-three-active-book-frame-width)
      * var(--scene-three-source-portrait-right-text-x-ratio)
    );
    --disciplines-body-width: calc(
      var(--scene-three-active-book-frame-width)
      * var(--scene-three-source-portrait-right-text-width-ratio)
    );
  }

  .disciplines-statement {
    overflow: hidden;
    white-space: nowrap;
  }

  .disciplines-row.is-open .disciplines-row__button {
    align-items: flex-start;
  }

  /* Full inter-word justify on a narrow mono column creates
     visible rivers; pretty rag-left keeps the column tidy. */
  .disciplines-row__body {
    text-align: left;
    text-align-last: left;
    text-wrap: pretty;
    hyphens: auto;
    hyphenate-limit-chars: 7 4 2;
    overflow-wrap: break-word;
  }

  .disciplines-row__line {
    display: inline;
    width: auto;
    letter-spacing: 0;
    white-space: normal;
  }

  .disciplines-row__line:not(.disciplines-row__line--final)::after {
    content: " ";
  }
}

/* Portrait intro pages scroll naturally — no scroll-snap.
   Scene One flows from image page to text page without any
   snap or hold behavior so the transition into Scene Two
   is continuous. */

@media (max-width: 767px) {
  .spread--intro {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  /* Image first, statement second. Grid items accept the
     `order` property exactly like flex items. */
  .spread--intro .spread__page--left  { order: -1; }
  .spread--intro .spread__page--right { order: 0; }

  .spread--intro .spread__book {
    width: var(--index-book-frame-stacked-page-width);
    max-width: var(--index-book-frame-stacked-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--index-book-frame-page-stack-gap);
    justify-items: stretch;
  }

  .spread--intro .spread__page {
    width: var(--index-book-frame-stacked-page-width);
    height: var(--index-book-frame-stacked-page-height);
    min-height: var(--index-book-frame-stacked-page-height);
  }

  /* Image keeps the left-page crop field instead of expanding to
     a loose, oversized mobile image. */
  .spread--intro .spread__page--media-only {
    height: var(--index-book-frame-stacked-page-height);
    min-height: var(--index-book-frame-stacked-page-height);
  }

  .spread--intro .spread__page--media-only .spread__media,
  .spread--intro .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }
}

/* ====================================================== */
/* SCENE TWO: RESPONSIVE START OVERLAP                    */
/* ------------------------------------------------------ */
/* Scene Two keeps its source-measured handoff overlap at */
/* every breakpoint. Tall phone portrait adds a stronger  */
/* landing equation below so line 1 enters near the       */
/* bottom of the viewport before settling into its Book   */
/* Frame position.                                       */
/* ====================================================== */

@media (max-width: 767px) and (orientation: portrait) and (min-height: 700px) and (max-aspect-ratio: 3/5) {
  #revealScene {
    --scene-two-phone-landing-bottom-space-ratio: 0.001;
    --scene-two-phone-landing-start-overlap: max(
      var(--scene-two-active-start-overlap),
      calc(
        var(--scene-two-active-offset-y)
        + var(--scene-two-active-text-line-height)
        + (var(--app-viewport-height) * var(--scene-two-phone-landing-bottom-space-ratio))
      )
    );
    --reveal-scene-start-overlap: var(--scene-two-phone-landing-start-overlap);
  }
}

/* ====================================================== */
/* SCENE ONE SCALED OPEN SPREAD : 768–1099                */
/* ------------------------------------------------------ */
/* The index intro can still hold its two-page idea at    */
/* tablet widths if the Book Frame is scaled by width AND */
/* height.                                                */
/* This keeps Reference 8 from switching to a phone stack */
/* prematurely while leaving other scenes alone.          */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
  .spread--intro {
    min-height: var(--index-book-frame-open-spread-height);
  }

  .spread--intro .spread__page--left,
  .spread--intro .spread__page--right {
    order: 0;
  }

  .spread--intro .spread__book {
    width: var(--index-book-frame-open-spread-width);
    max-width: var(--index-book-frame-open-spread-width);
    height: var(--index-book-frame-open-spread-height);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spread--intro .spread__page,
  .spread--intro .spread__page--media-only {
    width: auto;
    height: var(--index-book-frame-open-spread-height);
    min-height: var(--index-book-frame-open-spread-height);
  }
}

/* ====================================================== */
/* SCENE ONE PORTRAIT PAGE STACK : 768–1300               */
/* ------------------------------------------------------ */
/* Tablet, small-laptop, and narrow-desktop windows keep  */
/* the scaled Open Spread while they are landscape-ish.   */
/* Once the viewport leans portrait, this rule preserves  */
/* the Book Frame page logic as two stacked pages: Left   */
/* Page on top, Right Page below. The gap is leftover     */
/* viewport space, so page one clears as page two snaps   */
/* into place. The white page keeps its imaginary page    */
/* boundary and text-safe field.                         */
/* Each page snaps independently so the user lands on one */
/* fitted page before scrolling into the next page.       */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  :root {
    --index-book-frame-page-stack-gap: var(--index-book-frame-single-page-gap);
    --index-book-frame-layout-width: var(--index-book-frame-single-page-width);
    --index-book-frame-layout-height: var(--index-book-frame-single-page-height);
    --index-book-frame-layout-scale: var(--index-book-frame-single-page-scale);
    --index-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --index-book-frame-layout-canvas-width: var(--index-book-frame-single-canvas-width);
    --scene-one-active-page-width: var(--index-book-frame-layout-width);
  }

  #disciplinesScene {
    /* Scene Three portrait uses the viewport as the Book Frame. The
       kicker is rebased to frame top. The bottom clearance mirrors the
       visual gap from the header line to the Book Frame top. */
    --scene-three-portrait-frame-edge-gap: max(
      0px,
      calc(var(--scene-three-active-book-frame-top) - var(--header-logo-line-y))
    );
    --scene-three-active-book-frame-height: max(
      0px,
      calc(
        var(--app-viewport-height)
        - var(--scene-three-active-book-frame-top)
        - var(--scene-three-portrait-frame-edge-gap)
      )
    );
    --scene-three-active-kicker-y: var(--scene-three-active-book-frame-top);
    --scene-three-active-statement-y: calc(
      var(--scene-three-active-book-frame-top)
      + (var(--scene-three-active-book-frame-height) * var(--scene-three-source-portrait-statement-y-ratio))
    );
    --scene-three-active-statement-space-height: max(
      0px,
      calc(
        (var(--scene-three-active-book-frame-height) * var(--scene-three-source-portrait-accordion-y-ratio))
        - var(--disciplines-kicker-line-box-height)
      )
    );
    /* One line only: hierarchy from 1440 ratios, then shrink to fit the
       active content width. Do not use a book-frame-width multiplier. */
    --disciplines-statement-size: min(
      max(
        calc(var(--disciplines-kicker-size) * 1.85),
        calc(
          var(--index-book-frame-layout-canvas-width)
          * var(--scene-three-source-statement-size-ratio)
        )
      ),
      calc(
        var(--disciplines-content-width)
        / var(--scene-three-source-portrait-statement-single-line-ch)
      )
    );
    --scene-three-active-accordion-height: var(--disciplines-accordion-page-fill-height);
    --disciplines-row-closed-min-height: max(
      44px,
      calc((var(--disciplines-row-label-size) * var(--disciplines-row-label-line-height)) + 24px)
    );
    --disciplines-row-open-max-height: max(
      var(--disciplines-row-closed-min-height),
      calc(
        var(--disciplines-accordion-height)
        - (var(--disciplines-row-closed-min-height) * 3)
      )
    );
    --disciplines-body-edge-padding: calc(
      (var(--disciplines-row-slot-height) - (var(--disciplines-body-size) * var(--disciplines-body-line-height))) / 2
    );
    --disciplines-row-open-button-padding-top: max(
      18px,
      calc(var(--disciplines-row-slot-height) * 0.18)
    );
    --disciplines-body-x: calc(
      var(--scene-three-active-book-frame-width)
      * var(--scene-three-source-portrait-right-text-x-ratio)
    );
    --disciplines-body-width: calc(
      var(--scene-three-active-book-frame-width)
      * var(--scene-three-source-portrait-right-text-width-ratio)
    );
  }

  .disciplines-statement {
    overflow: hidden;
    white-space: nowrap;
  }

  .disciplines-row.is-open .disciplines-row__button {
    align-items: flex-start;
  }

  /* Full inter-word justify on a narrow mono column creates
     visible rivers; pretty rag-left keeps the column tidy. */
  .disciplines-row__body {
    text-align: left;
    text-align-last: left;
    text-wrap: pretty;
    hyphens: auto;
    hyphenate-limit-chars: 7 4 2;
    overflow-wrap: break-word;
  }

  .disciplines-row__line {
    display: inline;
    width: auto;
    letter-spacing: 0;
    white-space: normal;
  }

  .disciplines-row__line:not(.disciplines-row__line--final)::after {
    content: " ";
  }

  .spread--intro {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  .spread--intro .spread__page--left  { order: -1; }
  .spread--intro .spread__page--right { order: 0; }

  .spread--intro .spread__book {
    width: var(--index-book-frame-single-page-width);
    max-width: var(--index-book-frame-single-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--index-book-frame-page-stack-gap);
  }

  .spread--intro .spread__page {
    width: var(--index-book-frame-single-page-width);
    height: var(--index-book-frame-single-page-height);
    min-height: var(--index-book-frame-single-page-height);
  }

  .spread--intro .spread__page--media-only {
    height: var(--index-book-frame-single-page-height);
    min-height: var(--index-book-frame-single-page-height);
  }

  .spread--intro .spread__page--media-only .spread__media,
  .spread--intro .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }

  /* Scene Two: placement is fully handled by                  */
  /* --index-book-frame-layout-* which is redirected to the    */
  /* single-page ruler in this media query's :root above.      */

}

/* ====================================================== */
/* SCENE TWO PORTRAIT VIEWPORT-FRAME HEIGHT              */
/* ------------------------------------------------------ */
/* Portrait keeps the single-page width ruler, but the    */
/* active Book Frame height comes from the user's         */
/* viewport using the same mirrored-bottom-clearance      */
/* equation as Scenes Three and Five. The existing        */
/* line-2 source anchor then recalculates the settled     */
/* composition top from this active portrait height.      */
/* ====================================================== */
@media (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  #revealScene {
    /* Scene Two portrait uses the viewport as the Book Frame height
       reference, matching Scenes Three and Five. Placement still uses
       the existing 1440 line-2 source anchor against this active height. */
    --scene-two-portrait-frame-edge-gap: max(
      0px,
      calc(var(--scene-two-active-book-frame-top) - var(--header-logo-line-y))
    );
    --scene-two-active-book-frame-height: max(
      0px,
      calc(
        var(--app-viewport-height)
        - var(--scene-two-active-book-frame-top)
        - var(--scene-two-portrait-frame-edge-gap)
      )
    );
    --reveal-text-weight-base: 300;
  }

  /* Portrait/narrow: inherits the base #videoScene handoff (overlap 0),
     so the film enters as Scene Three releases and never overlaps the
     pinned rows -- which matters most here, where stacked open-row
     panels run lowest in the viewport. The old 120vh override is
     removed; keeping it would pull the film up into the rows. */

}

/* ====================================================== */
/* SCENE FIVE: SUB-DESKTOP INNER ALIGNMENT               */
/* ------------------------------------------------------ */
/* Open spread: center on the book frame like 1440 (left   */
/* text edge lands on the page outer inset automatically). */
/* Portrait: full canvas width, centered on the page.      */
/* ====================================================== */
@media (max-width: 1300px) and (min-aspect-ratio: 6/5) {
  .home-routes__inner {
    left: calc(
      50%
      - (var(--scene-five-active-book-frame-width) * 0.5)
      + var(--scene-five-active-left-text-x)
    );
    width: var(--home-routes-content-width);
    max-width: calc(100% - (var(--home-routes-stage-side-padding) * 2));
    transform: none;
  }
}

/* ====================================================== */
/* SCENE FIVE: PORTRAIT BOOK FRAME                         */
/* ------------------------------------------------------ */
/* Single-page mode: scene spans page left–right edges.   */
/* Intro uses portrait frame-top ratios; routes fill the  */
/* viewport-height page field. CTA stays fixed-width.     */
/* ====================================================== */
@media (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  #homeRoutes {
    --scene-five-active-book-frame-top: var(--index-book-frame-layout-top);
    --scene-five-active-book-frame-width: var(--index-book-frame-layout-width);
    --scene-five-portrait-frame-edge-gap: max(
      0px,
      calc(var(--scene-five-active-book-frame-top) - var(--header-logo-line-y))
    );
    --scene-five-active-book-frame-height: max(
      0px,
      calc(
        var(--app-viewport-height)
        - var(--scene-five-active-book-frame-top)
        - var(--scene-five-portrait-frame-edge-gap)
      )
    );
    --scene-five-active-composition-width: var(--scene-five-active-book-frame-width);
    --scene-five-active-left-text-x: 0px;
    --scene-five-active-label-y: var(--scene-five-active-book-frame-top);
    --scene-five-active-inner-y: var(--scene-five-active-book-frame-top);
    --scene-five-final-inner-y: var(--scene-five-active-book-frame-top);
    --home-routes-content-width: var(--scene-five-active-composition-width);
    --home-routes-label-width: var(--scene-five-active-composition-width);
    --home-routes-content-top: var(--scene-five-final-inner-y);
    --home-routes-intro-margin-top: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-portrait-intro-y-ratio)
    );
    --scene-five-active-list-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-list-top-space-ratio)
    );
    --scene-five-final-list-top-space: var(--scene-five-active-list-top-space);
    --scene-five-active-cta-top-space: calc(
      var(--scene-five-active-book-frame-height) * var(--scene-five-source-cta-top-space-ratio)
    );
    --scene-five-routes-fill-height: max(
      0px,
      calc(
        var(--scene-five-active-book-frame-top)
        + var(--scene-five-active-book-frame-height)
        - var(--scene-five-final-content-top)
        - var(--home-routes-intro-margin-top)
        - (var(--home-routes-intro-size) * var(--home-routes-intro-line-height))
        - var(--scene-five-final-list-top-space)
        - var(--scene-five-active-cta-top-space)
        - var(--home-routes-button-height)
        - var(--home-routes-status-min-height)
      )
    );
    --scene-five-active-item-height: max(
      44px,
      calc(var(--scene-five-routes-fill-height) / 3)
    );
    --scene-five-active-item-padding-x: calc(
      var(--scene-five-active-book-frame-width) * var(--scene-five-source-single-page-outer-inset-x-ratio)
    );
    --home-routes-title-size: max(
      16px,
      calc(var(--scene-five-active-book-frame-width) * var(--scene-five-source-title-size-ratio))
    );
    --home-routes-description-size: max(
      12px,
      calc(var(--scene-five-active-book-frame-width) * var(--scene-five-source-description-size-ratio))
    );
    --home-routes-intro-size: min(
      max(
        calc(
          max(
            12px,
            calc(
              var(--scene-five-active-book-frame-width)
              * var(--scene-five-source-portrait-intro-hierarchy-base-ratio)
            )
          )
          * var(--scene-five-source-portrait-intro-hierarchy-multiplier)
        ),
        calc(var(--scene-five-active-book-frame-width) * var(--scene-five-source-intro-size-ratio))
      ),
      calc(
        var(--home-routes-content-width)
        / var(--scene-five-source-portrait-intro-single-line-ch)
      )
    );
    --scene-five-active-scroll-height: 120vh;
  }

  .home-routes__inner {
    left: calc(
      50%
      - (var(--scene-five-active-book-frame-width) * 0.5)
    );
    width: var(--home-routes-content-width);
    max-width: none;
    transform: none;
  }

  .home-routes__intro {
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    padding-inline: 0;
  }

  .home-routes__cta {
    justify-items: center;
    padding-inline: 0;
  }

  .home-routes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--home-routes-item-gap);
    min-height: var(--home-routes-item-height);
  }

  .home-routes__title {
    display: block;
    max-width: 100%;
    text-align: center;
  }

  .home-routes__description {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: center;
    pointer-events: auto;
  }
}

/* ====================================================== */
/* PORTRAIT ROBOTO MONO WEIGHT TEST                       */
/* ------------------------------------------------------ */
/* Temporary tuning hook: bump only Roboto Mono text in   */
/* Scene Three and Scene Five by one weight level while   */
/* portrait mode is active.                              */
/* ====================================================== */
@media (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  #disciplinesScene {
    --disciplines-kicker-weight: 500;
    --disciplines-row-label-weight: 400;
    --disciplines-body-weight: 400;
  }

  #homeRoutes {
    --home-routes-label-weight: 500;
    --home-routes-description-weight: 500;
    --home-routes-status-weight: 500;
  }
}

@media (max-width: 767px) and (max-aspect-ratio: 6/5) {
  #homeRoutes {
    --scene-five-active-scroll-height: 112vh;
  }
}

/* ====================================================== */
/* RESPONSIVE STAGE HEIGHTS: 100dvh MOBILE BROWSERS       */
/* ------------------------------------------------------ */
/* Mobile browser bars expand/collapse the visual         */
/* viewport, which can leave a hairline gap if sticky     */
/* stages use 100vh. Where supported, switch the Scene    */
/* Three, Four, and Five stages to 100dvh below desktop.  */
/* ====================================================== */
@media (max-width: 1099px) {
  @supports (height: 100dvh) {
    .video-scene__stage,
    .home-routes__stage,
    .disciplines-scene__stage {
      height: var(--app-viewport-height);
    }
  }
}

/* ===================================================== */
/* FUTURE HOMEPAGE SCENE REFINEMENTS                     */
/* ----------------------------------------------------- */
/* Add future index-only layout or composition overrides */
/* here, after the shared site system has loaded.        */
/* ===================================================== */