/* =============================================================================
   HFG — design system
   Dark graphite, one orange engineering signal, grotesk + mono.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* surfaces: depth from graphite layers, never one flat black */
  --bg-0: #050609;
  --bg-1: #090b0f;
  --bg-2: #0e1116;
  --bg-3: #141820;
  --bg-4: #1b2029;
  --steel: #8b95a4;

  /* text */
  --text: #eef1f5;
  --text-2: #b9c0cb;
  --text-3: #858d99;   /* ≥ 5:1 on --bg-1 */

  /* lines */
  --line: rgba(214, 224, 238, 0.09);
  --line-2: rgba(214, 224, 238, 0.16);
  --line-3: rgba(214, 224, 238, 0.28);
  --line-ui: #5f6876;  /* outlines that identify a control: ≥ 3:1 on every surface (WCAG 1.4.11) */

  /* the engineering signal */
  --accent: #ff6a1f;
  --accent-2: #ff8b52;
  --accent-soft: rgba(255, 106, 31, 0.14);
  --accent-line: rgba(255, 106, 31, 0.55);
  --ok: #7fd1a6;
  --warn: #ffb35c;
  --error: #ff7a70;

  /* type */
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-display: clamp(3rem, 1.2rem + 7.2vw, 9rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 4.4vw, 6rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 4rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* layout */
  --max: 1440px;
  --gutter: clamp(16px, 3.2vw, 56px);
  --header-h: 72px;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg-1);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--accent); color: #0b0b0b; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--gutter); top: 10px; z-index: 1000;
  padding: 0.6rem 1rem; background: var(--accent); color: #0b0b0b; font-weight: 600;
  transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---- typography primitives ------------------------------------------------ */
.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label--accent { color: var(--accent); }
.index { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.index b { color: var(--accent); font-weight: 500; }
.display { font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.035em; font-weight: 600; }
.h1 { font-size: var(--fs-h1); line-height: 0.96; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 40ch; }
.body { color: var(--text-2); max-width: 62ch; }
.body + .body { margin-top: 1em; }
.small { font-size: var(--fs-small); color: var(--text-3); line-height: 1.55; }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- layout ------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(80px, 11vw, 168px); background: var(--bg-1); }
.section--0 { background: var(--bg-0); }
.section--2 { background: var(--bg-2); }
.section + .section { border-top: 1px solid var(--line); }
.head { display: grid; gap: 1.25rem; margin-bottom: clamp(40px, 6vw, 88px); max-width: 64rem; }
.head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); max-width: none; align-items: end; }
.head--split > :first-child { grid-column: 1 / 8; display: grid; gap: 1.25rem; }
.head--split > :last-child { grid-column: 8 / -1; }
@media (max-width: 900px) {
  .head--split > :first-child, .head--split > :last-child { grid-column: 1 / -1; }
}
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 2.5rem; align-items: start; }
.split > .a { grid-column: 1 / 6; }
.split > .b { grid-column: 7 / -1; }
.split--wide-b > .a { grid-column: 1 / 5; }
.split--wide-b > .b { grid-column: 6 / -1; }
@media (max-width: 900px) { .split > .a, .split > .b { grid-column: 1 / -1; } }
.stack > * + * { margin-top: var(--stack, 1.25rem); }

