/* Graphite / Signal v1 (portfolio/visual-style-handoff). Palette and fonts: SPEC.
   Theme mapping, sizes and spacing: PROPOSED web adaptation from the handoff tokens. */

/* Fonts: self-hosted, SIL OFL 1.1 (fonts/OFL-*.txt) ---------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

/* Tokens ---------------------------------------------------------------- */
:root {
  --graphite: #19232F; --steel: #35475B; --blue: #6D91AE; --mist: #E7ECF1; --white: #FFFFFF; --orange: #FF7849;

  /* Dark is the default theme, as on the reference. */
  --bg: var(--graphite);
  --text: var(--white);          /* 15.88:1 */
  --text-2: var(--mist);         /* 13.36:1, body copy */
  --muted: var(--blue);          /* 4.77:1, AA */
  --rule: var(--steel);          /* decorative only */
  --code-bg: var(--steel);       /* Mist on Steel 8.02:1 */
  --accent: var(--orange);       /* semantic accents only */
  --accent-text: var(--orange);  /* 6.07:1 on Graphite */
  --link-line: var(--blue);
  --focus: var(--orange);
  --ghost: var(--white); --ghost-shade: var(--mist); --ghost-line: var(--graphite);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --measure: 40rem;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}
/* Light version: orange stays decorative, never text (2.61:1 on White). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--white); --text: var(--graphite); --text-2: var(--graphite); --muted: var(--steel);
    --rule: color-mix(in srgb, var(--steel) 22%, var(--white)); --code-bg: var(--mist);
    --accent-text: var(--graphite); --link-line: var(--blue); --focus: var(--graphite);
    --ghost-shade: var(--mist);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: var(--white); --text: var(--graphite); --text-2: var(--graphite); --muted: var(--steel);
  --rule: color-mix(in srgb, var(--steel) 22%, var(--white)); --code-bg: var(--mist);
  --accent-text: var(--graphite); --link-line: var(--blue); --focus: var(--graphite);
  color-scheme: light;
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text-2);
  font: 400 1.0625rem/1.6 var(--sans);
  font-feature-settings: "cv11", "ss03";
}
a { color: var(--text); text-decoration-color: var(--link-line); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; height: auto; }
code { font: 0.86em var(--mono); background: var(--code-bg); color: var(--text); padding: 0.1em 0.35em; border-radius: 4px; }
::selection { background: var(--steel); color: var(--white); }

h1, h2, h3 { font-family: var(--sans); color: var(--text); line-height: 1.15; margin: 0; overflow-wrap: break-word; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.6em; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.35em; }
p { margin: 0 0 1em; max-width: var(--measure); }

.wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--bg); color: var(--text); padding: 8px 12px; z-index: 10; }

/* Surfaces (derived from the palette; Blue on --card stays above 4.5:1) */
:root { --card: color-mix(in srgb, var(--steel) 15%, var(--graphite)); --card-line: var(--steel); --card-hover: var(--blue);
  --dots: color-mix(in srgb, var(--steel) 85%, transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --card: color-mix(in srgb, var(--mist) 45%, var(--white)); --card-line: var(--rule);
    --card-hover: var(--steel); --dots: color-mix(in srgb, var(--steel) 22%, transparent); }
}
:root[data-theme="light"] { --card: color-mix(in srgb, var(--mist) 45%, var(--white)); --card-line: var(--rule);
  --card-hover: var(--steel); --dots: color-mix(in srgb, var(--steel) 22%, transparent); }

