/* Hallmark · shape: Workbench · genre: modern-minimal · theme: Cobalt (by request) · job: hire · redesign: full · draw: manual
 * hero: Field (head on the left, the JRF request stream as an ASCII field on the right) · nav: wordmark and four links · footer: one line and links · imagery: the product (the owner's screenshots and films, a live Race Clock capture) · signature: the hero field turns raw JRF requests into resolved job states, and scrolling sweeps the X-ray from screen to source
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · motion: the field at 30 fps, the X-ray scrub, the timeline draw, one media reveal · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E5 S4 R5 V4 · weakest: S, a catalog theme by the owner's request; the field and the X-ray carry only this owner's data */
/* Hallmark · waive 59 · hero to X-ray gap is 64px · the stage is the hero's own picture; it is a separate section only so it can carry its heading */
/* Hallmark · dropped data-xray-preset cells · the tabs already switch presets, so the four hover cells were a second control for one job */
/* Hallmark · answered F4 · the second action is a white key-face keycap, Cobalt's own secondary; the one filled primary is the solid cobalt key */
/* Hallmark · waive 77 · contact is 7 of 12 columns with the contact list beside it · a closing band with one action, its weight is the copy button */
/* Hallmark · dropped copyEmailIcon · a hand-drawn SVG icon; the button label says what it does */
@import url("./tokens.css?v=20261027c");
@import url("./base.css?v=20261027c");

/* ---------- Controls ---------- */
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-control); }
.skip:focus-visible { top: var(--space-md); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-key-face);
  color: var(--color-ink);
  box-shadow: var(--shadow-key);
  font: 500 var(--text-md)/1 var(--font-display);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
/* Keycaps: a real 3px bottom edge, lifting on hover and sinking on press */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.btn--quiet { background: var(--color-key-face); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
/* The Dark mode key: pressed down while dark mode is on, like the chosen X-ray tab */
.btn[aria-pressed="true"] { transform: translateY(3px); box-shadow: var(--shadow-key-press); background: var(--color-paper-2); }
/* An icon-only key: square, the icon centred. Light mode shows the moon (go dark), dark mode the sun (go light). */
.btn--nav.btn--icon { width: 40px; padding: 0; }
.theme-icon { display: block; flex: none; }
.theme-icon--sun, .btn--icon[aria-pressed="true"] .theme-icon--moon { display: none; }
.btn--icon[aria-pressed="true"] .theme-icon--sun { display: block; }
.btn--nav { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }

/* Options: keys on a sunken paper-3 tray, the chosen one pressed */
.segmented { display: inline-flex; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) var(--space-sm); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.chip-tab {
  min-height: 44px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-key-face);
  color: var(--color-ink-2);
  box-shadow: var(--shadow-key);
  font: 500 var(--text-sm)/1 var(--font-display);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.chip-tab:hover { color: var(--color-ink); transform: translateY(-1px); }
.chip-tab[aria-selected="true"], .chip-tab[aria-pressed="true"] { transform: translateY(3px); box-shadow: var(--shadow-key-press); background: var(--color-paper-2); color: var(--color-ink); }
.chip-tab:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.chip-tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip-tab:disabled { opacity: 0.5; cursor: not-allowed; }
.chip-tab--solo { min-height: 44px; }

/* ---------- Nav ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 68px; }
.wordmark { white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: var(--space-xl); list-style: none; }
.nav-link { font: 500 var(--text-sm)/1.2 var(--font-display); color: var(--color-ink-2); text-decoration: none; }
.nav-link:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; border-bottom: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-2xl); }
.hero__inner { position: relative; z-index: var(--z-raised); display: grid; gap: var(--space-lg); align-content: center; min-height: calc(100dvh - 68px); padding-block: var(--space-3xl); }
.hero__head { max-width: 16ch; line-height: 1.02; font-size: clamp(2.75rem, 3.6vw + 1rem, 4.5rem); }
.hero .lead { max-width: 34ch; }
/* The field: an ASCII canvas drawn by js/field.js. Without script, a dot grid on the same 8 by 16 cell stands in. */
.hero-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(circle, var(--color-glyph-2) 1px, transparent 1.2px); background-size: var(--cell-w) var(--cell-h); -webkit-mask-image: linear-gradient(90deg, transparent 45%, black 70%); mask-image: linear-gradient(90deg, transparent 45%, black 70%); }
.has-field .hero::before { display: none; }
/* The key to the field, bottom right of the hero, like a chart legend */
.field-legend { position: absolute; z-index: var(--z-raised); right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: var(--space-xl); display: flex; gap: var(--space-lg); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); font: 500 var(--text-sm)/1.2 var(--font-display); color: var(--color-ink-2); }
.field-legend code { margin-right: var(--space-xs); font-family: var(--font-code); color: var(--color-accent); }
.field-legend .field-legend__ink { color: var(--color-ink); }
.field-legend .field-legend__error { color: var(--color-error); }
@supports (corner-shape: bevel) { .field-legend { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-xs); }