/* ---- buttons ---------------------------------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-ui);
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 48px; padding: 0.8rem 1.25rem;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { --btn-bd: var(--text-2); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: #0c0c0c; --btn-bd: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-2); --btn-bd: var(--accent-2); }
.btn--ghost { --btn-bd: transparent; padding-inline: 0; min-height: 40px; }
.btn--ghost:hover { --btn-fg: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 420px) { .btn { white-space: normal; } }

/* ---- header / navigation ------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(5, 6, 9, 0.82), rgba(5, 6, 9, 0));
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: rgba(7, 8, 11, 0.92); border-bottom-color: var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .wrap { display: flex; align-items: center; gap: 2rem; height: 100%; }
.brand { display: inline-flex; align-items: baseline; gap: 0.75rem; text-decoration: none; }
.brand__mark { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; }
.brand__mark i { color: var(--accent); font-style: normal; }
.brand__tag { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a:not(.btn) {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; padding-block: 0.5rem; position: relative;
}
.nav a:not(.btn):hover, .nav a[aria-current='page'] { color: var(--text); }
.nav a[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); }
.nav .btn { margin-left: 0.5rem; min-height: 40px; padding: 0.55rem 1rem; }
.menu-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 1px solid var(--line-ui);
  border-radius: var(--radius); cursor: pointer; align-items: center; justify-content: center;
}
.menu-toggle span { display: block; width: 18px; height: 1px; background: var(--text); box-shadow: 0 -5px 0 var(--text), 0 5px 0 var(--text); }
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 480px) { .brand__tag { display: none; } }
.menu {
  position: fixed; inset: 0; z-index: 200; background: var(--bg-0); overflow-y: auto;
  display: flex; flex-direction: column; padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
}
.menu__top { height: var(--header-h); flex: none; display: flex; align-items: center; justify-content: space-between; }
.menu__close { width: 44px; height: 44px; background: none; border: 1px solid var(--line-ui); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: var(--radius); }
.menu nav { display: grid; margin-top: 4vh; }
.menu nav a { font-size: clamp(2rem, 9vw, 3.25rem); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; padding-block: 0.4rem; border-bottom: 1px solid var(--line); }
.menu nav a[aria-current='page'] { color: var(--accent); }
.menu .btn-row { margin-top: auto; padding-top: 2rem; }

/* ---- panels, readouts, tables --------------------------------------------------- */
.panel {
  /* opaque enough to read over the film without a backdrop blur: a blur over a live canvas is
     recomputed every frame, a real cost on laptops with integrated graphics, iPads and phones */
  background: rgba(9, 11, 15, 0.9);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line);
}
.panel__body { padding: 0.5rem 1rem 0.9rem; }
.panel__foot { padding: 0.7rem 1rem; border-top: 1px solid var(--line); }
.status { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.5rem; }
.status::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.readout { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.readout th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); padding: 0.4rem 0; border-bottom: 1px solid var(--line);
}
.readout td { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; padding: 0.4rem 0; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.readout td .u { color: var(--text-3); margin-left: 0.4em; font-size: 0.6875rem; display: inline-block; min-width: 3.4em; text-align: left; }
.readout tr:last-child th, .readout tr:last-child td { border-bottom: 0; }
.readout .hot td { color: var(--accent); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); scrollbar-color: var(--line-3) transparent; }
/* a table wider than its column scrolls inside its frame: a soft light edge shows on the side
   with more to see (the covers scroll with the table and hide the edge at either end) */
.table-wrap {
  background:
    linear-gradient(to right, var(--bg-1) 40%, rgba(9, 11, 15, 0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg-1) 40%, rgba(9, 11, 15, 0)) right / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(214, 224, 238, 0.24), rgba(214, 224, 238, 0)) left / 20px 100% no-repeat scroll,
    linear-gradient(to left, rgba(214, 224, 238, 0.24), rgba(214, 224, 238, 0)) right / 20px 100% no-repeat scroll,
    var(--bg-1);
}
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 620px; }
.table caption { caption-side: bottom; text-align: left; padding: 0.9rem 1rem; font-size: var(--fs-small); color: var(--text-3); }
.table th, .table td { padding: 0.95rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; background: var(--bg-2); }
.table tbody th { font-weight: 600; }
.table td { color: var(--text-2); }
.table tr:last-child > * { border-bottom: 0; }
.table .empty td { text-align: center; color: var(--text-3); padding-block: 2.2rem; font-size: var(--fs-small); }
/* phones: a wide table scrolls sideways; its empty-state line starts where the reader is looking */
@media (max-width: 700px) { .table .empty td { text-align: left; } }

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}

/* ---- media / captures ------------------------------------------------------------ */
.media { position: relative; margin: 0; border: 1px solid var(--line-2); background: var(--bg-0); border-radius: var(--radius); overflow: hidden; }
.media img { width: 100%; }
.media picture { display: block; }
.media figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-3); }
.media figcaption .label { flex: none; }
.media--pending { display: grid; grid-template-rows: 1fr auto; }
.media--pending .pending {
  aspect-ratio: 16 / 9; display: grid; place-content: center; gap: 0.75rem; text-align: center; padding: 2rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(214, 224, 238, 0.035) 14px 15px),
    radial-gradient(ellipse at center, var(--bg-2), var(--bg-0));
}
.media--pending .pending p { max-width: 36ch; color: var(--text-3); font-size: var(--fs-small); margin-inline: auto; }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.gallery > .g-8 { grid-column: span 8; }
.gallery > .g-4 { grid-column: span 4; }
.gallery > .g-6 { grid-column: span 6; }
.gallery > .g-12 { grid-column: 1 / -1; }
@media (max-width: 900px) { .gallery > * { grid-column: 1 / -1 !important; } }

/* ---- cards / lists ------------------------------------------------------------------ */
.cols { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cols > * { background: var(--bg-1); padding: clamp(20px, 2.4vw, 36px); }
.section--2 .cols > * { background: var(--bg-2); }
.section--0 .cols > * { background: var(--bg-0); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cols--3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .cols--2, .cols--4 { grid-template-columns: 1fr; } }
.cell-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0.9rem 0 0.75rem; }
.cell-body { color: var(--text-2); font-size: 0.9375rem; }
.cell-body + .cell-body { margin-top: 0.75em; }
.cell-link { display: inline-block; margin-top: 1.25rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.stack > * + .ticks { margin-top: var(--stack, 1.25rem); } /* the reset above must not cancel a stack's spacing */
.ticks li { position: relative; padding-left: 1.4rem; color: var(--text-2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.78em; width: 0.7rem; height: 1px; background: var(--accent); }
.ticks--muted li::before { background: var(--steel); }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem; margin: 0; }
.dl dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding-top: 0.15rem; }
.dl dd { margin: 0; color: var(--text-2); }
@media (max-width: 560px) { .dl { grid-template-columns: 1fr; gap: 0.2rem; } .dl dd { margin-bottom: 0.8rem; } }