/* Small type --------------------------------------------------------------- */
.kicker, .label { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

/* Header ---------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 20; font-size: 0.9375rem;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.site-head.scrolled { border-bottom-color: var(--rule); }
.head-in { display: flex; justify-content: space-between; align-items: center; gap: 4px 24px; min-height: 64px; }
.site-head .name { font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.site-head nav { display: flex; gap: 0 20px; flex-wrap: wrap; }
.site-head nav a { position: relative; color: var(--muted); text-decoration: none; padding: 12px 0; }
.site-head nav a:hover, .site-head nav a[aria-current] { color: var(--text); }
.site-head nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--accent); }
html { scroll-padding-top: 80px; }

/* Header social icons: monochrome, palette colours only */
.head-right { display: flex; align-items: center; gap: 4px 24px; flex-wrap: wrap; }
.socials { display: flex; align-items: center; padding-left: 16px; border-left: 1px solid var(--rule); }
.socials a { display: grid; place-items: center; width: 40px; height: 44px; color: var(--muted); }
.socials a:hover { color: var(--text); }
.socials svg { width: 19px; height: 19px; fill: currentColor; }
.socials svg.stroke { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 700px) { .head-in { position: relative; } .socials { position: absolute; top: 0; right: calc(var(--gutter) - 10px); padding-left: 0; border-left: 0; } }

/* Hero ------------------------------------------------------------------ */
.hero-band { background-image: radial-gradient(circle, var(--dots) 1px, transparent 1.4px); background-size: 24px 24px;
  background-position: center top; border-bottom: 1px solid var(--rule); }
.hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 64px); align-items: center;
  padding-top: clamp(32px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-text { background: var(--bg); box-shadow: 0 0 0 16px var(--bg); }
.status { display: inline-flex; align-items: center; gap: 10px; font: 500 0.8125rem var(--mono); color: var(--text-2);
  border: 1px solid var(--card-line); border-radius: 999px; padding: 6px 14px 6px 12px; margin-bottom: 24px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hero .lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; margin-top: 1em; }
.hero .avail { color: var(--muted); font: 0.8125rem/1.6 var(--mono); }
.hero-art { margin: 0; }
.hero-art { background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: clamp(12px, 2vw, 24px) clamp(8px, 1.5vw, 16px) 4px; }
.hero-scene { display: block; width: 100%; height: auto; overflow: visible; }
.hero-scene .g-wave, .hero-scene .g-bob, .hero-scene .g-done, .hero-scene .g-peek { transform-box: fill-box; }
.hero-scene .g-wave { transform-origin: 85% 85%; }
.hero-scene .g-done { transform-origin: 50% 100%; }
.hero-scene .g-wave-lines { opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .hero-scene .g-wave { animation: hs-wave 2.4s ease-in-out .6s 3; }
  .hero-scene .g-wave-lines { animation: hs-fade 2.4s ease-in-out .6s 3; }
  .hero-scene .g-bob1 { animation: hs-bob 1.1s ease-in-out infinite; }
  .hero-scene .g-bob2 { animation: hs-bob 1.6s ease-in-out .3s infinite; }
  .hero-scene .g-bob3 { animation: hs-walk 3.2s ease-in-out infinite; }
  .hero-scene .g-done { animation: hs-pop 3.2s ease-in-out 1.2s infinite; }
  .hero-scene .g-peek { animation: hs-peek 5s ease-in-out 1s infinite; }
  .hero-scene .g-type { animation: hs-type 1.8s steps(6) infinite; stroke-dasharray: 38; }
}
@keyframes hs-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-16deg); } 40%, 80% { transform: rotate(10deg); } }
@keyframes hs-fade { 0%, 100% { opacity: .2; } 30%, 70% { opacity: .9; } }
@keyframes hs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hs-walk { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(6px, -3px); } 50% { transform: translate(12px, 0); } 75% { transform: translate(6px, -3px); } }
@keyframes hs-pop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-6px) rotate(-6deg); } 90% { transform: translateY(-2px) rotate(4deg); } }
@keyframes hs-peek { 0%, 60%, 100% { transform: translateY(0); } 70%, 90% { transform: translateY(-8px); } }
@keyframes hs-type { from { stroke-dashoffset: 38; } to { stroke-dashoffset: 0; } }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8em; font-size: 0.9375rem; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0.6em 1.2em; border: 1px solid var(--card-line);
  color: var(--text); text-decoration: none; border-radius: 8px; font-weight: 600; background: var(--bg); transition: border-color .15s ease, transform .15s ease; }
.btn:hover { border-color: var(--card-hover); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--graphite); }  /* 6.07:1 */
.btn.primary:hover { background: #ff8a61; border-color: #ff8a61; }

/* Numbers strip ----------------------------------------------------------- */
.stats { list-style: none; margin: 0; padding: clamp(28px, 4vw, 44px) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stats li { border-left: 1px solid var(--rule); padding-left: 20px; }
.stats b { display: block; color: var(--text); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.stats span { display: block; margin-top: 6px; color: var(--muted); font: 0.8125rem/1.45 var(--mono); }

/* Sections -------------------------------------------------------------- */
section { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--rule); }
.sec-head { margin-bottom: clamp(24px, 4vw, 40px); }
.sec-head h2 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); letter-spacing: -0.025em; }
.split { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); }
.split > h2 { margin: 0; }