/* ---------- Screen and source (the X-ray) ---------- */
.section-xray { padding-bottom: var(--section-gap); }
.xray-bar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.xray-bar__title { font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.015em; max-width: none; margin-right: auto; }

.xray { display: grid; gap: var(--space-lg); }
.xray__viewport {
  --xray-split: 44%;
  --xray-x: 44%;
  --xray-y: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-screen);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.xray__viewport.is-loupe { cursor: none; }
.xray-layer { position: absolute; inset: 0; }
.xray-layer--ui { background: var(--color-paper-2); }
.xray-layer--ui img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Every preset's screen is a 16:9 capture, so each one fills the stage without cropping */
.xray__viewport[data-preset="pwa"] .xray-layer--ui { background: var(--color-screen); }

.xray-layer--code { padding: var(--space-xl); background: var(--color-screen); color: var(--color-screen-ink); clip-path: inset(0 0 0 var(--xray-split)); z-index: var(--z-raised); }
.xray__viewport.is-loupe .xray-layer--code { clip-path: circle(120px at var(--xray-x) var(--xray-y)); }
.xray-code-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-xl); }
.xray-code-sheet { margin: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 0.15em; font-family: var(--font-code); font-size: clamp(0.75rem, 0.6vw + 0.5rem, 1.0625rem); line-height: 1.7; }
.xray-code-sheet--plan { padding-right: var(--space-lg); border-right: var(--rule-hair) solid var(--color-screen-2); }
.xray-code-line { display: flex; align-items: baseline; gap: var(--space-md); white-space: pre; font-variant-ligatures: none; }
.xray-code-num, .xray-code-cmt { color: var(--color-code-cmt); }
.xray-code-kw { color: var(--color-code-kw); }
.xray-code-fn { color: var(--color-code-fn); }
.xray-code-str { color: var(--color-code-str); }

.xray-divider { position: absolute; top: 0; bottom: 0; left: var(--xray-split); width: 3px; background: var(--color-accent); transform: translateX(-50%); z-index: var(--z-raised); pointer-events: none; }
.xray-loupe-ring { position: absolute; left: var(--xray-x); top: var(--xray-y); width: 240px; height: 240px; transform: translate(-50%, -50%); border: 3px solid var(--color-accent); border-radius: 50%; z-index: var(--z-raised); pointer-events: none; display: none; }
.xray__viewport.is-loupe .xray-divider { display: none; }
.xray__viewport.is-loupe .xray-loupe-ring { display: block; }

.xray__caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--gap-columns); align-items: start; }
.xray-record { display: grid; gap: var(--space-sm); min-width: 0; }
.xray-record__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; }
.xray-record__status { margin-left: var(--space-xs); font-weight: 500; font-size: var(--text-sm); color: var(--color-accent-text); }
.xray-record__rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.xray-record__rows dt, .facts dt, .stack-cell dt, .contact-dl dt, .work-filter label, .sync-screen__label { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); }
.xray-record__rows dd { font-family: var(--font-code); font-size: var(--text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xray-meta { display: grid; justify-items: end; gap: var(--space-xs); text-align: right; font-size: var(--text-sm); color: var(--color-muted); max-width: 34ch; }
.xray-meta__tag { font-family: var(--font-code); font-variant-numeric: tabular-nums; color: var(--color-ink); }

/* ---------- Viajero: a dated line that draws as you read it ---------- */
.section-case { padding-bottom: var(--section-gap); }
.case-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.case-tabs { margin-bottom: var(--space-xl); }
.timeline { --progress: 1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; padding-top: var(--space-xl); }
.timeline::before, .timeline::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; }
.timeline::before { background: var(--color-rule); }
.timeline::after { height: 2px; background: var(--color-accent); transform: scaleX(var(--progress)); transform-origin: left center; }
.timeline__item { position: relative; display: grid; gap: var(--space-xs); }
.timeline__item::before { content: ""; position: absolute; top: calc(-1 * var(--space-xl) - 8px); left: 0; width: 1px; height: 17px; background: var(--color-ink); }
.timeline__item time { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.timeline__item p { color: var(--color-ink-2); max-width: 30ch; }

.diff { list-style: none; display: grid; gap: var(--space-xs); max-width: 60rem; }
.diff__row { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.diff__row code { font-family: var(--font-code); font-size: var(--text-sm); overflow-wrap: anywhere; }
.diff__sign { font-family: var(--font-code); font-weight: 700; }
.diff__row--minus .diff__sign { color: var(--color-error); }
.diff__row--plus { background: var(--color-accent-wash); }
.diff__row--plus .diff__sign { color: var(--color-accent-text); }
.diff__val { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.facts > div { display: grid; gap: var(--space-2xs); align-content: start; }

/* Panels, media and fields are cut on two opposite corners where the browser supports it; plain radius elsewhere */
@supports (corner-shape: bevel) {
  .xray__viewport, .media > img, .video-stage, .sync-sim, .screenshot-thumb, .diff__row, .segmented { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; }
  .work-filter input { border-radius: var(--cut) 3px var(--cut) 3px; corner-shape: bevel round bevel round; }
}

/* ---------- Work: five systems, five compositions ---------- */
.section-work { padding-bottom: var(--section-gap); }
.work-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-3xl); }
.work-filter { display: grid; gap: var(--space-2xs); width: min(100%, 22rem); }
.work-filter input { font-family: var(--font-body); min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); }
.work-filter input::placeholder { color: var(--color-muted); }
.work-filter input:hover { border-color: var(--color-ink-2); }
.work-filter input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.work-empty { color: var(--color-muted); }

.work-stack { display: grid; gap: var(--space-4xl); }
.work-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.work-item.is-filtered-out { display: none; }
.work-item__text { display: grid; gap: var(--space-md); justify-items: start; align-content: center; min-width: 0; }
.work-item__text p { color: var(--color-ink-2); max-width: 44ch; }

.media { min-width: 0; }
.media > img, .video-stage { border-radius: var(--radius-media); overflow: hidden; background: var(--color-screen); }
.media > img { width: 100%; }
.video-stage { aspect-ratio: 16 / 9; }
.video-stage video { width: 100%; height: 100%; object-fit: cover; }

/* JRF: the film runs the full width, the words sit above it on one line */
.work-item--film .work-item__text { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; gap: var(--space-md) var(--gap-columns); }
.work-item--film .media { grid-column: 1 / -1; }
/* Race Clock: the real operator screen as a band, the live sync demo under it */
/* Race Clock: the photo of it on a real LED wall leads, the words and the live sync demo beside it */
.work-item--clock { align-items: start; }
.work-item--clock .media--photo { grid-column: 1 / span 8; grid-row: 1 / span 2; display: grid; gap: var(--space-sm); }
.work-item--clock .media--photo figcaption { font: 500 var(--text-sm)/1.4 var(--font-display); color: var(--color-muted); }
.work-item--clock .work-item__text { grid-column: 9 / -1; grid-row: 1; align-self: end; }
.work-item--clock .sync-sim { grid-column: 9 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
/* Langga: reel left, words right */
.work-item--reel .media { grid-column: 1 / span 7; }
.work-item--reel .work-item__text { grid-column: 9 / -1; }
/* Rent-a-Box: words left, two phone screens right */
.work-item--phones .work-item__text { grid-column: 1 / span 4; }
.work-item--phones .phones { grid-column: 6 / -1; }
/* MIS Calendar: words above, a mosaic of four screens */
.work-item--mosaic .work-item__text { grid-column: 1 / span 6; }
.work-item--mosaic .mosaic { grid-column: 1 / -1; }

.scrubber-bar { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-sm); }
.scrubber-bar .chip-tab { min-height: 44px; padding: 0 var(--space-sm); }
.scrubber-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--color-rule); cursor: pointer; overflow: hidden; }
.scrubber-fill { position: absolute; inset: 0; background: var(--color-ink-2); transform: scaleX(0); transform-origin: left center; }
.timecode { font-family: var(--font-code); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-muted); min-width: 8ch; }

.sync-sim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-media); background: var(--color-screen); color: var(--color-screen-ink); }
.sync-screen { display: grid; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-screen-2); border-radius: calc(var(--radius-media) - 2px); min-width: 0; }
.sync-screen__label { color: var(--color-screen-muted); }
.sync-screen__clock { font-family: var(--font-code); font-weight: 500; font-size: clamp(1.375rem, 1.5vw + 0.5rem, 2.125rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-accent-2); line-height: 1; }
.sync-lap-log { display: grid; gap: var(--space-3xs); font-size: var(--text-xs); color: var(--color-screen-muted); font-variant-numeric: tabular-nums; }
.sync-sim__btn { grid-column: 1 / -1; margin: var(--space-sm); justify-self: start; }

