/* williamckim.com · shared styles
   Palette: bone / ink / ledger green / blueprint / amber / coral / violet
   Type: IBM Plex Sans (text), IBM Plex Mono (figures only)

   Accent system: one generic [data-accent] lookup sets --accent and --accent-2.
   Every coloured component then reads those two variables, so components carry
   no colour logic of their own. */

/* IBM Plex, self-hosted (SIL Open Font License), latin subset. Sans is one variable
   file for every weight. Served from this origin, so the first paint waits on no
   third party: the Google Fonts @import chain cost about 850 ms on mobile. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bone: #f2f3f0;
  --bone-2: #e9ebe6;
  --ink: #131517;
  --ink-2: #3c4045;
  --ink-2-soft: #4d5259;   /* same grey as ink-2, lighter; keeps at least 6:1 on the hero gradient's blue end with headroom */
  --ink-3: #6a6f75;   /* darkened from #6b7076 so muted text on bone clears 4.5:1 */
  --rule: #c9ccc6;
  --surface: #fbfbf9;   /* raised card, a step lighter than bone */
  --on-accent: #ffffff; /* text on a solid accent fill */

  --ledger: #1e6b47;
  --ledger-2: #d9e9df;
  --blueprint: #2a4a78;
  --blueprint-2: #dbe3ef;
  /* amber and coral are darkened from the brief's #d98e04 and #d1495b so that
     text on their own tints clears 4.5:1. Measured ratios in the commit body. */
  --amber: #936003;
  --amber-2: #fbeed0;
  --coral: #bc3042;
  --coral-2: #f9dfe3;
  --violet: #5b4b8a;
  --violet-2: #e6e1f2;

  --grad-hero: linear-gradient(135deg, #f2f3f0 0%, #e2efe8 45%, #dbe3ef 100%);

  --accent: var(--ledger);
  --accent-2: var(--ledger-2);

  /* Type scale: body 17px, three heading steps and one display size. The display
     size is for the two pages people come to use, Home and Lab. */
  --t-h2: clamp(26px, 3.2vw, 36px);
  --t-h1: clamp(32px, 4.8vw, 52px);
  --t-display: clamp(42px, 7.4vw, 92px);
  --t-hero: clamp(46px, 8.4vw, 124px);   /* Home's headline, one step past display */

  --max: 1120px;
  --gutter: clamp(20px, 4vw, 48px);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark theme. The same tokens, retuned: every accent clears 4.5:1 on the page,
   on raised cards and on its own tint (lowest pair 5.75:1, muted text on a tint).
   The block appears twice because CSS cannot share it: once for the system
   setting when no choice is stored, once for an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bone: #121416; --bone-2: #1b1e21; --surface: #1a1d20; --on-accent: #0f1112;
    --ink: #e9ebe7; --ink-2: #c4c8c3; --ink-2-soft: #b6bbb5; --ink-3: #9aa09a; --rule: #3a3f44;
    --ledger: #5cc28c; --ledger-2: #15291f; --blueprint: #8fb2ee; --blueprint-2: #182438;
    --amber: #e3a83d; --amber-2: #2d2311; --coral: #f28593; --coral-2: #35181d;
    --violet: #b7a8f2; --violet-2: #241f38;
    --grad-hero: linear-gradient(135deg, #121416 0%, #13201a 45%, #141b27 100%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bone: #121416; --bone-2: #1b1e21; --surface: #1a1d20; --on-accent: #0f1112;
  --ink: #e9ebe7; --ink-2: #c4c8c3; --ink-2-soft: #b6bbb5; --ink-3: #9aa09a; --rule: #3a3f44;
  --ledger: #5cc28c; --ledger-2: #15291f; --blueprint: #8fb2ee; --blueprint-2: #182438;
  --amber: #e3a83d; --amber-2: #2d2311; --coral: #f28593; --coral-2: #35181d;
  --violet: #b7a8f2; --violet-2: #241f38;
  --grad-hero: linear-gradient(135deg, #121416 0%, #13201a 45%, #141b27 100%);
}
:root[data-theme="light"] { color-scheme: light; }

/* The one accent lookup. Used by body, nav tabs, proof cells, directory cards,
   Work sub-tabs and panels. */
[data-accent="ledger"]    { --accent: var(--ledger);    --accent-2: var(--ledger-2); }
[data-accent="blueprint"] { --accent: var(--blueprint); --accent-2: var(--blueprint-2); }
[data-accent="amber"]     { --accent: var(--amber);     --accent-2: var(--amber-2); }
[data-accent="coral"]     { --accent: var(--coral);     --accent-2: var(--coral-2); }
[data-accent="violet"]    { --accent: var(--violet);    --accent-2: var(--violet-2); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* The hero breaks out to 100vw; clip (not hidden) keeps the sticky header working. */
  overflow-x: clip;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip {
  position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bone);
  padding: 8px 12px; z-index: 100;
}
.skip:focus { left: 8px; }

/* ---------- Header / tabs ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bone) 92%, var(--surface));
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: stretch; justify-content: space-between; gap: 24px;
  min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600;
  letter-spacing: -0.01em;
}
.brand .mark {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: -0.02em;
}
.brand .sub { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.brand, .search-btn, .search-btn kbd { white-space: nowrap; }
@media (max-width: 1199px) { .brand .sub { display: none; } }
@media (min-width: 721px) and (max-width: 1000px) {
  .site-header .wrap { gap: 12px; }
  .site-header .tabs a { padding: 0 9px; }
  .search-btn { padding: 7px 9px; }
  .search-label, .search-btn kbd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 721px) and (max-width: 880px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.tabs { display: flex; align-items: stretch; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tabs a {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  text-decoration: none; color: var(--ink-2); font-weight: 500;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
/* Single styling rule; the colour comes from each tab's own data-accent. */
.tabs a:hover, .tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.site-header nav { display: flex; }
.menu-btn { display: none; }

@media (max-width: 720px) {
  .site-header .wrap { flex-wrap: wrap; column-gap: 10px; padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .brand .sub { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--rule);
    border-radius: 6px; padding: 8px 12px; font: inherit; color: var(--ink); cursor: pointer;
  }
  .menu-btn .bars { width: 18px; height: 18px; }
  .tabs { display: none; width: 100%; flex-direction: column; gap: 0; padding-top: 8px; }
  .tabs.open { display: flex; }
  .tabs a { height: auto; padding: 12px 4px; border-bottom: 1px solid var(--rule); }
  .tabs a[aria-current="page"] { border-bottom-color: var(--accent); }
}

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
main { padding: 48px 0 96px; }
body.home main { padding-top: 0; }
.page-head { padding: 24px 0 8px; }
.page-head h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 600; }
.page-head p { max-width: 62ch; color: var(--ink-2); margin: 0; font-size: 18px; }

.ledger {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 40px;
  padding: 40px 0; border-top: 1px solid var(--rule);
}
.ledger > aside h2 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ledger > aside p { color: var(--ink-3); font-size: 14px; margin: 0; line-height: 1.5; }
@media (max-width: 720px) { .ledger { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; } }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.small { font-size: 14px; color: var(--ink-3); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 6px;
  text-decoration: none; font-weight: 500; border: 1px solid var(--ink); color: var(--ink);
  background: transparent; transition: background .15s, color .15s;
}
.btn:hover { background: var(--ink); color: var(--bone); }
.btn.primary { background: var(--ledger); border-color: var(--ledger); color: var(--on-accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--ledger) 85%, var(--ink)); border-color: color-mix(in srgb, var(--ledger) 85%, var(--ink)); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Home hero: full-bleed, canvas behind the copy ---------- */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: center;
  overflow: visible;
  padding: 72px 0 88px;
  background:
    radial-gradient(58% 46% at 86% 6%, color-mix(in srgb, var(--amber-2) 40%, transparent) 0%, transparent 72%),
    var(--grad-hero);
}
/* The stage sits behind the hero (and, with motion, stays put behind the story). */
.cine { position: relative; }
.cine-stage {
  position: absolute; top: 0; left: 0; right: 0; height: calc(100vh - 64px); z-index: 0;
  background:
    radial-gradient(58% 46% at 86% 6%, color-mix(in srgb, var(--amber-2) 40%, transparent) 0%, transparent 72%),
    var(--grad-hero);
}
.stage { position: absolute; inset: 0; overflow: hidden; }
.stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.stage.ready canvas { opacity: 1; }
.hero, .story { position: relative; z-index: 1; }
.hero { background: none; }   /* the stage behind it carries the gradient */
/* Without motion the stage shares the hero's grid cell, so it is exactly the hero's size. */
@media (prefers-reduced-motion: reduce) {
  .cine { display: grid; }
  .cine-stage { position: relative; height: auto; grid-area: 1 / 1; }
  .hero { grid-area: 1 / 1; }
}
.hero .hero-inner { position: relative; z-index: 1; width: 100%; }
.hero .copy { max-width: 52rem; }
.hero .copy h1 { font-size: var(--t-hero); line-height: 0.95; letter-spacing: -0.045em; margin: 0 0 24px; font-weight: 680; }
/* SplitText masks each line; the padding keeps descenders out of the clip. */
.hero h1 .hl-line-mask { padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero .copy p.lede { font-size: 19px; color: var(--ink-2); max-width: 52ch; margin: 0 0 28px; }
.hero .status { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--ink-2-soft); margin-bottom: 24px; }
.hero .status span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ledger); margin-right: 8px; vertical-align: 1px; }
.hero .caption {
  position: absolute; right: var(--gutter); bottom: 16px; z-index: 2;
  font-size: 12px; color: var(--ink-2-soft);
  background: color-mix(in srgb, var(--bone) 80%, transparent); padding: 4px 8px; border-radius: 4px;
}
/* Reduced motion or no WebGL: same gradient, so the band never reads as blank. */
.stage .fallback {
  position: absolute; inset: 0; display: none; place-items: center; padding: 24px;
  text-align: center; color: var(--ink-2-soft);
  background:
    radial-gradient(58% 46% at 86% 6%, color-mix(in srgb, var(--amber-2) 40%, transparent) 0%, transparent 72%),
    var(--grad-hero);
}
.stage.static .fallback { display: grid; }
.stage.static canvas { display: none; }
@media (max-width: 860px) {
  .hero { min-height: 78vh; min-height: 78svh; padding: 48px 0 64px; }
}
.story-skip { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--ink-2-soft); text-underline-offset: 3px; }
.story-skip:hover { color: var(--ledger); }