.card { background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: clamp(20px, 3vw, 32px); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid .card p { margin-bottom: 0.6em; }

.flagship { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-bottom: 16px; }
.flagship h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.6em; }
.flagship h3 a { color: var(--text); text-decoration: none; }
.flagship h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.flagship .facts { display: grid; gap: 14px; margin: 1.6em 0 1.8em; }
.flagship .facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.flagship .facts dt { font-weight: 700; color: var(--text); font-size: 1.125rem; letter-spacing: -0.01em; }
.flagship .facts dd { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.link-card { position: relative; transition: border-color .15s ease, transform .15s ease; }
.link-card:hover { border-color: var(--card-hover); }
.link-card h3 { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.link-card h3 a { color: var(--text); text-decoration: none; }
.link-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.link-card .arr { color: var(--muted); display: inline-block; transition: transform .15s ease, color .15s ease; }
.link-card:hover .arr { color: var(--accent); transform: translate(2px, -2px); }
.link-card .over { position: relative; z-index: 1; }
.stack { color: var(--muted); font: 0.8125rem var(--mono); margin: 0; }

.practice { counter-reset: none; }
.practice .num { display: block; font: 500 0.8125rem var(--mono); color: var(--muted); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--card-line); }
.practice h3 { font-size: 1.1875rem; }
.practice p { color: var(--text-2); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 8px 32px; padding: 4px 0 24px; }
.timeline .when { font: 0.8125rem/1.9 var(--mono); color: var(--muted); margin: 0; }
.timeline h3 { font-size: 1.25rem; }
.timeline .org-note { color: var(--muted); font-weight: 400; }
.more { margin: 8px 0 0; }
@media (min-width: 861px) { .more { margin-left: calc(11rem + 32px); } }

.contact-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: clamp(28px, 5vw, 56px); }
.contact-card h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -0.03em; margin-bottom: 0.4em; }
.contact-card .actions { margin-top: 1.4em; }
.contact-ghost { width: clamp(110px, 14vw, 150px); }

/* Reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .link-card:hover { transform: translateY(-2px); }
}

/* Decision trace -------------------------------------------------------- */
.trace { position: relative; margin: 52px 0 0; font: 0.8125rem/1.5 var(--mono); border: 1px solid var(--card-line);
  border-radius: 10px; padding: 18px 18px 14px; color: var(--text-2); background: var(--bg); }
.trace .label { margin-bottom: 6px; }
.trace-cap { font: 0.9375rem/1.5 var(--sans); color: var(--text-2); margin: 0 0 12px; padding-right: 96px; }
.trace ol { list-style: none; margin: 0; padding: 0; }
.trace li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: 2px 12px;
  padding: 8px 0; border-top: 1px solid var(--rule); }
.trace li:first-child { border-top: 0; }
.trace .t, .trace .who, .trace .code { color: var(--muted); }
.trace .msg { overflow-wrap: anywhere; }
.trace .code { grid-column: 2 / 4; }
.trace .verdict { font-weight: 500; color: var(--text); }
.trace .silent { color: var(--muted); }
.trace .cut { color: var(--muted); text-decoration: line-through; }
.trace .sent { color: var(--accent-text); }
.trace .sent::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: 0.1em; }
.trace .draft .msg { font-style: italic; }
.trace-foot { font: 0.8125rem/1.5 var(--sans); color: var(--muted); margin: 12px 0 0; }

/* Ghost: the owner's mascot, drawn after the approved reference. Decorative. */
.ghost .g-body { fill: var(--ghost); }
.ghost .g-shade { fill: var(--ghost-shade); }
.ghost .g-line { fill: none; stroke: var(--ghost-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ghost .g-hand { fill: var(--ghost); stroke: var(--ghost-line); stroke-width: 2.5; }
.ghost .g-eye { fill: var(--ghost-line); }
.ghost .g-edge { stroke: var(--card-line); stroke-width: 1; }
.ghost .g-spark { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.ghost .g-shadow { fill: var(--steel); opacity: 0.55; }
:root[data-theme="light"] .ghost .g-shadow { opacity: 0.18; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ghost .g-shadow { opacity: 0.18; } }
.ghost .g-eyes { transform-box: fill-box; transform-origin: center; }
.ghost .g-look { transition: transform .25s ease-out; }

.peek { position: absolute; right: 22px; bottom: calc(100% - 12.4px); width: 96px; pointer-events: none; }
.js .peek .g-spark { opacity: 0; transition: opacity .25s ease; }
.js .trace.speaks .peek .g-spark { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .trace li { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
  .js .trace li.on { opacity: 1; transform: none; }
  .js .peek .g-rise { transform: translateY(40px); transition: transform .7s cubic-bezier(.2,.8,.3,1); }
  .js .peek .g-hand { opacity: 0; transition: opacity .3s ease; }
  .js .trace.awake .peek .g-rise { transform: none; }
  .js .trace.awake .peek .g-hand { opacity: 1; }
  .ghost .g-eyes { animation: ghost-blink 6s ease-in-out 2s infinite; }
  .ghost-float { animation: ghost-float 4.5s ease-in-out infinite; }
  .ghost-float-shadow { transform-box: fill-box; transform-origin: center; animation: ghost-shadow 4.5s ease-in-out infinite; }
}
@keyframes ghost-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes ghost-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ghost-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.85); } }

/* Footer: signature block as on the reference ---------------------------- */
.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-top: 40px; padding-bottom: 48px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.875rem; }
.site-foot p { margin: 0; }
.sig i { display: block; width: 40px; height: 3px; background: var(--accent); margin-bottom: 12px; }
.sig b { display: block; color: var(--text); font-size: 1.0625rem; font-weight: 700; }
.sig span { color: var(--muted); font-size: 0.9375rem; }

