/* Webfonts — self-hosted brand binaries supplied by the client.
   Display: Eurostile Bold Extended (the wordmark face). One weight only; declared
   across 400–900 so every display role resolves to it.
   Body: IBM Plex Sans 400/600. Mono: IBM Plex Mono 400/500 (latin subset).
   Plex families are SIL OFL 1.1 — see assets/fonts/OFL.txt. */
@font-face{font-family:"Eurostile Bold Extended";src:url("/assets/fonts/eurostile-bold-extended.woff2")format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-600.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Ink — cold near-neutrals. Base of all type and dark surfaces. */
  --ink-900:#101215;--ink-800:#1A1D22;--ink-700:#2A2E35;--ink-600:#40454E;
  --ink-500:#5C626C;--ink-400:#838A94;--ink-300:#A9AFB8;--ink-200:#C9CDD3;
  --ink-100:#E1E3E7;

  /* Bone — the cream studio ground the product was photographed on. */
  --bone-100:#F5F3EE;--bone-200:#EDEAE3;--bone-300:#DFDBD1;--bone-400:#CBC5B8;

  /* Dusk — sampled from the blue-hour field photography. Sole chromatic family. */
  --dusk-900:#171C2B;--dusk-800:#20283C;--dusk-700:#2A3350;--dusk-500:#4A587F;
  --dusk-400:#6F7FB0;--dusk-300:#98A5CB;--dusk-200:#C2CBE2;--dusk-100:#DDE2EF;

  /* Aluminium — brushed-boom greys, for hairlines and machined edges. */
  --alum-300:#C4C7C9;--alum-500:#9DA2A6;--alum-700:#6E7377;

  /* Oxide — reserved. Marks a claim that is not true, and destructive actions. */
  --oxide-600:#8C3A2E;--oxide-400:#B4614F;--oxide-100:#F0E2DE;

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--bone-200);
  --surface-card:var(--bone-100);
  --surface-inset:var(--bone-300);
  --surface-ink:var(--ink-900);
  --surface-dusk:var(--dusk-900);
  --surface-overlay:rgba(16,18,21,.72);

  /* ---- Semantic text ---- */
  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-500);
  --text-on-dark:var(--bone-100);
  --text-on-dark-muted:var(--ink-300);
  --text-accent:var(--dusk-500);
  --text-link:var(--dusk-500);
  --text-link-hover:var(--ink-900);

  /* ---- Data semantics: measured vs claimed ---- */
  --data-measured:var(--ink-900);
  --data-unit:var(--ink-500);
  --data-claimed:var(--oxide-600);
  --data-method:var(--ink-500);
  --data-plot-line:var(--dusk-500);
  --data-plot-grid:var(--ink-200);

  /* ---- Lines & accent ---- */
  --border-hair:var(--ink-200);
  --border-hair-dark:rgba(245,243,238,.18);
  --border-strong:var(--ink-900);
  --accent:var(--dusk-400);
  --accent-strong:var(--dusk-700);
  --focus-ring:var(--dusk-500);

  /* ---- Interactive ---- */
  --btn-solid-bg:var(--ink-900);
  --btn-solid-bg-hover:var(--ink-700);
  --btn-solid-fg:var(--bone-100);
  --btn-outline-fg:var(--ink-900);
  --btn-disabled-fg:var(--ink-400);
  --btn-disabled-bg:var(--bone-300);
}

/* Dark scope — for ink and dusk sections. Add data-scope="dark" to a container. */
[data-scope="dark"]{
  --surface-page:var(--ink-900);
  --surface-card:var(--ink-800);
  --surface-inset:var(--dusk-900);
  --text-strong:var(--bone-100);
  --text-body:var(--ink-200);
  --text-muted:var(--ink-300);
  --text-faint:var(--ink-400);
  --text-link:var(--dusk-300);
  --text-link-hover:var(--bone-100);
  --data-measured:var(--bone-100);
  --data-unit:var(--ink-300);
  --data-method:var(--ink-400);
  --border-hair:rgba(245,243,238,.18);
  --border-strong:var(--bone-100);
  --btn-solid-bg:var(--bone-100);
  --btn-solid-bg-hover:var(--bone-300);
  --btn-solid-fg:var(--ink-900);
  --btn-outline-fg:var(--bone-100);
  --btn-disabled-fg:var(--ink-500);
  --btn-disabled-bg:var(--ink-800);
}

:root{
  /* Families. Display = headlines and the wordmark. Body = prose.
     Mono = every measured value, unit, part number and axis label. */
  --font-display:"Eurostile Bold Extended","Helvetica Neue",Helvetica,sans-serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Weights */
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  /* Size scale — 17px prose base, wide jump to display sizes. */
  --text-2xs:11px;--text-xs:12px;--text-sm:14px;--text-base:17px;--text-lg:20px;
  --text-xl:24px;--text-2xl:32px;--text-3xl:42px;--text-4xl:56px;--text-5xl:76px;
  --text-6xl:104px;

  /* Line heights */
  --leading-flat:1;--leading-tight:1.08;--leading-snug:1.25;
  --leading-body:1.62;--leading-loose:1.75;

  /* Tracking */
  --tracking-display:0;
  --tracking-heading:0;
  --tracking-body:0;
  --tracking-data:0.005em;
  --tracking-label:0.14em;

  /* Composed roles. Display sizes sit one step below the raw scale: the display face is
     extended, so it reads as large at 56px as a normal grotesque does at 76px. */
  --type-display:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-body);
  --type-body-lg:var(--weight-regular) var(--text-lg)/var(--leading-loose) var(--font-body);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-snug) var(--font-body);
  --type-label:var(--weight-medium) var(--text-2xs)/var(--leading-snug) var(--font-mono);
  --type-data:var(--weight-medium) var(--text-2xl)/var(--leading-flat) var(--font-mono);
  --type-data-sm:var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-mono);
  --type-mono:var(--weight-regular) var(--text-sm)/var(--leading-snug) var(--font-mono);
}

:root{
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --space-10:144px;--space-11:200px;

  /* Vertical rhythm between page sections. Unhurried: sections breathe. */
  --section-gap:var(--space-10);
  --section-gap-tight:var(--space-8);
  --block-gap:var(--space-6);

  /* Measure & layout */
  --measure-prose:62ch;
  --measure-narrow:44ch;
  --page-max:1240px;
  --page-gutter:var(--space-6);
  --grid-columns:12; /* @kind other */
  --grid-gutter:var(--space-5);
}

:root{
  /* Machined, not soft. 2px is the maximum radius on any content surface. */
  --radius-none:0;--radius-sm:2px;--radius-md:3px;--radius-pill:999px;

  --border-width-hair:1px;
  --border-width-strong:2px;
  --rule-hair:var(--border-width-hair) solid var(--border-hair);
  --rule-strong:var(--border-width-strong) solid var(--border-strong);

  /* Shadows exist only where an element genuinely leaves the page. */
  --shadow-none:none;
  --shadow-raise:0 1px 2px rgba(16,18,21,.08);
  --shadow-overlay:0 24px 64px -12px rgba(16,18,21,.42),0 2px 8px rgba(16,18,21,.12);

  /* Blur is used once: a fixed header over scrolling photography. */
  --blur-header:saturate(120%) blur(14px); /* @kind other */
  --scrim-photo:linear-gradient(to bottom,rgba(16,18,21,0) 0%,rgba(16,18,21,.55) 70%,rgba(16,18,21,.82) 100%); /* @kind other */
}

:root{
  /* Barely perceptible. No bounce, no spring, no entrance choreography. */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-inout:cubic-bezier(.4,0,.4,1); /* @kind other */
  --transition-hover:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--tracking-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-strong);letter-spacing:var(--tracking-heading)}
h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--type-h2)}
h3{font:var(--type-h3)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor;transition:var(--transition-hover)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
code,kbd,samp{font:var(--type-mono)}
img{display:block;max-width:100%}
table{border-collapse:collapse}
hr{border:0;border-top:var(--rule-hair);margin:0}
::selection{background:var(--dusk-200);color:var(--ink-900)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* hover states previously applied by the design runtime */
header nav a:hover{color:#101215!important;border-bottom-color:#101215!important}
footer nav a:hover{color:#F5F3EE!important;border-bottom-color:#F5F3EE!important}