/* =====================================================================
   BOUNDARY LAB — index (home). All values derive from css/tokens.css.
   ===================================================================== */

/* 0. fail-safes: a blocked script may never gate the page ------------ */
html:not(.js) #preloader { display: none !important; }
html:not(.js) body.is-loading { overflow: visible; height: auto; }

/* 0b. derived instrument tones used by the signature surfaces.
   Declared once here so retuning the signal cyan is a single edit;
   promote verbatim into :root in css/tokens.css when that shared file
   is next opened — the names are already the ones it will carry. */
:root {
  --hairline-tick: rgba(124, 142, 147, 0.28);
  --accent-zone-fill: rgba(47, 224, 200, 0.07);
  --accent-zone-fill-live: rgba(47, 224, 200, 0.11);
  --accent-zone-edge: rgba(47, 224, 200, 0.45);
  --accent-zone-top: rgba(47, 224, 200, 0.09);
}

/* 0c. Japanese line breaks are ours, never the browser's. tokens.css
   re-permits arbitrary break points on headings; revoke it here and
   leave word-break: keep-all / text-wrap: balance in place. */
h1, h2, h3, h4, h5, h6,
.display-jp { overflow-wrap: normal; }

/* body copy breaks at phrase boundaries, never inside a compound or a
   katakana word (途端 / スライド). auto-phrase is a no-op where absent;
   line-break: strict alone already forbids the katakana split. */
p,
.body-jp {
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

/* 0d. JetBrains Mono carries no Japanese glyphs and the body forbids
   letter-spacing expansion: any label whose text is JP uses the body
   face at its own tracking. Mono stays on Latin and numerals only. */
.mono-label--jp,
.hero__hint,
.nav-panel a .mono-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-muted);
  line-height: 1.7;
}

.nav-logo__dot { color: var(--color-accent); }
.nav-panel__meta { margin-top: var(--space-4); }
.nav-panel a .mono-label { margin-left: var(--space-3); }

/* the nav is full-bleed for mix-blend-mode: difference, but its content
   aligns to the same vertical rules as the shell and the bezel */
.site-nav {
  padding-inline: max(var(--page-inline), calc((100% - var(--shell)) / 2 + var(--page-inline)));
}

/* 1. bezel marginalia ------------------------------------------------ */
.bezel { position: absolute; top: var(--space-5); z-index: 3; margin: 0; max-width: none; }
.bezel--left { left: 0; }
.bezel--right { right: 0; }
.bezel__a::after { content: " / "; }
@media (max-width: 1180px) {
  .bezel {
    position: static; writing-mode: horizontal-tb; letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
    white-space: normal; overflow-wrap: anywhere; max-width: 100%;
  }
  .bezel--right { display: none; }
}
@media (max-width: 720px) {
  /* two deliberate register lines — never a string sliced by the shell edge.
     scoped to the left register so the ≤1180px hide of the right one holds */
  .bezel--left { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); line-height: 1.55; }
  .bezel--right { display: none; }
  .bezel__a, .bezel__b { display: block; }
  .bezel__a::after { content: ""; }
}

/* 2. section masthead ------------------------------------------------ */
.section-head { margin-bottom: var(--space-6); }
.section-head__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-head__rule { flex: 1 1 auto; min-width: 24px; height: 1px; background: var(--hairline-strong); transform-origin: left center; }
.section-head h2 { font-size: var(--step-2); line-height: 1.16; max-width: 24ch; }
.br-sm { display: none; }
@media (max-width: 720px) { .br-sm { display: inline; } }

