/* =============================================================================
   Sionna-RT-Simulation, "Offprint", continuous with the CV (2026-10 adds a visual layer at the end:
   hero clip, numbers, clips, scene cards, environment viewer, lightbox, reveal).
   Same press run as https://yunjung-jeong.github.io/cv/ : Alegreya carries human
   language, Martian Mono carries machine language (figure numbers, section and
   step numerals, short labels). Hierarchy comes from size, weight and rule weight.
   No cards, no shadows, no fills, no radius. Figures sit on white mounted plates
   so the light PNGs read correctly on both paper and black stock.
   ============================================================================= */

:root {
  color-scheme: light dark;

  /* Tokens copied from the CV (light). */
  --bg:           #FBFAF6;
  --bg-lift:      #F2EFE7;
  --ink:          #191714;
  --ink-soft:     #37342E;
  --ink-muted:    #6E6A61;
  --line:         #E4E0D5;
  --line-strong:  #C6C0AF;
  --accent:       #0E5F55;
  --select-bg:    #D3E7E3;

  /* Figures are opaque light PNGs: the plate stays white in both themes. */
  --plate:        #FFFFFF;
  --plate-edge:   #DDD8CB;

  /* Swatches in the figures' own colours (sampled from the PNGs). */
  --key-orange:   #D66308;
  --key-navy:     #26448A;
  --key-grey:     #9C9C9C;
  --key-blue:     #1565C0;
  --key-red:      #E22146;
  --key-ring:     transparent;

  --serif: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono:  'Martian Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
           Consolas, monospace;

  /* As in the CV: mono labels are set on the width axis, inherited from root. */
  font-stretch: 82.5%;

  /* Type scale. Alegreya has a small x-height, so reading sizes sit a step
     above the CV's 17 px; mono labels never go below 11.5 px. */
  --fs-body:    1.125rem;     /* 18 px */
  --fs-cap:     1rem;         /* 16 px */
  --fs-label:   .71875rem;    /* 11.5 px */
  --fs-lead:    1.1875rem;    /* 19 px */

  /* Grid: the CV's rail and margin column, sized so figures get the width. */
  --rail-w:      clamp(14.5rem, 18vw, 21rem);
  --rail-pad:    1.75rem;
  --gutter:      clamp(2rem, 3vw, 4rem);
  --content-max: 66rem;
  --page-pad:    clamp(1.25rem, 2vw, 3rem);
  --margin-col:  clamp(9rem, 10vw, 11.5rem);
  --margin-gap:  clamp(1.5rem, 2vw, 2.5rem);
  --indent:      calc(var(--margin-col) + var(--margin-gap));
  --measure:     36rem;
  --cap-measure: 40rem;
  --plate-pad:   .375rem;

  /* Height of the rail head; contents.js measures it, this is the no-JS value. */
  --rh-h:        20.5rem;
  --bar-h:       2.875rem;

  /* Vertical rhythm, the CV's ~1.6 progression. */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1.125rem;
  --s5: 1.75rem; --s6: 2.75rem; --s7: 4.25rem; --s8: 6.5rem;
}

/* The same press run on black stock (CV dark tokens), from the OS preference. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #121110;
    --bg-lift:      #1C1A18;
    --ink:          #EDEAE3;
    --ink-soft:     #CBC6BC;
    --ink-muted:    #928C81;
    --line:         #2B2926;
    --line-strong:  #454139;
    --accent:       #62B8AA;
    --select-bg:    #16403A;
    --plate-edge:   #FFFFFF;
    --key-ring:     rgba(255, 255, 255, .55);
  }
}

/* ============================== base ============================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A serif at 400 goes anaemic on dark; nudge the axis (as the CV does). */
@media (prefers-color-scheme: dark) {
  body { font-weight: 430; -webkit-font-smoothing: auto; }
}

::selection { background: var(--select-bg); color: var(--ink); }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .15s ease;
}
a:hover,
a:focus-visible { border-bottom: 2px solid var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

b, strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.nb { white-space: nowrap; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--ink);
  padding: .625rem 1rem;
  font-family: var(--mono); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.skip-link:focus { left: 1rem; top: 1rem; }

main:focus { outline: none; }

/* Shared voice for the short machine-language labels. */
.eyebrow,
.glance-title,
.fig-num,
.env-tag,
.status,
.affiliation,
.toc-label,
.imprint-name,
.imprint-links,
.hero-cap .pn {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================== page grid ============================== */

/* main is the one grid for the page: the rail on the left, the article on the
   right. The header sits inside it (display: contents, not a landmark there),
   so the rail head and the contents can both stay on screen to the end. */
.page {
  position: relative;
  max-width: 104rem;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

main,
.site-footer {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, var(--content-max));
  column-gap: var(--gutter);
  justify-content: start;
}
main { grid-template-rows: repeat(8, auto); }   /* title, showreel, six sections */

.site-header { display: contents; }
main > *,
.site-header > * { grid-column: 2; }

/* The rail's rule, drawn once so it runs unbroken from header to imprint. */
.page::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--page-pad) + var(--rail-w));
  border-left: 1px solid var(--line-strong);
  pointer-events: none;
}