/* Case study ------------------------------------------------------------ */
.case-head { padding-top: clamp(32px, 6vw, 80px); padding-bottom: clamp(32px, 5vw, 64px); }
.case-head h1 { max-width: 20ch; }
.case-head .lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); max-width: 44rem; margin-top: 0.9em; }
.hero-band .case-head > * { background: var(--bg); box-shadow: 0 0 0 10px var(--bg); }
.hero-band .case-head > .kicker { display: inline-block; }
.case-head dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 2.2em 0 0; background: none !important; box-shadow: none !important; }
.case-head dl div { background: var(--card); border: 1px solid var(--card-line); border-radius: 10px; padding: 14px 16px; }
.case-head dt { font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--text); letter-spacing: -0.03em; }
.case-head dd { margin: 4px 0 0; color: var(--muted); font: 0.8125rem/1.45 var(--mono); }
.prose h2 { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--muted); }
.figure { margin: 1.6em 0; }
.figure figcaption { color: var(--muted); font-size: 0.9375rem; margin-top: 0.6em; max-width: var(--measure); }
.figure .pipe-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pipe text { font-family: var(--sans); fill: var(--text); }
.pipe .h { font-size: 15px; font-weight: 600; }
.pipe .h.sm { font-size: 14px; }
.pipe .sub { font-family: var(--sans); fill: var(--muted); font-size: 11px; }
.pipe .box { fill: var(--card); stroke: var(--muted); stroke-width: 1; }
.pipe .box.model { stroke: var(--text); stroke-width: 1.5; }
.pipe .box.out { stroke: var(--accent); stroke-width: 2; }
.pipe .arrow { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.pipe .cutline { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.pipe .cutlabel { fill: var(--muted); font-family: var(--sans); font-size: 12px; }
table.results { border-collapse: collapse; width: 100%; max-width: 980px; font-size: 0.9375rem; margin: 1em 0 1.6em; }
.results th, .results td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-top: 1px solid var(--rule); }
.results th { font-weight: 600; color: var(--text); border-top: 0; font-size: 0.875rem; }
.results td:nth-child(3) { color: var(--text); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* 404 -------------------------------------------------------------------- */
.lost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.lost .ghost { width: clamp(110px, 18vw, 170px); }
.code-404 { font: 0.875rem var(--mono); color: var(--muted); margin-bottom: 0.8em; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .flagship { grid-template-columns: minmax(0, 1fr); }
  .case-head dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .site-head nav { gap: 0 16px; }
}
@media (max-width: 700px) {
  .figure .pipe { min-width: 660px; }
  .figure .pipe-scroll::after { content: "Scroll sideways to see the whole diagram."; display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }
  .site-head { position: static; }
  .head-in { flex-direction: column; align-items: flex-start; padding-top: 10px; gap: 0; min-height: 0; }
  .contact-card { grid-template-columns: minmax(0, 1fr); }
  .flagship { background: none; border: 0; padding: 0; border-radius: 0; }
  .contact-ghost { width: 96px; order: -1; }
  .case-head dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .trace li { grid-template-columns: 3.2em minmax(0, 1fr); }
  .trace .verdict { grid-column: 2; }
  .trace-cap { padding-right: 80px; }
  .peek { width: 80px; right: 14px; bottom: calc(100% - 10.3px); }
  .lost { grid-template-columns: minmax(0, 1fr); }
  .flagship .facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}