/* 3. hero ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  overflow: hidden; isolation: isolate;
  padding-block: clamp(7rem, 17vh, 13rem) 0;
}
/* the band always meets a drawn edge: ruler + timecode seam into #lab */
.hero::after {
  content: "00:00 — 03:14.000 / SESSION CHAT-072";
  grid-row: 3; align-self: end; position: relative; z-index: 3;
  display: flex; align-items: flex-end; justify-content: flex-end;
  height: 30px; padding: 0 var(--page-inline) var(--space-2);
  border-top: 1px solid var(--hairline-strong);
  background-image: repeating-linear-gradient(90deg, var(--hairline-tick) 0 1px, transparent 1px 64px);
  background-repeat: no-repeat; background-size: 100% 8px; background-position: 0 0;
  font-family: var(--font-mono); font-size: var(--step-label); font-weight: 500;
  letter-spacing: var(--tr-label); color: var(--color-muted);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.hero__word-wrap { position: absolute; top: clamp(9rem, 22vh, 18rem); right: 0; left: 34%; z-index: 0; overflow: hidden; pointer-events: none; }
/* the padding is the cap-height's clearance: the wrapper may cut the word
   on the right, never shear it flat across the letterforms */
.hero__word { display: block; font-size: clamp(4.5rem, 22vw, 18rem); padding-top: 0.18em; transform: translateX(6%); }
.hero__inner { position: relative; z-index: 2; width: 100%; grid-row: 1; }
.hero__head { grid-column: 1 / span 8; }
.hero__body { grid-column: 9 / span 4; margin-top: clamp(2.5rem, 12vh, 9rem); }
.hero__body p { max-width: 44ch; }
.hero__eyebrow { margin-bottom: var(--space-4); }
.eyebrow__a { display: block; }
.eyebrow__build { display: block; position: relative; margin-top: var(--space-1); padding-left: 1.6em; }
.eyebrow__build::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 1em; height: 1px; background: var(--hairline-strong);
}
/* display JP keeps the project's own leading; the caesura is the one
   deliberate gap, not a collision between line 1 and line 2 */
.hero__title { font-size: clamp(2.3rem, 6.9vw, 9.2rem); line-height: var(--lh-display-jp); max-width: none; }
.hero__line { display: block; }
.hero__line--step { padding-left: 0.5em; }
.hero__line--gap { margin-top: 0.34em; }
.hero__hint { margin-top: var(--space-4); }
.hero__hint .hint--coarse { display: none; }
.pointer-coarse .hero__hint .hint--fine { display: none; }
.pointer-coarse .hero__hint .hint--coarse { display: inline; }

.hero__band {
  position: relative; grid-row: 2; z-index: 1; overflow: hidden;
  height: clamp(195px, 32svh, 430px); border-top: 1px solid var(--hairline);
}
.hero__band-inner { position: absolute; left: 0; right: 0; top: -9%; height: 118%; }
.hero__band canvas { width: 100%; height: 100%; }
.hero__scroll {
  position: absolute; right: var(--page-inline); bottom: var(--space-3); z-index: 7; margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk);
  border-top: 1px solid var(--hairline-strong);
}