/* Margin + text: the sub-grid inside the content column (CV .grid-row). */
.title-block,
.glance-notes,
.section > h2,
figcaption {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  column-gap: var(--margin-gap);
  align-items: baseline;
}

/* ============================== title ============================== */

.title-block {
  grid-row: 1;
  align-self: start;
  padding-top: var(--s7);
}

.eyebrow {
  grid-column: 1;
  margin: 0;
  text-align: right;
  font-size: var(--fs-label);
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--ink-muted);
}

h1 {
  grid-column: 2;
  max-width: 21ch;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.375rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.024em;
  color: var(--ink);
  text-wrap: balance;
}

.subtitle {
  grid-column: 2;
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  font-size: 1.375rem;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--ink);
}

/* ============================== rail ============================== */

/* Rail head: the CV masthead in miniature. */
.rail-head {
  grid-column: 1;
  grid-row: 1 / 8;           /* until the Status section (row 8): then the footer takes over */
  align-self: start;
  padding: var(--s7) var(--rail-pad) var(--s4) 0;
}

.byline { margin: 0; }
.byline br { display: none; }
.byline .author {
  display: block;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.byline .affiliation {
  display: block;
  margin-top: var(--s2);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.header-actions {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.rail-links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}
/* Direction marks only (back to the CV, out to GitHub), silent to screen readers. */
.rail-link-back::before,
.rail-link-out::after {
  font-family: var(--mono);
  font-size: .75em;
  color: var(--ink-muted);
}
.rail-link-back::before { content: '\2190\00a0'; content: '\2190\00a0' / ''; }
.rail-link-out::after   { content: '\00a0\2197'; content: '\00a0\2197' / ''; }

.status-lines { margin: var(--s4) 0 0; }
.status {
  display: block;
  font-size: var(--fs-label);
  line-height: 1.75;
  letter-spacing: .05em;
  color: var(--ink-muted);
}
/* The accent's only filled appearance, exactly as the CV's "present" mark. */
.status-live { color: var(--accent); }
.status-live::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: .5em;
  vertical-align: .1em;
  background: var(--accent);
}

/* ---- contents: the CV's rail list, directly under the rail head ---- */

main > .toc {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  margin: var(--rh-h) var(--rail-pad) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
}

/* The whole rail stays on screen while the article scrolls (CV: .rail sticky).
   Only where the window is tall enough for both parts; otherwise the contents
   alone stay, as a fallback. */
@media (min-height: 40rem) {
  .rail-head { position: sticky; top: 0; }
  main > .toc {
    position: sticky;
    top: var(--rh-h);
    max-height: calc(100vh - var(--rh-h));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
@media (max-height: 39.99rem) {
  .rail-head { grid-row: 1; }
  main > .toc { grid-row: 2 / -1; margin-top: var(--s5); position: sticky; top: var(--s4); }
}

.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a {
  display: grid;
  grid-template-columns: 1.875rem auto minmax(0, 1fr);
  align-items: center;
  min-height: 2rem;
  padding-left: .375rem;
  border-bottom: none;
}
.toc li a:hover,
.toc li a:focus-visible { border-bottom: none; }
.toc li a:focus-visible { outline-offset: -2px; }   /* inside the link's padding, clear of the numeral */
.toc li a::before {
  content: counter(list-item, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .04em;
  color: var(--ink-muted);
  transition: color .3s ease;
}
.toc-label {
  padding: 0 .625rem 0 0;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ink-muted);
  transition: color .2s ease;
}
.leader {
  height: 1px;
  align-self: center;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    radial-gradient(circle at 1px 50%, var(--line-strong) 0 1px, transparent 1.2px);
  background-size: 0% 1px, 5px 1px;
  background-repeat: no-repeat, repeat-x;
  background-position: left center;
  transition: background-size 320ms cubic-bezier(.32, .72, 0, 1);
}
.toc a:hover .toc-label { color: var(--ink-soft); }
.toc a:hover .leader    { background-size: 24% 1px, 5px 1px; }
.toc a[aria-current="true"] .toc-label { color: var(--ink); font-weight: 500; }
.toc a[aria-current="true"] .leader    { background-size: 100% 1px, 5px 1px; }
.toc a[aria-current="true"]::before    { color: var(--accent); }

/* ============================== main column ============================== */

main { counter-reset: section; }

/* ---- at a glance ---- */

.glance { padding-top: var(--s6); }

.glance-notes { margin-top: var(--s6); }
.glance-title {
  grid-column: 1;
  text-align: right;
  font-size: var(--fs-label);
  line-height: 1.7;
  letter-spacing: .12em;
  color: var(--ink-muted);
}
.glance-list {
  grid-column: 2;
  max-width: var(--measure);
  list-style: none;
  margin: 0;
  padding: 0;
}
.glance-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}
.glance-list li + li { margin-top: var(--s2); }

/* A hairline dash instead of a bullet (a border, so it prints). */
.glance-list li::before,
.next-steps li::before {
  content: '';
  position: absolute;
  left: 0; top: .8em;
  width: .5rem; height: 0;
  border-top: 1px solid var(--line-strong);
}

/* ---- numbered sections, scotch-rule heads ---- */

.section {
  counter-increment: section;
  margin-top: var(--s8);
  scroll-margin-top: var(--s5);
}

.section > h2 {
  position: relative;
  margin: 0 0 var(--s5);
  padding-top: var(--s4);
  border-top: 3px solid var(--ink);
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.section > h2::before {
  content: counter(section, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .1em;
  text-align: right;
  color: var(--ink-muted);
  transition: color .3s ease;
}
.section > h2::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--line-strong);
}
.section.is-current > h2::before { color: var(--accent); }

/* Prose stops at the measure, on the text column's hard left edge. */
.section > p,
.section > .note {
  margin-left: var(--indent);
  max-width: var(--measure);
}

/* Run-in lead-ins, set as the CV sets its topic heads: bold serif, inline. */
.lead-in { font-weight: 600; color: var(--ink); }

/* Group heads, as the CV's: serif, capitals, a 2px rule. */
.section > h3 {
  margin: var(--s7) 0 var(--s4);
  padding: var(--s4) 0 0 var(--indent);
  border-top: 2px solid var(--line-strong);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- the chain of steps: numbered blocks joined by one hairline ---- */

.steps {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, var(--measure));
  column-gap: var(--margin-gap);
  align-items: start;
  padding-bottom: var(--s5);
  counter-increment: step;   /* a grid li is not a list-item, so count explicitly */
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  justify-self: end;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--ink);
  background: var(--bg);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .04em;
  color: var(--ink);
}
.steps li::after {
  content: '';
  position: absolute;
  left: calc(var(--margin-col) - 1.0625rem);
  top: 2.125rem;
  bottom: 0;
  border-left: 1px solid var(--line-strong);
}
.steps li:last-child::after { display: none; }
.step-text { grid-column: 2; padding-top: .1875rem; }

/* ============================== figures ============================== */

figure { margin: var(--s6) 0 var(--s7); }
figure.hero { margin: 0; }

/* Mounted plate: white, one hairline, a thin paper margin. */
figure .frame {
  display: block;
  padding: var(--plate-pad);
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  transition: border-color .15s ease;
}
figure .frame:hover,
figure .frame:focus-visible { border: 1px solid var(--line-strong); }
figure .frame picture { display: block; }
figure .frame img { width: 100%; }

/* Narrow single plots sit on the text column. */
figure.narrow .frame {
  margin-left: var(--indent);
  max-width: 38rem;
}

figcaption {
  grid-template-columns: var(--margin-col) minmax(0, var(--cap-measure));
  margin-top: var(--s4);
  font-size: var(--fs-cap);
  line-height: 1.5;
  color: var(--ink-soft);
}
.fig-num {
  grid-column: 1;
  text-align: right;
  font-size: var(--fs-label);
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--ink-muted);
}
.cap-body { grid-column: 2; }
figcaption .takeaway { font-weight: 600; color: var(--ink); }