/* ---- page hero (secondary pages) ---------------------------------------------------- */
.page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(64px, 10vw, 150px)); padding-bottom: clamp(56px, 8vw, 112px); background: var(--bg-0); overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.6; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 90% at 75% 0%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 75% 0%, #000 15%, transparent 72%);
}
.page-hero .wrap { position: relative; display: grid; gap: 1.75rem; }
.page-hero .h1 { max-width: 15ch; }
.page-hero .lead { max-width: 50ch; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 0.5rem; }

/* ---- workflow chain -------------------------------------------------------------------- */
.chain { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); margin: 0; padding: 0; list-style: none; }
.chain__step { position: relative; padding: 1.5rem 1rem 1.25rem; border-right: 1px solid var(--line); min-height: 11rem; display: flex; flex-direction: column; gap: 0.6rem; }
.chain__step:last-child { border-right: 0; }
.chain__step .n { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--text-3); }
.chain__step .t { font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.03em; text-transform: uppercase; }
.chain__step .d { font-size: 0.8125rem; color: var(--text-3); line-height: 1.45; }
.chain__step::after {
  content: ''; position: absolute; top: 2rem; right: -5px; width: 9px; height: 9px; z-index: 1;
  border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); background: inherit;
}
.chain__step:last-child::after { display: none; }
.chain__step.is-loop { background: linear-gradient(to bottom, var(--accent-soft), transparent 75%); }
.chain__step.is-loop .t { color: var(--accent); }
@media (max-width: 1100px) {
  .chain { grid-template-columns: 1fr; }
  .chain__step { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: 1.1rem 1rem 1.1rem 3.5rem; }
  .chain__step:last-child { border-bottom: 0; }
  .chain__step .n { position: absolute; left: 1rem; top: 1.35rem; }
  .chain__step::after { top: auto; bottom: -5px; right: auto; left: 1.35rem; transform: rotate(135deg); }
}

/* propagation diagram */
.prop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--bg-0); }
.prop__node { padding: 1.25rem 1rem; border-right: 1px solid var(--line); position: relative; }
.prop__node:last-child { border-right: 0; }
.prop__node .k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.prop__node .v { font-family: var(--mono); font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); margin-top: 0.4rem; font-variant-numeric: tabular-nums; transition: color 0.4s; }
.prop__node .d { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.3rem; }
.prop__node .delta { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.prop__node.is-changed .v { color: var(--accent); }
.prop__node::after {
  content: ''; position: absolute; top: 1.6rem; right: -5px; width: 9px; height: 9px; z-index: 1;
  border-top: 1px solid var(--line-3); border-right: 1px solid var(--line-3); transform: rotate(45deg); background: var(--bg-0);
}
.prop__node:last-child::after { display: none; }
@media (max-width: 900px) {
  .prop { grid-template-columns: 1fr; }
  .prop__node { border-right: 0; border-bottom: 1px solid var(--line); }
  .prop__node::after { top: auto; bottom: -5px; right: auto; left: 1.2rem; transform: rotate(135deg); }
}

/* slider */
.control { display: grid; gap: 0.5rem; }
.control__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.control__head .num { flex: none; white-space: nowrap; } /* "−12 mm" never breaks across lines */
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 2px; background: var(--line-ui); }
input[type='range']::-moz-range-track { height: 2px; background: var(--line-ui); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--accent); border: 0; border-radius: 0; transform: rotate(45deg); }
input[type='range']::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border: 0; border-radius: 0; transform: rotate(45deg); }