@media (min-width: 1025px) {
  /* row budget that fits a 1080-tall viewport: head + band + seam ruler
     + SCROLL marker all land above the fold, and the seam is never sliced.
     The headline holds the shell at 2560 but never outgrows the row. */
  .hero { padding-block: clamp(4.5rem, 10vh, 8rem) 0; }
  .hero__title { font-size: min(clamp(2.3rem, 6.9vw, 9.2rem), 12svh); }
  .hero__band { height: clamp(180px, 26svh, 400px); }
  .hero__body { margin-top: clamp(1.5rem, 6vh, 4.5rem); }
  /* the outline word crosses the frame and exits the screen — cut on the
     right edge only, with its cap-height clear of the wrapper's top */
  .hero__word-wrap { left: 22%; right: -12%; top: clamp(4rem, 10vh, 8rem); overflow: hidden; }
  .hero__word { transform: none; }
  /* dB reference scale pinned to the band's top-right corner */
  .hero__band::before {
    content: "-8\A -30\A -60";
    position: absolute; z-index: 4; top: var(--space-3); right: var(--page-inline);
    display: block; white-space: pre; text-align: right;
    font-family: var(--font-mono); font-size: var(--step-label); font-weight: 500;
    letter-spacing: 0.06em; line-height: 2.6; color: var(--color-muted);
    font-variant-numeric: tabular-nums; opacity: 0.72; pointer-events: none;
    border-right: 1px solid var(--hairline-strong); padding-right: var(--space-2);
  }
}
@media (min-width: 1440px) {
  /* the right-hand column is composed against the band instead of
     floating: it is ruled at the top and seated on the headline's baseline */
  .hero__grid { align-items: stretch; }
  .hero__body {
    display: flex; flex-direction: column; justify-content: flex-end;
    margin-top: clamp(3rem, 11vh, 8rem);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hairline-strong);
  }
  .hero__body p { max-width: 40ch; }
}
@media (max-width: 1024px) {
  .hero__head, .hero__body { grid-column: 1 / -1; }
  .hero__body { margin-top: var(--space-5); }
}
@media (max-width: 720px) {
  /* row budget for 390×740: head + band + seam all inside 100dvh, so the
     closing ruler is never sliced by the fold */
  .hero { padding-block: clamp(3rem, 7vh, 4.25rem) 0; }
  .hero .bezel--left {
    padding-bottom: var(--space-2); margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--hairline);
  }
  .hero__eyebrow { margin-bottom: var(--space-3); }
  /* the word reads inside the shell and exits right, as the concept asks */
  .hero__word-wrap { left: var(--page-inline); right: 0; top: auto; bottom: 30%; }
  .hero__word { font-size: 26vw; transform: none; }
  .hero__line--step { padding-left: 0.35em; }
  .hero__body { margin-top: var(--space-3); }
  .hero__body p { max-width: none; }
  .hero__hint { margin-top: var(--space-2); }
  .hero__band { height: 132px; }
  .hero::after { height: 24px; }
}

/* 4. snap surfaces — the signature cut line -------------------------- */
.snap-surface { position: relative; }
.snap-static {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: repeating-linear-gradient(90deg, var(--hairline-tick) 0 1px, transparent 1px 78px);
  background-position: 0 bottom; background-size: 100% 10px; background-repeat: no-repeat;
}
.snap-static.is-built { background-image: none; background-size: auto; }
.snap-zone {
  position: absolute; top: 0; bottom: 0; overflow: hidden;
  background-color: var(--accent-zone-fill);
  background-image: linear-gradient(to top, var(--accent-zone-top), transparent 42%);
  border-left: 1px solid var(--accent-zone-edge);
  border-right: 1px solid var(--accent-zone-edge);
  border-top: 1px solid var(--accent-zone-edge);
  transform-origin: left center;
  transition: background-color var(--dur-1) var(--ease-out-power3);
}
/* while the line is live, the permitted regions read one step brighter */
.snap-surface.is-snapping .snap-zone { background-color: var(--accent-zone-fill-live); }
.hero__band .snap-zone::before {
  content: "CUT OK";
  position: absolute; top: 4px; left: 5px;
  font-family: var(--font-mono); font-size: var(--step-label); font-weight: 500;
  letter-spacing: 0.1em; color: var(--color-accent); opacity: 0.7; white-space: nowrap;
}
.snap-tick { position: absolute; bottom: 0; width: 1px; height: 12px; background: var(--color-accent); opacity: 0.55; transform-origin: 50% 100%; }
.snap-hud { top: var(--space-2); border: 1px solid var(--hairline-accent); border-radius: 2px; }
.snap-hud.is-muted { border-color: var(--hairline-strong); }
.snap-hud:empty { display: none; }
body.snap-active .cursor { opacity: 0 !important; }