/* Colour keys: a small swatch in the figure's own colour; the words stay ink. */
.key { white-space: nowrap; }
.key::before {
  content: '';
  display: inline-block;
  width: .625em;
  height: .625em;
  margin: 0 .3em 0 .05em;
  vertical-align: -.02em;
  background: var(--k);
  box-shadow: 0 0 0 1px var(--key-ring);
}
.key-orange { --k: var(--key-orange); }
.key-navy   { --k: var(--key-navy); }
.key-grey   { --k: var(--key-grey); }
.key-blue   { --k: var(--key-blue); }
.key-red    { --k: var(--key-red); }
/* Figure 10 marks the blocked path with a red cross: key it with the same mark. */
.key-cross::before {
  content: '\00d7';
  content: '\00d7' / '';
  width: auto;
  height: auto;
  margin-right: .25em;
  background: none;
  box-shadow: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -.02em;
  color: var(--key-red);
}

/* ---- hero: captions set under their own panels (NVlabs-style labels) ---- */

.hero-cap { display: block; margin-top: var(--s4); }
.hero-cap .takeaway {
  display: block;
  margin-bottom: var(--s3);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
}
.hero-cap .panel-cap { display: block; }
.hero-cap .panel-cap + .panel-cap { margin-top: var(--s2); }
.hero-cap .pn {
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--accent);
}
.hero-cap .cap-foot {
  display: block;
  margin-top: var(--s3);
  color: var(--ink-muted);
}

