/* ===================================================== */
/* CSS GUIDE | HOW TO READ THIS FILE                     */
/* ----------------------------------------------------- */
/* This stylesheet is written to work as both code and   */
/* manual. Read it from top to bottom.                   */
/*                                                       */
/* 1. ROOT TOKENS                                        */
/*    Global control panel. Change values here first.    */
/*                                                       */
/* 2. CLEAN SLATE + RESET BROWSER DEFAULTS               */
/*    Removes browser defaults and establishes the       */
/*    baseline behavior for the site.                    */
/*                                                       */
/* 3. SITE COMPONENTS                                    */
/*    Header/navigation, footer, lines, and buttons.     */
/*                                                       */
/* 4. PAGE STRUCTURE                                     */
/*    Page foundations, Book Frame primitives, legacy    */
/*    spread support, and page system. This is the main  */
/*    editorial architecture.                            */
/*                                                       */
/* 5. CONTENT STYLING                                    */
/*    Typography and general containers.                 */
/*                                                       */
/* 6. UTILITIES                                          */
/*    Small reusable helpers for spacing, grids, media,  */
/*    and debug overlays.                                */
/*                                                       */
/* 7. BREAKPOINTS | TOKEN OVERRIDES                      */
/*    Responsive token bands, debug overlay frames,      */
/*    short-height spread scaling, and small global      */
/*    layout behaviors.                                  */
/*                                                       */
/* COMMENT PATTERN                                       */
/* Each section should explain:                          */
/* - what it controls                                    */
/* - whether it is primary or support-only               */
/* - where it should be used                             */
/* - what it sits above or below in the system           */
/* ===================================================== */

/* ============================== */
/* FONT IMPORTS                   */
/* ============================== */

@import url("https://use.typekit.net/cqp2exi.css");

