@font-face {
  font-family: "SUIT Variable";
  src: url("assets/fonts/SUIT-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --black: #11100f;
  --black-rgb: 17, 16, 15;
  --ink: #171614;
  --paper: #f2efe7;
  --warm-gray: #dcdbd5;
  --white: #fcfbf8;
  --white-rgb: 252, 251, 248;
  --muted: #55524d;
  --red: #d72f24;
  --accent-bright: #f14a3e;
  --chrome-muted: #aaa7a0;
  --chrome-subtle: #9c9993;
  --chrome-border: #55524d;
  --focus-dark: #741812;
  --focus-light: #fcfbf8;
  --line-dark: rgba(255, 255, 255, 0.2);
  --line-light: rgba(17, 16, 15, 0.2);
  --header-height: 72px;
  --desktop-reading-clearance: calc(var(--chapter-player-height) + 104px);
  --page-gutter: clamp(22px, 4.8vw, 76px);
  --content-width: 1360px;
  --reading-width: 720px;
  /* Line length for running Korean copy. Tuned by measuring rendered
     characters per line, not by picking a round pixel value. */
  --measure-body: 470px;
  /* Display type needs a wider column than running copy: at the callout's size
     the body measure leaves about twelve characters a line, which shreds a
     statement into ragged fragments. */
  --measure-callout: 820px;
  --measure-note: 290px;
  --display-font: "SUIT Variable", "SUIT", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --body-font: "SUIT Variable", "SUIT", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

:root[data-color-theme="night-transit"] {
  --black: #0f1824;
  --black-rgb: 15, 24, 36;
  --ink: #16202a;
  --paper: #f1eadc;
  --warm-gray: #d3d0c8;
  --white: #fffaf0;
  --white-rgb: 255, 250, 240;
  --muted: #4b5862;
  --red: #9b4a18;
  --accent-bright: #f3a84b;
  --chrome-muted: #b8c3cf;
  --chrome-subtle: #99a7b5;
  --chrome-border: #606e7e;
  --focus-dark: #693210;
  --focus-light: #fffaf0;
  --line-dark: rgba(255, 250, 240, 0.24);
  --line-light: rgba(15, 24, 36, 0.24);
}

:root[data-color-theme="platform-jade"] {
  --black: #101d1b;
  --black-rgb: 16, 29, 27;
  --ink: #162722;
  --paper: #e8f0e9;
  --warm-gray: #cad7ce;
  --white: #f8fcf8;
  --white-rgb: 248, 252, 248;
  --muted: #485a53;
  --red: #2f6b53;
  --accent-bright: #79c39f;
  --chrome-muted: #b4c9bf;
  --chrome-subtle: #94aea2;
  --chrome-border: #5d796d;
  --focus-dark: #204b3a;
  --focus-light: #f8fcf8;
  --line-dark: rgba(248, 252, 248, 0.24);
  --line-light: rgba(16, 29, 27, 0.24);
}

:root[data-color-theme="terminal-plum"] {
  --black: #20121f;
  --black-rgb: 32, 18, 31;
  --ink: #2a1827;
  --paper: #f4eaf1;
  --warm-gray: #dcced8;
  --white: #fff8fc;
  --white-rgb: 255, 248, 252;
  --muted: #5d4d59;
  --red: #88446f;
  --accent-bright: #db8fbc;
  --chrome-muted: #cfb9ca;
  --chrome-subtle: #b39bad;
  --chrome-border: #7c6376;
  --focus-dark: #5d2e4c;
  --focus-light: #fff8fc;
  --line-dark: rgba(255, 248, 252, 0.24);
  --line-light: rgba(32, 18, 31, 0.24);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--header-height) + 18px);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 18px;
  font-synthesis: none;
  letter-spacing: -0.008em;
  line-height: 1.72;
  overflow-wrap: break-word;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

button,
input,
summary {
  font: inherit;
}

button,
input {
  border-radius: 0;
}

button,
summary {
  color: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--red);
  color: var(--white);
}

:focus-visible {
  outline: 3px solid var(--focus-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--focus-light);
}

.skip-link {
  position: fixed;
  z-index: 1200;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-170%);
  background: var(--white);
  color: var(--black);
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-progress {
  position: fixed;
  z-index: 1100;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: rgba(var(--white-rgb), 0.12);
}

.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--red);
}

.site-header {
  position: fixed;
  z-index: 1000;
  top: 3px;
  right: 0;
  left: 0;
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 10px var(--page-gutter);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(var(--black-rgb), 0.97);
  color: var(--white);
}

.wordmark {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.wordmark-day {
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 1;
}

.wordmark-company {
  padding-left: 12px;
  border-left: 1px solid rgba(var(--white-rgb), 0.42);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

.quick-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 30px);
  font-size: 13px;
  font-weight: 750;
}

.quick-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 4px;
  text-decoration: none;
}

.quick-nav .quick-apply {
  padding-inline: 18px;
  background: var(--red);
  color: var(--white);
}

.header-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}

/* Lives inside the header rather than floating over the page, so it can never
   land on top of a chapter kicker the way a fixed overlay did. */
.theme-switcher {
  position: relative;
  width: min(196px, 34vw);
  border: 1px solid var(--line-dark);
  background: var(--black);
  color: var(--white);
}

.theme-switcher .theme-options {
  position: absolute;
  z-index: 980;
  top: calc(100% + 1px);
  right: -1px;
  left: -1px;
  max-height: calc(100vh - var(--header-height) - 28px);
  overflow: auto;
  border: 1px solid var(--line-dark);
  background: var(--black);
}

.theme-switcher-toggle {
  display: grid;
  min-height: 44px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}

.theme-switcher-toggle::-webkit-details-marker {
  display: none;
}

.theme-switcher-toggle::marker {
  content: "";
}

.theme-switcher-label {
  color: var(--chrome-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.theme-switcher-toggle strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-options {
  display: grid;
  border-top: 1px solid var(--line-dark);
}

.theme-options button {
  display: grid;
  min-height: 44px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
  text-align: left;
}

.theme-options button:last-child {
  border-bottom: 0;
}

.theme-options button[aria-pressed="true"] {
  background: var(--white);
  color: var(--black);
  font-weight: 880;
}

.theme-swatch {
  width: 30px;
  height: 22px;
  border: 5px solid var(--swatch-dark);
  background: var(--swatch-paper);
  box-shadow: inset -7px 0 var(--swatch-accent);
}

button[data-color-theme="signal-track"] .theme-swatch {
  --swatch-dark: #11100f;
  --swatch-paper: #f2efe7;
  --swatch-accent: #d72f24;
}

button[data-color-theme="night-transit"] .theme-swatch {
  --swatch-dark: #0f1824;
  --swatch-paper: #f1eadc;
  --swatch-accent: #9b4a18;
}

button[data-color-theme="platform-jade"] .theme-swatch {
  --swatch-dark: #101d1b;
  --swatch-paper: #e8f0e9;
  --swatch-accent: #2f6b53;
}

button[data-color-theme="terminal-plum"] .theme-swatch {
  --swatch-dark: #20121f;
  --swatch-paper: #f4eaf1;
  --swatch-accent: #88446f;
}

.reading-compass {
  position: fixed;
  z-index: 900;
  top: 50%;
  right: 18px;
  width: 210px;
  transform: translateY(-50%);
  border: 1px solid rgba(var(--white-rgb), 0.28);
  background: rgba(var(--black-rgb), 0.96);
  color: var(--white);
}

.compass-toggle {
  display: grid;
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-dark);
  cursor: pointer;
  list-style: none;
}

.compass-toggle::-webkit-details-marker,
.job-toggle::-webkit-details-marker {
  display: none;
}

.compass-toggle::marker,
.job-toggle::marker {
  content: "";
}

.compass-toggle-label {
  grid-column: 1 / -1;
  color: var(--chrome-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.compass-current {
  overflow: hidden;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compass-percent {
  font-family: var(--display-font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.compass-panel {
  padding-block: 8px;
}

.compass-panel a {
  display: grid;
  min-height: 32px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  color: var(--chrome-subtle);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.compass-panel a span:first-child {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--chrome-border);
  font-family: var(--display-font);
  font-size: 9px;
}

.compass-panel a[aria-current="location"] {
  color: var(--white);
}

.compass-panel a[aria-current="location"] span:first-child {
  border-color: var(--red);
  background: var(--red);
}

.story-chapter,
.single-chapter,
.roles-explorer {
  scroll-margin-top: var(--header-height);
}

/* The Invitation and Application pages hold one chapter each, read straight
   down the document — no rail, no player. */
.single-chapter {
  display: block;
  min-height: calc(100svh - var(--header-height));
}

.chapter-onward {
  display: flex;
  max-width: var(--reading-width);
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(56px, 8vw, 104px) 0 0;
}

/* Sits outside the rail on the page's own dark ground, so it cannot inherit
   the ink colour the chapters use on light backgrounds. */
.chapter-onward--story {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding: 0 var(--page-gutter) clamp(72px, 9vw, 128px);
  color: var(--white);
}

/* The rail already fills one screen, so everything after it is gathered into a
   second screen of the same height and the document is given those two as its
   only snap positions. The page can no longer rest with the rail sliced in half
   above bare ground, because there is no resting place in between.
   Below 901px the story is a vertical scene deck, so this simply flows. */
@media screen and (min-width: 901px) {
  html:has(.story-closing) {
    scroll-snap-type: y mandatory;
    /* The global scroll-padding clears the fixed header for anchor jumps. Here
       it would offset the snap positions by that much and leave a sliver of the
       rail showing above the closing screen — the exact strip we are removing.
       This page has no in-document anchors on desktop; the rail owns them. */
    scroll-padding-top: 0;
  }

  .story-stage,
  .story-closing {
    scroll-snap-align: start;
  }

  .story-closing {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    background: var(--black);
  }

  /* The screen boundary already separates it from the rail, and the actions sit
     on the optical centre of the space the footer leaves. */
  .story-closing .chapter-onward--story {
    flex: 1;
    align-content: center;
    margin-top: 0;
    padding-bottom: 0;
  }

  /* The closing screen asks for the same two things the phone's last scene
     does, so it asks at the same weight. */
  .story-closing .chapter-onward--story a {
    min-height: 64px;
    padding: 0 30px;
    font-size: 16px;
  }

  .story-closing .chapter-onward--story a:first-of-type {
    border-color: var(--red);
    background: var(--red);
  }

  /* A closing rule in the page's own red, so the last screen reads as an ending
     rather than as room left over below the rail. */
  .story-closing .chapter-onward--story::before {
    flex: 0 0 100%;
    height: 2px;
    margin-bottom: 22px;
    background: linear-gradient(var(--red), var(--red)) left center / 320px 2px no-repeat;
    content: "";
  }
}

.chapter-onward a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid currentColor;
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.chapter-onward a:hover,
.chapter-onward a:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.chapter-onward-icon {
  font-size: 14px;
  line-height: 1;
}

.chapter-frame {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding: clamp(140px, 13vw, 210px) var(--page-gutter);
}

.chapter-kicker,
.mode-label {
  display: flex;
  max-width: var(--reading-width);
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(52px, 7vw, 92px);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

/* One span carrying the English subtitle; the box that used to hold a single
   A–J letter now sizes to the whole label. */
.chapter-kicker span,
.mode-label span {
  display: inline-block;
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid currentColor;
  font-family: var(--display-font);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

.source-block {
  max-width: var(--reading-width);
}

.source-paragraph {
  margin: 0 0 1.65em;
  color: inherit;
  font-size: clamp(17px, 1.25vw, 19px);
  letter-spacing: -0.014em;
  line-height: 1.82;
}

.source-title,
.scene-title,
.subscene-title,
.key-line,
.source-quote,
.role-group-title,
.job-title,
.roles-intro h2 {
  font-family: var(--display-font);
  overflow-wrap: normal;
  word-break: keep-all;
}

.source-title {
  max-width: 1080px;
  margin: 0 0 clamp(72px, 10vw, 140px);
  font-size: clamp(60px, 9.5vw, 138px);
  font-weight: 950;
  letter-spacing: -0.072em;
  line-height: 0.92;
  text-wrap: balance;
}

.scene-title {
  max-width: 1060px;
  margin: 0 0 clamp(64px, 8vw, 112px);
  font-size: clamp(46px, 6.2vw, 88px);
  font-weight: 920;
  letter-spacing: -0.058em;
  line-height: 1.02;
  text-wrap: balance;
}

.scene-title--secondary {
  margin-top: clamp(130px, 16vw, 220px);
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1.08;
}

.subscene-title {
  max-width: 860px;
  margin: 4em 0 1.25em;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 880;
  letter-spacing: -0.045em;
  line-height: 1.15;
  text-wrap: balance;
}

.key-line,
.source-quote {
  max-width: 980px;
  margin: clamp(84px, 11vw, 150px) 0;
  font-size: clamp(30px, 4.5vw, 58px);
  font-weight: 870;
  letter-spacing: -0.047em;
  line-height: 1.18;
  text-wrap: balance;
}

.source-quote {
  padding: 0;
  border: 0;
}

.source-list {
  max-width: var(--reading-width);
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
}

.source-list li {
  position: relative;
  margin-bottom: 0.82em;
  padding-left: 22px;
}

.source-list li::before {
  position: absolute;
  top: 0.83em;
  left: 0;
  width: 8px;
  height: 1px;
  background: currentColor;
  content: "";
}

.source-heading-small {
  max-width: var(--reading-width);
  margin: 3em 0 0.9em;
  font-size: 18px;
  font-weight: 850;
}

.chapter--opening {
  background: var(--black);
  color: var(--white);
}

.chapter--opening .chapter-frame {
  display: flex;
  min-height: max(100svh, 820px);
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-height) + 90px);
  padding-bottom: 110px;
}

.chapter--opening .chapter-kicker {
  color: var(--chrome-muted);
}

.chapter--opening .source-title {
  margin-bottom: clamp(86px, 12vw, 170px);
}

.chapter--opening .key-line {
  margin-left: auto;
  padding-top: 28px;
  border-top: 4px solid var(--red);
  color: var(--accent-bright);
  font-size: clamp(32px, 4.2vw, 58px);
}

.chapter--opening .source-paragraph:not(.key-line) {
  margin-left: auto;
}

.chapter--origin {
  background: var(--paper);
  color: var(--ink);
}

.chapter--origin .chapter-copy {
  padding-left: clamp(0px, 10vw, 150px);
}

.chapter--origin .scene-title {
  margin-left: clamp(-150px, -10vw, 0px);
}

.chapter--origin .source-paragraph:nth-of-type(1) {
  max-width: 590px;
}

.chapter--origin .source-paragraph:nth-of-type(2),
.chapter--origin .source-paragraph:nth-of-type(3) {
  max-width: 640px;
}

.chapter--origin .source-paragraph:nth-of-type(n + 4) {
  max-width: 720px;
}

.chapter--origin .key-line {
  margin-left: clamp(-150px, -10vw, 0px);
  padding-left: clamp(22px, 4vw, 60px);
  border-left: 6px solid var(--black);
}

.chapter--shift {
  background: var(--black);
  color: var(--white);
}

.chapter--shift .chapter-kicker {
  color: var(--chrome-muted);
}

.chapter--shift .scene-title {
  max-width: 1120px;
}

.chapter--shift .source-paragraph {
  margin-left: auto;
}

.chapter--shift .source-quote {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(42px, 6vw, 76px) 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  text-align: center;
}

.chapter--translation {
  background: var(--white);
  color: var(--ink);
}

.chapter--translation .source-paragraph:nth-of-type(odd) {
  margin-left: 0;
}

.chapter--translation .source-paragraph:nth-of-type(even) {
  margin-left: clamp(60px, 24vw, 340px);
}

.chapter--translation .key-line {
  max-width: 1040px;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(38px, 6vw, 76px);
  border: 1px solid var(--black);
  background: var(--paper);
}

.chapter--bet {
  background: var(--black);
  color: var(--white);
}

.chapter--bet .chapter-kicker {
  color: var(--chrome-muted);
}

.chapter--bet > .chapter-frame > .chapter-copy > .scene-title:first-child {
  color: var(--accent-bright);
}

.chapter--bet .scene-title--secondary {
  padding-top: clamp(90px, 11vw, 150px);
  border-top: 1px solid var(--line-dark);
}

.chapter--bet .source-paragraph {
  margin-left: clamp(0px, 17vw, 250px);
}

/* A five-step sequence, not a sentence: the arrows get room so each stage
   reads as its own beat. */
.chapter--bet .value-chain {
  max-width: 1160px;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(40px, 6vw, 78px);
  border: 5px solid var(--red);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.55;
  text-align: center;
  word-spacing: 0.34em;
}

/* Submission details are scanned, not read: label and value on one rhythm. */
.apply-fact {
  max-width: var(--measure-body);
  margin-bottom: 0.6em;
  padding-left: 18px;
  border-left: 2px solid var(--red);
  font-weight: 560;
}

.chapter--truth {
  background: var(--warm-gray);
  color: var(--ink);
}

.chapter--truth .scene-title--secondary {
  max-width: 980px;
  padding-top: clamp(64px, 8vw, 110px);
  border-top: 1px solid rgba(var(--black-rgb), 0.55);
}

.chapter--truth .source-paragraph,
.chapter--truth .key-line {
  max-width: 720px;
}

.chapter--truth .key-line {
  padding: 0 0 34px;
  border-bottom: 4px solid var(--black);
}

.chapter--gain {
  background: var(--white);
  color: var(--ink);
}

.chapter--gain .chapter-frame {
  padding-top: clamp(190px, 18vw, 290px);
}

.chapter--gain .scene-title {
  max-width: 1120px;
  padding-bottom: clamp(38px, 5vw, 68px);
  border-bottom: 8px solid var(--black);
}

.chapter--gain .source-paragraph:nth-of-type(even) {
  margin-left: clamp(50px, 20vw, 290px);
}

.chapter--gain .source-paragraph:last-child {
  max-width: 860px;
  margin-top: clamp(80px, 10vw, 130px);
  font-size: clamp(22px, 2.4vw, 31px);
  font-weight: 760;
  line-height: 1.55;
}

.chapter--people {
  background: var(--black);
  color: var(--white);
}

.chapter--people .chapter-kicker {
  color: var(--chrome-muted);
}

.chapter--people .subscene-title {
  max-width: 900px;
  margin-top: clamp(100px, 13vw, 170px);
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}

.chapter--people .subscene-title + .source-paragraph {
  margin-left: clamp(0px, 15vw, 220px);
}

.chapter--people .source-paragraph:last-child {
  margin-top: clamp(100px, 13vw, 170px);
  padding-top: 30px;
  border-top: 1px solid var(--line-dark);
}

.chapter--apply {
  background: var(--paper);
  color: var(--ink);
}

.chapter--apply .chapter-frame {
  padding-top: clamp(130px, 11vw, 180px);
}

.chapter--apply .scene-title {
  max-width: 900px;
  padding-top: 28px;
  border-top: 6px solid var(--black);
  font-size: clamp(44px, 5.6vw, 76px);
}

.chapter--apply .subscene-title {
  max-width: var(--reading-width);
  padding-top: 1.6em;
  border-top: 1px solid var(--line-light);
  font-size: clamp(26px, 2.8vw, 38px);
}

.chapter--apply a[href^="mailto:"] {
  color: var(--red);
  font-weight: 850;
}

.chapter--apply .key-line {
  padding: clamp(38px, 6vw, 74px);
  background: var(--red);
  color: var(--white);
  font-size: clamp(27px, 3.8vw, 48px);
}

.roles-explorer {
  background: var(--white);
  color: var(--ink);
}

.roles-intro {
  border-top: 18px solid var(--black);
  border-bottom: 1px solid var(--black);
  background: var(--white);
}

.roles-intro-inner {
  display: grid;
  width: min(100%, var(--content-width));
  min-height: 410px;
  grid-template-columns: minmax(140px, 0.3fr) minmax(0, 1fr);
  align-content: center;
  align-items: end;
  gap: 22px clamp(30px, 7vw, 110px);
  margin-inline: auto;
  padding: clamp(90px, 9vw, 130px) var(--page-gutter);
}

.mode-label {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 8px 0 0;
}

.roles-intro h2 {
  grid-column: 2;
  margin: 0;
  font-size: clamp(64px, 9vw, 126px);
  font-weight: 950;
  letter-spacing: -0.075em;
  line-height: 0.9;
}

.roles-count-lead {
  grid-column: 2;
  margin: 4px 0 0;
  font-family: var(--display-font);
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 780;
}

.roles-workspace {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding: 0 var(--page-gutter) clamp(110px, 12vw, 170px);
}

.role-tools {
  position: sticky;
  z-index: 30;
  top: var(--header-height);
  margin: 0 calc(var(--page-gutter) * -1) 78px;
  padding: 18px var(--page-gutter) 16px;
  border-bottom: 1px solid var(--black);
  background: var(--white);
}

.search-field,
.filter-group {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
}

.search-field {
  align-items: center;
  border-bottom: 2px solid var(--black);
}

.search-field label,
.filter-label {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.search-control {
  position: relative;
}

.search-control input {
  width: 100%;
  min-height: 54px;
  padding: 7px 118px 7px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 760;
  letter-spacing: -0.03em;
}

.search-control input:focus-visible {
  box-shadow: inset 0 -3px var(--red);
}

.search-control input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.search-control button {
  position: absolute;
  top: 50%;
  right: 0;
  min-height: 44px;
  padding: 0 4px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filter-group {
  align-items: start;
  padding-top: 13px;
}

.filter-label {
  padding-top: 10px;
}

.filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-list button {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--muted);
  background: var(--white);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
}

.filter-list button[aria-pressed="true"] {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.result-tools {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
}

.result-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.result-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.result-summary #resultCount {
  color: var(--ink);
}

.accordion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.accordion-actions button {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.noscript-note {
  margin: 0 0 56px;
  padding: 18px 0;
  border-bottom: 1px solid var(--black);
  font-size: 14px;
}

.role-group {
  margin-bottom: clamp(80px, 9vw, 125px);
  scroll-margin-top: 280px;
}

.role-group-title {
  max-width: 1040px;
  margin: 0 0 clamp(30px, 4vw, 54px);
  padding-top: 20px;
  border-top: 5px solid var(--black);
  font-size: clamp(36px, 4.7vw, 62px);
  font-weight: 900;
  letter-spacing: -0.052em;
  line-height: 1.04;
  text-wrap: balance;
}

.job-card {
  display: block;
  border-top: 1px solid var(--black);
}

.job-card:last-child {
  border-bottom: 1px solid var(--black);
}

.job-toggle {
  display: grid;
  min-height: 98px;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.32fr) 48px;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.job-toggle:hover .job-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.job-title {
  font-size: clamp(22px, 2.25vw, 32px);
  font-weight: 860;
  letter-spacing: -0.038em;
  line-height: 1.15;
}

.job-career {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.toggle-mark {
  position: relative;
  width: 42px;
  height: 42px;
  justify-self: end;
  border: 1px solid var(--black);
}

.toggle-mark::before,
.toggle-mark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: var(--black);
  content: "";
}

.toggle-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 160ms ease;
}

.job-card[open] .job-toggle {
  border-bottom: 1px solid var(--line-light);
}

.job-card[open] .toggle-mark {
  background: var(--black);
}

.job-card[open] .toggle-mark::before,
.job-card[open] .toggle-mark::after {
  background: var(--white);
}

.job-card[open] .toggle-mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.job-content {
  padding: clamp(54px, 7vw, 88px) clamp(0px, 7vw, 96px) clamp(82px, 9vw, 120px);
}

.job-content-inner {
  max-width: 920px;
  margin-inline: auto;
}

.job-content .source-paragraph,
.job-content .source-list,
.job-content .source-heading-small,
.job-content .job-facts {
  max-width: 100%;
}

.job-content .source-paragraph,
.job-content .source-list {
  font-size: 16px;
  line-height: 1.78;
}

.job-content .source-heading-small {
  margin-top: 3.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line-light);
  font-family: var(--display-font);
  font-size: 23px;
  letter-spacing: -0.032em;
}

.job-facts {
  display: grid;
  margin: 0 0 40px;
  border-top: 2px solid var(--black);
}

.job-fact {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
}

.job-fact dt,
.job-fact dd {
  margin: 0;
}

.job-fact dt {
  font-size: 12px;
  font-weight: 850;
}

.job-fact dd {
  font-size: 15px;
  line-height: 1.55;
}

.no-results {
  min-height: 36vh;
  margin: 0;
  padding-top: 70px;
  border-top: 1px solid var(--black);
  font-family: var(--display-font);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.site-footer {
  display: flex;
  min-height: 180px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 70px var(--page-gutter) 34px;
  border-top: 1px solid var(--line-dark);
  background: var(--black);
  color: var(--white);
  font-size: 12px;
  font-weight: 750;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (min-width: 1081px) {
  .role-groups,
  .no-results {
    padding-right: 230px;
  }
}

@media (max-width: 1080px) {
  body {
    padding-bottom: 78px;
  }

  .reading-compass {
    top: auto;
    right: 14px;
    bottom: 14px;
    left: auto;
    width: min(270px, calc(100% - 28px));
    transform: none;
  }

  .reading-compass[open] {
    left: 14px;
    width: auto;
  }

  .compass-toggle {
    min-height: 58px;
    border-bottom: 0;
  }

  .reading-compass:not([open]) .compass-toggle {
    min-height: 52px;
  }

  .reading-compass:not([open]) .compass-toggle-label {
    display: none;
  }

  .reading-compass[open] .compass-toggle {
    border-bottom: 1px solid var(--line-dark);
  }

  .compass-panel {
    max-height: min(54vh, 450px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .compass-panel nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compass-panel a {
    min-height: 44px;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 64px;
  }

  .site-header {
    gap: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .theme-switcher {
    width: min(150px, 30vw);
  }

  .quick-nav a {
    font-size: 11px;
  }

  .quick-nav .quick-apply {
    padding-inline: 12px;
  }

  .chapter-frame {
    padding-top: 120px;
    padding-bottom: 125px;
  }

  .chapter--origin .chapter-copy {
    padding-left: 0;
  }

  .chapter--origin .scene-title,
  .chapter--origin .key-line,
  .chapter--translation .source-paragraph:nth-of-type(even),
  .chapter--bet .source-paragraph,
  .chapter--gain .source-paragraph:nth-of-type(even),
  .chapter--people .subscene-title + .source-paragraph {
    margin-left: 0;
  }

  .roles-intro-inner {
    min-height: 360px;
    grid-template-columns: 1fr;
    align-content: center;
  }

  .mode-label,
  .roles-intro h2,
  .roles-count-lead {
    grid-column: 1;
    grid-row: auto;
  }

  .mode-label {
    margin-bottom: 40px;
  }

  .role-tools {
    position: static;
    margin-bottom: 62px;
  }

  .search-field,
  .filter-group {
    grid-template-columns: 1fr;
  }

  .search-field label {
    padding-bottom: 4px;
  }

  .filter-label {
    padding: 0 0 9px;
  }

  .job-toggle {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 6px 14px;
  }

  .job-career {
    grid-column: 1;
  }

  .toggle-mark {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 560px) {
  :root {
    --page-gutter: 20px;
  }

  body {
    font-size: 16px;
    word-break: normal;
  }

  .theme-switcher {
    width: min(132px, 28vw);
  }

  .quick-nav {
    gap: 2px;
  }

  .quick-nav a {
    padding-inline: 6px;
    white-space: nowrap;
  }

  .chapter-frame {
    padding-top: 112px;
    padding-bottom: 116px;
  }

  .chapter-kicker {
    margin-bottom: 48px;
  }

  .source-title {
    font-size: clamp(50px, 15.5vw, 68px);
    line-height: 0.96;
  }

  .scene-title {
    margin-bottom: 58px;
    font-size: clamp(39px, 11.5vw, 52px);
    line-height: 1.03;
  }

  .scene-title--secondary {
    margin-top: 108px;
    font-size: clamp(33px, 9vw, 42px);
  }

  .source-paragraph {
    font-size: 16px;
    line-height: 1.76;
  }

  .key-line,
  .source-quote {
    margin-block: 76px;
    font-size: clamp(28px, 8.5vw, 38px);
    line-height: 1.18;
  }

  .subscene-title {
    font-size: clamp(28px, 8vw, 36px);
  }

  .chapter--opening .chapter-frame {
    min-height: 100svh;
    padding-top: calc(var(--header-height) + 70px);
  }

  .chapter--opening .source-title {
    margin-bottom: 82px;
  }

  .chapter--opening .key-line {
    font-size: clamp(29px, 8vw, 36px);
  }

  .chapter--origin .key-line {
    padding-left: 18px;
  }

  .chapter--shift .source-quote {
    padding-block: 44px;
    text-align: left;
  }

  .chapter--translation .key-line,
  .chapter--apply .key-line {
    padding: 30px 22px;
  }

  .chapter--bet .scene-title--secondary {
    padding-top: 76px;
  }

  .chapter--bet .value-chain {
    padding: 30px 20px;
    border-width: 3px;
    font-size: clamp(27px, 8vw, 35px);
    text-align: left;
  }

  .chapter--gain .chapter-frame {
    padding-top: 154px;
  }

  .chapter--gain .scene-title {
    border-bottom-width: 6px;
  }

  .chapter--people .subscene-title {
    margin-top: 94px;
  }

  .chapter--apply .scene-title {
    font-size: clamp(39px, 11vw, 50px);
  }

  .roles-intro {
    border-top-width: 12px;
  }

  .roles-intro-inner {
    min-height: 330px;
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .roles-intro h2 {
    font-size: clamp(62px, 20vw, 82px);
  }

  .role-tools {
    margin-right: -20px;
    margin-left: -20px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .search-control input {
    padding-right: 92px;
    font-size: 20px;
  }

  .filter-list button {
    min-height: 44px;
  }

  .result-tools {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .accordion-actions {
    width: 100%;
    justify-content: space-between;
    gap: 4px 12px;
  }

  .accordion-actions button {
    min-height: 44px;
  }

  .role-group-title {
    font-size: clamp(34px, 10.5vw, 44px);
  }

  .job-title {
    font-size: 22px;
  }

  .job-career {
    font-size: 12px;
  }

  .job-content {
    padding: 50px 0 76px;
  }

  .job-fact {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .compass-panel nav {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer {
    min-height: 200px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .role-tools {
    position: static;
  }
}

@media print {
  .site-header,
  .reading-compass,
  .page-progress,
  .role-tools,
  .site-footer {
    display: none !important;
  }

  body {
    padding: 0;
    background: var(--white);
  }

  .story-chapter,
  .roles-intro,
  .roles-explorer {
    background: var(--white) !important;
    color: var(--black) !important;
  }

  .chapter-frame,
  .roles-intro-inner {
    min-height: 0;
    padding: 50px 0;
  }

  .job-card:not([open]) > .job-content {
    display: block;
  }
}

/* Case 2: Horizontal Film Chapters */
@media (min-width: 901px) {
  .theme-switcher {
    border-top: 3px solid var(--red);
  }

  .theme-switcher .theme-options {
    right: 0;
    left: auto;
    width: min(650px, calc(100vw - 24px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .theme-options button {
    min-height: 56px;
    grid-template-columns: 30px minmax(0, 1fr);
    border-right: 1px solid var(--line-dark);
    border-bottom: 0;
  }

  .theme-options button:last-child {
    border-right: 0;
  }
}

:root {
  --header-height: 64px;
  --chapter-player-height: 122px;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html {
  scroll-behavior: auto;
}

body {
  padding-bottom: 0;
}

main {
  width: 100%;
  max-width: 100%;
  /* Clip only sideways. Clipping both axes would turn this into a scroll
     container and take the page's own scrolling away from the document. */
  overflow-x: clip;
  overflow-y: visible;
}

.site-header {
  min-height: var(--header-height);
  padding-top: 7px;
  padding-bottom: 7px;
}

.header-chapter {
  position: absolute;
  left: 50%;
  max-width: 38vw;
  margin: 0;
  overflow: hidden;
  color: var(--chrome-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Movement lives on the rail overlay; this bar only answers "where am I".
   Two columns and one row, so the height it gives back goes to the copy. */
.chapter-player {
  position: fixed;
  z-index: 920;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: var(--chapter-player-height);
  grid-template-columns: minmax(200px, 0.7fr) minmax(420px, 2fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 8px clamp(24px, 4vw, 60px);
  padding: 10px var(--page-gutter);
  border-top: 1px solid rgba(var(--white-rgb), 0.34);
  background: rgba(var(--black-rgb), 0.98);
  color: var(--white);
}

/* The player is fixed to the bottom, so the document needs that much room at
   its end or the footer slides underneath and its top edge shows as a seam. */
body:has(.chapter-player) .site-footer {
  margin-bottom: var(--chapter-player-height);
}

@media screen and (max-width: 767.98px) {
  body:has(.chapter-player) .site-footer {
    margin-bottom: var(--mobile-scene-player-height, 64px);
  }
}

/* In the rail's two-column reading pane an item heading sits in the left
   column beside its paragraph, so its top must line up with the text. */
@media screen and (min-width: 901px) {
  /* The heading and its paragraph take the same top margin: equal values keep
     the two columns level while opening a clear gap between items. */
  .story-rail .chapter-copy > .subscene-title,
  .story-rail .chapter-copy > .subscene-title + .source-paragraph {
    margin-top: clamp(56px, 5vw, 84px);
  }
}

/* The opening screen carries one message; everything after it starts below
   the fold. */
@media screen and (min-width: 901px) {
  .single-chapter.chapter--opening .source-title {
    margin-bottom: min(44vh, 400px);
  }
}

/* The invitation's opening line is emphasis inside the copy, not a second
   headline: no red, no display size — weight and surrounding air carry it. */
.chapter--opening .key-line {
  padding-top: 0;
  border-top: 0;
  color: inherit;
  font-size: clamp(22px, 2.1vw, 30px);
  margin-block: clamp(56px, 6vw, 88px);
}

/* Rail overlay controls — glyph only, on the reading area's left and right. */
/* Containing block for the rail's overlay controls. On wide screens this is
   promoted to sticky further down so the rail holds the viewport. */
.story-stage {
  position: relative;
}

.rail-controls {
  position: absolute;
  z-index: 900;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.rail-control {
  position: absolute;
  top: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  cursor: pointer;
  place-items: center;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rail-control--prev {
  left: clamp(8px, 2vw, 28px);
}

.rail-control--next {
  right: clamp(8px, 2vw, 28px);
}

.rail-control .control-icon {
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

/* The accessible name stays; the word itself is not drawn. */
.rail-control .control-label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rail-control:hover:not(:disabled),
.rail-control:focus-visible {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.rail-control:disabled {
  cursor: default;
  opacity: 0.24;
}

.scene-progress {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background: rgba(var(--white-rgb), 0.13);
}

.scene-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0.1111);
  transform-origin: left;
  background: var(--red);
}

.scene-readout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3px 12px;
  line-height: 1.2;
}

.scene-readout strong {
  overflow: hidden;
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-readout #scenePosition {
  color: var(--chrome-muted);
  font-family: var(--display-font);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.chapter-direct-nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-self: stretch;
  border-right: 1px solid rgba(var(--white-rgb), 0.21);
  border-left: 1px solid rgba(var(--white-rgb), 0.21);
}

.chapter-direct-nav a {
  display: grid;
  min-width: 0;
  min-height: 44px;
  padding-inline: 2px;
  place-items: center;
  border-right: 1px solid rgba(var(--white-rgb), 0.21);
  color: var(--chrome-muted);
  font-family: var(--display-font);
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0;
  text-decoration: none;
}

.chapter-direct-nav a span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-direct-nav a:last-child {
  border-right: 0;
}

.chapter-direct-nav a:hover {
  color: var(--white);
}

.chapter-direct-nav a[aria-current="location"] {
  background: var(--white);
  color: var(--black);
}

.rail-help {
  grid-column: 2;
  margin: 0;
  color: var(--chrome-subtle);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: center;
}

.scene-controls {
  display: grid;
  grid-column: 3;
  grid-row: 1 / span 2;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  gap: 1px;
  background: rgba(var(--white-rgb), 0.28);
}

.scene-controls button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.scene-controls .control-icon {
  font-size: 13px;
  line-height: 1;
}

.scene-controls button:hover:not(:disabled) {
  background: var(--white);
  color: var(--black);
}

.scene-controls button:disabled {
  color: var(--chrome-border);
  cursor: not-allowed;
}

.story-rail {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--red) var(--black);
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.story-rail::-webkit-scrollbar {
  height: 4px;
}

.story-rail::-webkit-scrollbar-track {
  background: var(--black);
}

.story-rail::-webkit-scrollbar-thumb {
  background: var(--red);
}

.story-rail:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: -3px;
}

.story-rail .story-chapter {
  width: 100%;
  min-width: 100%;
  height: 100%;
  flex: 0 0 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scroll-margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scrollbar-color: rgba(var(--white-rgb), 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.story-rail .story-chapter::-webkit-scrollbar {
  width: 6px;
}

.story-rail .story-chapter::-webkit-scrollbar-track {
  background: transparent;
}

.story-rail .story-chapter::-webkit-scrollbar-thumb {
  background: rgba(var(--white-rgb), 0.42);
}

.story-rail .chapter-frame,
.story-rail .chapter--opening .chapter-frame,
.story-rail .chapter--gain .chapter-frame,
.story-rail .chapter--apply .chapter-frame {
  display: block;
  width: min(100%, 1440px);
  min-height: 100%;
  margin-inline: auto;
  padding: calc(var(--header-height) + clamp(58px, 7vh, 92px)) var(--page-gutter)
    var(--desktop-reading-clearance);
}

.story-rail .chapter-kicker {
  margin: 0 0 clamp(42px, 6vh, 70px);
}

.story-rail .chapter-copy {
  display: grid;
  max-width: 1260px;
  grid-template-columns: minmax(300px, 0.78fr) minmax(430px, 1fr);
  grid-auto-flow: row;
  column-gap: clamp(60px, 9vw, 150px);
  margin-inline: auto;
}

.story-rail .chapter-copy > .source-title,
.story-rail .chapter-copy > .scene-title,
.story-rail .chapter-copy > .source-quote,
.story-rail .chapter-copy > .key-line {
  grid-column: 1 / -1;
}

.story-rail .chapter-copy > .source-paragraph,
.story-rail .chapter-copy > .source-list,
.story-rail .chapter-copy > .source-heading-small {
  width: 100%;
  max-width: var(--measure-body);
  grid-column: 2;
  margin-right: 0;
  margin-left: 0;
}

.story-rail .source-title {
  max-width: 1120px;
  margin: 0 0 clamp(60px, 9vh, 110px);
  font-size: clamp(64px, 7.8vw, 112px);
  line-height: 0.93;
}

.story-rail .scene-title {
  max-width: 1060px;
  margin: 0 0 clamp(54px, 8vh, 94px);
  font-size: clamp(50px, 5.5vw, 78px);
  line-height: 1;
}

.story-rail .scene-title--secondary {
  margin-top: clamp(100px, 14vh, 170px);
  font-size: clamp(39px, 4.4vw, 62px);
  line-height: 1.06;
}

.story-rail .source-paragraph {
  margin-bottom: 1.5em;
  font-size: clamp(16px, 1.22vw, 18px);
  line-height: 1.76;
}

.story-rail .key-line,
.story-rail .source-quote {
  max-width: 1040px;
  margin: clamp(66px, 9vh, 112px) 0;
  font-size: clamp(31px, 3.8vw, 52px);
  line-height: 1.16;
}

.story-rail .subscene-title {
  width: 100%;
  max-width: 560px;
  grid-column: 1;
  margin: clamp(72px, 10vh, 118px) 0 24px;
  font-size: clamp(28px, 3vw, 42px);
}

.story-rail .chapter--opening .source-title {
  margin-bottom: clamp(70px, 10vh, 122px);
}

.story-rail .chapter--opening .key-line {
  max-width: 680px;
  grid-column: 1;
  margin: 0;
  align-self: start;
  font-size: clamp(31px, 3.7vw, 51px);
}

.story-rail .chapter--opening .source-paragraph:not(.key-line),
.story-rail .chapter--origin .source-paragraph,
.story-rail .chapter--shift .source-paragraph,
.story-rail .chapter--bet .source-paragraph,
.story-rail .chapter--truth .source-paragraph,
.story-rail .chapter--gain .source-paragraph,
.story-rail .chapter--people .source-paragraph {
  margin-left: 0;
}

.story-rail .chapter--origin .chapter-copy {
  padding-left: 0;
}

.story-rail .chapter--origin .scene-title,
.story-rail .chapter--origin .key-line {
  margin-left: 0;
}

.story-rail .chapter--origin .key-line {
  padding: 34px clamp(30px, 5vw, 70px);
}

.story-rail .chapter--shift .source-quote,
.story-rail .chapter--bet .value-chain {
  margin-right: auto;
  margin-left: auto;
}

.story-rail .chapter--translation .source-paragraph:nth-of-type(even),
.story-rail .chapter--gain .source-paragraph:nth-of-type(even),
.story-rail .chapter--people .subscene-title + .source-paragraph {
  margin-left: 0;
}

.story-rail .chapter--translation .key-line,
.story-rail .chapter--apply .key-line {
  padding: clamp(36px, 5vw, 66px);
}

.story-rail .chapter--bet .value-chain {
  padding: clamp(35px, 5vw, 68px);
  font-size: clamp(29px, 3.5vw, 48px);
}

.story-rail .chapter--truth .key-line {
  max-width: 920px;
}

.story-rail .chapter--gain .source-paragraph:last-child {
  max-width: 780px;
  margin-top: clamp(72px, 10vh, 112px);
}

.story-rail .chapter--people .subscene-title + .source-paragraph,
.story-rail .chapter--apply .subscene-title + .source-paragraph {
  align-self: start;
}

.roles-explorer {
  position: relative;
  z-index: 2;
}

html:not(.is-enhanced) .scene-controls {
  display: none;
}

html:not(.is-enhanced) .chapter-player {
  display: none;
}

html.is-role-mode .chapter-player {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .scene-progress span,
  .chapter-player {
    transition: transform 180ms ease, opacity 120ms linear;
  }
}

@media (max-width: 1120px) and (min-width: 901px) {
  .header-chapter,
  .rail-help {
    display: none;
  }

  .chapter-player {
    grid-template-columns: minmax(190px, 0.75fr) minmax(360px, 1.4fr) minmax(220px, 0.85fr);
    grid-template-rows: 1fr;
  }

  .scene-controls {
    grid-row: 1;
  }

  .story-rail .chapter-copy {
    grid-template-columns: minmax(270px, 0.72fr) minmax(400px, 1fr);
    column-gap: 64px;
  }
}

@media (max-width: 900px) {
  :root {
    --chapter-player-height: 178px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  body {
    word-break: normal;
  }

  .header-chapter {
    display: none;
  }

  .chapter-player {
    position: sticky;
    top: var(--header-height);
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    min-height: var(--chapter-player-height);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 44px;
    gap: 5px 12px;
    margin-top: var(--header-height);
    padding: 8px 14px 9px;
    border-top: 1px solid rgba(var(--white-rgb), 0.28);
    border-bottom: 1px solid rgba(var(--white-rgb), 0.28);
  }

  .scene-readout {
    grid-column: 1;
    grid-row: 1;
  }
  .rail-help {
    display: none;
  }

  .scene-readout strong {
    font-size: 13px;
  }

  .scene-readout #scenePosition {
    font-size: 10px;
  }

  .chapter-direct-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    grid-auto-rows: 44px;
    align-self: stretch;
  }

  .chapter-direct-nav a {
    min-width: 0;
    min-height: 44px;
  }

  .chapter-direct-nav a:nth-child(n + 6) {
    border-top: 1px solid rgba(var(--white-rgb), 0.21);
  }

  .scene-controls {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: stretch;
  }

  .scene-controls button {
    min-height: 44px;
    padding-block: 7px;
  }

  .story-rail {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
    scroll-snap-type: none;
    touch-action: auto;
  }

  .story-rail .story-chapter {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100svh;
    overflow: visible;
    scroll-margin-top: calc(var(--header-height) + var(--chapter-player-height));
    scroll-snap-align: none;
    scrollbar-gutter: auto;
  }

  .story-rail .chapter-frame,
  .story-rail .chapter--opening .chapter-frame,
  .story-rail .chapter--gain .chapter-frame,
  .story-rail .chapter--apply .chapter-frame {
    min-height: 100svh;
    padding: clamp(90px, 16vw, 130px) var(--page-gutter) clamp(110px, 18vw, 150px);
  }

  .story-rail .chapter-copy {
    display: block;
    max-width: 760px;
    margin-inline: auto;
  }

  .story-rail .chapter-copy > .source-paragraph,
  .story-rail .chapter-copy > .source-list,
  .story-rail .chapter-copy > .source-heading-small,
  .story-rail .chapter-copy > .subscene-title {
    max-width: var(--measure-body);
  }

  .story-rail .source-title {
    font-size: clamp(54px, 13vw, 84px);
  }

  .story-rail .scene-title {
    font-size: clamp(42px, 10vw, 62px);
  }

  .story-rail .scene-title--secondary {
    font-size: clamp(34px, 8vw, 48px);
  }

  .story-rail .source-paragraph {
    font-size: 17px;
  }

  .story-rail .key-line,
  .story-rail .source-quote,
  .story-rail .chapter--opening .key-line {
    max-width: 760px;
    margin: 72px 0;
    font-size: clamp(30px, 7vw, 42px);
  }

  .story-rail .chapter--opening .key-line {
    margin-bottom: 72px;
  }

  .story-rail .subscene-title {
    margin-top: 86px;
  }

  html:not(.is-enhanced) .chapter-player {
    position: relative;
    top: auto;
  }
}

@media (max-width: 560px) {
  :root {
    --page-gutter: 20px;
  }

  .site-header {
    gap: 8px;
  }

  /* The palette switcher is a review affordance; at phone width the header
     belongs to the wordmark and the four-page nav. */
  .theme-switcher {
    display: none;
  }

  .wordmark {
    gap: 8px;
  }

  .wordmark-company {
    padding-left: 8px;
    font-size: 8px;
  }

  .quick-nav a {
    min-width: 44px;
    justify-content: center;
    padding-inline: 6px;
    font-size: 10px;
    white-space: nowrap;
  }

  .quick-nav .quick-apply {
    padding-inline: 10px;
  }

  .chapter-player {
    padding-right: 10px;
    padding-left: 10px;
  }

  .scene-readout strong {
    font-size: 12px;
  }

  .chapter-direct-nav a {
    font-size: 10px;
  }

  .scene-controls button {
    font-size: 10px;
  }

  .story-rail .chapter-frame,
  .story-rail .chapter--opening .chapter-frame,
  .story-rail .chapter--gain .chapter-frame,
  .story-rail .chapter--apply .chapter-frame {
    padding-top: 84px;
    padding-bottom: 112px;
  }

  .story-rail .chapter-kicker {
    margin-bottom: 46px;
  }

  .story-rail .source-title {
    margin-bottom: 68px;
    font-size: clamp(49px, 14vw, 62px);
  }

  .story-rail .scene-title {
    margin-bottom: 58px;
    font-size: clamp(38px, 11vw, 48px);
  }

  .story-rail .scene-title--secondary {
    margin-top: 104px;
    font-size: clamp(32px, 9vw, 39px);
  }

  .story-rail .source-paragraph {
    font-size: 16px;
    line-height: 1.76;
  }

  .story-rail .key-line,
  .story-rail .source-quote,
  .story-rail .chapter--opening .key-line {
    margin-block: 70px;
    font-size: clamp(27px, 8vw, 34px);
  }

  .story-rail .chapter--opening .key-line {
    padding-top: 24px;
  }

  .story-rail .chapter--origin .key-line,
  .story-rail .chapter--translation .key-line,
  .story-rail .chapter--apply .key-line {
    padding: 28px 20px;
  }

  .story-rail .chapter--bet .value-chain {
    padding: 28px 18px;
    font-size: clamp(25px, 7.5vw, 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-rail {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  html.is-enhanced.is-mobile-scenes .story-rail > [data-mobile-scene],
  html.is-enhanced.is-mobile-scenes .story-rail > [data-mobile-scene] .source-block,
  html.is-enhanced.is-mobile-scenes .story-rail > [data-mobile-scene] .source-block * {
    animation: none !important;
    transition: none !important;
  }

  .chapter-player,
  .scene-progress span {
    transition: none !important;
  }
}

@media print {
  html,
  body,
  main {
    max-width: none;
    overflow: visible;
  }

  .chapter-player{
    display: none !important;
  }

  .story-rail {
    display: block;
    height: auto;
    overflow: visible;
  }

  .story-rail .story-chapter {
    width: auto;
    min-width: 0;
    height: auto;
    overflow: visible;
  }

  .story-rail .chapter-frame {
    min-height: 0;
    padding: 50px 0;
  }
}

/* iPhone 17 Pro mobile viewport and safe-area contract. */
@media screen {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --header-offset: calc(var(--safe-top) + var(--header-height) + 3px);
    --page-gutter: max(clamp(22px, 4.8vw, 76px), var(--safe-right), var(--safe-left));
  }

  html {
    scroll-padding-top: calc(var(--header-offset) + 18px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .skip-link {
    top: max(12px, calc(var(--safe-top) + 8px));
    left: max(12px, var(--safe-left));
  }

  .page-progress {
    top: var(--safe-top);
    right: var(--safe-right);
    left: var(--safe-left);
  }

  .site-header {
    top: calc(var(--safe-top) + 3px);
  }

  .theme-switcher .theme-options {
    max-height: calc(100vh - var(--header-offset) - var(--safe-bottom) - 28px);
    max-height: calc(100svh - var(--header-offset) - var(--safe-bottom) - 28px);
    max-height: calc(100dvh - var(--header-offset) - var(--safe-bottom) - 28px);
  }

  .story-chapter,
  .roles-explorer {
    scroll-margin-top: var(--header-offset);
  }

  .chapter--opening .chapter-frame {
    min-height: max(100vh, 820px);
    min-height: max(100svh, 820px);
    padding-top: calc(var(--header-offset) + 90px);
  }

  .role-tools {
    top: var(--header-offset);
  }

  .role-group {
    scroll-margin-top: calc(280px + var(--safe-top));
  }

  .site-footer {
    padding-bottom: calc(34px + var(--safe-bottom));
  }

  .chapter-player {
    right: var(--safe-right);
    bottom: var(--safe-bottom);
    left: var(--safe-left);
  }

  .story-rail .chapter-frame,
  .story-rail .chapter--opening .chapter-frame,
  .story-rail .chapter--gain .chapter-frame,
  .story-rail .chapter--apply .chapter-frame {
    padding-bottom: calc(var(--desktop-reading-clearance) + var(--safe-bottom));
  }
}

@media screen and (min-width: 901px) {
  .story-rail {
    height: 100vh;
    height: 100svh;
  }

  .story-rail .story-chapter {
    scroll-padding-bottom: var(--desktop-reading-clearance);
  }

  html.is-enhanced .story-rail > .story-chapter {
    width: 100%;
    min-width: 100%;
    height: calc(100vh - var(--header-height) - var(--chapter-player-height));
    height: calc(100svh - var(--header-height) - var(--chapter-player-height));
    min-height: calc(100vh - var(--header-height) - var(--chapter-player-height));
    min-height: calc(100svh - var(--header-height) - var(--chapter-player-height));
    flex: 0 0 100%;
    margin-top: var(--header-height);
    margin-bottom: var(--chapter-player-height);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding: clamp(40px, 6vh, 64px) 0;
  }
}

@media screen and (max-width: 900px) {
  .chapter-player {
    top: var(--header-offset);
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: var(--header-offset);
    padding-right: max(14px, var(--safe-right));
    padding-left: max(14px, var(--safe-left));
  }

  .story-rail .story-chapter {
    min-height: 100vh;
    min-height: 100svh;
    scroll-margin-top: calc(var(--header-offset) + var(--chapter-player-height));
  }

  .story-rail .chapter-frame,
  .story-rail .chapter--opening .chapter-frame,
  .story-rail .chapter--gain .chapter-frame,
  .story-rail .chapter--apply .chapter-frame {
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: clamp(110px, 18vw, 150px);
  }
}

@media screen and (max-width: 600px) {
  :root {
    --page-gutter: max(20px, var(--safe-right), var(--safe-left));
  }

  .chapter-player {
    padding-right: max(10px, var(--safe-right));
    padding-left: max(10px, var(--safe-left));
  }
}

/* Mobile scene furniture is authored but inert until the phone controller owns it. */
.mobile-scene-toolbar,
.mobile-scene-drawer {
  display: none;
}

/* PASS 1 MOBILE VERTICAL SCENES
   Original source blocks are measured into a flat y sequence. Mandatory snap
   is a runtime result of a complete fit proof, never the default. */
@media screen and (max-width: 767.98px) {
  :root {
    --mobile-scene-gutter-inline: max(clamp(24px, 6.15vw, 32px), var(--safe-left), var(--safe-right));
    --mobile-scene-player-height: calc(64px + var(--safe-bottom));
    /* Matches the rail control height so the copy never runs under it. */
    --mobile-scene-reading-clearance: 44px;
  }

  html.is-enhanced.is-mobile-scenes {
    scroll-padding-top: calc(var(--header-offset) + 24px);
  }

  html.is-enhanced.is-mobile-scenes,
  html.is-enhanced.is-mobile-scenes body {
    max-width: 100%;
    overflow-x: hidden;
  }

  html.is-enhanced.is-mobile-scenes main {
    overflow: visible;
  }

  html.is-enhanced.is-mobile-scenes .site-header {
    padding-right: var(--mobile-scene-gutter-inline);
    padding-left: var(--mobile-scene-gutter-inline);
  }

  html.is-enhanced.is-mobile-scenes.is-role-mode .site-header {
    background-color: rgb(var(--black-rgb));
  }

  html.is-enhanced.is-mobile-scenes :is(#roles, .job-card, .job-toggle, .job-content) {
    scroll-margin-top: calc(var(--header-offset) + 24px);
  }

  html.is-enhanced.is-mobile-scenes .roles-intro-inner,
  html.is-enhanced.is-mobile-scenes .roles-workspace {
    padding-right: var(--mobile-scene-gutter-inline);
    padding-left: var(--mobile-scene-gutter-inline);
  }

  html.is-enhanced.is-mobile-scenes .role-tools {
    margin-right: calc(var(--mobile-scene-gutter-inline) * -1);
    margin-left: calc(var(--mobile-scene-gutter-inline) * -1);
    padding-right: var(--mobile-scene-gutter-inline);
    padding-left: var(--mobile-scene-gutter-inline);
  }

  html.is-enhanced.is-mobile-scenes :is(
    .job-card,
    .job-toggle,
    .job-content,
    .job-content-inner
  ) {
    width: 100%;
    max-width: 100%;
  }

  /* The page nav stays: it is the only way between the four pages. */
  html.is-enhanced.is-mobile-scenes .header-chapter,
  html.is-enhanced.is-mobile-scenes .theme-switcher,
  html.is-enhanced.is-mobile-scenes .scene-readout,
  html.is-enhanced.is-mobile-scenes .chapter-direct-nav,
  html.is-enhanced.is-mobile-scenes .rail-help {
    display: none;
  }

  html.is-enhanced.is-mobile-scenes .chapter-player {
    position: fixed;
    z-index: 1050;
    top: auto;
    right: var(--safe-right);
    bottom: 0;
    left: var(--safe-left);
    display: grid;
    width: auto;
    min-height: var(--mobile-scene-player-height);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 8px;
    margin: 0;
    padding: 8px 10px calc(8px + var(--safe-bottom));
    border-top: 1px solid rgba(var(--white-rgb), 0.32);
  }

  html.is-enhanced.is-mobile-scenes .mobile-scene-toolbar {
    display: block;
    min-width: 0;
  }

  #mobileSceneNavTrigger {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--white-rgb), 0.34);
    background: transparent;
    color: var(--white);
    font-size: 13px;
    font-weight: 780;
    line-height: 1.25;
    text-align: left;
  }

  #mobileSceneTriggerText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mobileSceneFraction {
    color: var(--chrome-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  /* At phone width the column fills the screen, so the controls drop to the
     slack below the copy instead of sitting on top of it. */
  html.is-enhanced.is-mobile-scenes .rail-control {
    top: auto;
    bottom: var(--mobile-scene-player-height);
    width: 44px;
    height: 44px;
    transform: none;
  }

  html.is-enhanced.is-mobile-scenes .rail-control .control-icon {
    font-size: 20px;
  }

  html.is-enhanced.is-mobile-scenes .scene-controls {
    display: none;
  }

  /* Icon-only at phone width. The label is hidden by name rather than by
     zeroing the button's font-size, so a control can never lose its glyph. */
  html.is-enhanced.is-mobile-scenes .scene-controls button {
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
  }

  html.is-enhanced.is-mobile-scenes .scene-controls .control-label {
    display: none;
  }

  html.is-enhanced.is-mobile-scenes .scene-controls .control-icon {
    font-size: 18px;
  }

  html.is-enhanced.is-mobile-scenes .scene-progress {
    display: block;
  }

  html.is-enhanced .story-rail {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: auto;
    overscroll-behavior-y: auto;
    scroll-padding: 0;
    scroll-snap-type: none;
    scrollbar-color: rgba(var(--white-rgb), 0.36) transparent;
    scrollbar-width: thin;
    touch-action: pan-y;
  }

  html.is-enhanced.is-mobile-scenes.mobile-scenes-fit .story-rail {
    scroll-snap-type: y mandatory;
  }

  html.is-enhanced .story-rail > [data-mobile-scene] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    margin: 0;
    padding: calc(var(--header-offset) + 52px) var(--mobile-scene-gutter-inline)
      calc(var(--mobile-scene-player-height) + var(--mobile-scene-reading-clearance));
    overflow: visible;
    overscroll-behavior: auto;
    scroll-margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    background: var(--black);
    color: var(--white);
  }

  html.is-enhanced.is-mobile-scenes.mobile-scenes-fit .story-rail > [data-mobile-scene] {
    scroll-snap-stop: always;
  }

  html.is-enhanced.is-mobile-scenes.mobile-scenes-fallback .story-rail > [data-mobile-scene] {
    scroll-snap-stop: normal;
  }

  html.is-enhanced .story-rail > [data-mobile-scene][data-fit-fallback="oversize-natural"] {
    height: auto;
    overflow: visible;
  }

  .mobile-scene-label {
    position: absolute;
    top: calc(var(--header-offset) + 17px);
    right: var(--mobile-scene-gutter-inline);
    left: var(--mobile-scene-gutter-inline);
    margin: 0;
    color: var(--chrome-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.25;
  }

  [data-scene-content] {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
    overflow-y: visible;
  }

  html.is-enhanced .story-rail > [data-mobile-scene] .source-block {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    overflow: visible;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  html.is-enhanced .story-rail > [data-mobile-scene] :is(
    .source-paragraph,
    .source-list,
    .source-heading-small,
    .source-title,
    .scene-title,
    .scene-title--secondary,
    .subscene-title
  ) {
    color: var(--white);
  }

  html.is-enhanced .story-rail > [data-mobile-scene] :is(a, strong, .key-line, .source-quote, .value-chain) {
    border-color: var(--red);
    color: var(--accent-bright);
  }

  /* The pagination adds this wrapper to whole paragraphs that carry no
     authored emphasis. Colouring 200 characters red is not emphasis — weight
     alone marks the scene's lead paragraph. */
  html.is-enhanced .story-rail > [data-mobile-scene] .mobile-scene-generated-emphasis {
    color: inherit;
  }

  /* Same reasoning for the authored ranks: a statement and a marked passage are
     whole sentences, so they carry their emphasis in weight and rule. Only
     .emph-term, which is a word, takes the colour — and it can only read as
     emphasis if the chain around it is set in the page ink, as it is on the
     desktop rail. The plate keeps its red border either way. */
  html.is-enhanced .story-rail > [data-mobile-scene] :is(
    .emph-statement,
    .emph-passage,
    .value-chain,
    .value-chain strong
  ) {
    color: inherit;
  }

  html.is-enhanced .story-rail > [data-mobile-scene] .emph-term {
    color: var(--accent-bright);
  }

  /* The last screen's two actions. Sized to be the thing you reach for, with
     Apply carrying the same red as the header's button. */
  html.is-enhanced.is-mobile-scenes .mobile-scene-actions {
    display: grid;
    margin-top: 38px;
    gap: 12px;
  }

  /* Specificity has to clear the rule that paints every link in a scene with
     the accent, or both actions come out red and the hierarchy disappears. */
  html.is-enhanced.is-mobile-scenes .story-rail > [data-mobile-scene] .mobile-scene-actions a {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border: 1px solid var(--white);
    color: var(--white);
    font-family: var(--display-font);
    font-size: 20px;
    font-weight: 850;
    letter-spacing: 0.01em;
    text-decoration: none;
  }

  /* Applying is the one thing this page is asking for. */
  html.is-enhanced.is-mobile-scenes .story-rail > [data-mobile-scene] .mobile-scene-actions a:first-child {
    border-color: var(--red);
    background: var(--red);
  }

  html.is-enhanced.is-mobile-scenes .mobile-scene-actions .chapter-onward-icon {
    font-size: 18px;
  }

  /* The deck now ends on those actions, so the strip below it would repeat them. */
  html.is-mobile-scenes .chapter-onward--story {
    display: none;
  }

  /* Card treatment for authored quotes: the rule needs air before the text. */
  html.is-enhanced .story-rail > [data-mobile-scene] :is(.key-line, .source-quote:not(.value-chain)) {
    padding-inline: 18px 0;
    border-left: 3px solid var(--red);
  }

  /* The value chain is a five-step sequence, so it gets a plate of its own
     rather than another run of red text. */
  html.is-enhanced .story-rail > [data-mobile-scene] .value-chain {
    padding: 20px 18px;
    border: 2px solid var(--red);
    border-left-width: 2px;
    font-size: clamp(19px, 5vw, 23px);
    line-height: 1.7;
    word-spacing: 0.3em;
  }

  html.is-enhanced.is-role-mode .chapter-player {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
  }

  html.is-enhanced .mobile-scene-drawer {
    width: min(100% - 24px, 520px);
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100svh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-dark);
    background: var(--black);
    color: var(--white);
  }

  html.is-enhanced .mobile-scene-drawer[open] {
    display: block;
  }

  .mobile-scene-drawer::backdrop {
    background: rgba(0, 0, 0, 0.72);
  }

  .mobile-scene-drawer-panel {
    display: grid;
    max-height: inherit;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .mobile-scene-drawer-heading {
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 12px 8px 18px;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.25);
  }

  .mobile-scene-drawer-heading h2 {
    margin: 0;
    font-family: var(--display-font);
    font-size: 18px;
    font-weight: 850;
  }

  .mobile-scene-drawer-heading button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(var(--white-rgb), 0.3);
    background: transparent;
    color: inherit;
  }

  #mobileSceneDrawerList {
    display: grid;
    overflow-y: auto;
  }

  #mobileSceneDrawerList button {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.18);
    background: transparent;
    color: var(--chrome-muted);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.25;
    text-align: left;
  }

  #mobileSceneDrawerList button[aria-current="page"] {
    background: var(--white);
    color: var(--black);
  }
}
/* PASS 1 MOBILE VERTICAL SCENES END */

@media screen and (max-width: 767.98px) and (max-height: 500px) and (orientation: landscape) {
  html.is-enhanced.is-mobile-scenes {
    --mobile-scene-player-height: calc(64px + var(--safe-bottom));
  }

  html.is-enhanced.is-mobile-scenes .site-header {
    display: flex;
    background-color: rgb(var(--black-rgb));
  }

  html.is-enhanced.is-mobile-scenes .chapter-player {
    min-height: var(--mobile-scene-player-height);
    padding-top: 8px;
    padding-bottom: calc(8px + var(--safe-bottom));
  }

  html.is-enhanced .story-rail > [data-mobile-scene] {
    padding-top: calc(var(--header-offset) + 16px);
    padding-bottom: calc(var(--mobile-scene-player-height) + 8px);
  }

  .mobile-scene-label {
    top: calc(var(--header-offset) + 2px);
  }
}