/* Only with the wide hero, which the <source> in index.html shows above 56rem (the stacked narrow one below). */
@media (min-width: 56.01rem) {
  /* Column starts follow the panel titles inside the image (x = 12, 737, 1192 of 1600). */
  .hero-cap {
    display: grid;
    grid-template-columns: 725fr 455fr 408fr;
    column-gap: 0;             /* the fr split already places the columns; a gap would push them off */
    align-items: start;
    padding: 0 calc(var(--plate-pad) + 1px) 0 calc(var(--plate-pad) + 1px + .75%);
  }
  .hero-cap .takeaway,
  .hero-cap .cap-foot { grid-column: 1 / -1; }
  .hero-cap .panel-cap { padding-right: 1.5rem; }
  .hero-cap .panel-cap + .panel-cap { margin-top: 0; }
  .hero-cap .pn { display: block; margin-bottom: .125rem; }
}

/* ============================== environment cards ============================== */

.env-card {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.env-card figure { margin: var(--s4) 0 0; }

/* One plate per setting: the render and its maps share a single mount. The two
   halves split the white between them, so the maps' title stands clear of the
   render and either half's focus ring falls on white, not on the other image. */
.env-card .frame:first-of-type {
  border-bottom: 0;
  padding-bottom: var(--s2);
}
.env-card .frame:nth-of-type(2) {
  border-top: 0;
  padding-top: var(--s2);
}
.env-card .frame:hover,
.env-card .frame:focus-visible { border-color: var(--plate-edge); }
.env-card .frame:first-of-type:hover,
.env-card .frame:first-of-type:focus-visible { border-bottom: 0; }
.env-card .frame:nth-of-type(2):hover,
.env-card .frame:nth-of-type(2):focus-visible { border-top: 0; }
.env-card .frame:focus-visible { position: relative; z-index: 2; }

/* Setting name on the text column, its source label above it (too long for
   the margin column: "Built for this project"). */
.env-card .env-h {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--s1);
  margin: 0;
  padding-left: var(--indent);
}
.env-name {
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--ink);
}
.env-tag {
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .08em;
  color: var(--ink-muted);
}

/* Where the content column is about 64rem or wider, the render stands beside
   its title and takeaway, and the maps run the full width beneath it. The two
   stay one plate: the render's mount opens straight into the maps' mount, and
   the caption sits in the notch (render first, then maps, as before). On a
   narrower column the title and caption outgrow the render (white would open
   under it inside the plate) and the render's labels get small, so the card
   stays stacked there. */
@media (min-width: 85rem) {
  @supports (grid-template-rows: subgrid) {
    .env-card {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      grid-template-rows: auto 1fr auto;   /* a tall render widens the caption row, not the title row */
      column-gap: 2rem;
    }
    .env-card > .env-h {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      padding: var(--s2) 0 0;
    }
    .env-card > figure {
      grid-column: 1 / -1;
      grid-row: 1 / 4;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      margin: 0;
    }
    .env-card .frame:first-of-type {
      grid-column: 1;
      grid-row: 1 / 3;
      align-self: stretch;
      position: relative;
      z-index: 1;
      margin-bottom: -1px;               /* covers the maps' top edge under it */
      border-bottom: 1px solid var(--plate);
      padding-bottom: var(--s3);         /* keeps the maps' title and the notch corner clear of the render */
    }
    .env-card .frame:first-of-type:hover,
    .env-card .frame:first-of-type:focus-visible { border-bottom: 1px solid var(--plate); }
    .env-card .frame:nth-of-type(2) {
      grid-column: 1 / -1;
      grid-row: 3;
      border-top: 1px solid var(--plate-edge);
      padding-top: var(--plate-pad);
    }
    .env-card .frame:nth-of-type(2):hover,
    .env-card .frame:nth-of-type(2):focus-visible { border-top: 1px solid var(--plate-edge); }
    .env-card figcaption {
      grid-column: 2;
      grid-row: 2;
      display: block;
      margin: var(--s3) 0 0;
      padding-bottom: var(--s4);
    }
  }
}

/* ============================== closing sections ============================== */

.next-steps {
  list-style: none;
  margin: 0 0 0 var(--indent);
  padding: 0;
  max-width: var(--measure);
}
.next-steps li {
  position: relative;
  padding-left: 1.25rem;
}
.next-steps li + li { margin-top: var(--s3); }

.standfirst p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}

/* ============================== imprint ============================== */

.site-footer { padding-bottom: var(--s7); }

