/* SAVCOR · Structural VIPV — presentation styles
   Layout: every scene is composed on a 1920×1080 design frame scaled by --u.
   Without JavaScript (or in print) scenes are rendered as a static sequence. */

@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --u: calc(min(100vw, 177.7778vh) / 1920);
  --ink: #0b0c0e;
  --ink-2: #121418;
  --ink-3: #1a1d22;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --fg: #f2f3f4;
  --fg-2: #b9bec5;
  --fg-3: #858b93;
  --silver: #d5d9de;
  --accent: #8fb6d6;      /* controlled cool accent */
  --accent-2: #5f8fb8;
  --paper: #eceef0;
  --paper-2: #e2e5e8;
  --paper-ink: #111317;
  --paper-ink-2: #4a5059;
  --paper-line: rgba(17,19,23,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --fs-display: calc(150 * var(--u));
  --fs-h1: calc(78 * var(--u));
  --fs-h2: calc(46 * var(--u));
  --fs-h3: max(16px, calc(29 * var(--u)));
  --fs-lead: max(17px, calc(31 * var(--u)));
  --fs-body: max(14px, calc(22 * var(--u)));
  --fs-small: max(12.5px, calc(18 * var(--u)));
  --fs-label: max(10.5px, calc(14 * var(--u)));
  --fs-figure: calc(96 * var(--u));
  --pad-x: calc(150 * var(--u));
  --pad-top: calc(150 * var(--u));
  --pad-bottom: calc(120 * var(--u));
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--fg); }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-body); line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- typography ---------- */
.label, .kicker {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 400;
  color: var(--fg-3);
}
.kicker { color: var(--accent); display: flex; align-items: center; gap: calc(16 * var(--u)); }
.kicker::before { content: ""; width: calc(36 * var(--u)); min-width: 18px; height: 1px; background: currentColor; opacity: .8; }
.display { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 200; font-size: var(--fs-display); line-height: .94; letter-spacing: -.035em; }
.h1 { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 300; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.028em; }
.h2 { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 300; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em; }
.h3 { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.38; font-weight: 300; color: var(--fg-2); letter-spacing: -.005em; }
.body { color: var(--fg-2); }
.small { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-3); }
.figure { font-family: "Inter Tight", sans-serif; font-weight: 200; font-size: var(--fs-figure); letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--fg-3); }
.accent { color: var(--accent); }
strong { font-weight: 500; color: var(--fg); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- scene system ---------- */
.deck { position: relative; }
.scene { position: relative; overflow: hidden; background: var(--ink); min-height: 100vh; }
.scene[data-theme="graphite"] { background: radial-gradient(120% 90% at 70% 10%, #1b1f25 0%, var(--ink-2) 55%, #0c0d10 100%); }
.scene[data-theme="light"] { background: linear-gradient(180deg, #f1f2f4 0%, var(--paper) 60%, var(--paper-2) 100%); color: var(--paper-ink); }
.scene[data-theme="light"] .lead, .scene[data-theme="light"] .body { color: var(--paper-ink-2); }
.scene[data-theme="light"] .small, .scene[data-theme="light"] .label { color: #6b717a; }
.scene[data-theme="light"] .kicker { color: #3f6f97; }
.scene[data-theme="light"] strong { color: var(--paper-ink); }
.scene[data-theme="light"] .rule { background: var(--paper-line); }

.frame {
  position: absolute; left: 50%; top: 50%;
  width: calc(1920 * var(--u)); height: calc(1080 * var(--u));
  transform: translate(-50%, -50%);
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
}

/* full-bleed media */
.media { position: absolute; inset: 0; overflow: hidden; background: #0b0c0e; }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.media video { opacity: 0; transition: opacity .7s var(--ease); }
.media video.is-ready { opacity: 1; }
.media video.is-looping { opacity: 0; transition-duration: .45s; }
.media .cam { position: absolute; inset: 0; }
.shade { position: absolute; inset: 0; pointer-events: none; }
.shade--hero { background: linear-gradient(90deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,.72) 30%, rgba(8,9,11,.18) 55%, rgba(8,9,11,0) 72%), linear-gradient(0deg, rgba(8,9,11,.7) 0%, rgba(8,9,11,0) 38%), linear-gradient(180deg, rgba(8,9,11,.45) 0%, rgba(8,9,11,0) 25%); }
.shade--left { background: linear-gradient(90deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 38%, rgba(8,9,11,.35) 64%, rgba(8,9,11,.12) 100%), linear-gradient(0deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,0) 30%); }
.shade--deep { background: linear-gradient(90deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.93) 46%, rgba(8,9,11,.6) 72%, rgba(8,9,11,.35) 100%); }
.shade--bottom { background: linear-gradient(0deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.82) 24%, rgba(8,9,11,.35) 46%, rgba(8,9,11,0) 64%), linear-gradient(180deg, rgba(8,9,11,.5) 0%, rgba(8,9,11,0) 22%); }
.shade--full { background: rgba(8,9,11,.55); }

.caption-concept {
  position: absolute; right: var(--pad-x); bottom: calc(118 * var(--u));
  font-family: "IBM Plex Mono", monospace; font-size: max(10px, calc(12.5 * var(--u))); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); display: flex; gap: .8em; align-items: center;
}
.caption-concept::before { content: ""; width: .55em; height: .55em; border: 1px solid currentColor; border-radius: 50%; }
.tag-evidence {
  font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: #cfe3f2; display: inline-flex; align-items: center; gap: .7em;
}
.tag-evidence::before { content: ""; width: .6em; height: .6em; background: var(--accent); border-radius: 50%; }

/* ---------- presentation mode (JS) ---------- */
html.js, html.js body { height: 100%; overflow: hidden; }
html.js .deck { position: fixed; inset: 0; }
html.js .scene {
  position: absolute; inset: 0; min-height: 0;
  opacity: 0; visibility: hidden; z-index: 1;
  transition: opacity .85s var(--ease), visibility 0s linear .85s;
}
html.js .scene.is-active { opacity: 1; visibility: visible; z-index: 3; transition: opacity .85s var(--ease), visibility 0s; }
html.js .scene.is-leaving { visibility: visible; z-index: 2; opacity: 0; transition: opacity .85s var(--ease), visibility 0s linear .85s; }

/* subtle camera move on immersive media */
html.js .scene .media .cam { transform: scale(1.075); transition: transform 10s var(--ease-out); }
html.js .scene.is-active .media .cam { transform: scale(1); }
html.js .scene[data-cam="drift"] .media .cam { transform: scale(1.06) translateX(1.2%); }
html.js .scene[data-cam="drift"].is-active .media .cam { transform: scale(1.02) translateX(0); }

/* staged reveals */
html.js .scene [data-r] { opacity: 0; transform: translate3d(0, calc(22 * var(--u)), 0); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: 0s; }
html.js .scene.is-active [data-r] { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 1ms + 180ms); }
html.js .scene [data-r="fade"] { transform: none; }

/* ---------- chrome ---------- */
.chrome { display: none; }
html.js .chrome { display: block; }
.topbar { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: calc(110 * var(--u)); min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: calc(28 * var(--u)); color: inherit; text-decoration: none; }
.brand img { height: max(12px, calc(19 * var(--u))); width: auto; }
.brand .logo-dark { display: none; }
.brand .chapter-name { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); padding-left: calc(28 * var(--u)); border-left: 1px solid rgba(255,255,255,.25); line-height: 1.2; transition: color .4s; }
.tools { display: flex; gap: calc(10 * var(--u)); }
.icon-btn { appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; width: max(36px, calc(48 * var(--u))); height: max(36px, calc(48 * var(--u))); border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.icon-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.icon-btn:focus-visible, .chapter-link:focus-visible, .nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.icon-btn svg { width: 44%; height: 44%; }
.bottombar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(96 * var(--u)); min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); pointer-events: none; }
.bottombar > * { pointer-events: auto; }
.counter { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .16em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.counter b { color: #fff; font-weight: 500; }
.nav { display: flex; gap: calc(10 * var(--u)); }
.nav-btn { appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; height: max(36px, calc(48 * var(--u))); padding: 0 calc(22 * var(--u)); min-width: max(36px, calc(48 * var(--u))); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .6em; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; transition: background .25s, border-color .25s; }
.nav-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.nav-btn:disabled { opacity: .3; cursor: default; }
.nav-btn svg { width: 1.2em; height: 1.2em; }
.progress { position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .6s var(--ease-out); }
.hint { position: fixed; z-index: 21; left: 50%; bottom: calc(26 * var(--u)); transform: translateX(-50%); font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); transition: opacity .8s; pointer-events: none; }
.hint.is-hidden { opacity: 0; }

body.on-light .brand .logo-light { display: none; }
body.on-light .brand .logo-dark { display: block; }
body.on-light .brand .chapter-name { color: #5a616b; border-left-color: rgba(17,19,23,.2); }
body.on-light .icon-btn, body.on-light .nav-btn { color: var(--paper-ink); border-color: rgba(17,19,23,.22); }
body.on-light .icon-btn:hover, body.on-light .nav-btn:hover { background: rgba(17,19,23,.06); border-color: rgba(17,19,23,.45); }
body.on-light .counter { color: #5a616b; }
body.on-light .counter b { color: var(--paper-ink); }
body.on-light .hint { color: #6b717a; }
body.on-light .progress { background: rgba(17,19,23,.08); }

/* chapter menu */
.menu { position: fixed; inset: 0; z-index: 40; background: rgba(8,9,11,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; color: var(--fg); overflow-y: auto; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.menu-inner { max-width: calc(1500 * var(--u)); margin: 0 auto; padding: calc(150 * var(--u)) var(--pad-x) calc(110 * var(--u)); display: grid; grid-template-columns: 1fr 2.2fr; gap: calc(100 * var(--u)); min-height: 100%; }
.menu-inner .h2 { margin-top: calc(18 * var(--u)); }
.menu ol { counter-reset: ch; border-top: 1px solid var(--line); }
.chapter-link { appearance: none; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: calc(15 * var(--u)) 0; display: grid; grid-template-columns: calc(70 * var(--u)) 1fr auto; align-items: baseline; gap: calc(16 * var(--u)); cursor: pointer; color: var(--fg-2); transition: color .2s, padding .3s var(--ease-out); font-size: var(--fs-h3); font-family: "Inter Tight", sans-serif; font-weight: 300; }
.chapter-link .label { min-width: 30px; }
.chapter-link:hover, .chapter-link.is-current { color: #fff; padding-left: calc(10 * var(--u)); }
.chapter-link.is-current .label { color: var(--accent); }
.chapter-link .count { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); color: var(--fg-3); letter-spacing: .12em; }
.menu-close { position: absolute; top: calc(31 * var(--u)); right: var(--pad-x); }
.menu-keys { margin-top: calc(40 * var(--u)); display: grid; gap: .5em; }
.menu-keys kbd { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); border: 1px solid var(--line-strong); border-radius: 4px; padding: .1em .45em; margin-right: .5em; color: var(--fg); }

/* ================= scene compositions ================= */

/* 01 opening */
.s-opening .frame { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(190 * var(--u)); }
.s-opening .logo-hero { width: calc(250 * var(--u)); margin-bottom: calc(56 * var(--u)); }
.s-opening .display { max-width: calc(900 * var(--u)); font-size: calc(124 * var(--u)); }
.s-opening .display span { display: block; color: var(--silver); }
.s-opening .sub { margin-top: calc(40 * var(--u)); display: flex; gap: calc(54 * var(--u)); align-items: baseline; max-width: calc(700 * var(--u)); }
.s-opening .sub .lead { color: #e6e8eb; }
.s-opening .meta { position: absolute; left: var(--pad-x); bottom: calc(118 * var(--u)); }

/* 02 opportunity */
.s-opportunity .frame { display: flex; flex-direction: column; justify-content: center; }
.s-opportunity .h1 { max-width: calc(980 * var(--u)); margin-top: calc(30 * var(--u)); }
.s-opportunity .lead { max-width: calc(760 * var(--u)); margin-top: calc(38 * var(--u)); }
.principles { margin-top: calc(64 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(250 * var(--u))); gap: calc(40 * var(--u)); }
.principles li { border-top: 1px solid var(--line-strong); padding-top: calc(18 * var(--u)); }
.principles .h3 { margin-top: calc(10 * var(--u)); color: var(--fg); font-size: max(15px, calc(24 * var(--u))); }

/* 03 at a glance */
.s-glance .frame { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(120 * var(--u)); align-content: center; }
.s-glance .h1 { margin-top: calc(26 * var(--u)); }
.s-glance .lead { margin-top: calc(32 * var(--u)); }
.glance-total { margin-top: calc(60 * var(--u)); padding-top: calc(26 * var(--u)); border-top: 1px solid var(--line-strong); }
.glance-total .figure { margin-top: calc(14 * var(--u)); }
.glance-total .small { margin-top: calc(14 * var(--u)); }
.streams { border-top: 1px solid var(--line-strong); }
.streams li { display: grid; grid-template-columns: calc(70 * var(--u)) 1fr calc(260 * var(--u)) calc(230 * var(--u)); gap: calc(20 * var(--u)); align-items: baseline; padding: calc(25 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.streams .h3 { color: var(--fg); }
.streams .small { margin-top: calc(6 * var(--u)); }
.streams .amt { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(17px, calc(34 * var(--u))); letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.streams .trl { text-align: left; }
.pill-trl { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .12em; color: var(--fg-2); white-space: nowrap; }
.pill-trl b { color: var(--accent); font-weight: 500; }

/* 04 evidence */
.s-evidence .frame { display: grid; grid-template-columns: calc(470 * var(--u)) 1fr; gap: calc(80 * var(--u)); padding-top: calc(140 * var(--u)); }
.s-evidence .intro { display: flex; flex-direction: column; justify-content: center; }
.s-evidence .h1 { margin-top: calc(26 * var(--u)); font-size: calc(70 * var(--u)); }
.s-evidence .lead { margin-top: calc(30 * var(--u)); font-size: max(16px, calc(26 * var(--u))); }
.s-evidence .status { margin-top: calc(48 * var(--u)); border-top: 1px solid var(--line-strong); }
.s-evidence .status li { display: flex; justify-content: space-between; padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.3fr 1fr; gap: calc(18 * var(--u)); height: calc(800 * var(--u)); }
.ev { position: relative; margin: 0; overflow: hidden; background: #000; }
.ev img { width: 100%; height: 100%; object-fit: cover; }
.ev figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(40 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0)); font-size: var(--fs-small); color: #e9ecef; line-height: 1.35; }
.ev figcaption .label { display: block; color: rgba(255,255,255,.62); margin-bottom: .35em; }
.ev--c { grid-column: 1 / 4; grid-row: 2; }
.ev--a img { object-position: 50% 50%; }

/* 05 architecture (light) */
.s-architecture .frame { display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; gap: calc(60 * var(--u)); }
.s-architecture .intro { padding-top: calc(10 * var(--u)); }
.s-architecture .h1 { margin-top: calc(26 * var(--u)); font-size: calc(68 * var(--u)); }
.s-architecture .lead { margin-top: calc(28 * var(--u)); font-size: max(16px, calc(25 * var(--u))); }
.render-thumb { margin-top: calc(46 * var(--u)); display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(22 * var(--u)); align-items: end; }
.render-thumb img { width: calc(150 * var(--u)); height: calc(174 * var(--u)); object-fit: cover; border: 1px solid var(--paper-line); }
.stack-wrap { position: relative; height: calc(810 * var(--u)); }
.stack-svg { position: absolute; left: 0; top: 0; width: calc(560 * var(--u)); height: calc(810 * var(--u)); overflow: visible; }
.stack-svg .plate { transition: transform 1.4s var(--ease-out); }
html.js .s-architecture .stack-svg .plate { transform: translateY(var(--collapse, 0)); }
html.js .s-architecture.is-active .stack-svg .plate { transform: none; transition-delay: calc(var(--pd, 0) * 1ms + 250ms); }
.layers { position: absolute; left: calc(610 * var(--u)); right: 0; top: 0; height: 100%; }
.layer { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: calc(54 * var(--u)) 1fr; gap: calc(12 * var(--u)); transform: translateY(-50%); }
.layer .idx { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); color: #3f6f97; letter-spacing: .1em; padding-top: .45em; }
.layer .h3 { color: var(--paper-ink); font-size: max(15px, calc(26 * var(--u))); }
.layer .small { margin-top: calc(4 * var(--u)); color: #5c636c; }
.layer::before { content: ""; position: absolute; right: 100%; top: .85em; width: calc(70 * var(--u)); height: 1px; background: rgba(17,19,23,.3); margin-right: calc(14 * var(--u)); }
.diagram-note { position: absolute; left: var(--pad-x); bottom: calc(112 * var(--u)); }

/* 06 manufacturing overview */
.s-flow .head { max-width: calc(1200 * var(--u)); }
.s-flow .h1 { margin-top: calc(22 * var(--u)); font-size: calc(62 * var(--u)); }
.s-flow .lead { margin-top: calc(18 * var(--u)); font-size: max(15px, calc(24 * var(--u))); max-width: calc(1050 * var(--u)); }
.flow { position: absolute; left: var(--pad-x); right: var(--pad-x); top: calc(430 * var(--u)); height: calc(520 * var(--u)); }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.node { position: absolute; width: calc(330 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--line-strong); background: rgba(12,14,17,.86); }
.node .label { color: var(--accent); }
.node .h3 { margin-top: calc(6 * var(--u)); font-size: max(14px, calc(25 * var(--u))); color: var(--fg); }
.node .small { margin-top: calc(4 * var(--u)); color: var(--fg-3); }
.node--core { border-color: rgba(143,182,214,.7); background: rgba(22,30,40,.9); }
.lane-label { position: absolute; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }

/* 07/08 stage tables */
.s-stages .h1 { margin-top: calc(22 * var(--u)); font-size: calc(58 * var(--u)); }
.stage-table { width: 100%; border-collapse: collapse; margin-top: calc(46 * var(--u)); table-layout: fixed; }
.stage-table th { text-align: left; font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 0 calc(18 * var(--u)) calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line-strong); }
.stage-table td { vertical-align: top; padding: calc(25 * var(--u)) calc(20 * var(--u)) calc(25 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: max(13px, calc(20 * var(--u))); color: var(--fg-2); line-height: 1.45; }
.stage-table td:first-child { font-family: "IBM Plex Mono", monospace; color: var(--accent); font-size: var(--fs-label); padding-top: calc(36 * var(--u)); }
.stage-table .stage-name { font-family: "Inter Tight", sans-serif; font-size: max(15px, calc(28 * var(--u))); color: var(--fg); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.stage-table .qc { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.qc span { font-family: "IBM Plex Mono", monospace; font-size: max(10px, calc(14 * var(--u))); letter-spacing: .06em; padding: .2em .55em; border: 1px solid var(--line-strong); color: var(--fg-2); white-space: nowrap; }
.stage-table .flag { display: block; margin-top: .5em; font-size: max(11px, calc(14.5 * var(--u))); color: #c9b98d; }
.stage-table .flag::before { content: "◦ "; }
.stages-foot { margin-top: calc(26 * var(--u)); }

/* 09 geography (light) */
.s-geo .frame { display: grid; grid-template-columns: calc(640 * var(--u)) 1fr; gap: calc(60 * var(--u)); }
.s-geo .h1 { margin-top: calc(26 * var(--u)); font-size: calc(68 * var(--u)); }
.s-geo .lead { margin-top: calc(26 * var(--u)); font-size: max(16px, calc(25 * var(--u))); }
.supply { margin-top: calc(44 * var(--u)); border-top: 1px solid var(--paper-line); }
.supply li { display: grid; grid-template-columns: 1fr auto; padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--paper-line); font-size: var(--fs-body); color: var(--paper-ink); }
.supply li span:last-child { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: #4f6f8c; padding-top: .3em; }
.supply li.hq { font-weight: 500; }
.geo-svg { width: 100%; height: calc(790 * var(--u)); overflow: visible; }
.geo-svg text { font-family: "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
html.js .s-geo .route { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.2s var(--ease-out) .5s; }
html.js .s-geo.is-active .route { stroke-dashoffset: 0; }

/* chapter openers */
.s-chapter .frame { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(170 * var(--u)); }
.chapter-grid { display: grid; grid-template-columns: 1fr calc(930 * var(--u)); gap: calc(80 * var(--u)); align-items: end; }
.chapter-grid .trl-track { margin-top: 0; }
.chapter-foot { margin-top: calc(22 * var(--u)); text-align: right; color: rgba(255,255,255,.7) !important; }
.s-chapter .chapter-no { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .2em; color: rgba(255,255,255,.7); }
.s-chapter .display { margin-top: calc(14 * var(--u)); font-size: calc(160 * var(--u)); }
.s-chapter .lead { margin-top: calc(22 * var(--u)); max-width: calc(640 * var(--u)); color: #e3e6e9; }
.trl-track { margin-top: calc(56 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(300 * var(--u))); gap: 0; max-width: calc(960 * var(--u)); }
.trl-step { border-top: 1px solid rgba(255,255,255,.35); padding-top: calc(16 * var(--u)); padding-right: calc(28 * var(--u)); position: relative; }
.trl-step::before { content: ""; position: absolute; top: calc(-5 * var(--u)); left: 0; width: calc(9 * var(--u)); height: calc(9 * var(--u)); min-width: 6px; min-height: 6px; border-radius: 50%; background: #fff; transform: translateY(-1px); }
.trl-step.is-now::before { background: var(--accent); box-shadow: 0 0 0 calc(6 * var(--u)) rgba(143,182,214,.22); }
.trl-step .h2 { font-size: calc(50 * var(--u)); color: #fff; }
.trl-step .small { margin-top: calc(6 * var(--u)); color: rgba(255,255,255,.72); }

/* product detail scenes */
.s-detail .frame { display: grid; grid-template-columns: calc(470 * var(--u)) 1fr; grid-template-rows: auto 1fr; column-gap: calc(90 * var(--u)); }
.s-detail .intro { grid-row: 1 / 3; }
.s-detail .h1 { margin-top: calc(26 * var(--u)); font-size: calc(64 * var(--u)); }
.s-detail .lead { margin-top: calc(24 * var(--u)); font-size: max(15px, calc(24 * var(--u))); }
.s-detail .total { margin-top: calc(50 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid var(--line-strong); }
.s-detail .total .figure { margin-top: calc(10 * var(--u)); font-size: calc(88 * var(--u)); }
.s-detail .total .small { margin-top: calc(10 * var(--u)); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(60 * var(--u)); }
.col { border-top: 1px solid var(--line-strong); padding-top: calc(20 * var(--u)); display: flex; flex-direction: column; }
.col .cost-line { margin-top: auto; padding-top: calc(22 * var(--u)); flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); }
.col .h3 { color: var(--fg); }
.facts { margin-top: calc(18 * var(--u)); display: grid; gap: calc(9 * var(--u)); }
.facts li { display: grid; grid-template-columns: calc(190 * var(--u)) 1fr; gap: calc(14 * var(--u)); font-size: var(--fs-small); color: var(--fg-2); line-height: 1.4; }
.facts li > span:first-child { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: .25em; }
.cost-line { margin-top: calc(22 * var(--u)); display: flex; align-items: baseline; gap: calc(18 * var(--u)); flex-wrap: wrap; }
.cost-line .amt { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(18px, calc(40 * var(--u))); letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.cost-line .small { color: var(--fg-3); }
.timeline { grid-column: 2; align-self: end; margin-top: calc(36 * var(--u)); }
.tl-grid { position: relative; margin-top: calc(14 * var(--u)); }
.tl-axis { display: grid; grid-template-columns: repeat(32, 1fr); border-bottom: 1px solid var(--line-strong); font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); color: var(--fg-3); letter-spacing: .08em; }
.tl-axis span { padding-bottom: calc(8 * var(--u)); white-space: nowrap; }
.tl-axis .yr { color: var(--fg-2); grid-column: span 12; border-left: 1px solid var(--line-strong); padding-left: calc(8 * var(--u)); }
.tl-axis .yr.short { grid-column: span 8; }
.tl-row { display: grid; grid-template-columns: repeat(32, 1fr); align-items: center; height: calc(42 * var(--u)); min-height: 22px; border-bottom: 1px solid var(--line); position: relative; }
.bar { height: calc(24 * var(--u)); min-height: 14px; display: flex; align-items: center; padding: 0 calc(10 * var(--u)); font-size: max(10px, calc(13 * var(--u))); font-family: "IBM Plex Mono", monospace; letter-spacing: .04em; white-space: nowrap; overflow: hidden; color: #0b0c0e; }
.bar--dev { background: #d8dde3; }
.bar--test { background: rgba(143,182,214,.9); }
.bar--test-light { background: rgba(143,182,214,.35); color: #e6eef5; border: 1px dashed rgba(143,182,214,.75); }
.bar--sub { background: transparent; border: 1px solid rgba(255,255,255,.35); color: var(--fg-2); }
.ms { position: absolute; top: 50%; width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 9px; min-height: 9px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.ms-label { position: absolute; top: 50%; transform: translateY(-50%); font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); letter-spacing: .06em; color: #fff; white-space: nowrap; padding-left: calc(14 * var(--u)); }
.tl-legend { margin-top: calc(12 * var(--u)); display: flex; gap: calc(26 * var(--u)); flex-wrap: wrap; }
.media-strip { position: absolute; top: 0; right: 0; bottom: 0; width: 34%; }
.media-strip img { width: 100%; height: 100%; object-fit: cover; }

/* roller blind */
.s-blind .frame { display: grid; grid-template-columns: calc(600 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); }
.s-blind .h1 { margin-top: calc(26 * var(--u)); font-size: calc(64 * var(--u)); }
.s-blind .scope { margin-top: calc(30 * var(--u)); display: grid; gap: calc(10 * var(--u)); }
.s-blind .scope li { display: flex; gap: calc(14 * var(--u)); align-items: baseline; font-size: var(--fs-body); color: var(--fg-2); }
.s-blind .scope li::before { content: ""; flex: none; width: calc(10 * var(--u)); min-width: 6px; height: 1px; background: var(--accent); transform: translateY(-.3em); }
.s-blind .scope li.no::before { background: var(--fg-3); }
.draft-tag { display: inline-flex; gap: .6em; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: #d9c48f; border: 1px solid rgba(217,196,143,.45); padding: .35em .7em; }

/* appearance detail */
.s-appearance .frame { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; column-gap: calc(70 * var(--u)); }
.s-appearance .h1 { margin-top: calc(26 * var(--u)); font-size: calc(60 * var(--u)); }
.s-appearance .lead { margin-top: calc(22 * var(--u)); font-size: max(15px, calc(23 * var(--u))); }
.goals { margin-top: calc(30 * var(--u)); border-top: 1px solid var(--line-strong); }
.goals li { display: grid; grid-template-columns: calc(44 * var(--u)) 1fr; padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.goals li b { font-weight: 400; color: var(--fg); display: block; font-size: var(--fs-body); }
.goals .label { padding-top: .35em; color: var(--accent); }
.mosaic { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(16 * var(--u)); height: calc(560 * var(--u)); }
.mosaic .ev video, .mosaic .ev img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .ev--tall { grid-row: 1 / 3; }
.learn { margin-top: calc(26 * var(--u)); display: grid; grid-template-columns: calc(250 * var(--u)) 1fr; gap: calc(30 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--line-strong); }
.learn ul { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)) calc(30 * var(--u)); }
.learn li { font-size: var(--fs-small); color: var(--fg-2); }

/* industrialisation */
.s-industrial .frame { display: grid; grid-template-columns: calc(820 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); }
.s-industrial .h1 { margin-top: calc(26 * var(--u)); font-size: calc(66 * var(--u)); }
.s-industrial .lead { margin-top: calc(24 * var(--u)); font-size: max(15px, calc(24 * var(--u))); max-width: calc(720 * var(--u)); }
.equip { margin-top: calc(36 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.equip li { padding: calc(16 * var(--u)) calc(18 * var(--u)) 0 0; }
.equip .h3 { color: var(--fg); font-size: max(14px, calc(24 * var(--u))); margin-top: calc(6 * var(--u)); }
.kpis { margin-top: calc(48 * var(--u)); display: grid; grid-template-columns: repeat(3, auto); gap: calc(60 * var(--u)); justify-content: start; }
.kpis .figure { font-size: calc(80 * var(--u)); margin-top: calc(10 * var(--u)); }
.kpis .small { margin-top: calc(8 * var(--u)); max-width: calc(240 * var(--u)); }
.footnote { position: absolute; left: var(--pad-x); bottom: calc(112 * var(--u)); max-width: calc(980 * var(--u)); }

/* roadmap (light) */
.s-roadmap .h1 { margin-top: calc(16 * var(--u)); font-size: calc(54 * var(--u)); }
.s-roadmap .frame { padding-top: calc(135 * var(--u)); }
.s-roadmap .head { display: flex; justify-content: space-between; align-items: end; }
.s-roadmap .head-right { text-align: right; }
.gantt { margin-top: calc(26 * var(--u)); display: grid; grid-template-columns: calc(430 * var(--u)) repeat(24, 1fr) calc(170 * var(--u)); font-size: var(--fs-small); color: var(--paper-ink); }
.g-h { font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12.5 * var(--u))); letter-spacing: .08em; color: #6b717a; padding: calc(6 * var(--u)) 0; text-align: center; border-bottom: 1px solid var(--paper-line); }
.g-h.yr { grid-column: span 12; text-align: left; padding-left: calc(8 * var(--u)); color: var(--paper-ink); border-left: 1px solid rgba(17,19,23,.25); font-weight: 500; }
.g-h.left { text-align: left; }
.g-h.right { text-align: right; }
.g-label { padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) 0; border-bottom: 1px solid var(--paper-line); line-height: 1.2; display: flex; flex-direction: column; justify-content: center; min-height: calc(52 * var(--u)); }
.g-label b { font-weight: 500; }
.g-label .small { font-size: max(11px, calc(14.5 * var(--u))); color: #6b717a; }
.g-track { grid-column: span 24; position: relative; border-bottom: 1px solid var(--paper-line); background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), rgba(17,19,23,.06) calc(100% / 24 - 1px), rgba(17,19,23,.06) calc(100% / 24)); }
.g-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(17,19,23,.25); }
.g-bar { position: absolute; top: 50%; height: calc(22 * var(--u)); min-height: 12px; transform: translateY(-50%); display: flex; align-items: center; padding-left: calc(8 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); letter-spacing: .04em; white-space: nowrap; color: #0e1013; }
.g-bar.dev { background: #c3ccd5; }
.g-bar.test { background: #8fb6d6; }
.g-bar.app { background: #b9c3cc; }
.g-bar.ind { background: #3a414a; color: #fff; }
.g-sop { position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(68 * var(--u)); min-width: 34px; height: calc(30 * var(--u)); min-height: 16px; background: #111317; color: #fff; display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); letter-spacing: .1em; }
.g-amt { border-bottom: 1px solid var(--paper-line); text-align: right; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; font-family: "Inter Tight", sans-serif; font-size: max(13px, calc(21 * var(--u))); }
html.js .s-roadmap .g-bar { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out); }
html.js .s-roadmap.is-active .g-bar { clip-path: inset(0 0 0 0); transition-delay: calc(var(--d, 0) * 1ms + 350ms); }
.timing-note { margin-top: calc(20 * var(--u)); display: grid; grid-template-columns: calc(430 * var(--u)) 1fr; border-top: 1px solid rgba(17,19,23,.3); padding-top: calc(16 * var(--u)); }
.timing-note ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(30 * var(--u)); }
.timing-note li { font-size: max(11.5px, calc(17 * var(--u))); color: var(--paper-ink-2); line-height: 1.35; }
.timing-note li b { display: block; color: var(--paper-ink); font-weight: 500; font-family: "Inter Tight", sans-serif; font-size: max(14px, calc(22 * var(--u))); }

/* budget (light) */
.s-budget .frame { display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; column-gap: calc(90 * var(--u)); }
.s-budget .h1 { margin-top: calc(24 * var(--u)); font-size: calc(62 * var(--u)); }
.s-budget .figure { margin-top: calc(44 * var(--u)); font-size: calc(112 * var(--u)); color: var(--paper-ink); }
.s-budget .year-split { margin-top: calc(40 * var(--u)); border-top: 1px solid var(--paper-line); }
.s-budget .year-split li { display: flex; justify-content: space-between; align-items: baseline; padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--paper-line); }
.s-budget .year-split .amt { font-family: "Inter Tight", sans-serif; font-size: max(16px, calc(32 * var(--u))); font-weight: 300; font-variant-numeric: tabular-nums; }
.budget-table { width: 100%; border-collapse: collapse; color: var(--paper-ink); }
.budget-table caption { text-align: left; padding-bottom: calc(14 * var(--u)); }
.budget-table th { text-align: right; font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: #6b717a; padding: 0 0 calc(12 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid rgba(17,19,23,.35); }
.budget-table th:first-child { text-align: left; padding-left: 0; }
.budget-table td { text-align: right; padding: calc(16 * var(--u)) 0 calc(16 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--paper-line); font-variant-numeric: tabular-nums; font-size: var(--fs-body); vertical-align: top; }
.budget-table td:first-child { text-align: left; padding-left: 0; font-family: "Inter Tight", sans-serif; font-size: max(15px, calc(25 * var(--u))); }
.budget-table td .small { display: block; font-size: max(11px, calc(14.5 * var(--u))); color: #6b717a; margin-top: .2em; font-family: "Inter", sans-serif; }
.budget-table td.total { font-weight: 500; }
.budget-table tr.sum td { border-bottom: 0; border-top: 1px solid rgba(17,19,23,.5); font-weight: 500; font-size: max(16px, calc(28 * var(--u))); padding-top: calc(18 * var(--u)); }
.budget-note { margin-top: calc(22 * var(--u)); }

/* closing */
.s-closing .frame { display: flex; flex-direction: column; justify-content: center; }
.s-closing .h1 { margin-top: calc(26 * var(--u)); max-width: calc(900 * var(--u)); font-size: calc(84 * var(--u)); }
.s-closing .align { margin-top: calc(56 * var(--u)); display: grid; grid-template-columns: repeat(4, calc(222 * var(--u))); gap: calc(30 * var(--u)); }
.s-closing .align li { border-top: 1px solid rgba(255,255,255,.4); padding-top: calc(16 * var(--u)); font-size: var(--fs-small); color: rgba(255,255,255,.78); }
.s-closing .align li b { display: block; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: max(15px, calc(25 * var(--u))); color: #fff; margin: calc(8 * var(--u)) 0 calc(6 * var(--u)); }
.s-closing .thanks { margin-top: calc(70 * var(--u)); display: flex; align-items: center; gap: calc(36 * var(--u)); }
.s-closing .thanks img { width: calc(220 * var(--u)); }

/* appendix */
.s-appendix .h1 { margin-top: calc(22 * var(--u)); font-size: calc(56 * var(--u)); }
.qc-matrix { margin-top: calc(40 * var(--u)); width: 100%; border-collapse: collapse; }
.qc-matrix th { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); padding: 0 calc(10 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--line-strong); text-align: center; }
.qc-matrix th:first-child, .qc-matrix td:first-child { text-align: left; padding-left: 0; }
.qc-matrix td { text-align: center; padding: calc(13 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.qc-matrix td:first-child { font-family: "Inter Tight", sans-serif; font-size: max(14px, calc(23 * var(--u))); color: var(--fg); }
.qc-matrix td:first-child .label { margin-right: calc(16 * var(--u)); color: var(--accent); }
.dot { display: inline-block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--accent); }
.notes-grid { margin-top: calc(40 * var(--u)); display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(80 * var(--u)); }
.trl-defs { border-top: 1px solid var(--line-strong); }
.trl-defs li { display: grid; grid-template-columns: calc(110 * var(--u)) 1fr; padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.trl-defs li b { font-family: "IBM Plex Mono", monospace; font-weight: 500; color: var(--accent); font-size: var(--fs-label); letter-spacing: .1em; padding-top: .2em; }
.notes-list { display: grid; gap: calc(18 * var(--u)); }
.notes-list li { font-size: var(--fs-small); color: var(--fg-2); padding-left: calc(22 * var(--u)); position: relative; }
.notes-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: calc(10 * var(--u)); min-width: 6px; height: 1px; background: var(--fg-3); }

/* film control (reduced motion) */
.film-toggle { display: none; position: absolute; z-index: 6; right: var(--pad-x); top: calc(130 * var(--u)); }
html.reduce-motion .film-toggle { display: inline-flex; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  html.js .scene, html.js .scene.is-active, html.js .scene.is-leaving { transition-duration: .01s !important; }
  html.js .scene [data-r] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .scene .media .cam { transform: none !important; transition: none !important; }
  html.js .s-architecture .stack-svg .plate { transform: none !important; transition: none !important; }
  html.js .s-geo .route { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .s-roadmap .g-bar { clip-path: none !important; transition: none !important; }
  .progress i { transition: none; }
}

/* ================= no-JS / static document fallback ================= */
html:not(.js) .scene { height: 100vh; min-height: calc(1080 * var(--u)); }
html:not(.js) .media video { display: none; }

/* ================= small screens: fluid, scrollable scenes ================= */
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  :root {
    --fs-display: 46px; --fs-h1: 33px; --fs-h2: 25px; --fs-h3: 18px; --fs-lead: 17px; --fs-body: 15.5px; --fs-small: 13.5px; --fs-label: 10.5px; --fs-figure: 44px;
    --pad-x: 20px; --pad-top: 78px; --pad-bottom: 88px;
  }
  html.js .scene { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  html:not(.js) .scene { height: auto; min-height: 100vh; }
  .frame, .s-opening .frame, .s-chapter .frame { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; min-height: 100%; display: block !important; padding: var(--pad-top) var(--pad-x) var(--pad-bottom); }
  .scene > .media { position: absolute; inset: 0; height: 100%; }
  .s-opening .frame, .s-chapter .frame { min-height: 100svh; display: flex !important; flex-direction: column; justify-content: flex-end; }
  .s-opening .logo-hero { width: 150px; margin-bottom: 26px; }
  .s-opening .sub { flex-direction: column; gap: 10px; }
  .s-opening .meta, .caption-concept, .diagram-note, .footnote { position: static; margin-top: 22px; }
  .caption-concept { justify-content: flex-start; }
  .shade--left, .shade--deep, .shade--hero { background: linear-gradient(0deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.78) 55%, rgba(8,9,11,.45) 100%); }
  .chapter-grid, .principles, .streams li, .equip, .kpis, .s-closing .align, .cols, .notes-grid, .learn, .learn ul, .timing-note, .timing-note ul, .mosaic, .evidence-grid, .trl-track { grid-template-columns: 1fr !important; }
  .principles, .kpis, .s-closing .align, .cols, .notes-grid { gap: 20px; }
  .streams li { gap: 4px; padding: 16px 0; }
  .streams .amt { text-align: left; }
  .s-glance .frame > * + *, .s-evidence .frame > * + *, .s-architecture .frame > * + *, .s-geo .frame > * + *, .s-detail .frame > * + *, .s-blind .frame > * + *, .s-appearance .frame > * + *, .s-industrial .frame > * + *, .s-budget .frame > * + * { margin-top: 32px; }
  .evidence-grid { height: auto; grid-template-rows: none; }
  .ev, .ev--a, .ev--b, .ev--c, .ev--d { grid-row: auto !important; aspect-ratio: 4 / 3; }
  .ev--a, .ev--b { aspect-ratio: 3 / 4; }
  .mosaic { height: auto; grid-template-rows: none; }
  .mosaic .ev, .mosaic .ev--tall { grid-row: auto; aspect-ratio: 16 / 10; }
  .stack-wrap { height: auto; display: grid; gap: 22px; }
  .stack-svg { position: relative; width: 100%; max-width: 360px; height: auto; aspect-ratio: 560 / 810; margin: 0 auto; }
  .layers { position: static; display: grid; gap: 14px; }
  .layer { position: static; transform: none; }
  .layer::before { display: none; }
  .render-thumb { grid-template-columns: 90px 1fr; }
  .render-thumb img { width: 90px; height: 104px; }
  .flow { position: static; height: auto; margin-top: 24px; display: grid; gap: 10px; }
  .flow-svg, .lane-label { display: none; }
  .node { position: static !important; width: auto; }
  .stage-table, .stage-table tbody, .stage-table tr, .stage-table td { display: block; width: 100%; }
  .stage-table thead { display: none; }
  .stage-table tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .stage-table td { border: 0; padding: 3px 0; }
  .stage-table td[data-h]::before { content: attr(data-h); display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-top: 6px; }
  .geo-svg { height: auto; aspect-ratio: 1080 / 790; }
  .facts li { grid-template-columns: 110px 1fr; }
  .timeline { margin-top: 30px; overflow-x: auto; }
  .tl-grid { min-width: 620px; }
  .media-strip { display: none; }
  .gantt-wrap { overflow-x: auto; margin-right: calc(-1 * var(--pad-x)); padding-right: var(--pad-x); }
  .gantt { min-width: 900px; grid-template-columns: 210px repeat(24, 1fr) 100px; }
  .s-roadmap .head { display: block; }
  .s-roadmap .head-right { text-align: left; margin-top: 10px; }
  .budget-table td:nth-child(2), .budget-table th:nth-child(2), .budget-table td:nth-child(3), .budget-table th:nth-child(3) { display: none; }
  .qc-wrap { overflow-x: auto; }
  .qc-matrix { min-width: 640px; }
  .menu-inner { grid-template-columns: 1fr; gap: 20px; padding-top: 70px; }
  .chapter-link { grid-template-columns: 40px 1fr auto; padding: 12px 0; }
  .topbar { background: linear-gradient(180deg, rgba(8,9,11,.6), rgba(8,9,11,0)); }
  body.on-light .topbar { background: linear-gradient(180deg, rgba(236,238,240,.92), rgba(236,238,240,0)); }
  .brand .chapter-name { display: none; }
  .nav-btn .txt { display: none; }
  .hint { display: none; }
  .s-chapter .display { font-size: 58px; }
  .chapter-grid { gap: 24px; }
  .chapter-foot { text-align: left; }
  .trl-step .h2 { font-size: 26px; }
  .trl-track { gap: 14px; }
  .film-toggle { top: 70px; }
  .scene .frame { padding: var(--pad-top) var(--pad-x) var(--pad-bottom) !important; }
  /* token sizes override per-scene desktop sizing */
  .scene .h1, .scene .s-evidence .h1 { font-size: var(--fs-h1) !important; }
  .scene .display { font-size: var(--fs-display) !important; }
  .scene .figure { font-size: var(--fs-figure) !important; }
  .scene .lead { font-size: var(--fs-lead) !important; max-width: none !important; }
  .scene .h2, .trl-step .h2 { font-size: var(--fs-h2) !important; }
  .s-opening .display, .s-opening .sub, .s-opportunity .h1, .s-closing .h1, .s-industrial .lead { max-width: none !important; }
  .facts li { grid-template-columns: 96px 1fr !important; }
  .layer { grid-template-columns: 34px 1fr !important; }
  .trl-defs li { grid-template-columns: 64px 1fr !important; }
  .goals li { grid-template-columns: 34px 1fr !important; }
  .chapter-link { font-size: 18px; }
  .kpis .small, .s-closing .align li { max-width: none !important; }
  .s-closing .thanks img { width: 140px; }
  .s-closing .thanks { gap: 18px; }
  .ev--c { grid-column: auto !important; }
  .glance-total, .s-detail .total { margin-top: 26px; }
  .equip li { padding: 10px 0 0; }
  .kicker::before { width: 18px; }
  .principles .h3, .equip .h3, .layer .h3, .node .h3 { font-size: 17px !important; }
}

/* ================= print / PDF: one 16:9 page per scene ================= */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  :root { --u: 1px; }
  html, body { height: auto !important; overflow: visible !important; background: #0b0c0e; }
  html.js .deck { position: static; }
  html.js .scene, .scene { position: relative !important; inset: auto; width: 1920px; height: 1080px; min-height: 0; opacity: 1 !important; visibility: visible !important; page-break-after: always; break-after: page; overflow: hidden; }
  html.js .scene [data-r] { opacity: 1 !important; transform: none !important; }
  html.js .scene .media .cam { transform: none !important; }
  html.js .s-architecture .stack-svg .plate { transform: none !important; }
  html.js .s-geo .route { stroke-dashoffset: 0 !important; }
  html.js .s-roadmap .g-bar { clip-path: none !important; }
  .media video { display: none !important; }
  .chrome, .menu, .film-toggle { display: none !important; }
  .print-folio { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.print-folio { display: none; position: absolute; right: var(--pad-x); bottom: calc(46 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; color: rgba(255,255,255,.55); }
.scene[data-theme="light"] .print-folio { color: #6b717a; }
.print-brand { display: none; position: absolute; left: var(--pad-x); top: calc(46 * var(--u)); }
.print-brand img { height: calc(19 * var(--u)); width: auto; }
@media print { .print-brand { display: block; } .scene[data-theme="light"] .print-brand .lb { display: none; } .scene:not([data-theme="light"]) .print-brand .db { display: none; } }

/* ================= PDF export mode (used by build/make_pdf.py) ================= */
html.pdf-mode .chrome, html.pdf-mode .menu, html.pdf-mode .film-toggle { display: none !important; }
html.pdf-mode .media video { display: none !important; }
html.pdf-mode .scene, html.pdf-mode .scene * { transition: none !important; }
html.pdf-mode .scene [data-r] { opacity: 1 !important; transform: none !important; }
html.pdf-mode .scene .media .cam { transform: none !important; }
html.pdf-mode .print-folio, html.pdf-mode .print-brand { display: block !important; }
html.pdf-mode .scene[data-theme="light"] .print-brand .lb { display: none; }
html.pdf-mode .scene:not([data-theme="light"]) .print-brand .db { display: none; }