/* ---- editions (education) ------------------------------------------------------------ */
.edition { display: grid; gap: 1rem; align-content: start; }
.edition .q { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-block: 0.8rem; border-top: 1px solid var(--line); }
.edition .q span:first-child { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 0.2rem; }
.edition .q span:last-child { color: var(--text-2); }
@media (max-width: 560px) { .edition .q { grid-template-columns: 1fr; gap: 0.25rem; } }
.mock { border: 1px solid var(--line-2); background: var(--bg-0); padding: 1.25rem; display: grid; gap: 0.9rem; }
.mock__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mock__eq { font-family: var(--mono); font-size: 1.0625rem; color: var(--text); padding: 0.9rem; border: 1px dashed var(--line-2); overflow-x: auto; }
.mock__eq em { color: var(--accent); font-style: normal; }
.opt { display: flex; gap: 0.75rem; align-items: flex-start; width: 100%; text-align: left; padding: 0.75rem 0.9rem; background: transparent; border: 1px solid var(--line-ui); border-radius: var(--radius); color: var(--text-2); cursor: pointer; line-height: 1.45; }
.opt .k { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); padding-top: 0.15rem; }
.opt:hover { border-color: var(--text-3); color: var(--text); }
.opt[aria-pressed='true'][data-correct='true'] { border-color: var(--ok); color: var(--text); }
.opt[aria-pressed='true'][data-correct='false'] { border-color: var(--error); }
.feedback { font-size: 0.875rem; color: var(--text-2); border-left: 2px solid var(--accent); padding-left: 0.9rem; }
.illustrative { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); border: 1px solid var(--line-2); padding: 0.1rem 0.4rem; }

/* ---- licences ------------------------------------------------------------------------- */
.licence { display: flex; flex-direction: column; gap: 1rem; min-height: 100%; }
.licence .seats { font-family: var(--mono); font-size: 3rem; line-height: 1; letter-spacing: -0.04em; }
.licence .seats small { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--text-3); margin-left: 0.5rem; text-transform: uppercase; }
.licence .edition-name { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.licence .btn { margin-top: auto; align-self: flex-start; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); padding: 0; margin: 0; }
.steps li { list-style: none; background: var(--bg-1); padding: 1.5rem 1.25rem; counter-increment: s; color: var(--text-2); font-size: 0.9375rem; }
.steps li strong { display: block; color: var(--text); font-size: 1.0625rem; margin-bottom: 0.4rem; }
.steps li::before { content: '0' counter(s); display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.14em; margin-bottom: 0.9rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; font-weight: 600; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 0 1.4rem; color: var(--text-2); max-width: 70ch; }

/* ---- form -------------------------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; position: relative; }
.field { display: grid; gap: 0.45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); padding: 0; }
.field .req { color: var(--accent); margin-left: 0.25rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.75rem 0.9rem; background: var(--bg-0); color: var(--text);
  border: 1px solid var(--line-ui); border-radius: var(--radius); font-size: 1rem;
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field select option { background: var(--bg-2); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field [aria-invalid='true'] { border-color: var(--error); }
.field .hint { font-size: 0.8125rem; color: var(--text-3); }
.field .error { font-size: 0.8125rem; color: var(--error); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { border: 1px solid var(--line-2); border-left: 2px solid var(--accent); padding: 1rem 1.1rem; background: var(--bg-2); color: var(--text-2); font-size: 0.9375rem; }
.notice--error { border-left-color: var(--error); }
.notice:not([hidden]) + .form { margin-top: 1.25rem; }
.notice--ok { border-left-color: var(--ok); }
.notice strong { color: var(--text); }
.notice p + p { margin-top: 0.5rem; }

/* ---- footer --------------------------------------------------------------------------------- */
.site-footer { background: var(--bg-0); border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px) 32px; position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer-grid h2 { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.footer-grid a { text-decoration: none; color: var(--text-2); display: inline-flex; align-items: center; min-height: 24px; } /* WCAG 2.2 target size */
.footer-grid a:hover { color: var(--text); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---- CTA band --------------------------------------------------------------------------------- */
.cta-band { background: var(--bg-0); position: relative; overflow: hidden; }
.cta-band .wrap { display: grid; gap: 2rem; }
.cta-band .h1 { max-width: 14ch; }

/* =============================================================================
   The film
   ========================================================================== */
.film { position: relative; background: var(--bg-0); overflow-y: clip; } /* clip: the sticky loader ends where the film does */
.film-stage { position: fixed; inset: 0; z-index: 0; background: var(--bg-0); }
.film-stage canvas { width: 100%; height: 100%; touch-action: pan-y; }
.film-stage.is-off { visibility: hidden; }
/* scrims keep copy legible whatever the scene does behind it */
.film-scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--scrim, 1); }
.film-scrim::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 6, 9, 0.88) 0%, rgba(5, 6, 9, 0.66) 25%, rgba(5, 6, 9, 0) 50%);
}
.film-scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 9, 0.72), rgba(5, 6, 9, 0) 28%), linear-gradient(to bottom, rgba(5, 6, 9, 0.6), rgba(5, 6, 9, 0) 16%);
}
@media (max-width: 820px) {
  .film-scrim::before { background: linear-gradient(to top, rgba(5, 6, 9, 0.96) 0%, rgba(5, 6, 9, 0.86) 42%, rgba(5, 6, 9, 0) 66%); }
}