.imprint {
  grid-column: 2;
  position: relative;
  margin-top: var(--s8);
  padding: var(--s4) 0 0 var(--indent);
  border-top: 3px solid var(--ink);
}
.imprint::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--line-strong);
}
.imprint p { margin: 0; max-width: var(--cap-measure); }
.imprint-name,
.imprint-links {
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--ink-muted);
}
.imprint-links a { color: var(--ink); }
.imprint .copyright {
  margin-top: var(--s3);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* =============================================================================
   Below 72rem: one column. The rail becomes a byline strip under the title,
   and the contents become a running bar that sticks to the top (the CV's
   running head). The title's label moves above the title.
   ============================================================================= */

@media (max-width: 71.99rem) {
  :root { --margin-col: 7rem; --margin-gap: 1.5rem; }

  .page { max-width: 62rem; padding: 0 2rem; }
  .page::before { display: none; }

  main,
  .site-footer { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }

  main > *,
  .site-header > *,
  main > .toc,
  .rail-head,
  .imprint { grid-column: 1; grid-row: auto; }

  .title-block {
    display: block;
    padding: var(--s6) 0 0 var(--indent);
  }
  .eyebrow { text-align: left; margin-bottom: var(--s3); }
  h1 { max-width: 22ch; }

  /* Byline strip: name and lab | the two links | status. */
  .rail-head {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr);
    column-gap: 2.25rem;
    align-items: start;
    margin: var(--s5) 0 0 var(--indent);
    padding: var(--s4) 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }
  .header-actions { display: contents; }
  .byline .author { font-size: 1.3125rem; }
  .byline .affiliation {
    margin-top: .125rem;
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
  }
  .rail-links {
    flex-direction: column;
    gap: .125rem;
    align-items: flex-start;
  }
  .status-lines { margin: 0; padding-top: .125rem; }
  .status { line-height: 1.8; }

  /* Running contents bar: sideways scroll, a fade at the right edge, the
     current section underlined (contents.js); a plain list of anchors without it. */
  main > .toc {
    position: sticky;
    top: 0;
    z-index: 30;
    max-height: none;
    overflow: visible;
    margin: var(--s6) -2rem 0;
    padding: 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .toc ol {
    display: flex;
    gap: 1.5rem;
    height: var(--bar-h);
    padding: 0 3rem 0 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
  }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc li { flex: none; }
  .toc li a {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 0;
    padding: 0 .375rem;
    white-space: nowrap;
  }
  .toc li a::before { margin-right: .5rem; }
  .toc-label { padding: 0; }
  .leader { display: none; }
  .toc a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--accent); }

  .section { margin-top: var(--s7); scroll-margin-top: calc(var(--bar-h) + var(--s4)); }
}

/* Between the phone band and 56rem the stacked _narrow sources are on screen
   (the <source> media in index.html). Across the full column they would stand
   taller than a tablet screen and set their labels above the body size, so they
   sit on the text column, as the narrow plots do; the hero's caption follows its
   plate. The wide-only figures (no <picture>) keep the full column. */
@media (min-width: 40.01rem) and (max-width: 56rem) {
  figure .frame:has(picture) {
    max-width: 32rem;
    margin-left: var(--indent);
  }
  .hero:has(picture) .hero-cap { padding-left: var(--indent); }   /* :has() as above, so the two move together */
}

/* =============================================================================
   Below 40rem: the marginal column collapses; labels sit above their text,
   figures run edge to edge. (The stacked narrow sources start below 56rem,
   set on each <source> in index.html.)
   ============================================================================= */

@media (max-width: 40rem) {
  :root {
    --indent: 0px;
    --fs-body: 1.09375rem;   /* 17.5 px */
    --fs-lead: 1.125rem;
  }

  .page { padding: 0 1.25rem; }

  .glance-notes,
  .section > h2,
  figcaption {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s2);
  }
  /* Class selectors on purpose: they must outrank the column placements above. */
  .glance-title, .glance-list,
  .fig-num, .cap-body { grid-column: 1; grid-row: auto; }

  .glance-title,
  .fig-num,
  .section > h2::before { text-align: left; }

  .title-block { padding-top: var(--s6); }
  h1 { max-width: none; }
  .subtitle { font-size: 1.1875rem; }

  /* Byline strip on phones: name and lab across, links and status beneath. */
  .rail-head {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.75rem;
    row-gap: var(--s3);
  }
  .byline { grid-column: 1 / -1; }

  .section > h2 { font-size: 1.625rem; }
  .section > h2::before { margin-bottom: var(--s1); }

  .toc ol { gap: 1.25rem; padding: 0 2.5rem 0 1.25rem; }
  main > .toc { margin-left: -1.25rem; margin-right: -1.25rem; }

  .steps li {
    grid-template-columns: 2.125rem minmax(0, 1fr);
    column-gap: 1rem;
  }
  .steps li::after { left: 1.0625rem; }

  /* Edge to edge: the plate becomes a white band. The side margin inside it keeps
     the figures' axis labels off the screen edge. */
  figure .frame,
  figure.narrow .frame {
    max-width: none;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: var(--s1) .5rem;
    border-left: 0;
    border-right: 0;
  }
  figure .frame:hover,
  figure .frame:focus-visible { border-left: 0; border-right: 0; }
  /* The band meets the screen edges, so its focus ring is drawn inside it. */
  figure .frame:focus-visible { outline-offset: -3px; }

  figure .frame + figcaption::before,
  .env-card .frame + .frame + figcaption::before {
    content: "Tap the image to open it full size.";
    grid-column: 1;
    display: block;
    margin-bottom: var(--s1);
    font-size: .875rem;
    font-style: italic;
    color: var(--ink-muted);
  }
  .hero-cap .takeaway { font-size: 1.1875rem; }

  .imprint { padding-left: 0; }
}

/* =============================================================================
   Visual layer (2026-10). Same tokens and voices as above; adds a dark stage for
   the hero clip, a numbers strip, clip plates, paired figures, city-scene cards,
   the environment viewer, a lightbox and a gentle reveal. Square corners and
   hairlines, as in the CV; the only fills are the stage and the active tab.
   ============================================================================= */

:root {
  --stage-bg:   #151412;
  --stage-ink:  #EDEAE3;
  --stage-soft: #B9B3A8;
  --stage-line: #34312C;
  --stage-acc:  #62B8AA;
  --dark-plate: #000000;
}
@media (prefers-color-scheme: dark) {
  :root { --stage-bg: #0A0908; --stage-line: #2B2926; }
}

/* ---- hero stage ---- */
figure.stage {
  margin: 0;
  padding: clamp(.875rem, 1.6vw, 1.5rem) clamp(.875rem, 1.6vw, 1.5rem) clamp(1.125rem, 2vw, 1.75rem);
  background: var(--stage-bg);
  color: var(--stage-soft);
  border-top: 3px solid var(--accent);
}
.stage-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .25rem .625rem;
  border: 1px solid var(--stage-acc);
  color: var(--stage-acc);
}
.stage-chip::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--stage-acc);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }
.stage-label { color: var(--stage-soft); }
.stage-cap {
  display: block;
  margin-top: var(--s4);
  color: var(--stage-soft);
  font-size: var(--fs-cap);
  line-height: 1.5;
}
.stage-cap .takeaway {
  display: block;
  margin-bottom: var(--s2);
  font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--stage-ink);
}
.stage-text { display: block; max-width: 52rem; }

/* ---- clips (videos on a white plate; the frames are white figures) ---- */
.clip {
  position: relative;
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  padding: var(--plate-pad);
}
.clip-hero { border-color: var(--plate); }
.clip-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 544;
  background: #fff;
}
.clip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem calc(.25rem) .125rem;
}
.clip-badge {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6E6A61;
}
.clip-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 2.25rem;
  padding: .375rem .875rem;
  background: #191714;
  color: #fff;
  border: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease;
}
.clip-toggle::before {
  content: '';
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.clip-toggle[data-state="playing"]::before {
  width: 8px; height: 10px;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.clip-toggle:hover,
.clip-toggle:focus-visible { background: var(--accent); }
.clip-fig { margin-top: var(--s6); }

/* ---- numbers strip ---- */
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--s5) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
}
.stats li {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4) var(--s4) var(--s4) 0;
}
.stats li + li { padding-left: var(--s4); border-left: 1px solid var(--line); }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.stat-unit { margin-left: .06em; font-size: .55em; color: var(--accent); letter-spacing: 0; }
.stat-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- figures in pairs (two plates side by side on wide columns) ---- */
.fig-pair { margin: var(--s6) 0 var(--s7); }
.fig-pair > figure { margin: 0 0 var(--s6); }
.fig-pair > figure:last-child { margin-bottom: 0; }
@media (min-width: 72rem) {
  .fig-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s5);
    align-items: start;
  }
  .fig-pair > figure { margin: 0; }
  .fig-pair figure.narrow .frame { margin-left: 0; max-width: none; }
  .fig-pair figcaption { display: block; }
  .fig-pair .fig-num { display: block; text-align: left; margin-bottom: var(--s1); }
}

/* The September overview (Figure 1) keeps its panel captions; the figure number sits on top. */
figure.overview { margin: var(--s6) 0 var(--s7); }
.overview .hero-cap .fig-num { display: block; grid-column: 1 / -1; text-align: left; margin-bottom: var(--s2); }

/* ---- city-scene cards ---- */
.scene-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin: var(--s5) 0 0;
}
.scene-card { margin: 0; display: flex; flex-direction: column; }
.scene-card .frame + .frame { border-top: 0; }
.frame-dark { background: var(--dark-plate) !important; border-color: var(--dark-plate) !important; }
.scene-card figcaption { display: block; margin-top: var(--s2); }
.scene-name {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.section > p.cards-cap {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, var(--cap-measure));
  column-gap: var(--margin-gap);
  max-width: none;
  margin: var(--s4) 0 var(--s7);
  font-size: var(--fs-cap);
  line-height: 1.5;
}
.cards-cap b { color: var(--ink); }
figure.wide-fig .frame { padding: var(--s3) var(--plate-pad); }

/* ---- environment viewer ---- */
.reading-notes {
  margin: 0 0 var(--s5) var(--indent);
  max-width: var(--measure);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.reading-notes summary {
  padding: var(--s3) 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.reading-notes summary:hover { color: var(--accent); }
.reading-notes p { font-size: var(--fs-cap); line-height: 1.55; }

.env-tabs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  margin: var(--s4) 0 var(--s4);
  padding: var(--s4) 0;
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.env-tab-group { display: contents; }
.env-tab-group-label {
  margin: 0;
  padding-top: .5rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.env-tab-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.env-tab {
  min-height: 2.25rem;
  padding: .375rem .875rem;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.env-tab:hover { border-color: var(--ink); color: var(--ink); }
.env-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.env-viewer.is-tabbed .env-card[hidden] { display: none !important; }
.env-viewer.is-tabbed .env-card { margin-top: 0; border-top: 0; padding-top: var(--s3); }
.env-card.is-entering { animation: env-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes env-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.env-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.env-step-btn {
  min-height: 2.5rem;
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.env-step-btn:hover { border-color: var(--accent); color: var(--accent); }
.env-prev::before { content: '\2190\00a0'; content: '\2190\00a0' / ''; }
.env-next::after  { content: '\00a0\2192'; content: '\00a0\2192' / ''; }
.env-count {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- lightbox ---- */
.frame { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 3.5rem 1rem 1.25rem;
  background: rgba(12, 11, 10, .97);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(96vw, 2000px);
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  background: #fff;
  padding: .25rem;
  cursor: default;
  animation: lb-in .25s ease;
}
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lightbox-cap {
  margin: 0;
  max-width: 60rem;
  color: #EDEAE3;
  font-size: 1rem;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: .875rem;
  right: 1rem;
  min-height: 2.5rem;
  padding: .5rem 1rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .1); }
html.has-lightbox { overflow: hidden; }

/* ---- reveal ---- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .stats li.reveal:nth-child(2) { transition-delay: .06s; }
.js .stats li.reveal:nth-child(3) { transition-delay: .12s; }
.js .stats li.reveal:nth-child(4) { transition-delay: .18s; }

/* ---- smaller screens ---- */
@media (max-width: 71.99rem) {
  .scene-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
}
@media (max-width: 56rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .scene-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: var(--s2);
  }
  .scene-card { scroll-snap-align: start; }
  .env-tabs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  figure.stage { margin: 0 -1.25rem; padding: .75rem .5rem 1.125rem; }
  .stage-top, .stage-cap { padding: 0 .75rem; }
  .clip { margin: 0 -1.25rem; border-left: 0; border-right: 0; padding: var(--s1) .25rem; }
  figure.stage .clip { margin: 0; }
  .clip-bar { padding: .375rem .5rem .25rem; }
  .stats li { padding: var(--s3) var(--s3) var(--s3) 0; }
  .stats li + li { padding-left: var(--s3); }
  .stats li:nth-child(3) { padding-left: 0; }
  .section > p.cards-cap { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); }
  .scene-cards { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; scroll-padding-left: 1.25rem; }
  .scene-card .frame { margin-left: 0; margin-right: 0; border-left: 1px solid var(--plate-edge); border-right: 1px solid var(--plate-edge); padding: var(--plate-pad); }
  .scene-card .frame + figcaption::before { content: none; }
  .reading-notes { margin-left: 0; }
  .env-step-btn { padding: .5rem .75rem; }
}

/* =============================================================================
   Showcase layer (2026-10-04): a mosaic of large visuals, one caption line each,
   a horizontal carousel for the nine surroundings and a number tile.
   ============================================================================= */

.section > p.lede {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}
.reading-notes ul { margin: 0 0 var(--s4); padding-left: 1.1rem; font-size: var(--fs-cap); line-height: 1.55; }
.reading-notes li + li { margin-top: var(--s1); }

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  margin: var(--s5) 0 var(--s6);
}
.tile { margin: 0; grid-column: span 6; display: flex; flex-direction: column; }
.tile-half  { grid-column: span 3; }
.tile-third { grid-column: span 2; }
.tile .frame, .car-item .frame { overflow: hidden; }
.tile .frame img, .car-item .frame img {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tile .frame:hover img, .car-item .frame:hover img { transform: scale(1.025); }
.tile-half .frame, .tile-third .frame { flex: 1; display: flex; align-items: center; }
.tile-half .frame picture, .tile-third .frame picture { width: 100%; }
.tile .clip { flex: none; }
.tile-cap {
  display: block !important;
  margin-top: var(--s2) !important;
  font-size: var(--fs-cap);
  line-height: 1.45;
  color: var(--ink-soft);
}
.tile-label {
  margin-right: .5em;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* the number tile: a dark plate with one big line */
.num-tile .num-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
  min-height: 14rem;
  padding: var(--s5);
  background: var(--stage-bg);
  border-top: 3px solid var(--accent);
  color: var(--stage-ink);
}
.num-big {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.num-line {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stage-acc);
}

/* carousel of the nine surroundings */
.carousel { position: relative; margin: 0 0 var(--s6); }
.car-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--s4)) / 3);
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: var(--s3);
}
.car-track:focus-visible { outline-offset: 4px; }
.car-item { margin: 0; scroll-snap-align: start; }
.car-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: var(--s2); }
.car-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  cursor: pointer;
}
.car-btn:hover, .car-btn:focus-visible { border-color: var(--accent); color: var(--accent); }