/* ===================================================== */
/* 1. ROOT TOKENS — Main Control Panel                   */
/* ----------------------------------------------------- */
/* :root is the global control panel for the site.       */
/* It stores fonts, colors, spacing, UI settings, and    */
/* the book-spread layout tokens.                        */
/*                                                       */
/* Change values here first before changing rule blocks  */
/* below. The rest of the file should read from these    */
/* tokens instead of hardcoding repeated values.         */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* FONT FAMILIES TOKENS                                  */
  /* ===================================================== */
  --font-primary: "berthold-baskerville-pro", sans-serif;
  --font-secondary: "roboto-mono", monospace;
  --font-tertiary: "neue-haas-grotesk-display", sans-serif;
  --font-mono: "Courier New", monospace;

  /* ===================================================== */
  /* TEXT PROFILE TOKENS                                   */
  /* ----------------------------------------------------- */
  /* Editorial typography lives here. Header/UI type is    */
  /* controlled separately below.                          */
  /* ===================================================== */
  --chapter-size: 72px;
  --chapter-weight: 400;
  --chapter-tracking: 0.04em;

  --heading-size: 56.5px;
  --heading-weight: 200;
  --heading-tracking: 0;

  --subject-size: 14px;
  --subject-weight: 300;
  --subject-tracking: 0;

  --body-size: 14.5px;
  --body-weight: 400;
  --body-line-height: 1.5;
  --body-tracking: 0.02em;

  /* ===================================================== */
  /* COLOR TOKENS                                          */
  /* ===================================================== */
  --color-text: #111111;
  --color-text-secondary: #555555;
  --color-text-muted: #999999;
  --color-bg: #ffffff;
  --color-surface: #f7f7f7;
  --color-border: #111111;
  --color-divider: #D7D7D7;
  --color-link: #111111;
  --color-hover: #555555;
  --color-focus: #111111;
  --color-accent: #333333;
  --color-panel-bg: rgba(255, 255, 255, 0.92);
  --app-viewport-height: 100vh;

  /* ===================================================== */
  /* SPACING SCALE TOKENS                                  */
  /* ===================================================== */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-section: 80px;
  --space-page: 16px;

  /* ===================================================== */
  /* GAP VALUES TOKENS                                     */
  /* ----------------------------------------------------- */
  /* These control the space between columns in grid       */
  /* layouts                                               */
  /* ===================================================== */
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;

  /* ===================================================== */
  /* LINE SYSTEM TOKENS                                    */
  /* ----------------------------------------------------- */
  /* Structural rules used to separate content, create      */
  /* hierarchy, and define editorial rhythm.               */
  /* ===================================================== */

  /* Line colors */
  --line-color: var(--color-border);
  --line-color-soft: var(--color-divider);

  /* Line weights */
  --line-thin: 0.5px;
  --line-regular: 1px;
  --line-strong: 2px;

  /* Line offsets */
  --line-offset-sm: var(--space-sm);
  --line-offset-md: var(--space-md);
  --line-offset-lg: var(--space-lg);

  /* ===================================================== */
  /* HEADER / NAVIGATION TOKENS                            */
  /* ----------------------------------------------------- */
  /* Header is UI, not editorial content. These values     */
  /* control the fixed top navigation.                     */
  /* ===================================================== */
  --font-header: "neue-haas-grotesk-text", sans-serif;
  --header-font-size: 20px;
  --header-line-height: 16px;
  --header-letter-spacing: 0.038em;
  --header-font-weight: 400;
  --header-gap: 20px;
  --header-padding-y: 0px;
  --header-padding-x: 32px;
  --header-frame-max-width: 1440px;
  --header-logo-line-y: 80px;
  --header-logo-height: 56px;
  --header-clearance: 120px;
  --header-logo-line-gap: 170px;
  --header-logo-line-anchor-ratio: 0.7142857;
  --header-menu-scale: 1;
  --logo-optical-offset-x: -10.5px;

  /* ===================================================== */
  /* BUTTON TOKENS                                         */
  /* ===================================================== */
  --btn-padding-y: 10px;
  --btn-padding-x: 24px;
  --btn-font-size: 10px;
  --btn-font-weight: 400;
  --btn-tracking: 0.08em;
  --btn-radius: 0;
  --btn-border-width: 1px;
  --btn-gap: 12px;

  /* ===================================================== */
  /* LIST TOKENS                                           */
  /* ===================================================== */
  --list-indent: 5px;
  --list-marker-spacing: 10px;
  --bullet-char: "▪";
  --number-indent: 24px;

  /* ===================================================== */
  /* BOOK SYSTEM TOKENS                                    */
  /* ----------------------------------------------------- */
  /* This is the primary editorial page system used by     */
  /* the homepage and the main site pages. The spread is   */
  /* the full open-book field below the fixed header.      */
  /*                                                       */
  /* The full spread target is 1200 × 776. Each page is    */
  /* 600 × 776 before internal text-safe insets are        */
  /* applied.                                              */
  /* ===================================================== */
  --spread-max-width: 1200px;
  --spread-height: 776px;
  --spread-page-gap: 0px;
  --spread-pad-x: 0px;
  --spread-pad-y: 0px;
  --spread-aspect-ratio: 0.6467;
  --spread-width-from-height-ratio: 1.5464;
  --spread-viewport-clearance: 16px;

  /* Book Frame tokens are the canonical names for the    */
  /* editorial measuring system. Existing spread tokens    */
  /* remain as compatibility inputs for shared components. */
  --book-frame-source-width: 1200px;
  --book-frame-source-height: 776px;
  --book-frame-source-ratio: var(--spread-aspect-ratio);
  --book-frame-width-from-height-ratio: var(--spread-width-from-height-ratio);
  --book-frame-single-page-source-width: 600px;
  --book-frame-single-page-source-height: 776px;
  --book-frame-single-page-ratio: 1.2933;
  --book-frame-single-page-width-from-height-ratio: 0.7732;
  --book-frame-viewport-clearance: var(--spread-viewport-clearance);
  --book-frame-open-spread-width: var(--spread-max-width);
  --book-frame-open-spread-height: var(--spread-height);
  --book-frame-open-spread-scale: calc(var(--book-frame-open-spread-width) / var(--book-frame-source-width));
  --book-frame-single-page-width: calc(var(--book-frame-open-spread-width) / 2);
  --book-frame-single-page-height: var(--book-frame-open-spread-height);
  --book-frame-single-page-scale: calc(var(--book-frame-single-page-width) / var(--book-frame-single-page-source-width));
  --book-frame-left-page-width: var(--book-frame-single-page-width);
  --book-frame-left-page-height: var(--book-frame-single-page-height);
  --book-frame-right-page-width: var(--book-frame-single-page-width);
  --book-frame-right-page-height: var(--book-frame-single-page-height);
  --canvas-field-width: var(--book-frame-open-spread-width);
  --canvas-field-height: var(--book-frame-open-spread-height);
  --canvas-field-scale: var(--book-frame-open-spread-scale);
  --book-frame-layout-width: var(--book-frame-open-spread-width);
  --book-frame-layout-height: var(--book-frame-open-spread-height);
  --book-frame-layout-scale: var(--book-frame-open-spread-scale);
  --book-frame-mode: open-spread;

  /* Page padding holds content slightly off the page edge */
  /* before the inner reading field begins.                */
  --page-pad-top: 0px;
  --page-pad-right: 0px;
  --page-pad-bottom: 0px;
  --page-pad-left: 0px;

  /* Inner reading field tokens. These are the scaled      */
  /* text margins for each 600 × 776 page.                 */
  --page-text-inset-top: 104px;
  --page-text-inset-outer: 80px;
  --page-text-inset-bottom: 144px;
  --page-text-inset-gutter: 144px;

  /* Book Frame text-safe measurements for source         */
  /* placement work. Existing --page-text-* tokens remain */
  /* as shared component inputs.                          */
  --book-frame-page-text-inset-top: var(--page-text-inset-top);
  --book-frame-page-text-inset-outer: var(--page-text-inset-outer);
  --book-frame-page-text-inset-bottom: var(--page-text-inset-bottom);
  --book-frame-page-text-inset-gutter: var(--page-text-inset-gutter);

  /* Media tokens let one page or the full spread hold     */
  /* images/video without inventing a separate page system.*/
  --spread-media-gap: 0px;
  --spread-media-radius: 0px;
  --spread-page-min-height: 420px;

  /* ===================================================== */
  /* SHARED LAYOUT FIELD TOKENS                            */
  /* ----------------------------------------------------- */
  /* These remain available for general containers, style  */
  /* guide sections, non-spread content, and internal      */
  /* modules. They are no longer the primary editorial     */
  /* page architecture, but they still support the system. */
  /* ===================================================== */
  --site-column-count: 12;
  --site-column-gap: 16px;
  --site-column-max-width: 1200px;
  --site-column-margin: 20px;
  --site-narrow-max-width: 680px;
  --site-wide-max-width: 1440px;

  /* ===================================================== */
  /* GRID SPAN TOKENS                                      */
  /* ----------------------------------------------------- */
  /* These are used to span columns in the grid system.    */
  /* ===================================================== */
  --span-half: calc(var(--site-column-count) / 2);
  --span-quarter: calc(var(--site-column-count) / 4);
  --span-three-quarters: calc(var(--site-column-count) * 3 / 4);

  /* ===================================================== */
  /* DEBUG OVERLAY TOKENS                                  */
  /* ----------------------------------------------------- */
  /* Visual-only settings for inspection overlays.         */
  /* ===================================================== */
  --debug-frame-width: 1440px;
  --debug-frame-left: calc(50% - (var(--debug-frame-width) / 2));
  --debug-column-count: 12;
  --debug-column-width: 72px;
  --debug-column-gap: 16px;
  --debug-column-field-width: calc(
    (var(--debug-column-count) * var(--debug-column-width)) +
    ((var(--debug-column-count) - 1) * var(--debug-column-gap))
  );
  --debug-margin-width: 96px;
  --debug-margin-accent-width: 24px;
  --debug-empty-spacer-width: 24px;
  --debug-book-margin-width: 80px;
  --debug-column-field-offset: calc(
    var(--debug-margin-width) +
    var(--debug-empty-spacer-width) +
    var(--debug-book-margin-width)
  );
  --debug-book-margin-offset: calc(
    var(--debug-margin-width) +
    var(--debug-empty-spacer-width)
  );
  --debug-column-color: rgba(255, 0, 0, 0.15);
  --debug-book-margin-color: rgba(255, 174, 0, 0.18);
  --debug-grid-size: 8px;
  --debug-grid-color: rgba(17, 17, 17, 0.15);
  --debug-margin-color: rgba(0, 100, 255, 0.20);
  --debug-overlay-z: 22;

  /* ===================================================== */
  /* DEBUG SPREAD GUIDE TOKENS                             */
  /* ----------------------------------------------------- */
  /* Visual-only measurements for the book-spread drafting */
  /* overlay. These values derive from the live spread and */
  /* text inset tokens wherever possible.                  */
  /* ===================================================== */
  --debug-spread-guide-top: 120px;
  --debug-spread-guide-z: calc(var(--debug-overlay-z) + 1);
  --debug-spread-guide-line-color: rgba(37, 65, 82, 0.62);
  --debug-spread-guide-soft-line-color: rgba(37, 65, 82, 0.42);
  --debug-spread-guide-strong-line-color: rgba(17, 17, 17, 0.55);
  --debug-spread-guide-left-text-color: var(--debug-spread-guide-soft-line-color);
  --debug-spread-guide-right-text-color: var(--debug-spread-guide-soft-line-color);
  --debug-spread-guide-line-width: 1px;
  --debug-spread-guide-width: var(--spread-max-width);
  --debug-spread-guide-height: var(--spread-height);
  --debug-spread-guide-left: calc(var(--debug-frame-left) + ((var(--debug-frame-width) - var(--debug-spread-guide-width)) / 2));
  --debug-spread-guide-text-inset-top: var(--page-text-inset-top);
  --debug-spread-guide-text-inset-bottom: var(--page-text-inset-bottom);
  --debug-spread-guide-text-inset-outer: var(--page-text-inset-outer);
  --debug-spread-guide-text-inset-gutter: var(--page-text-inset-gutter);
  --debug-spread-guide-text-width: calc((var(--debug-spread-guide-width) / 2) - var(--debug-spread-guide-text-inset-outer) - var(--debug-spread-guide-text-inset-gutter));
  --debug-spread-guide-text-height: calc(var(--debug-spread-guide-height) - var(--debug-spread-guide-text-inset-top) - var(--debug-spread-guide-text-inset-bottom));
  --debug-spread-guide-left-text-left: calc(var(--debug-spread-guide-left) + var(--debug-spread-guide-text-inset-outer));
  --debug-spread-guide-right-text-left: calc(var(--debug-spread-guide-left) + (var(--debug-spread-guide-width) / 2) + var(--debug-spread-guide-text-inset-gutter));
  --debug-spread-guide-text-top: calc(var(--debug-spread-guide-top) + var(--debug-spread-guide-text-inset-top));
  --debug-spread-guide-center-left: calc(var(--debug-spread-guide-left) + (var(--debug-spread-guide-width) / 2));
  --debug-spread-guide-middle-top: calc(var(--debug-spread-guide-top) + (var(--debug-spread-guide-height) / 2));
  --debug-spread-guide-middle-line-left: var(--debug-frame-left);
  --debug-spread-guide-middle-line-width: var(--debug-frame-width);

  /* ===================================================== */
  /* REVEAL SCENE TOKENS                                   */
  /* ----------------------------------------------------- */
  /* Generic defaults for the reusable scroll-revealed     */
  /* editorial text system. Page-specific compositions     */
  /* should override these values in page CSS.             */
  /* ===================================================== */

  /* Scene scroll settings */
  --reveal-scene-step-count: 7;
  --reveal-scene-scroll-height: 500vh;

  /* Final text field size */
  --reveal-composition-width: 1000px;
  --reveal-composition-height: auto;

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

  /* Expression phrase typography */
  --reveal-text-family-expression: var(--font-primary);
  --reveal-text-size-expression: var(--chapter-size);

  /* Per-line letter spacing */
  --reveal-track-line-1: 0em;
  --reveal-track-line-2: 0em;
  --reveal-track-line-3: 0em;
  --reveal-track-expression: 0em;

  /* Per-line word spacing */
  --reveal-word-space-line-1: normal;
  --reveal-word-space-line-2: normal;
  --reveal-word-space-line-3: normal;

  /* Scroll-arrival starting distance */
  --reveal-step-1-start: 368px;
  --reveal-step-2-start: 368px;

  /* Scroll-arrival settle points */
  --reveal-step-1-settle: 0.10;
  --reveal-step-2-settle: 0.18;

  /* Live scroll-arrival offsets */
  --reveal-step-1-offset: 0px;
  --reveal-step-2-offset: 0px;

  /* Mask reveal trigger points */
  --reveal-step-3-threshold: 0.32;
  --reveal-step-4-threshold: 0.48;
  --reveal-step-5-threshold: 0.62;
  --reveal-step-6-threshold: 0.78;
  --reveal-step-7-threshold: 0.92;

  /* Bottom-to-top reveal timing */
  --reveal-mask-up-duration: 500ms;
  --reveal-mask-up-ease: cubic-bezier(0.22, 1, 0.36, 1);

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

  /* Top-to-bottom reveal timing */
  --reveal-mask-down-duration: 650ms;
  --reveal-mask-down-ease: cubic-bezier(0.3, 0.8, 0.2, 1);
}

@supports (height: 100dvh) {
  :root {
    --app-viewport-height: 100dvh;
  }
}

/* ===================================================== */
/* 2. CLEAN SLATE + RESET BROWSER DEFAULTS               */
/* ----------------------------------------------------- */
/* Removes browser defaults and establishes a controlled */
/* starting point for spacing, typography, media, and    */
/* form elements. This lets the layout system behave     */
/* predictably across browsers.                          */
/* ===================================================== */

/* Reset spacing + box model */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ensure full canvas behavior */
html, body {
  height: 100%;
  /* Clip horizontal overflow so off-canvas decorative elements (e.g.
     the .transition-line parked at translateX past the right edge)
     cannot extend the scrollable width and expose the black body
     background. `clip` — not `hidden` — so html/body do NOT become
     scroll containers, which would break the position: sticky
     scheduler stages on the programs and practice pages. */
  overflow-x: clip;
}