.film-chapters { position: relative; z-index: 2; }
.chapter { position: relative; height: calc(var(--len, 170) * 1svh); }
/* The film's shots are composed at 1440 px, where the copy column is 33rem and the panel 23rem.
   Below that the panel keeps its share of the width (never under 20rem), and below 1180 px the
   copy column does too, so the free middle column keeps room for the subject. film.js
   (DESIGN_FREE) frames the subject against this grid: re-measure there if these columns change. */
.chapter__frame {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 33rem) minmax(0, 1fr) minmax(0, clamp(20rem, 25.56vw, 23rem)) 2.75rem;
  grid-template-areas: 'copy space panel rail';
  column-gap: clamp(16px, 2vw, 40px);
  padding: calc(var(--header-h) + 3vh) var(--gutter) 7vh;
  pointer-events: none;
}
.chapter__copy { grid-area: copy; align-self: center; display: grid; gap: 1.25rem; pointer-events: auto; }
.chapter__copy .h1 { font-size: clamp(2.4rem, 1.1rem + 3.5vw, 5.25rem); }
.chapter__copy .lead { max-width: 34ch; }
.chapter__panel { grid-area: panel; align-self: center; pointer-events: auto; max-height: 100%; overflow: auto; scrollbar-width: none; }
.chapter__panel::-webkit-scrollbar { display: none; }
.chapter__panel--end { align-self: end; }
.chapter__frame > * { opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 16px)); }
.chapter--intro .chapter__copy { align-self: end; }
.chapter--intro .display { font-size: clamp(2.9rem, 0.8rem + 6.4vw, 7.25rem); }
.chapter--final .chapter__frame { grid-template-columns: minmax(0, 44rem) 1fr 2.75rem; grid-template-areas: 'copy space rail'; }
@media (max-width: 1180px) {
  .chapter__frame { grid-template-columns: minmax(0, min(33rem, 36.67vw)) minmax(0, 1fr) minmax(0, 20rem) 2.5rem; }
}
@media (max-width: 820px) {
  .chapter__frame, .chapter--final .chapter__frame {
    grid-template-columns: 1fr; grid-template-areas: 'space' 'panel' 'copy';
    grid-template-rows: 1fr auto auto; row-gap: 0.9rem;
    padding: calc(var(--header-h) + 1vh) var(--gutter) max(24px, env(safe-area-inset-bottom));
  }
  .chapter__copy { align-self: end; gap: 0.8rem; }
  .chapter__copy .h1 { font-size: clamp(2rem, 9vw, 3.1rem); }
  .chapter__copy .lead { font-size: 0.96875rem; }
  .chapter__panel { align-self: end; max-height: 38svh; }
  .chapter__panel .is-secondary { display: none; }
  .chapter__panel .panel__body { padding-block: 0.25rem 0.5rem; }
  .chapter__panel .panel__head { padding-block: 0.55rem; }
  /* With the film running, the copy and then the panel take turns in one slot at the bottom,
     so the stage keeps the rest of the screen. film/overlay.js sets --phase as the chapter is
     read (0 copy, 1 panel). One after the other, never both at once: the copy is gone by the
     half-way point and only then does the panel come up, so their text never overlaps.
     The static long-read and no-JS pages keep them stacked. */
  html.js .film:not([data-mode]) .chapter__frame { grid-template-areas: 'space' 'slot'; grid-template-rows: 1fr auto; }
  html.js .film:not([data-mode]) .chapter__copy,
  html.js .film:not([data-mode]) .chapter__panel { grid-area: slot; }
  html.js .film:not([data-mode]) .chapter__copy { opacity: calc(var(--in, 1) * max(0, 1 - 2 * var(--phase, 0))); }
  html.js .film:not([data-mode]) .chapter__panel { opacity: calc(var(--in, 1) * max(0, 2 * var(--phase, 0) - 1)); max-height: 44svh; }
  html.js .film:not([data-mode]) .chapter__frame[data-phase='copy'] .chapter__panel,
  html.js .film:not([data-mode]) .chapter__frame[data-phase='panel'] .chapter__copy { pointer-events: none; }
}

/* the demonstrator note: always attached, never shouting */
.demo-note { display: block; font-size: 0.75rem; color: var(--text-3); line-height: 1.45; max-width: 44ch; }
.demo-note::before { content: 'DEMO'; display: inline-block; margin-right: 0.6rem; vertical-align: 1px; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.14em; border: 1px solid var(--line-2); padding: 0.05rem 0.35rem; color: var(--steel); }