.screenshot-thumb { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-media); overflow: hidden; background: var(--color-paper-3); cursor: zoom-in; }
.screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.screenshot-thumb:hover { outline: 2px solid var(--color-rule-2); outline-offset: 3px; }
.screenshot-thumb:active { transform: translateY(1px); }
.screenshot-thumb:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.phones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.phones .screenshot-thumb { aspect-ratio: 9 / 20; }

.mosaic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: var(--space-md); }
.mosaic .screenshot-thumb { aspect-ratio: 16 / 10; }
.mosaic__main { grid-row: 1 / span 3; aspect-ratio: auto !important; height: 100%; }

/* ---------- Stack ---------- */
.section-stack { padding-bottom: var(--section-gap); }
.stack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl) var(--gap-columns); margin-top: var(--space-3xl); }
.stack-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.stack-cell h3 { font-size: var(--text-xl); font-weight: 500; }
.stack-cell__figure { font-family: var(--font-display); font-weight: 600; font-size: var(--text-figure); letter-spacing: -0.03em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.stack-cell dl { grid-column: 1 / -1; display: grid; gap: var(--space-sm); }
.stack-cell dl > div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: var(--space-md); }

/* ---------- Contact ---------- */
.section-contact { padding-block: var(--space-4xl); background: var(--color-paper-2); color: var(--color-ink); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: end; }
.contact-copy { display: grid; gap: var(--space-lg); }
.contact-dl { display: grid; gap: var(--space-md); }
.contact-dl > div { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.contact-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-dl a { text-decoration-color: var(--color-rule-2); }
.contact-dl a:hover { text-decoration-color: var(--color-accent); }

/* ---------- Footer ---------- */
.site-footer { border-top: var(--rule-hair) solid var(--color-rule); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-xl); }
.footer-note { font-size: var(--text-sm); color: var(--color-muted); }
.footer-note .wordmark { margin-right: var(--space-xs); font-size: var(--text-md); color: var(--color-ink); }
.footer-links { display: flex; gap: var(--space-lg); list-style: none; flex-wrap: wrap; }

/* ---------- Lightbox and toast ---------- */
.lightbox-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; gap: var(--space-md); padding: var(--space-xl); background: var(--color-scrim); }
.lightbox-backdrop .btn--quiet { position: absolute; top: var(--space-lg); right: var(--space-lg); color: var(--color-screen-ink); border-color: var(--color-screen-muted); }
.lightbox-frame { display: grid; gap: var(--space-sm); justify-items: center; }
.lightbox-frame img { max-width: min(92vw, 1400px); max-height: 80vh; width: auto; border-radius: var(--radius-media); }
.lightbox-caption { color: var(--color-screen-ink); font-size: var(--text-sm); }
.toast-hook { position: fixed; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }

/* ---------- Narrow screens: every split stacks to one column ---------- */
@media (max-width: 60rem) {
  .field-legend { display: none; }
  .hero__inner { min-height: 0; padding-bottom: 288px; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, transparent 55%, black 80%); mask-image: linear-gradient(180deg, transparent 55%, black 80%); }
  .nav-links { gap: var(--space-lg); }
  .nav-links li:not(:last-child):not(.nav-links__theme) { display: none; }
  .xray__caption { grid-template-columns: minmax(0, 1fr); }
  .xray-meta { justify-items: start; text-align: left; max-width: none; }
  .xray-record__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xray-code-sheet--plan { display: none; }
  .xray-code-grid { grid-template-columns: minmax(0, 1fr); }
  .xray-layer--code { padding: var(--space-md); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .timeline::before, .timeline::after, .timeline__item::before { display: none; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-item > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .work-item--film .work-item__text { grid-template-columns: minmax(0, 1fr); }
  .work-item--reel .work-item__text, .work-item--clock .work-item__text { order: -1; }
  .stack-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .nav-links { gap: var(--space-sm); }
  .xray__viewport { aspect-ratio: 4 / 3; }
  .timeline, .facts { grid-template-columns: minmax(0, 1fr); }
  .sync-sim { grid-template-columns: minmax(0, 1fr); }
  .mosaic { grid-template-columns: minmax(0, 1fr); }
  .mosaic__main { grid-row: auto; aspect-ratio: 16 / 10 !important; }
  .scrubber-bar .video-fullscreen-btn, .timecode { display: none; }
  .stack-cell { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .chip-tab:hover, .chip-tab:active, .screenshot-thumb:active { transform: none; }
}