/* Base typography + background */
body {
  font-family: var(--font-secondary);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  background: var(--site-footer-bg, #000000);
}

/* Media behaves predictably */
img,
video {
  max-width: 100%;
  display: block;
}

/* Remove default list styles */
ul,
ol {
  list-style: none;
}

/* Remove default link styling */
a {
  text-decoration: none;
  color: inherit;
}

/* Form elements inherit typography */
input,
button,
textarea,
select {
  font: inherit;
}

/* ===================================================== */
/* 3. SITE COMPONENTS                                    */
/* ----------------------------------------------------- */
/* Header/navigation, lines, and buttons.                */
/* ===================================================== */

/* ============================== */
/* HEADER / NAVIGATION COMPONENT  */
/* ------------------------------ */
/* Fixed site header and menu.    */
/* This is UI structure, separate */
/* from the editorial spread      */
/* system below.                  */
/* ============================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  pointer-events: none;
  background: var(--color-bg);
  z-index: 10;
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: var(--header-logo-line-y);
  height: var(--line-regular);
  background: var(--line-color-soft);
}

.site-header::before {
  left: 0;
  width: calc(50% + var(--logo-optical-offset-x) - (var(--header-logo-line-gap) / 2));
}

.site-header::after {
  right: 0;
  width: calc(50% - var(--logo-optical-offset-x) - (var(--header-logo-line-gap) / 2));
}

.site-header::before,
.site-header::after {
  z-index: 3;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
  padding-bottom: var(--header-padding-y);
  position: relative;
  width: 100%;
  max-width: var(--header-frame-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--header-padding-x);
  padding-right: var(--header-padding-x);
  height: var(--header-logo-line-y);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% + var(--logo-optical-offset-x)));
  top: calc(var(--header-logo-line-y) - (var(--header-logo-height) * var(--header-logo-line-anchor-ratio)));
  z-index: 4;
}

.logo img,
.logo__img {
  height: var(--header-logo-height);
  width: auto;
}

.logo__img--light {
  display: none;
}

.logo:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.menu {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--header-gap);
  z-index: 2;
}

.menu a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-header);
  font-size: calc(var(--header-font-size) * var(--header-menu-scale));
  line-height: calc(var(--header-line-height) * var(--header-menu-scale));
  font-weight: var(--header-font-weight);
  letter-spacing: var(--header-letter-spacing);
  color: inherit;
  text-decoration: none;
}

.menu__description,
.menu .menu__cta-button,
.menu .menu__cta-status {
  display: none;
}

.menu a:hover,
.menu a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.menu-button {
  position: absolute;
  top: 50%;
  right: var(--header-padding-x);

  width: calc(24px * var(--header-menu-scale));  /* 3 units at desktop scale */
  height: calc(18px * var(--header-menu-scale)); /* controls total stack height */
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;

  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  pointer-events: auto; /* important because header has pointer-events: none */
  cursor: pointer;
  z-index: 4;
}

.site-header--shared-menu .menu-button {
  display: none;
}

.menu-button:focus,
.menu-button:focus-visible {
  outline: 0;
}

.menu-button span {
  display: block;
  width: 100%;
  height: calc(3px * var(--header-menu-scale)); 
  background: var(--color-text);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    background-color 0.2s ease;
}

body.menu-router-open {
  overflow: hidden;
}

/* --- Shared Portrait Router Menu ---
   In portrait Book Frame behavior every page uses the
   hamburger/fullscreen router. The index page keeps its
   homepage-specific desktop hamburger reveal, but shares
   this portrait router language.
*/
@media (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  /* Portrait router: Scene Five spacing ratios on viewport page field. */
  :root {
    --menu-router-source-frame-height: 776;
    --menu-router-frame-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --menu-router-frame-edge-gap: max(
      0px,
      calc(var(--menu-router-frame-top) - var(--header-logo-line-y))
    );
    --menu-router-frame-height: max(
      0px,
      calc(
        var(--app-viewport-height)
        - var(--menu-router-frame-top)
        - var(--menu-router-frame-edge-gap)
      )
    );
    --menu-router-page-width: min(600px, calc(100vw - 32px));
    /* Slightly more than Scene Five intro margin (8/776) below the header. */
    --menu-router-top-space-ratio: 0.0206186;
    --menu-router-cta-top-space-ratio: 0.1030928;
    --menu-router-item-gap-ratio: 0.0103093;
    --menu-router-title-size-ratio: 0.0192308;
    --menu-router-description-size-ratio: 0.0134615;
    --menu-router-top-space: calc(var(--menu-router-frame-height) * var(--menu-router-top-space-ratio));
    --menu-router-cta-top-space: calc(var(--menu-router-frame-height) * var(--menu-router-cta-top-space-ratio));
    --menu-router-item-gap: calc(var(--menu-router-frame-height) * var(--menu-router-item-gap-ratio));
    --menu-router-button-height: 32px;
    --menu-router-button-width: 232px;
    --menu-router-button-copied-width: 120px;
    --menu-router-button-padding-x: 16px;
    --menu-router-status-min-height: 17px;
    --menu-router-row-count: 4;
    --menu-router-rows-fill-height: max(
      0px,
      calc(
        var(--menu-router-frame-height)
        - var(--menu-router-top-space)
        - var(--menu-router-cta-top-space)
        - var(--menu-router-button-height)
        - var(--menu-router-status-min-height)
      )
    );
    --menu-router-row-min-height: max(
      44px,
      calc(var(--menu-router-rows-fill-height) / var(--menu-router-row-count))
    );
    --menu-router-title-size: max(
      16px,
      calc(var(--menu-router-page-width) * var(--menu-router-title-size-ratio))
    );
    --menu-router-description-size: max(
      12px,
      calc(var(--menu-router-page-width) * var(--menu-router-description-size-ratio))
    );
  }

  .site-header--shared-menu .menu-button {
    display: flex;
  }

  .site-header--shared-menu .menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .site-header.menu-revealed {
    background: #000000;
    color: #ffffff;
  }

  .site-header.menu-revealed::before,
  .site-header.menu-revealed::after {
    background: rgba(255, 255, 255, 0.35);
  }

  .site-header.menu-revealed .logo__img--dark {
    display: none;
  }

  .site-header.menu-revealed .logo__img--light {
    display: block;
  }

  .site-header.menu-revealed .menu-button span {
    background: #ffffff;
  }

  .site-header.menu-revealed .menu-button {
    width: calc(20px * var(--header-menu-scale));
    height: calc(20px * var(--header-menu-scale));
  }

  .site-header.menu-revealed .menu-button span {
    height: calc(2px * var(--header-menu-scale));
  }

  .site-header.menu-revealed .menu-button span:nth-child(1) {
    transform: translateY(calc(9px * var(--header-menu-scale))) rotate(45deg);
  }

  .site-header.menu-revealed .menu-button span:nth-child(2) {
    opacity: 0;
  }

  .site-header.menu-revealed .menu-button span:nth-child(3) {
    transform: translateY(calc(-9px * var(--header-menu-scale))) rotate(-45deg);
  }

  .site-header.menu-revealed .menu,
  .site-header .menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--app-viewport-height);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, var(--menu-router-page-width));
    grid-template-rows:
      repeat(4, minmax(var(--menu-router-row-min-height), 1fr))
      auto
      auto;
    justify-content: center;
    justify-items: stretch;
    align-content: stretch;
    gap: 0;
    padding:
      calc(var(--menu-router-frame-top) + var(--menu-router-top-space))
      0
      var(--menu-router-frame-edge-gap);
    background: #000000;
    color: #ffffff;
    border: 0;
    z-index: 1;
  }

  .site-header.menu-revealed .menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    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 {
    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;
  }

  .site-header.menu-revealed .menu a:not(.menu__cta-button) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--menu-router-item-gap);
    min-height: var(--menu-router-row-min-height);
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    opacity: 1;
    transform: translateY(0);
    text-align: center;
    text-decoration: none;
  }

  .site-header.menu-revealed .menu a:not(.menu__cta-button):hover,
  .site-header.menu-revealed .menu a:not(.menu__cta-button):focus-visible {
    text-decoration: none;
  }

  .site-header.menu-revealed .menu a:not(.menu__cta-button):hover .menu__title,
  .site-header.menu-revealed .menu a:not(.menu__cta-button):focus-visible .menu__title {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }

  .site-header.menu-revealed .menu__title {
    display: block;
    font-family: var(--font-header);
    font-size: var(--menu-router-title-size);
    line-height: 1.15;
    font-weight: var(--header-font-weight);
    letter-spacing: var(--header-letter-spacing);
  }

  .site-header.menu-revealed .menu__description {
    display: block;
    margin: 0;
    font-family: var(--font-secondary);
    font-size: var(--menu-router-description-size);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
  }

  .site-header.menu-revealed .menu .menu__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--menu-router-button-width);
    min-width: 0;
    height: var(--menu-router-button-height);
    min-height: var(--menu-router-button-height);
    margin-top: var(--menu-router-cta-top-space);
    margin-inline: auto;
    padding: 0 var(--menu-router-button-padding-x);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    justify-self: center;
  }

  .site-header.menu-revealed .menu .menu__cta-button.is-copied {
    width: var(--menu-router-button-copied-width);
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
  }

  .site-header.menu-revealed .menu .menu__cta-button:hover,
  .site-header.menu-revealed .menu .menu__cta-button:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.38);
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .site-header.menu-revealed .menu .menu__cta-status {
    display: block;
    min-height: var(--menu-router-status-min-height);
    margin: 8px 0 0;
    font-family: var(--font-secondary);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-align: center;
    color: rgba(255, 255, 255, 0.58);
    justify-self: center;
  }
}

/* ============================== */
/* LINE COMPONENTS                */
/* ------------------------------ */
/* Reusable editorial rules for   */
/* separation, hierarchy, and     */
/* rhythm. Line length is         */
/* controlled by the width of the */
/* container unless a modifier    */
/* changes it.                    */
/* ============================== */

/* --- Base Rule --- */
/* Default horizontal rule. Uses system tokens and fills */
/* the width of the container it sits inside.            */

.rule {
  width: 100%;
  border: 0;
  border-top: var(--line-regular) solid var(--line-color);
  margin-top: var(--line-offset-md);
  margin-bottom: var(--line-offset-md);
}

/* --- Weight Variations --- */
/* Use these when the line needs to feel quieter or      */
/* stronger than the default rule.                       */

.rule--thin {
  border-top: var(--line-thin) solid var(--line-color-soft);
}

.rule--strong {
  border-top: var(--line-strong) solid var(--line-color);
}

/* --- Length Variations --- */
/* These shorten the rule relative to its container.     */

.rule--short {
  width: 60%;
}

.rule--half {
  width: 50%;
}

/* --- Alignment Variations --- */
/* Use these when a shortened rule should align to a     */
/* specific side instead of filling the full container.  */

.rule--centered {
  margin-left: auto;
  margin-right: auto;
}

.rule--right {
  margin-left: auto;
  margin-right: 0;
}

/* --- Spacing Variations --- */
/* Use these when the rule needs tighter or larger       */
/* spacing than the default offset.                      */

.rule--tight {
  margin-top: var(--line-offset-sm);
  margin-bottom: var(--line-offset-sm);
}

.rule--loose {
  margin-top: var(--line-offset-lg);
  margin-bottom: var(--line-offset-lg);
}

/* ============================== */
/* BUTTONS  | COMPONENT           */
/* ------------------------------ */
/* Reusable button styles for UI  */
/* actions and calls to action.   */
/* These are site pieces, not     */
/* part of the page layout system.*/
/* ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.btn-primary:hover {
  background: var(--color-hover);
  border-color: var(--color-hover);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn-ghost:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-ghost:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--btn-gap);
}

.btn-secondary-on-dark {
  color: var(--color-bg);
  border-color: var(--color-bg);
}

.btn-secondary-on-dark:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.btn-ghost-on-dark {
  color: var(--color-bg);
}

/* ============================== */
/* FOOTER  | COMPONENT            */
/* ------------------------------ */
/* Shared public-facing site      */
/* footer. This is a quiet        */
/* editorial closing band used    */
/* across the live pages.         */
/* ============================== */

:root {
  --site-footer-height: 80px;
  --site-footer-bg: #000000;
  --site-footer-fg: rgba(255, 255, 255, 0.82);
  --site-footer-font-size: 14px;
  --site-footer-line-height: 1.2;
  --site-footer-letter-spacing: 0.04em;
  /* Fit cap keeps the full line on one row below 1440 widths. */
  --site-footer-single-line-ch: 59;
}

.site-footer-scene {
  background: var(--site-footer-bg);
}

.site-footer {
  display: grid;
  place-items: center;
  height: var(--site-footer-height);
  padding: 0 24px;
  background: var(--site-footer-bg);
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: min(
    var(--site-footer-font-size),
    calc((100vw - 48px) / var(--site-footer-single-line-ch))
  );
  line-height: var(--site-footer-line-height);
  font-weight: 400;
  letter-spacing: var(--site-footer-letter-spacing);
  text-align: center;
  white-space: nowrap;
  color: var(--site-footer-fg);
}

.site-footer__line {
  display: inline;
}

.site-footer__line + .site-footer__line::before {
  content: " ";
}

@media (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  :root {
    --site-footer-height: 96px;
    --site-footer-font-size: 13px;
    --site-footer-line-height: 1.35;
    --site-footer-letter-spacing: 0.02em;
  }

  .site-footer {
    min-height: var(--site-footer-height);
    height: auto;
    padding: 24px 16px;
  }

  .site-footer__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: none;
    font-size: var(--site-footer-font-size);
    white-space: nowrap;
  }

  .site-footer__line {
    display: block;
  }

  .site-footer__line + .site-footer__line::before {
    content: none;
  }
}

/* ===================================================== */
/* 4. PAGE STRUCTURE                                     */
/* ----------------------------------------------------- */
/* Page foundations, spread layout system, and page      */
/* system. This is the main editorial architecture.      */ 
/* ===================================================== */

/* ============================== */
/* PAGE FOUNDATIONS               */
/* ------------------------------ */
/* Broad page-level wrappers used */
/* across the site. These set up  */
/* the page canvas before any     */
/* spread or container logic is   */
/* applied.                       */
/* ============================== */

.page-shell {
  width: 100%;
  min-height: 100vh;
  padding-top: var(--header-clearance);
  background: var(--color-bg);
}

.editorial-page {
  width: 100%;
  background: var(--color-bg);
}

.editorial-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.section-wrap {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* ====================================================== */
/* BOOK FRAME PRIMITIVES                                  */
/* ------------------------------------------------------ */
/* New Book Frame layout language. These primitives are   */
/* token-driven: a scene declares its active Book Frame    */
/* width, height, and mode, then the children inherit the  */
/* same source-to-active scale. The legacy spread system   */
/* below remains temporarily for pages not yet migrated.   */
/* ====================================================== */

.book-frame {
  width: 100%;
  padding: var(--book-frame-pad-y, 0px) var(--book-frame-pad-x, 0px);
}

.book-frame--screen {
  min-height: var(--book-frame-layout-height, var(--book-frame-source-height));
}

.book-frame__open-spread {
  width: var(--book-frame-layout-width, var(--book-frame-source-width));
  max-width: var(--book-frame-layout-width, var(--book-frame-source-width));
  height: var(--book-frame-layout-height, var(--book-frame-source-height));
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--book-frame-page-gap, 0px);
}

.book-frame__page {
  position: relative;
  min-width: 0;
  width: auto;
  height: var(--book-frame-layout-height, var(--book-frame-source-height));
  padding: 0;
}

.book-frame__page--media {
  overflow: hidden;
}

.book-frame__text-safe {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.book-frame__text-safe--top {
  justify-content: flex-start;
}

.book-frame__text-safe--center {
  justify-content: center;
}

.book-frame__text-safe--bottom {
  justify-content: flex-end;
}

.book-frame__text-field {
  width: 100%;
}

.book-frame__page--left .book-frame__text-field {
  margin-right: auto;
}

.book-frame__page--right .book-frame__text-field {
  margin-left: auto;
}

.book-frame__headline {
  margin: 0;
  text-align: left;
}

.book-frame__media,
.book-frame__media-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.book-frame__media {
  border-radius: var(--book-frame-media-radius, var(--spread-media-radius));
}

.book-frame__media-frame img,
.book-frame__media-frame video {
  width: 100%;
  height: 100%;
  object-fit: var(--book-frame-media-fit, cover);
  object-position: var(--book-frame-media-position, 50% 50%);
  transform: scale(var(--book-frame-media-scale, 1));
  transform-origin: center;
  display: block;
}

/* ====================================================== */
/* LEGACY BOOK | SPREAD LAYOUT SYSTEM                     */
/* ------------------------------------------------------ */
/* This legacy layer still supports pages/scenes that use */
/* .spread and .spread__... markup. Do not use it for new */
/* Index refactors; move scenes onto Book Frame classes.  */
/* ====================================================== */

/* --- Spread Section ---
   .spread is the outer section wrapper for one editorial spread.
   It provides field padding and establishes the main block that
   sits below the header.
*/

.spread {
  width: 100%;
  padding: var(--spread-pad-y) var(--spread-pad-x);
}

.spread--screen {
  min-height: var(--spread-height);
}

.spread--auto {
  min-height: auto;
}

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

.spread--media-dominant {
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Book Field ---
   .spread__book is the actual two-page field.
   On small screens the pages stack vertically.
   On larger screens they become left and right pages.
*/

.spread__book {
  width: 100%;
  max-width: var(--spread-max-width);
  height: var(--spread-height);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spread-page-gap);
}

.spread__book--bleed {
  gap: var(--spread-media-gap);
}

/* --- Page Halves ---
   Each .spread__page is one half of the book.
   On mobile it behaves like a full-width stacked page.
   On desktop it becomes one side of the spread.
*/

.spread__page {
  position: relative;
  min-width: 0;
  height: 100%;
  padding:
    var(--page-pad-top)
    var(--page-pad-right)
    var(--page-pad-bottom)
    var(--page-pad-left);
}

.spread__page--left {
  grid-column: auto;
}

.spread__page--right {
  grid-column: auto;
}

.spread__page--text-only {
  display: block;
}

.spread__page--media-only {
  display: block;
  padding: 0;
  overflow: hidden;
}

.spread__page--mixed {
  display: block;
}

/* --- Inner Reading Field ---
   .spread__inner defines the text-safe rectangle.
   Text should live here unless a special layout explicitly
   calls for a different rule.
*/

.spread__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Page-Specific Text Inset Logic ---
   144px = gutter
   80px  = outside
*/

.spread__page--left .spread__inner {
  padding-top: var(--page-text-inset-top);
  padding-bottom: var(--page-text-inset-bottom);
  padding-left: var(--page-text-inset-outer);
  padding-right: var(--page-text-inset-gutter);
}

.spread__page--right .spread__inner {
  padding-top: var(--page-text-inset-top);
  padding-bottom: var(--page-text-inset-bottom);
  padding-left: var(--page-text-inset-gutter);
  padding-right: var(--page-text-inset-outer);
}

.spread__page--left .spread__text {
  margin-right: auto;
}

.spread__page--right .spread__text {
  margin-left: auto;
}

/* --- Justify Content Options --- */

.spread__inner--top {
  justify-content: flex-start;
}

.spread__inner--center {
  justify-content: center;
}

.spread__inner--bottom {
  justify-content: flex-end;
}

/* --- Content Roles ---
   These classes give readable names to the content
   living inside the spread system.
*/

.spread__text {
  width: 100%;
  max-width: 376px;
  padding-top: 96px; /* adjust this number to move text up/down in book text box */
}

.spread__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.spread__headline {
  margin: 0;
  text-align: left;
}

.spread__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* --- Media Roles ---
   Media can live on one page or span the full spread.
   The media wrapper controls placement. The media frame
   controls crop/aspect behavior.

   Art direction controls:
   --spread-media-fit       default cover
   --spread-media-position  default 50% 50%
   --spread-media-scale     default 1
*/

.spread__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--spread-media-radius);
}

.spread__media--left,
.spread__media--right {
  width: 100%;
  height: 100%;
}

.spread__media--full {
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
}

.spread__media-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.spread__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--spread-media-position, 50% 50%);
  transform: scale(var(--spread-media-scale, 1));
  transform-origin: center;
  display: block;
}

/* Full-spread media sections do not need inner page padding. */
.spread__book--bleed > .spread__media--full {
  min-height: 100%;
}

/* --- Desktop Spread Activation ---
   This is the shared default spread behavior.

   At 1100px and wider, the book becomes a fixed two-page
   spread. At the 1440 design canvas the spread is 1200px
   wide and each page is 600px.

   Below 1100px, the shared default is to stack spreads into
   one column. Individual page styles may opt a specific spread
   back into a scaled two-page composition when the design calls
   for it.
*/

@media (min-width: 1100px) {
  .spread__book {
    width: var(--spread-max-width);
    max-width: var(--spread-max-width);
    height: var(--spread-height);
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .spread__page {
    width: auto;
    height: var(--spread-height);
  }
}

/* --- Full-Page Media Pages ---
   Use these when one page of the book should be treated
   as a full-page image field rather than a text page.
*/

.spread__page--media-only {
  padding: 0;
  overflow: hidden;
}

.spread__page--media-only .spread__media,
.spread__page--media-only .spread__media-frame {
  width: 100%;
  height: 100%;
}

.spread__page--media-only .spread__media-frame img,
.spread__page--media-only .spread__media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--spread-media-position, 50% 50%);
  transform: scale(var(--spread-media-scale, 1));
  transform-origin: center;
  display: block;
}

/* ===================================================== */
/* SCENE TRANSITION LINE (shared component)             */
/* ----------------------------------------------------- */
/* A short 1px line that glides across the seam between   */
/* two stacked scenes as the user scrolls. Place it as    */
/* the first child of an incoming (position: relative)    */
/* scene; js/transition-line.js drives its horizontal     */
/* sweep. Length, thickness, and gradient match the book  */
/* spread spine crease, so it reads as that same line     */
/* laid on its side. z-index 5 keeps it below the site    */
/* header (z-index 10).                                   */
/* ===================================================== */
.transition-line {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--spread-height) * 0.33333);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(17, 17, 17, 0.18) 25%,
    rgba(17, 17, 17, 0.18) 75%,
    transparent
  );
  /* Start fully off-screen right; JS drives the sweep. */
  transform: translateX(100vw);
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

/* ===================================================== */
/* BOOK | PAGE REFINEMENTS                               */
/* ----------------------------------------------------- */
/* This section holds smaller page-level refinements      */
/* inside the main spread system defined above. It is     */
/* not a separate layout system. It extends the spread    */
/* rules above without redefining them.                   */
/* ===================================================== */

.spread--media-dominant .spread__book,
.spread--media-dominant .spread__media,
.spread--media-dominant .spread__media-frame {
  min-height: var(--spread-height);
}

/* --- Stacked Spread Default (below 1100px) ---
   Below 1100px, shared spreads stack into a single column by
   default. Pages give up their fixed page heights and flow
   naturally.

   Page-specific CSS can override this for a particular spread,
   such as the homepage intro spread in css/pages/index.css.
*/
@media (max-width: 1099px) {
  .spread__book {
    width: 100%;
    max-width: 100%;
    height: auto;
    grid-template-columns: 1fr;
  }

  .spread__page {
    width: auto;
    height: auto;
    min-height: auto;
  }

  .spread__inner {
    padding-top: var(--space-xl);
    padding-right: var(--space-lg);
    padding-bottom: var(--space-xl);
    padding-left: var(--space-lg);
  }

  .spread--media-dominant .spread__book,
  .spread--media-dominant .spread__media,
  .spread--media-dominant .spread__media-frame {
    min-height: 60vh;
  }
}

/* ============================== */
/* REVEAL SCENE SYSTEM            */
/* ------------------------------ */
/* Reusable scroll-revealed       */
/* editorial text system. A       */
/* single sentence is composed at */
/* its final layout, then revealed*/
/* in discrete steps as the user  */
/* scrolls. Page-specific tuning  */
/* should live in page CSS.       */
/*                                */
/* Structure:                     */
/*   .reveal-scene                */
/*     .reveal-scene__stage       */
/*       .reveal-composition      */
/*         .reveal-line           */
/*           .reveal-phrase       */
/*                                */
/* Phrase reveal modifiers        */
/* (pick one per phrase):         */
/*   --scroll-arrival  (steps 1,2)*/
/*   --mask-up         (veil lift)*/
/*   --mask-left       (L→R wipe) */
/*   --mask-down       (T→B drop) */
/*                                */
/* Emphasis modifier:             */
/*   --expression                 */
/*                                */
/* Step hook (required per        */
/* phrase to drive state):        */
/*   --step-N (N = 1..7)          */
/* ============================== */

/* --- Scene outer wrapper ---
   Provides enough scroll height for the step sequence.
   Override --reveal-scene-scroll-height per scene if a
   different sentence needs more or less runway. */
.reveal-scene {
  position: relative;
  width: 100%;
  height: var(--reveal-scene-scroll-height);
  overflow: visible;
}

/* --- Sticky stage ---
   Holds the composition centered in the viewport while
   the outer section scrolls behind it. */
.reveal-scene__stage {
  position: sticky;
  top: 0;
  height: var(--app-viewport-height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Designed composition field ---
   Authored three-line composition. Line breaks are
   authored via separate .reveal-line spans, not by
   browser wrapping. The field size matches the
   1440 working-canvas target. */
.reveal-composition {
  width: 100%;
  max-width: var(--reveal-composition-width);
  min-height: var(--reveal-composition-height);
  margin: 0 auto;
  padding-bottom: 0.12em;
  color: var(--color-text);
  font-family: var(--reveal-text-family-base);
  font-size: var(--reveal-text-size-base);
  font-weight: var(--reveal-text-weight-base);
  letter-spacing: var(--reveal-text-tracking);
  line-height: var(--reveal-text-line-height);
  text-align: left;
}

.reveal-line {
  display: block;
  white-space: nowrap;
}

/* Reveal-scene-only authored tracking (per line group) */
.reveal-line--track-1 {
  letter-spacing: var(--reveal-track-line-1);
  word-spacing: var(--reveal-word-space-line-1);
}

.reveal-line--track-2 {
  letter-spacing: var(--reveal-track-line-2);
  word-spacing: var(--reveal-word-space-line-2);
}

.reveal-line--track-3 {
  letter-spacing: var(--reveal-track-line-3);
  word-spacing: var(--reveal-word-space-line-3);
}

/* --- Phrase base ---
   Every phrase is present in its final resting position
   from the start. Visual state is controlled by the
   reveal modifier class(es) attached to it. */
.reveal-phrase {
  display: inline-block;
  will-change: transform, clip-path;
}

/* --- Emphasis: expression (typographic climax) --- */
.reveal-phrase--expression {
  font-family: var(--reveal-text-family-expression);
  font-size: var(--reveal-text-size-expression);
  font-weight: var(--reveal-text-weight-expression);
  letter-spacing: var(--reveal-track-expression);
}

/* ----------------------------------------------------- */
/* Scrolls 1 and 2 — scroll-driven arrival               */
/* ----------------------------------------------------- */
/* These phrases are never hidden and never faded. They  */
/* sit on their final horizontal track and are carried   */
/* upward directly by scroll progress via a live offset  */
/* written by the Reveal Scene script. Once the step     */
/* settles, the offset reaches 0 and the phrase locks    */
/* in place.                                             */
/* ----------------------------------------------------- */
.reveal-phrase--scroll-arrival {
  transform: translateY(0);
}

.reveal-phrase--scroll-arrival.reveal-phrase--step-1 {
  transform: translateY(var(--reveal-step-1-offset, 0px));
}

.reveal-phrase--scroll-arrival.reveal-phrase--step-2 {
  transform: translateY(var(--reveal-step-2-offset, 0px));
}

/* ----------------------------------------------------- */
/* Scrolls 3–7 — mask-based reveals                      */
/* ----------------------------------------------------- */
/* Initial states per reveal mode. The Reveal Scene      */
/* script adds cumulative reveal-step-N-active classes   */
/* to the scene; the matching clip-path opens.           */
/* ----------------------------------------------------- */

/* Scrolls 3, 4, 5: bottom-to-top veil lift */
.reveal-phrase--mask-up {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--reveal-mask-up-duration) var(--reveal-mask-up-ease);
}

/* Scroll 6: left-to-right mask */
.reveal-phrase--mask-left {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--reveal-mask-left-duration) var(--reveal-mask-left-ease);
}

/* Scroll 7: top-to-bottom drop for expression */
.reveal-phrase--mask-down {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--reveal-mask-down-duration) var(--reveal-mask-down-ease);
}

/* Revealed states (masked reveals only).
   Step 1 and step 2 handle their own state through the
   --offset custom properties above; they do not need
   a class-gated rule. */
.reveal-scene.reveal-step-3-active .reveal-phrase--step-3,
.reveal-scene.reveal-step-4-active .reveal-phrase--step-4,
.reveal-scene.reveal-step-5-active .reveal-phrase--step-5,
.reveal-scene.reveal-step-6-active .reveal-phrase--step-6,
.reveal-scene.reveal-step-7-active .reveal-phrase--step-7 {
  clip-path: inset(0 0 0 0);
}

/* --- Reduced motion path ---
   Show the full composition immediately without staged
   motion. The section remains readable and elegant. */
@media (prefers-reduced-motion: reduce) {
  .reveal-phrase--scroll-arrival.reveal-phrase--step-1,
  .reveal-phrase--scroll-arrival.reveal-phrase--step-2 {
    transform: none;
  }

  .reveal-phrase--mask-up,
  .reveal-phrase--mask-left,
  .reveal-phrase--mask-down {
    clip-path: none;
    transition: none;
  }
}

/* ===================================================== */
/*  5. CONTENT STYLING                                   */
/* ----------------------------------------------------- */
/*  Typography and general containers.                   */
/* ===================================================== */

/* ===================================================== */
/* TYPOGRAPHY / TEXT PROFILES                            */
/* ----------------------------------------------------- */
/* Reusable text roles for editorial content. These      */
/* classes control how text looks, not where it sits.    */
/* Use the layout system above to place content, then    */
/* use these classes to style the text inside it.        */
/* ===================================================== */

.text-chapter {
  font-family: var(--font-primary);
  font-size: var(--chapter-size);
  font-weight: var(--chapter-weight);
  letter-spacing: var(--chapter-tracking);
  text-transform: none;
  text-align: left;
  line-height: 1.2;
  margin: 0;
}

.text-heading {
  font-family: var(--font-primary);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

.text-subject {
  font-family: var(--font-primary);
  font-size: var(--subject-size);
  font-weight: var(--subject-weight);
  letter-spacing: var(--subject-tracking);
  font-variant: small-caps;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
  line-height: 1.5;
  margin: 0;
}

.text-body {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking);
  line-height: var(--body-line-height);
  text-align: justify;
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.text-list {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking);
  line-height: var(--body-line-height);
  list-style-type: decimal;
  padding-left: var(--number-indent);
  margin: 0;
}

.text-list li {
  display: list-item;
  padding-left: var(--list-marker-spacing);
}

.text-bullet {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking);
  line-height: var(--body-line-height);
  list-style: none;
  padding-left: calc(var(--list-indent) + var(--list-marker-spacing));
  margin: 0;
}

.text-bullet li {
  position: relative;
}

.text-bullet li::before {
  content: var(--bullet-char);
  position: absolute;
  left: calc(-1 * var(--list-marker-spacing));
}

/* ===================================================== */
/* GENERAL CONTAINERS                                    */
/* ----------------------------------------------------- */
/* General-width wrappers for guide pages, support       */
/* layouts, and non-spread sections. These are support   */
/* structures, not the primary editorial page system.    */
/* ===================================================== */

.container,
.container-narrow,
.container-wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-column-margin);
  padding-right: var(--site-column-margin);
}

.container {
  max-width: var(--site-column-max-width);
}

.container-narrow {
  max-width: var(--site-narrow-max-width);
}

.container-wide {
  max-width: var(--site-wide-max-width);
}

/* ===================================================== */
/*  6. UTILITIES                                         */
/* ----------------------------------------------------- */
/*  Small reusable helpers for spacing, grids, media,    */
/*  and debug overlays.                                  */
/* ===================================================== */

/* ============================== */
/* SUPPORT GRID UTILITIES         */
/* ------------------------------ */
/* These are retained as support  */
/* tools for internal modules,    */
/* guide examples, and general    */
/* non-spread composition. They   */
/* are no longer the primary page */
/* architecture for editorial     */
/* spreads.                       */
/* ============================== */

.columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-column-gap);
}

@media (min-width: 768px) {
  .columns {
    grid-template-columns: repeat(var(--site-column-count), 1fr);
  }
}

[class^="span-"],
[class*=" span-"] {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .span-1 { grid-column: span 1; }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; }
  .span-10 { grid-column: span 10; }
  .span-11 { grid-column: span 11; }
  .span-12 { grid-column: span min(12, var(--site-column-count)); }

  .span-full { grid-column: 1 / -1; }
  .span-half { grid-column: span var(--span-half); }
  .span-quarter { grid-column: span var(--span-quarter); }
  .span-three-quarters { grid-column: span var(--span-three-quarters); }
}

/* ============================== */
/* VERTICAL STACK UTILITIES       */
/* ------------------------------ */
/* These control vertical rhythm  */
/* without relying on ad hoc      */
/* margins between children.      */
/* ============================== */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.stack-xl {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ============================== */
/* TEXT UTILITIES                 */
/* ------------------------------ */
/* Small text-related helpers.    */
/* Use these for simple width or  */
/* measure control, not for text  */
/* styling roles.                 */
/* ============================== */

.text-block {
  max-width: 65ch;
}

/* ============================== */
/* GENERAL MEDIA HELPER UTILITIES */
/* ------------------------------ */
/* These are reusable media       */
/* utilities for non-spread use   */
/* and internal modules.          */
/* ============================== */

.media-block {
  position: relative;
  overflow: hidden;
}

.media-block img,
.media-block video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.media-block-aspect {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.media-block-aspect img,
.media-block-aspect video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-block-square {
  aspect-ratio: 1 / 1;
}

.media-block-portrait {
  aspect-ratio: 3 / 4;
}

/* ============================== */
/* DEBUG OVERLAY UTILITIES        */
/* ------------------------------ */
/* Global inspection tools for a  */
/* fixed 1440 construction frame. */
/* These are visual only and do   */
/* not affect layout.             */
/* ============================== */

body.debug-grid::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--debug-overlay-z);
  background-image:
    linear-gradient(to right, var(--debug-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--debug-grid-color) 1px, transparent 1px);
  background-size: var(--debug-grid-size) var(--debug-grid-size);
  /* Anchor vertical grid lines to the 1440 frame's left edge. */
  background-position:
    calc(var(--debug-frame-left) + (var(--debug-grid-size) / 2)) 0,
    0 0;
}

body.debug-guides-white {
  --debug-grid-color: rgba(255, 255, 255, 0.24);
  --debug-spread-guide-line-color: rgba(255, 255, 255, 0.72);
  --debug-spread-guide-soft-line-color: rgba(255, 255, 255, 0.46);
  --debug-spread-guide-strong-line-color: rgba(255, 255, 255, 0.68);
  --debug-spread-guide-left-text-color: var(--debug-spread-guide-soft-line-color);
  --debug-spread-guide-right-text-color: var(--debug-spread-guide-soft-line-color);
}

body.debug-columns::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--debug-frame-left) + var(--debug-column-field-offset));
  width: var(--debug-column-field-width);
  pointer-events: none;
  z-index: var(--debug-overlay-z);
  background: repeating-linear-gradient(
    to right,
    var(--debug-column-color),
    var(--debug-column-color) var(--debug-column-width),
    transparent var(--debug-column-width),
    transparent calc(var(--debug-column-width) + var(--debug-column-gap))
  );
}

html.debug-margins::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--debug-frame-left);
  width: var(--debug-frame-width);
  pointer-events: none;
  z-index: var(--debug-overlay-z);
  background-image: linear-gradient(
    to right,
    var(--debug-margin-color) 0 var(--debug-margin-accent-width),
    var(--debug-column-color) var(--debug-margin-accent-width) var(--debug-margin-width),
    transparent var(--debug-margin-width) calc(100% - var(--debug-margin-width)),
    var(--debug-column-color) calc(100% - var(--debug-margin-width)) calc(100% - var(--debug-margin-accent-width)),
    var(--debug-margin-color) calc(100% - var(--debug-margin-accent-width)) 100%
  );
}

html.debug-book-margins::after,
body.debug-book-margins::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--debug-frame-left);
  width: var(--debug-frame-width);
  pointer-events: none;
  z-index: var(--debug-overlay-z);
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--debug-book-margin-offset),
    var(--debug-book-margin-color) var(--debug-book-margin-offset),
    var(--debug-book-margin-color) calc(var(--debug-book-margin-offset) + var(--debug-book-margin-width)),
    transparent calc(var(--debug-book-margin-offset) + var(--debug-book-margin-width)),
    transparent calc(100% - (var(--debug-book-margin-offset) + var(--debug-book-margin-width))),
    var(--debug-book-margin-color) calc(100% - (var(--debug-book-margin-offset) + var(--debug-book-margin-width))),
    var(--debug-book-margin-color) calc(100% - var(--debug-book-margin-offset)),
    transparent calc(100% - var(--debug-book-margin-offset)),
    transparent 100%
  );
}

/* ============================== */
/* DEBUG SPREAD GUIDE OVERLAY     */
/* ------------------------------ */
/* Internal drafting overlay for  */
/* the book-spread layout system. */
/* It is visual only and does not */
/* affect layout or interaction.  */
/* ============================== */

.debug-spread-guide {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--debug-spread-guide-z);
}

.debug-spread-guide__spread,
.debug-spread-guide__text,
.debug-spread-guide__line {
  position: absolute;
  box-sizing: border-box;
}

.debug-spread-guide__spread {
  top: var(--debug-spread-guide-top);
  left: var(--debug-spread-guide-left);
  width: var(--debug-spread-guide-width);
  height: var(--debug-spread-guide-height);
  border: var(--debug-spread-guide-line-width) solid var(--debug-spread-guide-line-color);
}

.debug-spread-guide__text {
  top: var(--debug-spread-guide-text-top);
  width: var(--debug-spread-guide-text-width);
  height: var(--debug-spread-guide-text-height);
  border: var(--debug-spread-guide-line-width) dashed var(--debug-spread-guide-soft-line-color);
}

.debug-spread-guide__text--left {
  left: var(--debug-spread-guide-left-text-left);
  border-color: var(--debug-spread-guide-left-text-color);
}

.debug-spread-guide__text--right {
  left: var(--debug-spread-guide-right-text-left);
  border-color: var(--debug-spread-guide-right-text-color);
}

.debug-spread-guide__line {
  background: var(--debug-spread-guide-strong-line-color);
}

.debug-spread-guide__line--center {
  top: var(--debug-spread-guide-top);
  left: calc(var(--debug-spread-guide-center-left) - (var(--debug-spread-guide-line-width) / 2));
  width: var(--debug-spread-guide-line-width);
  height: var(--debug-spread-guide-height);
}

.debug-spread-guide__line--middle {
  top: calc(var(--debug-spread-guide-middle-top) - (var(--debug-spread-guide-line-width) / 2));
  left: var(--debug-spread-guide-middle-line-left);
  width: var(--debug-spread-guide-middle-line-width);
  height: var(--debug-spread-guide-line-width);
}

/* ===================================================== */
/*  7. BREAKPOINTS | TOKEN OVERRIDES                     */
/* ----------------------------------------------------- */
/* Defines responsive breakpoints and updates token      */
/* values across screen sizes. This is where spacing,    */
/* spread dimensions, and insets adapt without rewriting */
/* the main rule blocks above.                           */
/* ===================================================== */

/* ===================================================== */
/* BREAKPOINT OVERLAY TOKEN BANDS                        */
/* ----------------------------------------------------- */
/* Desktop keeps the 1440 drafting overlay. Smaller      */
/* bands override ONLY debug and support-grid tokens so  */
/* overlays remain honest at each breakpoint without     */
/* changing the page layout system itself.               */
/*                                                       */
/* These are provisional construction frames. The column */
/* math can be tuned later without touching component or */
/* page rules.                                           */
/* ===================================================== */

/* ============================== */
/* NARROW DESKTOP: 1100–1300     */
/* ------------------------------ */
@media (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --site-column-count: 8;
    --site-column-gap: 16px;
    --site-column-margin: 40px;

    /* Debug overlays: provisional breakpoint frame. */
    --debug-frame-width: min(1100px, calc(100vw - 48px));
    --debug-frame-left: calc(50% - (var(--debug-frame-width) / 2));
    --debug-column-count: 8;
    --debug-column-width: 112px;
    --debug-column-gap: 16px;
    --debug-margin-width: 40px;
    --debug-margin-accent-width: 24px;
    --debug-empty-spacer-width: 0px;
    --debug-book-margin-width: 0px;
    --debug-spread-guide-width: var(--spread-max-width);
    --debug-spread-guide-height: var(--spread-height);
    --debug-spread-guide-text-inset-top: calc(var(--debug-spread-guide-height) * 0.134);
    --debug-spread-guide-text-inset-bottom: calc(var(--debug-spread-guide-height) * 0.1856);
    --debug-spread-guide-text-inset-outer: calc(var(--debug-spread-guide-width) * 0.0667);
    --debug-spread-guide-text-inset-gutter: calc(var(--debug-spread-guide-width) * 0.12);
  }
}

/* ============================== */
/* TABLET LANDSCAPE: 900–1099    */
/* ------------------------------ */
@media (min-width: 900px) and (max-width: 1099px) {
  :root {
    --site-column-count: 8;
    --site-column-gap: 16px;
    --site-column-margin: 32px;

    /* Debug overlays: provisional breakpoint frame. */
    --debug-frame-width: min(900px, calc(100vw - 48px));
    --debug-frame-left: calc(50% - (var(--debug-frame-width) / 2));
    --debug-column-count: 8;
    --debug-column-width: 88px;
    --debug-column-gap: 16px;
    --debug-margin-width: 32px;
    --debug-margin-accent-width: 16px;
    --debug-empty-spacer-width: 0px;
    --debug-book-margin-width: 0px;
    --debug-spread-guide-width: min(
      1200px,
      calc(100vw - 48px),
      calc((100dvh - var(--header-clearance) - var(--spread-viewport-clearance)) * var(--spread-width-from-height-ratio))
    );
    --debug-spread-guide-height: calc(var(--debug-spread-guide-width) * var(--spread-aspect-ratio));
    --debug-spread-guide-text-inset-top: calc(var(--debug-spread-guide-height) * 0.134);
    --debug-spread-guide-text-inset-bottom: calc(var(--debug-spread-guide-height) * 0.1856);
    --debug-spread-guide-text-inset-outer: calc(var(--debug-spread-guide-width) * 0.0667);
    --debug-spread-guide-text-inset-gutter: calc(var(--debug-spread-guide-width) * 0.12);
  }
}

/* ============================== */
/* TABLET PORTRAIT: 768–899      */
/* ------------------------------ */
@media (min-width: 768px) and (max-width: 899px) {
  :root {
    --site-column-count: 6;
    --site-column-gap: 16px;
    --site-column-margin: 32px;

    /* Debug overlays: provisional breakpoint frame. */
    --debug-frame-width: min(768px, calc(100vw - 48px));
    --debug-frame-left: calc(50% - (var(--debug-frame-width) / 2));
    --debug-column-count: 6;
    --debug-column-width: 96px;
    --debug-column-gap: 16px;
    --debug-margin-width: 56px;
    --debug-margin-accent-width: 24px;
    --debug-empty-spacer-width: 0px;
    --debug-book-margin-width: 0px;
    --debug-spread-guide-width: min(
      1200px,
      calc(100vw - 48px),
      calc((100dvh - var(--header-clearance) - var(--spread-viewport-clearance)) * var(--spread-width-from-height-ratio))
    );
    --debug-spread-guide-height: calc(var(--debug-spread-guide-width) * var(--spread-aspect-ratio));
    --debug-spread-guide-text-inset-top: calc(var(--debug-spread-guide-height) * 0.134);
    --debug-spread-guide-text-inset-bottom: calc(var(--debug-spread-guide-height) * 0.1856);
    --debug-spread-guide-text-inset-outer: calc(var(--debug-spread-guide-width) * 0.0667);
    --debug-spread-guide-text-inset-gutter: calc(var(--debug-spread-guide-width) * 0.12);
  }
}

/* ============================== */
/* PHONE: 481–767                 */
/* ------------------------------ */
@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --site-column-count: 4;
    --site-column-gap: 16px;
    --site-column-margin: 24px;

    /* Debug overlays: provisional breakpoint frame. */
    --debug-frame-width: min(480px, calc(100vw - 32px));
    --debug-frame-left: calc(50% - (var(--debug-frame-width) / 2));
    --debug-column-count: 4;
    --debug-column-width: 96px;
    --debug-column-gap: 16px;
    --debug-margin-width: 24px;
    --debug-margin-accent-width: 8px;
    --debug-empty-spacer-width: 0px;
    --debug-book-margin-width: 0px;
    --debug-spread-guide-width: min(
      600px,
      calc(100vw - 32px),
      calc((100dvh - var(--header-clearance) - var(--spread-viewport-clearance)) * 0.7732)
    );
    --debug-spread-guide-height: calc(var(--debug-spread-guide-width) * 1.2933);
  }
}