/* chapter rail — its own reserved column, never on top of a panel */
.rail { position: fixed; right: calc(var(--gutter) * 0.55); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 2px; opacity: var(--rail, 1); transition: opacity 0.3s var(--ease); margin: 0; padding: 0; list-style: none; }
.rail.is-hidden { opacity: 0; pointer-events: none; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; height: 26px; text-decoration: none; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; color: var(--text-3); position: relative; }
.rail a .t { position: absolute; right: 100%; margin-right: 0.6rem; opacity: 0; transform: translateX(4px); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; background: rgba(5, 6, 9, 0.92); border: 1px solid var(--line-2); padding: 0.2rem 0.45rem; color: var(--text); }
.rail a:hover .t, .rail a:focus-visible .t { opacity: 1; transform: none; }
.rail a i { width: 12px; height: 1px; background: var(--line-3); transition: width 0.25s var(--ease), background 0.25s; }
.rail a[aria-current='step'] { color: var(--accent); }
.rail a[aria-current='step'] i { width: 22px; background: var(--accent); }
@media (max-width: 820px) { .rail { display: none; } }

/* skip-film control */
.film-skip {
  position: fixed; right: calc(var(--gutter) * 0.55); bottom: 20px; z-index: 3; white-space: nowrap; text-align: right;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
  text-decoration: none; padding: 0.5rem 0;
}
.film-skip:hover { color: var(--text); }
.film-skip.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 820px) { .film-skip { display: none; } }

/* labels attached to real points in the scene */
.tags { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
  white-space: nowrap; will-change: transform, opacity; opacity: 0;
}
.tag::before { content: ''; width: 16px; height: 1px; background: var(--accent-line); flex: none; }
.tag.is-left { flex-direction: row-reverse; }
.tag span { background: rgba(5, 6, 9, 0.7); padding: 0.1rem 0.35rem; white-space: pre; line-height: 1.3; } /* a label may be two short lines */
@media (max-width: 820px) { .tag.is-minor { display: none; } }

/* tiny SVG charts inside panels */
.plot { width: 100%; height: auto; overflow: visible; }
.plot .axis { stroke: var(--line-3); stroke-width: 1; }
.plot .grid { stroke: var(--line); stroke-width: 1; }
.plot .curve { fill: none; stroke: var(--text-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plot .curve--accent { stroke: var(--accent); }
.plot .curve--muted { stroke: var(--steel); stroke-dasharray: 3 3; }
.plot .marker { fill: var(--accent); }
.plot .dot { fill: var(--text-3); }
.plot .dot.is-tried { fill: var(--text); }
.plot .dot--best { fill: var(--accent); }
.plot [data-plot='marker']:not([transform]) { visibility: hidden; } /* never drawn at the origin before it is placed */
.plot .box { fill: rgba(255, 106, 31, 0.04); stroke: var(--accent-line); stroke-dasharray: 2 3; }
.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: 0.4rem; }
.legend i { display: inline-block; width: 14px; height: 2px; background: var(--steel); vertical-align: middle; margin-right: 0.4rem; }
.legend .a i { background: var(--accent); }
.legend .t i { background: var(--text-2); }
.legend .m i { background: repeating-linear-gradient(90deg, var(--steel) 0 3px, transparent 3px 6px); }
.plots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.6rem; }
/* a plot's title and axis ends are HTML, not SVG text: fixed size at any panel width, never under a curve */
.plot-block { display: grid; gap: 0.35rem; min-width: 0; }
.plot-block > .label { font-size: 0.625rem; letter-spacing: 0.12em; }
.plot-axis { display: flex; justify-content: space-between; gap: 0.5rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--text-3); line-height: 1.2; }

/* the equation chain (chapter 06) */
.eq-chain { display: grid; }
.eq-row { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: baseline; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.eq-row:last-child { border-bottom: 0; }
.eq-row .role { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.eq-row .eq { font-family: var(--mono); font-size: 0.875rem; color: var(--text); }
.eq-row .eq em { font-style: normal; color: var(--accent); }
.eq-row .eq sub { font-size: 0.7em; }
.eq-row .val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; font-size: 0.8125rem; }
.eq-row.is-output .val { color: var(--accent); }
.eq-row .why { grid-column: 2 / -1; font-size: 0.75rem; color: var(--text-3); line-height: 1.4; margin-top: 0.2rem; }

/* export manifest (chapter 08) */
.manifest { list-style: none; margin: 0; padding: 0; display: grid; }
.manifest li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); transition: color 0.3s; }
.manifest li:last-child { border-bottom: 0; }
.manifest li::after { content: '—'; color: var(--text-3); }
.manifest li.is-done { color: var(--text); }
.manifest li.is-done::after { content: 'packaged'; color: var(--accent); }

/* simulator bezel (chapter 08) */
.bezel { position: fixed; z-index: 1; pointer-events: none; inset: 13vh 30vw 14vh 38vw; border: 1px solid var(--line-3); opacity: var(--bezel, 0); }
.bezel::before, .bezel::after { content: ''; position: absolute; width: 18px; height: 18px; border-color: var(--accent); border-style: solid; }
.bezel::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.bezel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.bezel span { position: absolute; left: 0; top: -1.7rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 820px) { .bezel { inset: 12vh 6vw 58vh; } }