@media (max-width: 56rem) {
  .tile-half, .tile-third { grid-column: span 6; }
  .car-track { grid-auto-columns: 72%; }
}
@media (max-width: 40rem) {
  .mosaic { gap: var(--s5) 0; }
  .tile-third .frame, .car-item .frame { margin-left: 0; margin-right: 0; }
  .car-track { margin: 0 -1.25rem; padding: 0 1.25rem var(--s3); scroll-padding-left: 1.25rem; grid-auto-columns: 82%; }
  .car-item .frame { border-left: 1px solid var(--plate-edge); border-right: 1px solid var(--plate-edge); padding: var(--plate-pad); }
  .tile .frame + figcaption::before, .car-item .frame + figcaption::before { content: none !important; }
  .num-tile .num-body { min-height: 0; margin: 0 -1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tile .frame img, .car-item .frame img { transition: none; }
  .tile .frame:hover img, .car-item .frame:hover img { transform: none; }
}

/* ============================== motion ============================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage-chip::before { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ============================== print ============================== */
/* Borders, never backgrounds: browsers print with background graphics off. */

@media print {
  :root {
    --bg: #fff; --bg-lift: #fff;
    --ink: #000; --ink-soft: #1a1a1a; --ink-muted: #555;
    --line: #ccc; --line-strong: #999; --accent: #000;
    --plate-edge: #ccc; --key-ring: #999;
    --margin-col: 27mm; --margin-gap: 5mm;
    --measure: 120mm; --cap-measure: 130mm;
    --indent: calc(var(--margin-col) + var(--margin-gap));
  }

  @page { size: A4; margin: 15mm 14mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 9.5pt;
    line-height: 1.45;
  }

  .skip-link,
  .toc,
  .leader,
  .clip-toggle,
  .env-tabs,
  .env-step,
  .lightbox,
  .page::before { display: none !important; }

  .page { max-width: none; padding: 0; }
  main,
  .site-footer { display: block; }

  .title-block { display: block; padding: 0; }
  .eyebrow { text-align: left; margin-bottom: 2mm; }
  .subtitle { margin-top: 3mm; }
  .rail-head {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2mm 8mm;
    margin-top: 5mm;
    padding: 3mm 0;
    border-top: .75pt solid #000;
    border-bottom: .5pt solid #999;
  }
  .header-actions { display: flex; gap: 2mm 8mm; margin: 0; padding: 0; border: 0; }
  .status-lines { margin: 0; }
  .rail-link-back::before,
  .rail-link-out::after { content: none; }
  .rail-links a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-family: var(--mono);
    font-size: 7pt;
  }
  h1 { font-size: 22pt; max-width: none; }
  .subtitle { font-size: 11pt; }

  .glance { padding-top: 5mm; }
  .section { margin-top: 9mm; }
  .section > h2 {
    font-size: 14pt;
    border-top-width: 2pt;
    break-after: avoid;
    page-break-after: avoid;
  }
  .section > h2::after { top: 2pt; border-top-width: .4pt; }
  .section.is-current > h2::before { color: var(--ink-muted) !important; }
  .section > h3 { margin-top: 7mm; font-size: 11pt; break-after: avoid; }
  .steps li { break-inside: avoid; }
  .steps li::before { background: #fff; }

  figure { margin: 5mm 0 6mm; break-inside: avoid; page-break-inside: avoid; }
  figure .frame { padding: 1.5mm; }
  figure .frame img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .key::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .env-card { break-inside: avoid; page-break-inside: avoid; }
  figcaption { font-size: 8.5pt; }
  .hero-cap .takeaway { font-size: 10.5pt; }

  .imprint { margin-top: 8mm; }
  a { color: #000 !important; border-bottom: none !important; }
  .env-card[hidden] { display: block !important; }
  figure.stage { background: #fff; color: #000; border-top: 2pt solid #000; padding: 0; }
  .stage-cap .takeaway { color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}