/* ============================== */
/* SMALL PHONE: 0–480             */
/* ------------------------------ */
@media (max-width: 480px) {
  :root {
    --site-column-count: 4;
    --site-column-gap: 12px;
    --site-column-margin: 16px;

    /* Debug overlays: provisional primary-mobile frame. */
    --debug-frame-width: min(390px, 100vw);
    --debug-frame-left: calc(50% - (var(--debug-frame-width) / 2));
    --debug-column-count: 4;
    --debug-column-width: 80px;
    --debug-column-gap: 12px;
    --debug-margin-width: 16px;
    --debug-margin-accent-width: 8px;
    --debug-empty-spacer-width: 0px;
    --debug-book-margin-width: 0px;
    --debug-spread-guide-width: min(
      600px,
      calc(100vw - 32px),
      calc((100dvh - var(--header-clearance) - var(--spread-viewport-clearance)) * 0.7732)
    );
    --debug-spread-guide-height: calc(var(--debug-spread-guide-width) * 1.2933);
  }
}

/* ============================== */
/* PORTRAIT SINGLE-PAGE SPREAD GUIDE */
/* ------------------------------ */
/* Square/tall and phone overlays show one scaled page:  */
/* one half of the original 1200x776 spread. Both the    */
/* left-page and right-page text-safe boxes are drawn on */
/* that single page in different colors for comparison.  */
/* ------------------------------ */
@media (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  :root {
    --debug-spread-guide-top: calc(var(--header-clearance) + var(--spread-viewport-clearance));
    --debug-spread-guide-width: min(
      600px,
      calc(100vw - 32px),
      calc((100dvh - var(--header-clearance) - (var(--spread-viewport-clearance) * 2)) * 0.7732)
    );
    --debug-spread-guide-height: calc(var(--debug-spread-guide-width) * 1.2933);
    --debug-spread-guide-left: calc(50% - (var(--debug-spread-guide-width) / 2));

    /* Original single-page ratios:
       top 104 / 776, bottom 144 / 776,
       outer 80 / 600, gutter 144 / 600. */
    --debug-spread-guide-text-inset-top: calc(var(--debug-spread-guide-height) * 0.134);
    --debug-spread-guide-text-inset-bottom: calc(var(--debug-spread-guide-height) * 0.1856);
    --debug-spread-guide-text-inset-outer: calc(var(--debug-spread-guide-width) * 0.1333);
    --debug-spread-guide-text-inset-gutter: calc(var(--debug-spread-guide-width) * 0.24);

    --debug-spread-guide-text-width: calc(var(--debug-spread-guide-width) - var(--debug-spread-guide-text-inset-outer) - var(--debug-spread-guide-text-inset-gutter));
    --debug-spread-guide-text-height: calc(var(--debug-spread-guide-height) - var(--debug-spread-guide-text-inset-top) - var(--debug-spread-guide-text-inset-bottom));
    --debug-spread-guide-left-text-left: calc(var(--debug-spread-guide-left) + var(--debug-spread-guide-text-inset-outer));
    --debug-spread-guide-right-text-left: calc(var(--debug-spread-guide-left) + var(--debug-spread-guide-text-inset-gutter));
    --debug-spread-guide-text-top: calc(var(--debug-spread-guide-top) + var(--debug-spread-guide-text-inset-top));
    --debug-spread-guide-center-left: calc(var(--debug-spread-guide-left) + (var(--debug-spread-guide-width) / 2));
    --debug-spread-guide-middle-top: calc(var(--debug-spread-guide-top) + (var(--debug-spread-guide-height) / 2));
    --debug-spread-guide-middle-line-left: var(--debug-spread-guide-left);
    --debug-spread-guide-middle-line-width: var(--debug-spread-guide-width);

    --debug-spread-guide-left-text-color: rgba(0, 102, 255, 0.62);
    --debug-spread-guide-right-text-color: rgba(255, 0, 120, 0.62);
  }
}

/* ===================================================== */
/* SPEC-ALIGNED RESPONSIVE BANDS                         */
/* ----------------------------------------------------- */
/* These bands sit below the debug overlay token bands   */
/* on purpose. They only override global tokens that     */
/* belong to the shared system: header, spread, footer,  */
/* and other site-level values. Page-level overrides     */
/* live in css/pages/*.                                  */
/*                                                       */
/* Current responsive states:                            */
/*   1. Desktop source          : 1301+ normal height    */
/*   2. Short-height desktop    : 1301+ / max-height 895 */
/*   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                  */
/*                                                       */
/* Desktop at 1301px+ keeps the 1440 design canvas unless*/
/* the viewport is shorter than the original 896px field.*/
/* In that short-height case only, the spread scales down*/
/* so the full image/text field still fits on screen.    */
/* ===================================================== */

/* ============================== */
/* SHORT-HEIGHT DESKTOP           */
/* 1301+ width, under 896 height  */
/* ------------------------------ */
/* Preserves the 1440 layout at the original 1440x896    */
/* canvas, but prevents the intro image from being cut   */
/* off when a desktop-width browser is not tall enough.  */
/* ============================== */
@media (min-width: 1301px) and (max-height: 895px) {
  :root {
    --spread-max-width: min(
      1200px,
      calc(100vw - 48px),
      calc((100dvh - var(--header-clearance) - var(--spread-viewport-clearance)) * var(--spread-width-from-height-ratio))
    );
    --spread-height: calc(var(--spread-max-width) * var(--spread-aspect-ratio));
    --page-text-inset-top: calc(var(--spread-height) * 0.134);
    --page-text-inset-bottom: calc(var(--spread-height) * 0.1856);
    --page-text-inset-outer: calc(var(--spread-max-width) * 0.0667);
    --page-text-inset-gutter: calc(var(--spread-max-width) * 0.12);
  }
}

/* ============================== */
/* NARROW DESKTOP / LAPTOP        */
/* 1100–1300                      */
/* ------------------------------ */
/* Keeps the editorial spread side-by-side and the       */
/* sticky scenes intact. Reduces the spread to a width   */
/* that fits common laptop viewports (1280, 1200, 1100). */
/* The lower bound is 1100 (not 1101) so the spread      */
/* activation threshold above and the token band line up */
/* exactly at the same pixel.                            */
/* ============================== */
@media (min-width: 1100px) and (max-width: 1300px) {
  :root {
    /* Spread shrinks as a true 1200x776 scale model. The width
       is constrained by BOTH viewport width and available viewport
       height below the fixed header, so the full two-page spread
       fits before the layout reaches the stacked breakpoint.
       The section already starts below the fixed header/logo field;
       the 16px clearance protects the bottom of the viewport. */
    --spread-max-width: min(
      1200px,
      calc(100vw - 48px),
      calc((100dvh - var(--header-clearance) - var(--spread-viewport-clearance)) * var(--spread-width-from-height-ratio))
    );
    --spread-height: calc(var(--spread-max-width) * var(--spread-aspect-ratio));
    --page-text-inset-top: calc(var(--spread-height) * 0.134);
    --page-text-inset-bottom: calc(var(--spread-height) * 0.1856);
    --page-text-inset-outer: calc(var(--spread-max-width) * 0.0667);
    --page-text-inset-gutter: calc(var(--spread-max-width) * 0.12);
  }
}

/* ============================== */
/* TABLET LANDSCAPE / SMALL LAPTOP*/
/* 900–1099                       */
/* ------------------------------ */
/* The shared spread system stacks here by default, but  */
/* page CSS may opt a specific spread back into a scaled */
/* two-page layout. Header padding tightens a touch so   */
/* the menu button does not crowd the edges.             */
/* ============================== */
@media (min-width: 900px) and (max-width: 1099px) {
  :root {
    --header-padding-x: 28px;
  }
}

/* ============================== */
/* TABLET PORTRAIT                */
/* 768–899                        */
/* ------------------------------ */
/* Shared spreads stack here by default; page CSS may    */
/* provide a more specific scaled or stacked composition.*/
/* Header keeps the desktop logo height while trimming   */
/* the line gap so the lines do not sit awkwardly far    */
/* from the wordmark.                                    */
/* ============================== */
@media (min-width: 768px) and (max-width: 899px) {
  :root {
    --header-padding-x: 24px;
    --header-logo-line-gap: 150px;
  }
}

/* ============================== */
/* PHONE                          */
/* 481–767                        */
/* ------------------------------ */
/* Reduce the logo line-gap so the wordmark does not     */
/* visually collide with the menu button. The menu icon  */
/* scales with the wordmark so the header stays balanced.*/
/* ============================== */
@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --header-padding-x: 24px;
    --header-logo-height: 48px;
    --header-logo-line-gap: 130px;
    --header-menu-scale: 0.8571429;
    --logo-optical-offset-x: -9px; /* -10.5 × (48/56) — scales with logo height */
    --menu-router-page-width: min(600px, calc(100vw - 48px)); /* matches portrait content margin (24px per side) */
  }
}

/* ============================== */
/* SMALL PHONE (primary target)   */
/* 0–480                          */
/* ------------------------------ */
/* Primary mobile design target is 390px. Logo height    */
/* and line gap drop one more step so a wordmark + menu  */
/* button still sit comfortably together.                */
/* ============================== */
@media (max-width: 480px) {
  :root {
    --header-padding-x: 20px;
    --header-logo-height: 40px;
    --header-logo-line-gap: 110px;
    --header-menu-scale: 0.7142857;
    --logo-optical-offset-x: -7.5px; /* -10.5 × (40/56) — scales with logo height */
    --menu-router-page-width: min(600px, calc(100vw - 48px)); /* matches portrait content margin (24px per side) */
  }
}