/* loader: a slim progress line under the header, never a cover. The page is readable and
   scrollable from the first moment, over a poster of the opening shot, while the film loads. */
.loader {
  /* sticky within the film (a zero-height box: it takes no room in the page); the film clips it,
     so once the reader is past the film it has gone with it: it only ever speaks for the film */
  position: sticky; top: var(--header-h); z-index: 150; height: 0;
  pointer-events: none; transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loader__in { display: grid; gap: 0.45rem; padding: 0 var(--gutter) 0.45rem; background: rgba(5, 6, 9, 0.9); } /* text never shows through */
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__bar { width: 100%; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.loader__bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--accent); transition: width 0.25s linear; }
.loader__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.loader .label { font-size: 0.625rem; }
.loader a { color: var(--text-3); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: auto; }

/* While the film loads: the opening shot as a dimmed poster under the page. The live film fades
   it out as the car emerges from the dark (film.js adds .is-live). */
html.js .film-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--bg-0) url('../img/poster.jpg') 70% 40% / cover no-repeat;
  filter: brightness(0.55);
  transition: opacity 0.7s var(--ease);
}
.film.is-live .film-stage::before { opacity: 0; }
/* while loading, the chapters read as a plain page: no fades, no labels, no simulator frame */
.film[data-mode='loading'] .chapter__frame > * { opacity: 1; transform: none; pointer-events: auto; }
.film[data-mode='loading'] .tags, .film[data-mode='loading'] .bezel { visibility: hidden; }
.film[data-mode='static'] .film-stage::before { display: none; } /* static: the poster itself, at full strength */

/* no WebGL / reduced motion without WebGL: the film becomes an illustrated long-read */
.film[data-mode='static'] .film-stage { background: var(--bg-0) url('../img/poster.jpg') 70% 40% / cover no-repeat; }
.film[data-mode='static'] .film-stage canvas, .film[data-mode='static'] .tags, .film[data-mode='static'] .bezel { display: none; }

.film ~ .section { z-index: 2; } /* everything after the film stacks above its fixed stage and scrims */
.film-stage.is-off + .film-scrim { visibility: hidden; }