@media (prefers-reduced-motion: no-preference) {
  /* enter/exit of the cut line is a settle, not a switch — opacity only */
  .snapline, .snap-hud { transition: opacity 0.18s var(--ease-out-power3); }
  /* the hero gauge draws itself once, the way a pen lays down a scale */
  .hero__band .snap-static.is-built .snap-zone { animation: snap-zone-in 0.9s var(--ease-out-quart) both; }
  .hero__band .snap-static.is-built .snap-tick { animation: snap-tick-in 0.7s var(--ease-out-quart) 0.18s both; }
}
@keyframes snap-zone-in {
  from { opacity: 0; transform: scaleX(0.35); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes snap-tick-in {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 0.55; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* the signature is frozen, not deleted: permission zones stay lit and
     every valley is drawn as a full-height static cut rule */
  .snap-tick { height: 100%; opacity: 0.3; }
  .hero__band .snap-tick { opacity: 0.38; }
}
@media (max-width: 720px) {
  /* a narrow zone carries the short form of the mark, sized so the whole
     token fits — never a string sliced by the zone's own box */
  .hero__band .snap-zone::before {
    content: "OK"; top: 3px; left: 3px;
    font-size: 0.6rem; letter-spacing: 0.04em; opacity: 0.8;
  }
}

/* 5. lab ------------------------------------------------------------- */
.lab__intro { margin-bottom: var(--space-6); }
.lab__lede { grid-column: 1 / span 5; }
.lab__lede--b { grid-column: 7 / span 5; }
@media (max-width: 1024px) {
  .lab__lede, .lab__lede--b { grid-column: 1 / -1; }
  .lab__lede--b { margin-top: var(--space-3); }
}

.lab-timeline { --label-w: 128px; position: relative; margin-top: var(--space-4); }
@media (max-width: 1024px) { .lab-timeline { --label-w: 104px; } }
@media (max-width: 720px) { .lab-timeline { --label-w: 0px; } }
.lab-timeline .lane { grid-template-columns: var(--label-w) minmax(0, 1fr); }
@media (max-width: 720px) { .lab-timeline .lane { grid-template-columns: minmax(0, 1fr); } }

.lab-axis { margin-left: var(--label-w); position: relative; }
.lab-ruler {
  position: relative; height: 30px; border-bottom: 1px solid var(--hairline-strong);
  background-image:
    repeating-linear-gradient(90deg, rgba(124,142,147,0.2) 0 1px, transparent 1px 5.1546%),
    repeating-linear-gradient(90deg, rgba(124,142,147,0.42) 0 1px, transparent 1px 15.4639%);
  background-size: 100% 6px, 100% 13px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
}
.lab-ruler__code { position: absolute; top: 2px; font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.1em; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.lab-ruler__code.is-end { transform: translateX(-100%); }
@media (max-width: 720px) { .lab-ruler__code.is-half { display: none; } }

.lab-canvas { height: 340px; }
.lab-canvas canvas { position: relative; z-index: 2; }
/* the no-JS waveform takes its ink from the tokens, not from markup */
.lab-canvas__static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; color: var(--color-muted); opacity: 0.6; }
.lab-canvas__static path { stroke: currentColor; opacity: 1; }
.lab-canvas.has-canvas .lab-canvas__static { display: none; }
@media (max-width: 720px) { .lab-canvas { height: 200px; } }

.lab-lanes { position: relative; margin-top: var(--space-4); }
.lab-lanes .lane { transition: opacity var(--dur-1) var(--ease-out-power3); }
.lab-lanes[data-mode="vad"] .lane:not([data-lane="vad"]):not([data-lane="truth"]),
.lab-lanes[data-mode="text"] .lane:not([data-lane="text"]):not([data-lane="truth"]),
.lab-lanes[data-mode="fusion"] .lane:not([data-lane="fusion"]):not([data-lane="truth"]) { opacity: 0.2; }
.marker--block { min-width: 2px; }
.lab-lanes .marker { transform-origin: 50% 100%; }

.lab-overlay { position: absolute; left: var(--label-w); right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 6; }
.lab-overlay .snap-static { z-index: 1; opacity: 0.9; }
.lab-overlay .playhead { z-index: 3; opacity: 0.85; }
.lab-overlay .snapline { z-index: 4; }

.lab-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.lab-controls__left { display: flex; align-items: center; gap: var(--space-3); }
.lab-readout { margin: 0; max-width: none; text-align: center; font-size: var(--step-0); color: var(--color-fg); letter-spacing: 0.02em; }
.lab-readout__sep { color: var(--color-muted); padding-inline: var(--space-2); }
.lab-tabs { justify-content: flex-end; }
#play-toggle .icon-pause { display: none; }
#play-toggle.is-playing .icon-play { display: none; }
#play-toggle.is-playing .icon-pause { display: block; }
@media (max-width: 900px) {
  .lab-controls { grid-template-columns: auto 1fr; row-gap: var(--space-3); }
  .lab-readout { text-align: right; }
  .lab-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  .lab-tabs .tab { text-align: left; }
}

.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: var(--step--1); font-weight: 300; color: var(--fg-dim); line-height: 1.6; }
.legend li { display: flex; align-items: center; gap: var(--space-2); }
.legend__key { display: block; width: 18px; height: 10px; flex: none; }
.legend__key--block { background: rgba(124,142,147,0.4); }
.legend__key--tick { border-left: 1px solid var(--color-fg); width: 1px; height: 12px; }
.legend__key--fusion { border-left: 1px solid var(--color-accent); width: 1px; height: 12px; }
.legend__key--truth { border-left: 1px dashed var(--color-fg); width: 1px; height: 12px; opacity: 0.75; }

/* 6. results --------------------------------------------------------- */
.results__intro { margin-bottom: var(--space-6); }
.results__lede { grid-column: 3 / span 7; }
.results-grid { grid-column: 3 / span 10; display: grid; grid-template-columns: 1.2fr 1fr 1.45fr; gap: var(--gutter); align-items: start; }
.results-grid > :nth-child(3) { margin-top: -3rem; }
.metric-card__head { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline); }
.metric-card__title { font-size: var(--step-1); margin-top: var(--space-3); }
.metric-card__note { font-size: var(--step--1); color: var(--fg-dim); margin-top: var(--space-2); max-width: 34ch; }
.metric-row { margin-top: var(--space-4); }
.metric-row .mono-label { display: block; margin-bottom: var(--space-1); }
.metric-bar__fill { transform: scaleX(var(--v, 1)); }
.metric-error { margin-top: var(--space-4); font-size: var(--step-0); }
.metric-error .mono-label { display: inline; margin-right: var(--space-2); }
.histogram { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.histogram svg { width: 100%; height: 34px; opacity: 0.85; }
.histogram figcaption { margin-top: var(--space-2); }
@media (max-width: 1024px) {
  .results__lede { grid-column: 1 / -1; }
  .results-grid { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-grid > :nth-child(3) { margin-top: 0; grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .results-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .results-grid > * { border-top: 0; }
  .results-grid > * + * { border-top: 1px solid var(--hairline); }
}

/* 7. pipeline -------------------------------------------------------- */
.pipeline__intro { margin-bottom: var(--space-6); }
.pipeline__lede { grid-column: 3 / span 6; }
.pipeline__rail-wrap { grid-column: 1 / span 2; }
.pipe-panels { grid-column: 3 / span 10; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--gutter); row-gap: clamp(10vh, 14vh, 20vh); }
.step { grid-column: 1 / span 7; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gutter); align-items: start; }
.step:nth-child(even) { grid-column: 3 / span 8; }
.rail-item__name { display: block; font-size: var(--step-label); letter-spacing: var(--tr-label); margin-top: var(--space-1); }
.step__text .mono-label { margin-bottom: var(--space-2); }
.step__title { font-size: var(--step-1); margin-bottom: var(--space-3); }
.step__note { margin-top: var(--space-4); color: var(--color-accent); }
.code-panel code { white-space: normal; }
.code-line { display: block; white-space: pre; }
@media (max-width: 1024px) {
  .pipeline__lede, .pipeline__rail-wrap, .pipe-panels { grid-column: 1 / -1; }
  .pipe-panels { grid-template-columns: minmax(0, 1fr); row-gap: clamp(6vh, 10vh, 14vh); }
  .step, .step:nth-child(even) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .pipeline__rail-wrap { margin-bottom: var(--space-5); }
  .rail { gap: var(--space-3); flex-wrap: wrap; }
  .rail-item { font-size: var(--step-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); }
  .rail-item::before { display: none; }
  .rail-item.is-active { border-color: var(--hairline-accent); }
}

/* 8. conclusion ------------------------------------------------------ */
.conclusion { position: relative; overflow: hidden; padding-block: calc(var(--silence) + 4vh) var(--silence); }
.conclusion__word-wrap { position: absolute; left: 0; right: 40%; top: 38%; overflow: hidden; pointer-events: none; z-index: 0; }
.conclusion__word { display: block; font-size: clamp(5rem, 24vw, 20rem); padding-top: 0.16em; transform: translateX(-16%); }
.conclusion .shell { position: relative; z-index: 2; }
.conclusion__head { grid-column: 2 / span 7; }
.conclusion__title { font-size: var(--step-3); margin-top: var(--space-3); }
.conclusion__body { grid-column: 9 / span 4; margin-top: clamp(1.5rem, 6vh, 4rem); }
.conclusion__line { margin-top: clamp(6rem, 16vh, 11rem); height: 118px; }
.conclusion__rule { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-accent); transform: scaleX(var(--rv, 1)); transform-origin: left center; }
.conclusion__tag { position: absolute; top: calc(50% + 14px); margin: 0; }
.conclusion__tag--l { left: 0; }
.conclusion__tag--r { right: 0; text-align: right; }
@media (max-width: 1024px) {
  .conclusion__head, .conclusion__body { grid-column: 1 / -1; }
  .conclusion__body { margin-top: var(--space-4); }
}
@media (max-width: 720px) {
  .conclusion__line { height: 96px; margin-top: var(--space-7); }
  .conclusion__tag { font-size: 0.68rem; }
}

/* 9. footer ---------------------------------------------------------- */
.site-footer { position: relative; margin-top: var(--silence); border-top: 1px solid var(--hairline-strong); overflow: hidden; }
.site-footer__inner { padding-block: var(--space-6) var(--space-4); }
.foot-logo {
  font-family: var(--font-display); font-weight: 700; line-height: 0.82;
  letter-spacing: var(--tr-display); font-size: clamp(2.4rem, 11vw, 10.5rem);
  display: flex; flex-wrap: wrap; gap: 0 0.2em; margin: 0 0 var(--space-5);
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gutter); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.foot-nav { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--step-label); text-transform: uppercase; letter-spacing: var(--tr-label); }
.foot-nav a { min-height: 44px; display: flex; align-items: center; color: var(--color-muted); }
.foot-nav a:hover, .foot-nav a:focus-visible { color: var(--color-fg); }
.foot-about p { max-width: 46ch; font-size: var(--step--1); color: var(--fg-dim); }
.foot-contact { text-align: right; }
.foot-contact .mono-label { margin-top: var(--space-1); }
.foot-mail { font-family: var(--font-mono); font-size: var(--step-1); color: var(--color-accent); display: inline-block; margin-bottom: var(--space-3); }
.foot-total { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .foot-contact { text-align: left; }
  .foot-nav { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
}
@media (max-width: 720px) {
  .foot-logo { flex-direction: column; font-size: clamp(2.4rem, 16vw, 6rem); gap: 0; }
}

/* 10. wide-screen bezel ---------------------------------------------- */
@media (min-width: 1440px) {
  .lab__lede { grid-column: 2 / span 4; }
  .lab__lede--b { grid-column: 7 / span 5; }
  .pipeline__lede { grid-column: 3 / span 5; }

  /* both shell edges are held by a rule: the marginalia columns are the
     instrument's bezel on the left AND the right, never one alone */
  .bezel::before {
    content: ""; position: absolute;
    top: calc(-1 * var(--space-3)); bottom: calc(-1 * var(--space-3));
    width: 1px; background: var(--hairline-strong); pointer-events: none;
  }
  .bezel--left::before { left: calc(-1 * var(--space-4)); }
  .bezel--right::before { right: calc(-1 * var(--space-4)); }
}