/* ---------- Home: the story's chapters ----------
   Without motion (or without JavaScript) they are a list of captions. With motion
   allowed, each is a screen tall and the stage stays behind them. */
.story { padding: 32px 0 8px; }
.chapter { position: relative; }
.ch-card { max-width: 44rem; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.ch-n { font-size: 13px; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 8px; }
.ch-title { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.03em; font-weight: 680; margin: 0; }
.ch-title .ch-line-mask { padding-bottom: .1em; margin-bottom: -.1em; }
.ch-big { font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; color: var(--accent); margin: 0; }
.ch-label { color: var(--ink-2); margin: 10px 0 12px; max-width: 54ch; }
.ch-go { font-weight: 600; color: var(--accent); text-underline-offset: 3px; }
.ch-go::after { content: " \2192"; }
.ch-mark { margin: 0 0 16px; }
.ch-mark .mark {
  display: inline-grid; place-items: center; height: 1.5em; padding: 0 .28em; font-size: clamp(40px, 6vw, 64px);
  font-weight: 700; letter-spacing: -.03em; border: 3px solid var(--ink); border-radius: .22em;
}
@media (prefers-reduced-motion: no-preference) {
  /* The stage spans the hero's and the story's grid rows, so it sticks for the whole
     story and lets go when chapter 5 ends. (A negative bottom margin also took it out
     of flow, but let it stay stuck a screen past the story, over the directory.) */
  .cine { display: grid; }
  .cine-stage { position: sticky; height: 100vh; grid-area: 1 / 1 / 3 / 2; align-self: start; }
  .hero { grid-area: 1 / 1; }
  .story { grid-area: 2 / 1; padding: 0; }
  .chapter { min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 11vh; }
  .chapter > .wrap { width: 100%; }
  .chapter.ch-tall { min-height: 160vh; }
  .ch-card {
    padding: 20px 24px 22px; border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 14px;
    background: color-mix(in srgb, var(--bone) 84%, transparent); backdrop-filter: blur(10px);
  }
  .ch-title { font-size: clamp(30px, 5vw, 68px); }
  /* Once the particles are drawing the numbers and the monogram, the HTML copies step
     back: still read by screen readers, no longer drawn twice. */
  html.glyphs-live .ch-big { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.glyphs-live .ch-mark .mark { display: none; }
  html.glyphs-live .ch-mark { margin: 0; }
}

/* ---------- Home: intro (first visit per session) ---------- */
.intro { display: none; }
html.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 200; background: var(--bone); color: var(--ink);
  clip-path: inset(0 0 0 0); transition: clip-path .4s cubic-bezier(.7, 0, .2, 1);
  animation: intro-failsafe .01s linear 2.2s forwards;
}
html.intro-on .intro.out { clip-path: inset(0 0 100% 0); }
.intro[hidden] { display: none !important; }
.intro-count { position: absolute; left: var(--gutter); bottom: 14vh; font-size: clamp(72px, 17vw, 220px); line-height: .8; letter-spacing: -.05em; }
.intro-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: color-mix(in srgb, var(--ledger) 14%, transparent); }
.intro-line span { display: block; height: 100%; background: var(--ledger); transform-origin: left; transform: scaleX(0); }
.intro-skip {
  position: absolute; right: var(--gutter); bottom: 6vh; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 9px 14px; border-radius: 6px; border: 1px solid var(--ink-3); background: var(--surface); color: var(--ink);
}
.intro-skip:hover { border-color: var(--ink); }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
/* Later visits: the copy waits for its reveal, and shows by itself at 1.2 s regardless. */
html.hl-pending .hero .copy { opacity: 0; animation: hl-show .01s linear 1.2s forwards; }
@keyframes hl-show { to { opacity: 1; } }

/* ---------- Home: proof strip ---------- */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--surface); margin-top: 48px; }
.proof > * { padding: 22px 18px 20px; background: var(--accent-2); }
.proof .num { font-size: 30px; line-height: 1; display: block; margin-bottom: 8px; color: var(--accent); }
.proof .label { font-size: 14px; color: var(--ink-2); }
@media (max-width: 860px) { .proof { grid-template-columns: repeat(2, 1fr); } }

.proof > a { display: flex; flex-direction: column; text-decoration: none; transition: background .15s; }
.proof > a:hover { background: color-mix(in srgb, var(--accent-2) 70%, var(--accent) 12%); }
.proof .go { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 500; color: var(--accent); }
.proof .go::after { content: " \2192"; }

/* ---------- Home: now ---------- */
.now { margin-top: 40px; display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 16px 40px; align-items: start; }
.now h2 { margin: 0; font-size: 15px; font-weight: 600; }
.now ul { list-style: none; margin: 0; padding: 0; }
.now li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.now li:first-child { padding-top: 0; }
.now li span:last-child { color: var(--ink-2); }
.now .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; align-self: center; }
@media (max-width: 720px) { .now { grid-template-columns: 1fr; } }

/* ---------- Home: page directory ---------- */
.directory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin-top: 40px; }
.directory a {
  display: block; padding: 26px 24px 28px; text-decoration: none;
  border-top: 6px solid var(--accent); border-right: 1px solid var(--rule);
  transition: background .15s;
}
.directory a:last-child { border-right: 0; }
.directory a:hover { background: var(--accent-2); }
.directory h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.directory p { margin: 0; color: var(--ink-2); font-size: 15px; }
.directory .go { display: block; margin-top: 16px; font-weight: 500; color: var(--accent); }
@media (max-width: 960px) { .directory { grid-template-columns: repeat(2, 1fr); } .directory a:nth-child(2n) { border-right: 0; } .directory a:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 720px) { .directory { grid-template-columns: 1fr; } .directory a { border-right: 0; border-bottom: 1px solid var(--rule); } .directory a:last-child { border-bottom: 0; } }

/* ---------- Work: sub-tabs + table ---------- */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 24px 0 8px; border-bottom: 1px solid var(--rule); }
.subtabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 12px 14px; font: inherit; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.subtabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.subtabs button:hover { color: var(--accent); }
.panel[hidden] { display: none; }

table.book { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15.5px; }
table.book th { text-align: left; font-weight: 600; font-size: 13px; color: var(--ink-3); padding: 14px 12px 10px; border-bottom: 2px solid var(--accent); }
table.book td { vertical-align: top; padding: 16px 12px; border-bottom: 1px solid var(--rule); }
table.book td.name { font-weight: 600; white-space: nowrap; }
table.book td.name .kind { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
table.book td.name .kind::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 7px; vertical-align: 1px;
}
table.book td.name a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
table.book td.name a::after { content: " \2192"; color: var(--accent); }
table.book td.name a:hover { color: var(--accent); }
table.book td.stack { color: var(--ink-2); font-size: 14px; }
table.book td.outcome { color: var(--accent); font-weight: 500; }
table.book td.link a { white-space: nowrap; }
table.book tr:hover td { background: color-mix(in srgb, var(--accent-2) 45%, transparent); }
@media (max-width: 860px) {
  table.book thead { display: none; }
  table.book tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  table.book td { display: block; padding: 4px 0; border: 0; }
  table.book td.name { white-space: normal; padding-bottom: 6px; }
  table.book td.outcome::before { content: "Outcome: "; color: var(--ink-3); font-weight: 400; }
  table.book td.stack::before { content: "Stack: "; color: var(--ink-3); }
  table.book tr:hover td { background: none; }
}

/* ---------- Work: the Ortho index, large type ---------- */
.ix { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.ix-row { padding: 22px 0 26px; border-bottom: 1px solid var(--rule); }
.ix-link { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 10px; align-items: baseline; text-decoration: none; color: var(--ink); }
.ix-n { grid-row: span 2; font-size: 14px; color: var(--ink-3); }
.ix-name {
  font-size: clamp(30px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.04em; font-weight: 680;
  transition: color .2s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.ix-kind { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.ix-kind::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.ix-link:hover .ix-name, .ix-link:focus-visible .ix-name { color: var(--accent); transform: translateX(10px); }
.ix-link:focus-visible { outline-offset: 6px; }
.ix-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 32px; margin: 14px 0 0 calc(3.4rem + 10px); max-width: 64rem; font-size: 15.5px; color: var(--ink-2); }
.ix-body p { margin: 0; }
.ix-what { grid-column: 1 / -1; max-width: 70ch; }
.ix-k { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.ix-outcome { color: var(--accent); font-weight: 500; }
.ix-thumb { display: none; }
@media (hover: none), (pointer: coarse) {
  .ix-thumb { display: block; width: 100%; height: 150px; margin: 16px 0 0; border-radius: 10px; background: var(--surface); border: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  .ix-link { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ix-body { grid-template-columns: 1fr; margin-left: 0; }
}
.ix-preview { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }
.ix-preview-card {
  width: 300px; height: 190px; border-radius: 12px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--rule); box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  opacity: 0; transform: scale(.82) rotate(-2deg); transform-origin: 0 50%; transition: opacity .18s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.ix-preview.on .ix-preview-card { opacity: 1; transform: none; }
.ix-preview canvas { display: block; width: 100%; height: 100%; }

/* ---------- About ---------- */
.prose p { max-width: 68ch; margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 32px; margin: 0; }
.skills > div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
/* Rotating accent across the skill groups. */
.skills > div:nth-child(5n+1) { --accent: var(--ledger); }
.skills > div:nth-child(5n+2) { --accent: var(--blueprint); }
.skills > div:nth-child(5n+3) { --accent: var(--violet); }
.skills > div:nth-child(5n+4) { --accent: var(--amber); }
.skills > div:nth-child(5n+5) { --accent: var(--coral); }
.skills dt { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--accent); }
.skills dd { margin: 0; color: var(--ink-2); font-size: 15px; }
.certs { list-style: none; padding: 0; margin: 0; }
.certs li {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 0 12px 24px;
  border-bottom: 1px solid var(--rule); position: relative;
}
.certs li::before {
  content: "\2713"; position: absolute; left: 0; top: 12px;
  color: var(--amber); font-weight: 600;
}
.certs li a { text-decoration: none; font-weight: 500; }
.certs li a:hover { text-decoration: underline; }
.certs .when { color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--violet); }
.timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--ink-3); font-size: 14px; }
.timeline strong { display: block; }
.timeline span { color: var(--ink-2); font-size: 15px; }

.principles { list-style: none; counter-reset: p; margin: 0; padding: 0; }
.principles li { counter-increment: p; display: grid; grid-template-columns: 32px 1fr; gap: 2px 8px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.principles li:last-child { border-bottom: 0; }
.principles li::before { content: counter(p); grid-row: span 2; font-family: var(--mono); color: var(--violet); font-weight: 500; }
.principles strong { font-weight: 600; }
.principles span { color: var(--ink-2); font-size: 15px; max-width: 64ch; }

/* ---------- Case studies ---------- */
.crumbs { font-size: 14px; color: var(--ink-3); padding-top: 8px; }
.crumbs a { color: var(--accent); }
.page-head .kind { font-size: 14px; color: var(--ink-3); margin: 0 0 8px; }
.page-head .kind::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.case .page-head { padding-bottom: 32px; }
.diagram-wrap { margin: 0; }
svg.diagram { display: block; width: 100%; max-width: 520px; height: auto; font-family: var(--sans); }
.dg-stage { --c: var(--ink-2); }
.dg-source { --c: var(--blueprint); }
.dg-model { --c: var(--ledger); }
.dg-guardrail { --c: var(--amber); }
.dg-review { --c: var(--violet); }
.dg-output { --c: var(--coral); }
.dg-box { fill: var(--surface); stroke: var(--rule); stroke-width: 1; }
.dg-box.dg-strong { stroke: var(--c); stroke-width: 2; }
.dg-bar { fill: var(--c); }
.dg-role { fill: var(--c); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dg-text { fill: var(--ink); font-size: 14px; }
.dg-arrow { stroke: var(--ink-3); stroke-width: 1.5; fill: none; }
.dg-head { fill: var(--ink-3); }
.dg-group { fill: color-mix(in srgb, var(--amber-2) 55%, transparent); stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dg-group-label { fill: var(--amber); font-size: 13px; font-weight: 600; }
.dg-note { fill: var(--ink-2); font-size: 13px; }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px; margin: 0; background: var(--bone); }
.results > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 18px 16px; background: var(--accent-2); }
.results dt { font-size: 14px; color: var(--ink-2); }
.results dd { margin: 0; color: var(--accent); font-size: clamp(26px, 2.8vw, 34px); line-height: 1.05; letter-spacing: -0.01em; }
.results dd.word { font-weight: 600; }
.case-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 32px; border-top: 1px solid var(--rule); }
.case-nav a { text-decoration: none; font-weight: 600; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; }
.case-nav a:hover { border-color: var(--accent); color: var(--accent); }
.case-nav a:last-child { text-align: right; }
.case-nav span { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); }
@media (max-width: 560px) { .case-nav { grid-template-columns: 1fr; } .case-nav a:last-child { text-align: left; } }

/* ---------- Lab ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-head.display h1 { font-size: var(--t-display); letter-spacing: -0.04em; line-height: 0.95; font-weight: 680; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump a { font-size: 14px; font-weight: 500; text-decoration: none; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; }
.jump a:hover { border-color: var(--accent); color: var(--accent); }
.lab-panel { padding: 48px 0; border-top: 1px solid var(--rule); margin-top: 32px; scroll-margin-top: 72px; }
.lab-head { max-width: 72ch; margin-bottom: 24px; }
.lab-head .kind { font-size: 14px; color: var(--ink-3); margin: 0 0 6px; }
.lab-head .kind::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.lab-head h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 600; }
.lab-head p { color: var(--ink-2); margin: 0 0 10px; }
.lab-foot { margin-top: 28px; max-width: 72ch; }
.lab-foot p { color: var(--ink-2); }
.provenance { margin-top: 12px; }

.mosca { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: clamp(16px, 3vw, 28px); }
.presets-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset { font: inherit; text-align: left; cursor: pointer; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--rule); background: var(--bone); color: var(--ink); }
.preset strong { display: block; font-weight: 600; }
.preset span { font-size: 13px; color: var(--ink-2); }
.preset:hover { border-color: var(--accent); }
.preset[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent); }
.mosca-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; margin: 22px 0 8px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-family: var(--mono); font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.field select { width: 100%; font: inherit; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--ink-3); background: var(--bone); color: var(--ink); }
.slider { display: flex; align-items: center; gap: 12px; }
.slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; }
.slider output { min-width: 9ch; font-size: 14px; text-align: right; }
.field-note { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }
.mosca-summary { font-weight: 600; margin: 18px 0 10px; }
.table-scroll { overflow-x: auto; position: relative; }
.mosca-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mosca-table th, .mosca-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.mosca-table thead th { font-size: 13px; color: var(--ink-3); font-weight: 600; border-bottom: 2px solid var(--accent); }
.mosca-table tbody th { font-weight: 600; }
.mosca-table tr.is-current { background: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.mosca-table .rule { display: inline-block; font-size: 12px; padding: 2px 7px; margin: 2px 4px 2px 0; border-radius: 4px; background: var(--bone-2); color: var(--ink-2); white-space: nowrap; }
.pill { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
[data-status="now"] .pill { background: var(--coral); color: var(--on-accent); }
[data-status="exposed"] .pill { background: var(--amber-2); color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
[data-status="safe"] .pill { background: var(--ledger-2); color: var(--ledger); }
.mosca-table .margin { white-space: nowrap; font-size: 14px; color: var(--ink-2); }
.mosca-table .tlcell { width: 140px; min-width: 110px; }
.tl { position: relative; display: flex; align-items: center; height: 20px; }
.tl .seg { display: block; height: 10px; flex: none; }
.tl .seg.y { background: var(--rule); border-radius: 3px 0 0 3px; }
.tl .seg.x { background: var(--coral); opacity: .75; border-radius: 0 3px 3px 0; }
.tl .z { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }

.qf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qf-card { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; }
.qf-card.qf-wide { grid-column: 1 / -1; }
.qf-card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.qf-card p { color: var(--ink-2); max-width: 70ch; }
.verdict { margin: 0 0 8px; }
.pill.ok { background: var(--ledger-2); color: var(--ledger); }
.pill.loss { background: var(--coral-2); color: var(--coral); }
.qf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 16px; margin: 14px 0; }
.qf-stats dt { font-size: 13px; color: var(--ink-3); }
.qf-stats dd { margin: 2px 0 0; font-size: 24px; color: var(--accent); }
.chart-wrap { margin: 12px 0; }
svg.chart { display: block; width: 100%; max-width: 640px; height: auto; font-family: var(--sans); }
.ch-grid { stroke: var(--rule); stroke-width: 1; }
.ch-tick { fill: var(--ink-2); font-size: 13px; }
.ch-axis { fill: var(--ink-2); font-size: 13px; font-weight: 600; }
.ch-line { fill: none; stroke-width: 2.5; }
.ch-ref { fill: none; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .55; }
.ch-classical { --c: var(--blueprint); stroke: var(--c); }
.ch-quantum { --c: var(--coral); stroke: var(--c); }
.ch-dot { fill: var(--c); stroke: var(--surface); stroke-width: 1.5; }
.chart-wrap figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.key::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: 3px; background: var(--c); }
.key.ch-ref-key::before { background: none; border-top: 2px dashed var(--ink-3); height: 0; }
table.mini { border-collapse: collapse; font-size: 14px; margin: 8px 0; }
table.mini th, table.mini td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); text-align: left; }
table.mini thead th { font-size: 12px; color: var(--ink-3); }
details summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--accent); }
@media (max-width: 760px) {
  .qf-grid { grid-template-columns: 1fr; }
  .mosca-table .rules, .mosca-table .tlcell, .mosca-table thead th:nth-child(3), .mosca-table thead th:nth-child(6) { display: none; }
  .mosca-table { font-size: 14px; }
  .mosca-table th, .mosca-table td { padding: 8px 4px; }
  .mosca-table .margin { white-space: normal; font-size: 13px; }
  .mosca-table .pill { font-size: 12px; padding: 3px 7px; }
}

/* ---------- Lab: Construction Forecast ---------- */
.cf { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: clamp(16px, 3vw, 28px); }
.cf-label { font-size: 15px; color: var(--ink-2); margin: 0 0 18px; max-width: 80ch; }
.cf-label .pill { margin-right: 4px; }
.pill.cf-real { background: var(--ledger-2); color: var(--ledger); }
.pill.cf-fict { background: var(--amber-2); color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.cf-controls { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cf-out { min-width: 0; flex: 0 1 45%; font-size: 13px; color: var(--ink-2); text-align: right; }
.cf-sub { font-size: 13px; font-weight: 500; margin: 8px 0 4px; }
.cf-toggles { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 6px 0 4px; }
.cf-seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cf-seg legend { float: left; font-size: 14px; font-weight: 600; margin-right: 10px; padding: 0; }
.cf-seg label { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cf-seg input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.cf-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cf-stats dd { font-size: 22px; }
.cf-stats-small dd { font-size: 17px; color: var(--ink); }
.cf-why { color: var(--ink-2); max-width: 78ch; }
.cf-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.cf-charts .chart-wrap { margin: 8px 0; min-width: 0; }
.cf-band { fill: var(--accent); opacity: .16; stroke: none; }
.ch-line.cf-scen, .key.cf-scen { --c: var(--accent); stroke: var(--c); }
.ch-line.cf-base, .key.cf-base { --c: var(--ink-3); stroke: var(--c); stroke-dasharray: 6 4; stroke-width: 2; }
.ch-line.cf-actual, .key.cf-actual { --c: var(--ink-2); stroke: var(--c); }
.key.cf-band-key::before { height: 10px; vertical-align: -1px; background: var(--accent); opacity: .3; }
.key.cf-base::before { background: none; border-top: 2px dashed var(--ink-3); height: 0; }
.cf-ext { fill: var(--bone-2); }
.cf-bar-up, .key.cf-bar-up { --c: var(--ledger); fill: var(--c); }
.cf-bar-down, .key.cf-bar-down { --c: var(--coral); fill: var(--c); }
.cf-bar-total, .key.cf-bar-total { --c: var(--blueprint); fill: var(--c); }
.key.cf-bar-up::before, .key.cf-bar-down::before, .key.cf-bar-total::before { width: 12px; height: 12px; vertical-align: -1px; border-radius: 2px; }
.cf-val { font-weight: 600; fill: var(--ink); }
.cf-table td, .cf-table th { vertical-align: top; }
.cf-table .cf-win { font-weight: 700; color: var(--accent); }
.cf-how { margin-top: 28px; max-width: 86ch; }
.cf-how h3 { font-size: 20px; margin: 0 0 8px; }
.cf-how > details { border-top: 1px solid var(--rule); padding: 12px 0; }
.cf-how > details > summary { font-size: 16px; font-weight: 600; }
.cf-how p, .cf-how li { color: var(--ink-2); }
.cf-how details details { margin: 8px 0; }
.cf-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -1px; position: relative; }
.cf-tabs[hidden] { display: none; }
.cf-tabs [role="tab"] { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 10px 16px; color: var(--ink-2);
  background: var(--bone); border: 1px solid var(--rule); border-bottom-color: var(--rule); border-radius: 10px 10px 0 0; }
.cf-tabs [role="tab"][aria-selected="true"] { color: var(--accent); background: var(--surface); border-bottom-color: var(--surface);
  box-shadow: inset 0 3px 0 var(--accent); }
.cf-tabs:not([hidden]) + .cf { border-top-left-radius: 0; }
.ac-input { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.ac-drop { border: 2px dashed var(--rule); border-radius: 10px; padding: 18px; text-align: center; }
.ac-drop.is-over { border-color: var(--accent); background: var(--accent-2); }
.ac-drop .small { color: var(--ink-2); margin: 10px 0 0; }
.ac-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ac-file:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 3px; }
.ac-status { margin: 16px 0 6px; font-weight: 600; min-height: 1.4em; }
.ac-status.ac-error { color: var(--coral); }
#ac-results { margin-top: 6px; }
@media (max-width: 760px) {
  .cf-charts { grid-template-columns: 1fr; }
  .cf-out { flex-basis: 50%; }
  .ac-input { grid-template-columns: 1fr; }
}

/* ---------- Chips ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips li { font-size: 14px; padding: 5px 12px; border-radius: 999px; background: var(--accent-2); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.open-to { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.open-label { font-weight: 600; font-size: 15px; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.contact-list .k { color: var(--ink-3); font-size: 14px; }
.contact-list a { text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }
.copy-btn {
  margin-left: 10px; font: inherit; font-size: 13px; background: none;
  border: 1px solid var(--rule); border-radius: 4px; padding: 3px 8px; cursor: pointer;
  color: var(--ink-2); transition: background .15s, color .15s, border-color .15s;
}
.copy-btn:hover { background: var(--coral); border-color: var(--coral); color: var(--on-accent); }
.copy-btn.is-copied, .copy-btn.is-copied:hover {
  background: transparent; color: var(--ledger); border-color: var(--ledger);
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; padding-bottom: 28px; font-size: 14px; color: var(--ink-3); }

/* Page transitions: a horizontal ledger-line wipe, where the browser supports
   cross-document View Transitions. The new page is revealed left to right, the old
   one is cut away 3px ahead of it, and the transition's own background, ledger green,
   shows through that 3px gap as a line sweeping across. Same easing on both, so the
   gap holds steady. The header is named so it holds still. None under reduced motion.
   Browsers without it get the same wipe from motion.js (.page-wipe). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition { background: var(--ledger); }
  ::view-transition-old(root) { animation: vt-out .5s cubic-bezier(.7, 0, .25, 1) both; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.7, 0, .25, 1) both; mix-blend-mode: normal; }
  .site-header { view-transition-name: site-header; }
}
@keyframes vt-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-out { from { clip-path: inset(0 0 0 3px); } to { clip-path: inset(0 0 0 calc(100% + 3px)); } }
.page-wipe { position: fixed; inset: 0; z-index: 2147483646; background: var(--bone); pointer-events: none; visibility: hidden; }
.page-wipe-line { position: absolute; top: 0; bottom: 0; left: -3px; width: 3px; background: var(--ledger); }

/* Custom cursor (mouse only, added by motion.js). The system cursor comes back over
   form controls, dialogs and the tour, where the dot steps aside. */
html.has-cursor:not(.tour-running), html.has-cursor:not(.tour-running) * { cursor: none; }
/* A running site tour has its own ghost cursor: the dot steps aside for it and the
   system cursor comes back (assets/tour/tour-host.js sets the class). */
html.tour-running .cursor { display: none; }
/* A tour step that clicked through to another page: nothing of the tour is drawn on
   the page that is leaving. */
html.tour-leaving [data-tour-ui] { visibility: hidden !important; }
html.has-cursor :is(input, select, textarea, dialog, dialog *, [data-tour-ui], [data-tour-ui] *) { cursor: auto; }
html.has-cursor input[type="range"] { cursor: pointer; }
.cursor { position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none; transition: opacity .15s; }
.cursor::before {
  content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .2s;
}
.cursor.is-link::before { transform: scale(3.4); background: color-mix(in srgb, var(--ledger) 28%, transparent); }
.cursor.is-label::before { transform: scale(7.2); background: var(--ledger); }
.cursor-label {
  position: absolute; transform: translate(-50%, -50%); font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--on-accent); opacity: 0; transition: opacity .15s;
}
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-hidden { opacity: 0; transition: none; }   /* gone at once on a key press, fades back for the mouse */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Tour Engine, themed from the site's tokens ----------
   html:root outranks the engine's own :root rule, which arrives in an adopted
   stylesheet and would otherwise win on order. */
html:root {
  --tour-surface: var(--surface);
  --tour-border: var(--rule);
  --tour-text: var(--ink);
  --tour-muted: var(--ink-2);
  --tour-accent: var(--ledger);
  --tour-accent-ink: var(--on-accent);
}
/* The site starts tours from its own buttons, so the engine's floating trigger stays hidden. */
[data-tour-trigger] { display: none !important; }
button.btn { font: inherit; cursor: pointer; }
.tour-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.tour-try { background: var(--accent-2); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.tour-try .small { color: var(--ink-2); margin: 10px 0 0; }
.tour-proof { margin: 0; display: grid; gap: 2px; background: var(--bone); }
.tour-proof > div { display: flex; flex-direction: column-reverse; justify-content: center; padding: 16px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; }
.tour-proof dt { font-size: 14px; color: var(--ink-2); }
.tour-proof dd { margin: 0; font-size: clamp(28px, 3vw, 36px); color: var(--accent); }
@media (max-width: 720px) { .tour-demo { grid-template-columns: 1fr; } }

/* ---------- Grover visualizer ----------
   Bars grow from a zero line at half height, so the oracle's sign flip is visible
   as a bar dropping below it. Heights change by transform, which reduced motion
   turns into a jump through the global transition rule. */
.g-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 18px; }
.g-controls label { font-size: 14px; font-weight: 600; }
.g-controls select { font: inherit; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--ink-3); background: var(--bone); color: var(--ink); }
.g-controls .btn { padding: 9px 14px; }
.g-chart { position: relative; height: 220px; margin-bottom: 30px; }
.g-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(16, 1fr); }
.g-col { position: relative; }
.g-bar {
  position: absolute; left: 14%; right: 14%; bottom: 50%; height: 50%;
  background: var(--ink-3); border-radius: 3px 3px 0 0; transform-origin: bottom;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .2s;
}
.g-bar.neg { bottom: auto; top: 50%; transform-origin: top; border-radius: 0 0 3px 3px; opacity: .8; }
.g-col.marked .g-bar { background: var(--accent); }
.g-label { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font-size: 12px; color: var(--ink-2); }
.g-col.marked .g-label { color: var(--accent); font-weight: 600; }
.g-zero { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ink-3); }
.g-mean { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--amber); transition: top .45s; }
.g-mean::after { content: "mean"; position: absolute; right: 0; top: -20px; font-size: 12px; font-weight: 600; color: var(--amber); }
.g-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-status { font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .g-chart { height: 180px; } .g-label { font-size: 10px; } .g-stats dd { font-size: 20px; } }

/* ---------- Header tools, theme toggle and the command palette ---------- */
.theme-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink-2);
}
.theme-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .moon, [data-theme-resolved="dark"] .theme-btn .sun { display: none; }
[data-theme-resolved="dark"] .theme-btn .moon { display: block; }
.site-header nav { margin-left: auto; }
.tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.search-btn {
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; cursor: pointer;
  padding: 7px 8px 7px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink-2);
}
.search-btn:hover { border-color: var(--ink-3); color: var(--ink); }
/* The recruiter escape hatch: one text-only page with every fact on it. */
.quick-link {
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--ledger);
  padding: 7px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ledger) 45%, transparent);
}
.quick-link:hover { background: var(--ledger-2); border-color: var(--ledger); }
.search-ico { width: 16px; height: 16px; flex: none; }
.search-btn kbd, .palette kbd {
  font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--rule); background: var(--bone); color: var(--ink-2);
}
@media (max-width: 720px) {
  .brand { margin-right: auto; }
  .tools { order: 1; margin-left: 0; }
  .menu-btn { order: 2; }
  .site-header nav { order: 3; width: 100%; margin-left: 0; }
  .search-btn kbd { display: none; }
  /* Icon only on a phone, so brand, Search, theme and Menu always fit one row: the
     wider web font used to push Menu onto a second row after load (CLS 0.34). */
  .search-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 6px; }
  .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .quick-link { padding: 6px 8px; font-size: 13px; }
}
/* Narrow phones: the mark stands for the name and Menu becomes its icon, so the whole
   header still fits one row. Both names stay in the accessibility tree. */
@media (max-width: 480px) {
  .site-header .wrap { column-gap: 8px; }
  .brand-name, .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
}
.palette {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, 76vh); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25); overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop { background: rgba(15, 17, 19, .45); }
.pal-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.pal-field input { flex: 1; min-width: 0; font: inherit; font-size: 18px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.pal-field input::placeholder { color: var(--ink-3); }
.palette ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.palette li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.palette li[aria-selected="true"] { background: var(--accent-2); box-shadow: inset 3px 0 0 var(--accent); }
.pal-title { font-weight: 500; }
.pal-group { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.palette li[aria-selected="true"] .pal-group { color: var(--ink-2); }   /* ink-3 is under 4.5:1 on a tint */
.pal-empty { padding: 16px; margin: 0; color: var(--ink-2); }

/* Lenis (lenis.css 1.3). The page's own smooth scroll is off whenever Lenis is on:
   motion.js glides in-page links through Lenis instead. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis { scroll-behavior: auto !important; }
/* An in-page link's target takes focus so the next Tab starts there. It is a landing
   point, not a control, so it draws no ring of its own. */
[data-anchor-target]:focus { outline: none; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Anchored panels clear the sticky header when jumped to. */
section[id], article[id] { scroll-margin-top: 80px; }