/* ---- reduced motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .chapter__frame > * { transform: none; }
}

/* ---- print ------------------------------------------------------------------------------ */
@media print {
  /* paper: black on white, whatever the screen palette was; the film prints as its copy and panels */
  .site-header, .skip-link, .menu, .menu-toggle, .film-stage, .film-scrim, .rail, .tags, .loader, .film-skip, .bezel,
  .page-hero::before, .hp-field, .btn-row, .chapter__copy > .label, .media--pending .pending { display: none !important; }
  *, *::before, *::after { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; transition: none !important; animation: none !important; }
  html, body { background: #fff !important; }
  .section, .page-hero, .cta-band, .site-footer { padding-block: 1.5rem !important; }
  .page-hero { padding-top: 0 !important; }
  .chapter { height: auto !important; }
  .chapter__frame { position: static !important; display: block !important; height: auto !important; min-height: 0 !important; padding: 1.5rem 0 !important; }
  .chapter__frame > * { opacity: 1 !important; transform: none !important; }
  .chapter__panel { max-height: none !important; overflow: visible !important; margin-top: 1rem; }
  .chapter__panel .is-secondary, .chapter__panel .legend { display: revert !important; }
  .chapter__panel .plots, .chapter__panel .plot-block { display: grid !important; }
  .chapter__panel .plot-block { max-width: 11cm; }
  .panel, .cols, .cols > *, .table-wrap, .chain, .steps, .mock, .media, .notice, .field input, .field select, .field textarea { border-color: #999 !important; }
  .plot .curve { stroke: #000 !important; } .plot .marker, .plot .dot--best { fill: #000 !important; }
  .display, .h1 { font-size: 2rem !important; } .h2 { font-size: 1.6rem !important; }
  .panel, .licence, .cols > *, .chain__step, .steps li, .faq details, figure, tr { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* ---- without JavaScript the film is a plain, readable sequence ------------------------ */
html:not(.js) .loader, html:not(.js) .tags, html:not(.js) .bezel, html:not(.js) .rail, html:not(.js) .film-skip { display: none; }
html:not(.js) .film-stage { background: var(--bg-0) url('../img/poster.jpg') 70% 40% / cover no-repeat; }
html:not(.js) .film-stage canvas { display: none; }
/* the poster sits behind the opening only; the chapters below it read on the plain page */
html:not(.js) .film-stage, html:not(.js) .film-scrim { position: absolute; bottom: auto; height: 100svh; }
/* the header is solid from the start (site.js makes it so on scroll), and on phones, where the
   menu needs JavaScript, a plain link leads to the footer's navigation instead */
html:not(.js) .site-header { background: rgba(7, 8, 11, 0.94); border-bottom-color: var(--line); }
.menu-link { display: none; }
@media (max-width: 1000px) {
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .menu-link {
    display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 0.95rem;
    border: 1px solid var(--line-ui); border-radius: var(--radius); color: var(--text); text-decoration: none;
    font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  }
}
/* the poster as WebP where the browser takes it (a browser that cannot read image-set() with
   types keeps the JPEG above; separate rules, so no minifier folds the fallback away) */
.film[data-mode='static'] .film-stage, html:not(.js) .film-stage, html.js .film-stage::before {
  background-image: image-set(url('../img/poster.webp') type('image/webp'), url('../img/poster.jpg') type('image/jpeg'));
}
/* tall screens: a portrait render (2×), with the car where the phone layout frames it */
@media (max-aspect-ratio: 4/5) {
  .film[data-mode='static'] .film-stage, html:not(.js) .film-stage, html.js .film-stage::before { background-image: url('../img/poster-tall.jpg'); background-position: 50% 0; }
}
@media (max-aspect-ratio: 4/5) {
  .film[data-mode='static'] .film-stage, html:not(.js) .film-stage, html.js .film-stage::before {
    background-image: image-set(url('../img/poster-tall.webp') type('image/webp'), url('../img/poster-tall.jpg') type('image/jpeg'));
  }
}
html:not(.js) .chapter { height: auto; }
html:not(.js) .chapter__frame { position: relative; height: auto; min-height: 100svh; }

/* ---- six-node propagation strip (product) ---------------------------------------- */
.prop--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .prop--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prop--6 .prop__node:nth-child(3n)::after { display: none; }
  .prop--6 .prop__node:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .prop--6 { grid-template-columns: 1fr; }
  .prop--6 .prop__node::after { display: block; }
  .prop--6 .prop__node:last-child::after { display: none; }
}

/* ---- page hero with a real capture ------------------------------------------------ */
.page-hero--media .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; column-gap: clamp(24px, 4vw, 64px); }
.page-hero__text { display: grid; gap: 1.75rem; }
@media (max-width: 1000px) { .page-hero--media .wrap { grid-template-columns: 1fr; } }
.table td.num, .table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.media--pending .pending { aspect-ratio: 16 / 7; }

/* ---- QA fixes ------------------------------------------------------------------------- */
/* a chapter anchor lands on the section itself, not 88 px into it */
.chapter { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }
/* faded frames stay in the accessibility tree but take no clicks */
.chapter__frame.is-faded > * { pointer-events: none; }
/* panels never hide a scrollbar */
.chapter__panel { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.chapter__panel::-webkit-scrollbar { display: block; width: 4px; }
.chapter__panel::-webkit-scrollbar-thumb { background: var(--line-3); }
/* phones: panels carry the key readouts only */
@media (max-width: 820px) {
  .chapter__panel .plot-block, .chapter__panel .plots, .chapter__panel .dl, .chapter__panel .legend,
  .chapter__panel .panel__foot, .chapter__panel .eq-row .why, .chapter__panel .demo-note { display: none; }
  .chapter__panel .readout th, .chapter__panel .readout td { padding-block: 0.28rem; }
  /* the copy fades out behind the panel as they swap: keep it from showing through */
  .chapter__panel .panel { background: rgba(9, 11, 15, 0.96); }
  .chapter__panel [data-practice] .panel__body > .small:first-child, .chapter__panel [data-practice] .mono { display: none; }
  /* a panel that scrolls inside the scrolling film traps a swipe, so the tall ones compact:
     an equation takes its row with its role above it; the export manifest runs in two columns */
  .chapter__panel .eq-row { grid-template-columns: 1fr auto; row-gap: 0.1rem; padding-block: 0.45rem; }
  .chapter__panel .eq-row .role { grid-column: 1 / -1; }
  .chapter__panel .manifest { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .chapter__panel .manifest li { padding-block: 0.4rem; align-items: center; gap: 0.5rem; }
  .chapter__panel .manifest li:nth-last-child(2) { border-bottom: 0; }
  .chapter__panel .manifest li::after, .chapter__panel .manifest li.is-done::after { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--line-3); }
  .chapter__panel .manifest li.is-done::after { background: var(--accent); }
}
/* short landscape screens: headline and lead only */
@media (max-height: 560px) {
  .chapter__frame { padding-top: calc(var(--header-h) + 6px); padding-bottom: 10px; }
  .chapter__copy { gap: 0.45rem; align-self: end; }
  .chapter__copy .h1, .chapter--intro .display, .chapter--final .display { font-size: clamp(1.5rem, 8vh, 2.6rem); }
  .chapter__copy .lead { font-size: 0.875rem; max-width: 52ch; }
  .chapter__panel, .rail, .film-skip, .chapter__copy .demo-note, .chapter__copy > .label, .chapter__copy > .small { display: none; }
}
/* form fields get the same 2 px focus signal as links and buttons */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }