/* ══════════════════════════════════════════════════════════════════════════
   Leif R. Bruce — CV
   Satellite of the daemon-sec.xyz redesign (.dmn): editorial paper archive.
   Rosé Pine Dawn page, inverse Rosé Pine plates, Archivo display type over
   an IBM Plex Mono data layer, numbered hue-keyed sections, fuzz-field
   signal strips. Spec: docs/superpowers/specs/2026-08-09-dmn-restyle-design.md
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
/* Archivo variable carries both axes the design leans on: weight 400–900 and
   width 62–125%. Display sits compressed (font-stretch < 100%); body at 100. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* Wordmark subset only — DΛΣMӨП spans Latin, Greek and Cyrillic, which is the
   whole reason this face exists here (Archivo ships neither of the latter). */
@font-face {
  font-family: "Noto Sans Display";
  src: url("../fonts/noto-wordmark.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   Two surface families, exactly as the mothership defines them:
     --pg-*    the page — cream in dawn, ink in night
     --flip-*  the plates — always the inverse of the page. The hero, the
               signal strips and the footer live on them.
     --term-*  the terminal panel, which rides the plate palette.
   Plus the section hue legend (pine/rose/foam/iris/gold/love) and the fuzz
   channels the signal strips read at draw time.
   ─────────────────────────────────────────────────────────────────────────── */
:root,
[data-theme="dawn"] {
  color-scheme: light;

  --pg-base: #faf4ed;
  --pg-surface: #fffaf3;
  --pg-overlay: #f2e9e1;
  --tx-body: #575279;     /* 6.66:1 on paper — body copy lives here */
  --tx-subtle: #6e6a86;   /* 4.73:1 — clears AA for real text at any size */
  --tx-muted: #847f94;    /* 3.53:1 — decorative / >=19px only, never prose */
  --edge: color-mix(in srgb, var(--tx-muted) 38%, var(--pg-base));
  --edge-strong: color-mix(in srgb, var(--tx-subtle) 42%, var(--pg-base));

  --acc: #286983;         /* pine — link/reaction ink on the page */
  --acc-alert: #b4637a;

  /* the section hue legend — dawn values darkened where they carry text */
  --pine: #286983;
  --rose: #c26d68;
  --foam: #4e8490;
  --iris: #907aa9;
  --gold: #b0730d;
  --love: #b4637a;

  /* plates — Rosé Pine proper, dropped into Rosé Pine Dawn */
  --flip-bg: #191724;
  --flip-tx: #e0def4;
  --flip-subtle: #908caa;
  --flip-acc: #9ccfd8;
  --flip-acc-2: #c4a7e7;
  --flip-alert: #eb6f92;
  --flip-hair: color-mix(in srgb, var(--flip-tx) 22%, transparent);

  --term-bg: #191724;
  --term-tab-bg: #26233a;
  --term-tab-tx: #908caa;
  --term-tx: #e0def4;
  --term-subtle: #908caa;
  --term-bar: #31748f;
  --term-prompt: #eb6f92;
  --term-key: #c4a7e7;
  --term-str: #f6c177;
  --term-com: #827e9c;

  /* the pinned credential band — pine ground, cream ink, both modes */
  --band-bg: #286983;
  --band-tx: #faf4ed;
  --band-sub: color-mix(in srgb, var(--band-tx) 72%, transparent);
  --band-hair: color-mix(in srgb, var(--band-tx) 26%, transparent);
  --band-gold: #f6c177;

  /* fuzz field — additive pastels as light on a dark plate. Channels are
     space-separated; the canvas normalises them at read time. */
  --fuzz-blend: lighter;
  --fuzz-band-1: 196 167 231; /* iris */
  --fuzz-band-2: 156 207 216; /* foam */
  --fuzz-band-3: 235 111 146; /* love */
  --fuzz-fil-1: 224 222 244;
  --fuzz-fil-2: 156 207 216;
  --fuzz-fil-3: 196 167 231;
  --fuzz-gain: 1;

  --sb-thumb: #ea9d34;
  --sb-thumb-hover: #9b5800;
}

[data-theme="night"] {
  color-scheme: dark;

  --pg-base: #191724;
  --pg-surface: #1f1d2e;
  --pg-overlay: #26233a;
  --tx-body: #e0def4;
  --tx-subtle: #908caa;
  --tx-muted: #6e6a86;
  --edge: color-mix(in srgb, var(--tx-subtle) 22%, var(--pg-base));
  --edge-strong: color-mix(in srgb, var(--tx-subtle) 40%, var(--pg-base));

  --acc: #9ccfd8;
  --acc-alert: #eb6f92;

  --pine: #3e8fb0;
  --rose: #ebbcba;
  --foam: #9ccfd8;
  --iris: #c4a7e7;
  --gold: #f6c177;
  --love: #eb6f92;

  /* plates invert: Rosé Pine Dawn paper inside the dark page. Inks are the
     shades already darkened for cream so everything clears 4.5:1. */
  --flip-bg: #faf4ed;
  --flip-tx: #575279;
  --flip-subtle: #6b6784;
  --flip-acc: #286983;
  --flip-acc-2: #7c5f9c;
  --flip-alert: #b4637a;
  --flip-hair: color-mix(in srgb, var(--flip-tx) 24%, transparent);

  --term-bg: #faf4ed;
  --term-tab-bg: #f2e9e1;
  --term-tab-tx: #625e7a;
  --term-tx: #575279;
  --term-subtle: #6b6784;
  --term-bar: #286983;
  --term-prompt: #96495c;
  --term-key: #7c5f9c;
  --term-str: #8a5a08;
  --term-com: #625e7a;

  --band-bg: #286983;
  --band-tx: #faf4ed;
  --band-sub: color-mix(in srgb, var(--band-tx) 72%, transparent);
  --band-hair: color-mix(in srgb, var(--band-tx) 26%, transparent);
  --band-gold: #f6c177;

  /* on cream there is no light to add — the streaks are laid into the paper
     instead: multiply, dawn hues, lower gain (multiply bites harder). */
  --fuzz-blend: multiply;
  --fuzz-band-1: 144 122 169; /* dawn iris */
  --fuzz-band-2: 86 148 159;  /* dawn foam */
  --fuzz-band-3: 180 99 122;  /* dawn love */
  --fuzz-fil-1: 87 82 121;    /* dawn ink  */
  --fuzz-fil-2: 40 105 131;   /* dawn pine */
  --fuzz-fil-3: 144 122 169;
  --fuzz-gain: 0.6;

  --sb-thumb: #f6c177;
  --sb-thumb-hover: #ea9d34;
}

/* Mirror of the night block for first visits with no stored preference and no
   JS. Kept deliberately duplicated rather than introducing a build step.
   `screen` keeps its specificity from defeating the print palette. */
@media screen and (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --pg-base: #191724; --pg-surface: #1f1d2e; --pg-overlay: #26233a;
    --tx-body: #e0def4; --tx-subtle: #908caa; --tx-muted: #6e6a86;
    --edge: color-mix(in srgb, var(--tx-subtle) 22%, var(--pg-base));
    --edge-strong: color-mix(in srgb, var(--tx-subtle) 40%, var(--pg-base));
    --acc: #9ccfd8; --acc-alert: #eb6f92;
    --pine: #3e8fb0; --rose: #ebbcba; --foam: #9ccfd8;
    --iris: #c4a7e7; --gold: #f6c177; --love: #eb6f92;
    --flip-bg: #faf4ed; --flip-tx: #575279; --flip-subtle: #6b6784;
    --flip-acc: #286983; --flip-acc-2: #7c5f9c; --flip-alert: #b4637a;
    --flip-hair: color-mix(in srgb, var(--flip-tx) 24%, transparent);
    --term-bg: #faf4ed; --term-tab-bg: #f2e9e1;
    --term-tab-tx: #625e7a; --term-tx: #575279; --term-subtle: #6b6784;
    --term-bar: #286983; --term-prompt: #96495c; --term-key: #7c5f9c;
    --term-str: #8a5a08; --term-com: #625e7a;
    --fuzz-blend: multiply;
    --fuzz-band-1: 144 122 169; --fuzz-band-2: 86 148 159; --fuzz-band-3: 180 99 122;
    --fuzz-fil-1: 87 82 121; --fuzz-fil-2: 40 105 131; --fuzz-fil-3: 144 122 169;
    --fuzz-gain: 0.6;
    --sb-thumb: #f6c177; --sb-thumb-hover: #ea9d34;
  }
}

:root {
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-body: "Archivo", Helvetica, Arial, system-ui, sans-serif;
  --f-wm: "Noto Sans Display", "Archivo", Helvetica, sans-serif;

  /* ── Type scale ────────────────────────────────────────────────────────
     A minor third (1.2) off a 16px root, in rem so the page still honours a
     reader who has raised their browser font size — a CV gets read by people
     who have. The display sizes stay on their own clamps above; this scale
     governs prose and the mono data layer, which is where the old ad-hoc
     literals (10 / 10.5 / 12 / 13 / 14 / 15 / 16 / 17) had drifted apart. */
  --t-micro: 0.625rem;   /* 10px — mono eyebrows, ledger labels */
  --t-tiny:  0.6875rem;  /* 11px — buttons, status */
  --t-fine:  0.75rem;    /* 12px — toc, chips, meta */
  --t-small: 0.8125rem;  /* 13px — captions, dense mono */
  --t-sub:   0.9375rem;  /* 15px — secondary prose */
  --t-body:  1rem;       /* 16px — body copy */
  --t-lede:  1.1875rem;  /* 19px — the opening paragraph of a section */
  --t-shead: 1.0625rem;  /* 17px — card and reference sub-headings */

  /* ── Spacing ───────────────────────────────────────────────────────────
     One ramp, so the vertical rhythm is a system rather than a pile of
     one-off pixel values. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 30px; --s-7: 40px; --s-8: 56px;

  --maxw: 1240px;
  --side-w: clamp(300px, 26vw, 360px);
  --pad: clamp(20px, 4vw, 56px);
  /* the section-header index column; sec__body offsets by it to align
     under the title column on wide screens */
  --headcol: 132px;
  --headgap: 32px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

html { scroll-behavior: smooth; background: var(--pg-base); }
body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--tx-body);
  background: var(--pg-base);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
::selection { background: #f5d3cd; color: #575279; }
[data-theme="night"] ::selection { background: #31748f; color: #faf4ed; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; top: -60px; left: 12px; z-index: 90;
  padding: 10px 16px; background: var(--acc); color: var(--pg-base);
  font-family: var(--f-mono); font-size: var(--t-fine); letter-spacing: .12em;
  text-transform: uppercase;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.plate :focus-visible, .band-pine :focus-visible { outline-color: var(--flip-acc); }

.lnk { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--acc) 45%, transparent); transition: color .18s ease, text-decoration-color .18s ease; }
.lnk:hover { color: var(--acc-alert); text-decoration-color: currentColor; }
.lnk--plate { color: var(--flip-acc); text-decoration-color: color-mix(in srgb, var(--flip-acc) 45%, transparent); }
.lnk--plate:hover { color: var(--flip-alert); }
.band-pine .lnk { color: var(--band-gold); text-decoration-color: color-mix(in srgb, var(--band-gold) 45%, transparent); }
.band-pine .lnk:hover { color: var(--band-tx); }
.dim { color: var(--tx-subtle); }
strong { font-weight: 600; color: var(--tx-body); }

/* page scrollbar — the mothership's gold rail */
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--pg-base); }
html::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 3px solid var(--pg-base); }
html::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--sb-thumb) var(--pg-base); }
}

/* the section hue, set per header / per nav item */
.hue-pine { --hue: var(--pine); }
.hue-rose { --hue: var(--rose); }
.hue-foam { --hue: var(--foam); }
.hue-iris { --hue: var(--iris); }
.hue-gold { --hue: var(--gold); }
.hue-love { --hue: var(--love); }

/* ══ READING PROGRESS ═══════════════════════════════════════════════════ */
.prog {
  position: fixed; top: 0; left: 0; z-index: 100;
  height: 2px; width: 0; background: var(--acc);
}

.wm__o { color: var(--love); }

/* ══ SHELL — sidebar + main ═════════════════════════════════════════════ */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }

.side { min-width: 0; border-right: 1px solid var(--edge); background: var(--pg-base); }
.side__inner {
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
  padding: 34px var(--pad) 26px clamp(20px, 3vw, 46px);
  scrollbar-width: thin;
}
.side__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.side__kicker { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.side__bio { font-size: var(--t-sub); line-height: 1.55; color: var(--tx-subtle); }

/* TOC — hue-numbered index, one hue per section like the mothership nav */
.toc__cap { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .2em; color: var(--tx-subtle); margin-bottom: 6px; }
.toc { min-width: 0; }
.toc__list { display: flex; flex-direction: column; min-width: 0; }
.toc__link {
  position: relative;
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 9px;
  padding: 6px 0; font-family: var(--f-mono); font-size: var(--t-fine);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tx-subtle);
  transition: color .18s ease;
}
.toc__n { font-size: var(--t-micro); color: var(--hue); }
.toc__lead { height: 1px; align-self: center; background: repeating-linear-gradient(90deg, var(--edge-strong) 0 1px, transparent 1px 5px); opacity: .8; }
.toc__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--hue); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.toc__link:hover { color: var(--tx-body); }
.toc__link:hover::after, .toc__link[aria-current="true"]::after { transform: scaleX(1); }
.toc__link[aria-current="true"] { color: var(--hue); }

.side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.links { display: flex; flex-wrap: wrap; gap: 7px; }
.lbtn {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border: 1px solid var(--edge-strong); color: var(--tx-body);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.lbtn svg { width: 16px; height: 16px; }
.lbtn:hover { background: var(--flip-bg); color: var(--flip-tx); border-color: var(--flip-bg); transform: translateY(-2px); }

.status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-alert); }
.status__loc { color: var(--tx-subtle); letter-spacing: .1em; }

.toggle {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--edge-strong); color: var(--tx-subtle);
  transition: background-color .2s, color .2s, border-color .2s;
}
.toggle:hover { background: var(--flip-bg); color: var(--flip-tx); border-color: var(--flip-bg); }
.toggle__i { width: 15px; height: 15px; }
.toggle__i--moon, [data-theme="night"] .toggle__i--sun { display: none; }
[data-theme="night"] .toggle__i--moon { display: block; }
html:not(.js) .toggle { display: none; } /* dead control without JS */

/* ══ PLATES ═════════════════════════════════════════════════════════════
   The signature surface: always the inverse of the page. The fuzz canvas
   fills the plate; content stacks above it. */
.plate { position: relative; background: var(--flip-bg); color: var(--flip-tx); overflow: hidden; }
.plate .fuzz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.plate > :not(.fuzz) { position: relative; z-index: 1; }

/* ══ HERO ═══════════════════════════════════════════════════════════════ */
.hero__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(30px, 4.5vw, 56px) var(--pad) 0;
}
.hero__eye {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; padding-bottom: clamp(26px, 4vw, 48px);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--flip-subtle);
}
.hero__status { display: inline-flex; align-items: center; gap: 8px; color: var(--flip-acc); }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flip-alert); }

.hero__wm {
  font-family: var(--f-wm); font-weight: 800; font-stretch: 62.5%;
  font-size: 1.0625rem; letter-spacing: .05em; text-transform: none;
  color: var(--flip-tx);
}
.hero__name {
  font-weight: 900; font-stretch: 66%;
  font-size: clamp(58px, 10.5vw, 158px);
  line-height: .84; letter-spacing: -.03em; text-transform: uppercase;
  /* The tight display tracking closes the gap in "LEIF R." until it reads as
     one word. The space is widened back to compensate — a name has to parse. */
  word-spacing: .12em;
  color: var(--flip-tx);
  /* the comp's vertical stretch — mild, or it reads as strain */
  transform: scaleY(1.12); transform-origin: left bottom;
}
.hero__ln { display: block; }
.hero__sub {
  margin-top: clamp(18px, 2.6vw, 30px); max-width: 56ch;
  font-size: var(--t-sub); line-height: 1.6; color: var(--flip-subtle);
}
.hero__loc { font-family: var(--f-mono); font-size: var(--t-small); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px solid var(--flip-tx); background: var(--flip-tx); color: var(--flip-bg);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--flip-tx); border-color: var(--flip-hair); }
.btn--ghost:hover { border-color: var(--flip-tx); }

.frame { position: relative; width: 124px; padding: 5px; border: 1px solid var(--edge-strong); }
.frame__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; filter: saturate(.92) contrast(1.02); }
.frame__tick { position: absolute; width: 9px; height: 9px; border: 0 solid var(--acc); }
.frame__tick--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.frame__tick--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.frame__tick--bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.frame__tick--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.ledger {
  margin-top: clamp(30px, 4.5vw, 52px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--flip-hair);
}
.ledger__cell { padding: 16px 18px 20px 0; }
.ledger__cell + .ledger__cell { padding-left: 18px; border-left: 1px solid var(--flip-hair); }
.ledger dt { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--flip-subtle); }
.ledger dd {
  margin-top: 4px; font-weight: 800; font-stretch: 78%; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1;
  color: var(--flip-tx); font-variant-numeric: tabular-nums;
}

/* ══ SECTIONS — inside the main column ══════════════════════════════════ */
.sec {
  max-width: 1080px;
  padding: clamp(48px, 6.5vw, 88px) var(--pad) clamp(30px, 4vw, 52px);
}
.sec--last { padding-bottom: clamp(70px, 9vw, 130px); }

.sec__head {
  display: grid; align-items: start;
  grid-template-columns: var(--headcol) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--headgap);
  padding-top: 22px; border-top: 1px solid var(--edge-strong);
}
.sec__eye {
  padding-top: 10px; white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--hue);
}
.sec__title {
  font-weight: 800; font-stretch: 88%;
  font-size: clamp(38px, 4.9vw, 72px);
  line-height: .86; letter-spacing: -.04em; text-transform: uppercase;
  color: var(--hue);
}
.sec__intro { padding-top: 10px; max-width: 38ch; font-size: var(--t-sub); line-height: 1.55; color: var(--tx-subtle); text-wrap: pretty; }
/* Long single-word titles (CERTIFICATIONS) cannot wrap and would overflow
   their grid track into the intro column — they take a smaller ramp. */
.sec__title--long { font-size: clamp(28px, 3.3vw, 50px); }

.sec__body { max-width: 68ch; margin-top: clamp(26px, 3.5vw, 40px); }
@media (min-width: 1000px) {
  .sec__body { margin-left: calc(var(--headcol) + var(--headgap)); }
}

.lede {
  font-size: var(--t-lede); line-height: 1.5; font-stretch: 96%;
  color: var(--tx-body); text-wrap: pretty;
}
.sec__body p + p { margin-top: 0.85em; }
.sec__body > p { color: var(--tx-body); text-wrap: pretty; }
.sec__body > p.lede { color: var(--tx-body); }

/* Terminal — rides the plate palette in both modes */
.term { margin: 0 0 26px; border: 1px solid var(--edge-strong); }
.term__tab {
  display: flex; align-items: center; gap: 8px; padding: 7px 13px;
  background: var(--term-tab-bg); color: var(--term-tab-tx);
  font-family: var(--f-mono); font-size: var(--t-tiny); letter-spacing: .06em;
}
.term__pr { color: var(--term-prompt); }
.term__body {
  border-left: 3px solid var(--term-bar);
  background: var(--term-bg); color: var(--term-tx);
  padding: 15px 17px; overflow-x: auto;
  scrollbar-color: var(--term-subtle) var(--term-bg);
}
.term__out { font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.72; white-space: pre; }
.term__out .k { color: var(--term-key); }
.term__out .s { color: var(--term-str); }
.term__out .c { color: var(--term-com); }

/* key :: value chips */
.kvrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kv {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 11px;
  border: 1px solid var(--edge-strong); background: var(--pg-surface);
  font-family: var(--f-mono); font-size: var(--t-tiny);
}
.kv__k { color: var(--acc); }
.kv__s { color: var(--tx-muted); }
.kv__v { color: var(--tx-body); }
a.kv__v:hover { color: var(--acc-alert); }

/* skill-group rule — a mono label on a single hairline */
.rule { display: flex; align-items: center; gap: 14px; margin: 26px 0 13px; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--edge-strong); }
.rule__t { font-family: var(--f-mono); font-size: var(--t-tiny); letter-spacing: .2em; color: var(--hue, var(--tx-subtle)); }
.sec .rule__t { color: var(--tx-subtle); }

/* tags */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 11px; border: 1px solid var(--edge-strong);
  font-family: var(--f-mono); font-size: var(--t-tiny); letter-spacing: .04em; color: var(--tx-body);
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.chips--sm .chip { font-size: var(--t-micro); padding: 4px 9px; }
@media (hover: hover) {
  .chip:hover { background: var(--flip-bg); color: var(--flip-tx); border-color: var(--flip-bg); transform: translateY(-2px); }
}

/* ══ RECORD ROWS — experience as an index ═══════════════════════════════ */
.recs { margin-top: clamp(26px, 3.5vw, 40px); border-top: 1px solid var(--edge-strong); }
.rec {
  position: relative; display: grid; grid-template-columns: var(--headcol) 1fr;
  gap: var(--headgap); padding: 26px 0 28px;
  border-bottom: 1px solid var(--edge);
}
.rec::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--foam); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) { .rec:hover::after { transform: scaleX(1); } }
.rec__n {
  font-weight: 800; font-stretch: 78%; font-size: 20px; line-height: 1;
  padding-top: 3px; color: var(--foam); font-variant-numeric: tabular-nums;
}
.rec__org { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-subtle); }
.rec__h {
  margin-top: 6px; font-weight: 800; font-stretch: 92%;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.15;
  letter-spacing: -.015em; text-transform: uppercase; color: var(--tx-body);
}
.rec__meta { margin-top: 5px; line-height: 1.7; font-family: var(--f-mono); font-size: var(--t-tiny); color: var(--tx-subtle); }
.rec__sep { margin: 0 7px; }
.bul { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; max-width: 76ch; }
.bul li { position: relative; padding-left: 17px; font-size: var(--t-sub); color: var(--tx-subtle); text-wrap: pretty; }
.bul li::before { content: "▪"; position: absolute; left: 0; color: var(--foam); font-size: var(--t-tiny); }

/* ══ EDUCATION CARD ═════════════════════════════════════════════════════ */
.card { position: relative; padding: 22px 24px; background: var(--pg-surface); border: 1px solid var(--edge-strong); border-left: 3px solid var(--iris); }
.card__wm { position: absolute; top: 12px; right: 16px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em; color: var(--tx-subtle); }
.card__h { font-weight: 800; font-stretch: 92%; font-size: 22px; letter-spacing: -.015em; text-transform: uppercase; color: var(--tx-body); max-width: 28ch; }
.card__sub { margin-top: 3px; font-family: var(--f-mono); font-size: var(--t-tiny); letter-spacing: .16em; text-transform: uppercase; color: var(--iris); }
.card__hr { margin: 15px 0; border: 0; border-top: 1px solid var(--edge); }
.kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 13px 20px; }
.kvgrid dt { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-subtle); }
.kvgrid dd { margin-top: 2px; font-family: var(--f-mono); font-size: var(--t-fine); color: var(--tx-body); }
.card__lbl { margin-top: 18px; margin-bottom: 9px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--iris); }
.card__note { margin-top: 14px; font-size: var(--t-sub); color: var(--tx-subtle); }

/* Callouts */
.call { margin: 16px 0; padding: 14px 17px; background: var(--pg-surface); border: 1px solid var(--edge); border-left: 3px solid var(--acc); }
.call__l { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.call__h { margin-top: 4px; font-weight: 800; font-stretch: 92%; font-size: var(--t-shead); text-transform: uppercase; color: var(--tx-body); }
.call p { margin-top: 6px; font-size: var(--t-sub); color: var(--tx-subtle); }
.call--foam { border-left-color: var(--foam); } .call--foam .call__l { color: var(--foam); }
.call--iris { border-left-color: var(--iris); } .call--iris .call__l { color: var(--iris); }
.call--gold { border-left-color: var(--gold); } .call--gold .call__l { color: var(--gold); }

/* ══ CREDENTIAL LEDGER — a contained pine panel, not full-bleed ═════════ */
.band-pine {
  background: var(--band-bg); color: var(--band-tx);
  margin: clamp(48px, 6.5vw, 88px) var(--pad) 0;
  max-width: calc(1080px - 2 * var(--pad));
}
.band-pine__in.sec {
  max-width: none;
  padding: clamp(26px, 3.4vw, 42px) clamp(20px, 3vw, 38px) clamp(28px, 3.6vw, 46px);
}
.sec__head--band { border-top-color: var(--band-hair); }
.sec__head--band .sec__eye { color: var(--band-gold); }
.sec__head--band .sec__title { color: var(--band-tx); }
.sec__head--band .sec__intro { color: var(--band-sub); }

.certs { margin-top: clamp(26px, 3.5vw, 40px); border-top: 1px solid var(--band-hair); }
.cert { padding: 18px 0 20px; border-bottom: 1px solid var(--band-hair); transition: padding-left .3s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .cert:hover { padding-left: 16px; } }
.cert__row {
  display: grid; align-items: baseline; gap: 8px 22px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto auto;
}
.cert__h { font-weight: 800; font-stretch: 92%; font-size: var(--t-shead); text-transform: uppercase; letter-spacing: -.01em; color: var(--band-tx); }
.cert__org { font-family: var(--f-mono); font-size: var(--t-tiny); color: var(--band-sub); }
.cert__cred { font-family: var(--f-mono); font-size: var(--t-tiny); letter-spacing: .04em; color: var(--band-gold); }
.badge {
  padding: 3px 9px; font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--band-tx) 55%, transparent); color: var(--band-tx);
}
.badge--dim { border-color: var(--band-hair); color: var(--band-sub); }
.cert__d { font-family: var(--f-mono); font-size: var(--t-tiny); color: var(--band-sub); }
.cert__sub { margin-top: 9px; font-size: var(--t-small); max-width: 80ch; color: var(--band-sub); }

/* ══ SIGNAL STRIPS ══════════════════════════════════════════════════════
   The dividers: a plate carrying the fuzz field, a lone accent dot and a
   pair of wide-tracked mono labels — the reference banner, miniaturised. */
.strip {
  min-height: clamp(70px, 8.5vw, 104px); display: flex; align-items: center;
  margin: clamp(18px, 2.6vw, 34px) var(--pad) 0;
  max-width: calc(1080px - 2 * var(--pad));
}
.strip__dot { position: absolute; left: clamp(16px, 4vw, 54px); top: 42%; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--flip-alert)); z-index: 1; }
.strip__kv {
  position: relative; z-index: 1;
  display: flex; gap: clamp(48px, 14vw, 190px);
  margin: 0 auto; padding: 0 var(--pad);
  font-family: var(--f-mono); text-transform: uppercase;
}
.strip__kv dt { font-size: var(--t-fine); letter-spacing: .38em; color: var(--flip-subtle); }
.strip__kv dd { margin-top: 9px; font-size: var(--t-small); letter-spacing: .38em; color: var(--flip-tx); }

/* ══ REFERENCES ═════════════════════════════════════════════════════════ */
.refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
.ref { padding: 16px 18px; border: 1px solid var(--edge-strong); background: var(--pg-surface); }
.ref__h { font-weight: 800; font-stretch: 92%; font-size: var(--t-body); text-transform: uppercase; color: var(--tx-body); }
.ref__r { margin-top: 5px; font-size: var(--t-sub); color: var(--tx-subtle); }
.ref__c { margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-fine); line-height: 1.8; }

/* ══ FOOTER PLATE ═══════════════════════════════════════════════════════ */
.foot__in {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(52px, 7vw, 90px) var(--pad) clamp(30px, 4vw, 44px);
}
.foot__wm {
  font-family: var(--f-wm); font-weight: 900; font-stretch: 62.5%;
  font-size: clamp(52px, 8.5vw, 108px); line-height: 1; letter-spacing: .03em;
  color: var(--flip-tx);
}
.foot__line { margin-top: 20px; font-size: var(--t-sub); color: var(--flip-subtle); }
.foot__note { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--flip-hair); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .3em; color: var(--flip-subtle); }

/* ══ CURSOR — the mothership's dot, carried over ════════════════════════
   Love, not pine: pine is the primary accent and vanished against its own
   fills. A solid love disc that opens into a 1px ring over anything
   interactive. It re-tints over the plates via --flip-alert, which is
   already "love as read on the inverse surface" in both modes. No glow —
   the design has no shadows anywhere. Injected by JS (html.has-cursor),
   so browsers without it keep the native cursor untouched. */
@media (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none; }
  .dmn-cursor {
    position: fixed; top: 0; left: 0; z-index: 99999;
    width: 9px; height: 9px;
    border: 1px solid transparent; border-radius: 50%;
    background: var(--love);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 180ms ease, height 180ms ease,
      background-color 180ms ease, border-color 180ms ease, opacity 200ms ease;
  }
  .dmn-cursor.on-dark { background: var(--flip-alert); }
  /* Over an interactive target the disc opens into a ring, so the thing
     underneath stays readable while it is being pointed at. */
  .dmn-cursor.hot { width: 34px; height: 34px; background: transparent; border-color: var(--love); }
  .dmn-cursor.hot.on-dark { border-color: var(--flip-alert); }
}
/* Coarse pointers and print never see the dot; the native cursor stays. */
@media (pointer: coarse), print {
  .dmn-cursor { display: none; }
}

/* ══ MOTION ═════════════════════════════════════════════════════════════
   Every hidden state is gated on .js so the page is complete without it. */
@media (prefers-reduced-motion: no-preference) {
  /* Hidden states must not outrank `html.js .is-in` below — keep every
     selector here at exactly one class after html.js. */
  html.js .sec__head, html.js .sec__body, html.js .rec,
  html.js .cert, html.js .strip__kv {
    opacity: 0; transform: translateY(16px);
  }
  html.js .is-in {
    opacity: 1; transform: none;
    transition: opacity .62s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .62s cubic-bezier(.2,.7,.2,1) var(--d, 0ms);
  }
  .hero__dot, .status__dot { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc-alert) 55%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Mode swap sweeps out of the toggle where the browser supports it; the body
   fade is the fallback. Inside a sweep the fade would smear the circle. */
html:active-view-transition body { transition: none; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: sweep .42s cubic-bezier(.4,0,.2,1); mix-blend-mode: normal; }
@keyframes sweep { from { clip-path: circle(0% at var(--vt-x, 90%) var(--vt-y, 4%)); } to { clip-path: circle(150% at var(--vt-x, 90%) var(--vt-y, 4%)); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .sec__head { grid-template-columns: var(--headcol) minmax(0, 1fr); }
  .sec__intro { grid-column: 2; padding-top: 0; margin-top: 10px; max-width: 52ch; }
}
@media (max-width: 900px) {
  /* minmax(0,…) so the no-wrap TOC strip cannot widen the column past the viewport. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { border-right: 0; border-bottom: 1px solid var(--edge); }
  .side__inner { position: static; max-height: none; overflow: visible; gap: 16px; padding-bottom: 20px; }
  .side__head { align-items: center; }
  .frame { width: 92px; }
  .toc__list { flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .toc__list::-webkit-scrollbar { display: none; }
  .toc__link { grid-template-columns: auto auto; padding: 6px 10px; border: 1px solid var(--edge); white-space: nowrap; }
  .toc__link::after { display: none; }
  .toc__lead { display: none; }
  .toc__link[aria-current="true"] { border-color: var(--hue); }
  .sec__head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sec__eye, .sec__intro { padding-top: 0; }
  .sec__intro { grid-column: auto; margin-top: 6px; }
  .rec { grid-template-columns: 44px 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .hero__name { font-size: clamp(52px, 15.5vw, 96px); }
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ledger__cell:nth-child(n+3) { border-top: 1px solid var(--flip-hair); }
  .cert__row { grid-template-columns: minmax(0, 1fr) auto; }
  .cert__org, .cert__cred { grid-column: 1 / -1; }
  .strip__kv dt, .strip__kv dd { letter-spacing: .24em; }
}
@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .term__out { font-size: var(--t-fine); }
  .wm { font-size: 18px; }
}

/* ══ PRINT ══════════════════════════════════════════════════════════════ */
/* ══ PRINT ══════════════════════════════════════════════════════════════
   A CV is still read on paper and in an ATS, so print is a first-class
   target rather than a courtesy. The page drops to black on white, every
   plate and decorative surface flattens, and the rules below are mostly
   about where the paper is allowed to break.
   ─────────────────────────────────────────────────────────────────────── */
@page {
  size: A4;
  margin: 14mm 15mm 16mm;
}
/* The hero carries the name, so the first page opens tighter than the rest. */
@page :first {
  margin-top: 10mm;
}

@media print {
  :root {
    --pg-base: #fff; --pg-surface: #fff; --pg-overlay: #fff;
    --tx-body: #15131d; --tx-subtle: #3c3850; --tx-muted: #5f5b72;
    --edge: #c9c9d1; --edge-strong: #8d8a99;
    --acc: #1d4e63; --acc-alert: #8f4c60;
    --pine: #1d4e63; --rose: #a4534f; --foam: #2c6a74;
    --iris: #6b568a; --gold: #8a6414; --love: #8f4c60;
    --flip-bg: #fff; --flip-tx: #15131d; --flip-subtle: #3c3850;
    --flip-acc: #1d4e63; --flip-alert: #8f4c60; --flip-hair: #c9c9d1;
    --term-bg: #fff; --term-tab-bg: #f4f2ef; --term-tab-tx: #3c3850;
    --term-tx: #15131d; --term-key: #5b3f80; --term-str: #7a5a10;
    --term-com: #5f5b72; --term-bar: #1d4e63; --term-prompt: #8f4c60;
    --band-bg: #fff; --band-tx: #15131d;
    --band-sub: #3c3850; --band-hair: #b4b1bd; --band-gold: #7a5a10;
  }

  html { font-size: 10.5pt; }
  body {
    background: #fff; color: var(--tx-body);
    line-height: 1.42;
    -webkit-print-color-adjust: economy; print-color-adjust: economy;
  }

  /* Screen-only chrome: controls that cannot be used, surfaces that only
     exist to carry the fuzz field, and the index — paper has page numbers
     and a reader who can see the whole thing at once. */
  .toggle, .prog, .strip, .skip, .fuzz, .hero__dot, .toc, .links,
  .status__dot, .hero__cta, .foot__wm, .card__wm { display: none !important; }

  .plate, .band-pine { background: #fff; color: var(--tx-body); }
  .shell { display: block; }
  /* The rail collapses to the portrait alone and floats into the masthead:
     its kicker, bio and status all restate the hero, and on paper that
     redundancy costs a third of the first page. */
  .side {
    float: right; width: 92pt; border: 0;
    margin: 0 0 6pt 12pt;
  }
  .side__inner {
    position: static; max-height: none; overflow: visible;
    display: block; padding: 0;
  }
  .side__kicker, .side__bio, .status, .side__foot { display: none; }

  /* ── Masthead ────────────────────────────────────────────────────────
     Name, then the contact line, then the portrait out to the side. The
     printed page has to answer "who is this and how do I reach them"
     above the fold, which the screen layout solves with a sticky rail. */
  .hero { border-bottom: 1.5pt solid var(--tx-body); }
  .hero__in, .foot__in, .sec, .band-pine__in.sec { max-width: none; padding: 0; }
  .hero__in { padding-bottom: 8pt; }
  .hero__eye { padding-bottom: 6pt; font-size: 7.5pt; }
  .hero__wm { display: none; }
  .hero__name {
    transform: none; font-size: 30pt; line-height: .92;
    letter-spacing: -.02em; font-stretch: 78%;
  }
  .hero__ln { display: inline; }
  .hero__sub { margin-top: 5pt; max-width: none; font-size: 9.5pt; line-height: 1.4; }
  .hero__loc { font-size: 9pt; }

  .ledger { margin-top: 8pt; border-top: .5pt solid var(--edge-strong); }
  .ledger__cell { padding: 5pt 10pt 5pt 0; }
  .ledger__cell + .ledger__cell { padding-left: 10pt; border-left: .5pt solid var(--edge); }
  .ledger dd { font-size: 13pt; }

  .frame { width: 100%; padding: 3pt; }
  .side__head { display: block; }
  /* main must not sit beside the float, or its sections would indent. */
  main { clear: none; }
  .sec__head { clear: right; }

  /* ── Breaking ────────────────────────────────────────────────────────
     Nothing is allowed to leave a heading stranded at the foot of a page,
     and no record may be split across the fold. */
  .sec { padding: 10pt 0 2pt; break-inside: auto; }
  .sec--last { padding-bottom: 0; }
  .sec__head {
    grid-template-columns: minmax(0, 1fr); gap: 2pt;
    padding-top: 7pt; border-top: .5pt solid var(--edge-strong);
    break-after: avoid; break-inside: avoid;
  }
  .sec__eye { padding-top: 0; font-size: 7.5pt; }
  .sec__title { font-size: 15pt; line-height: 1.05; }
  .sec__title--long { font-size: 15pt; }
  .sec__intro { padding-top: 2pt; max-width: none; font-size: 9pt; }
  .sec__body { margin-left: 0; margin-top: 7pt; max-width: none; }

  h2, h3, .rec__h, .card__h, .cert__h, .ref__h, .call__h { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .card, .call, .ref, .cert, .rec, .term, .kvrow { break-inside: avoid; }
  .recs, .refs, .cards { break-inside: auto; }

  .rec { grid-template-columns: 26pt 1fr; }
  .bul li { font-size: 9.5pt; }

  .band-pine {
    margin: 8pt 0 0; max-width: none;
    border: .5pt solid var(--edge-strong); padding: 0 8pt;
  }
  .term__body { border: .5pt solid var(--edge-strong); border-left: 2pt solid var(--acc); }
  .term__out { font-size: 8.5pt; line-height: 1.5; white-space: pre-wrap; }

  .foot { border-top: 1pt solid var(--tx-body); }
  .foot__in { padding-top: 7pt; }
  .foot__note { border-top-color: var(--edge); }

  /* Reveal states are JS-driven; on paper they must all be resolved. */
  html.js .sec__head, html.js .sec__body, html.js .recs .rec,
  html.js .certs .cert, html.js .strip__kv {
    opacity: 1 !important; transform: none !important;
  }

  /* A printed link is dead unless the address is on the page. Links whose
     own text is already the address are skipped, as are mailto: and the
     in-page index. */
  main a[href^="http"]:not(.kv__v):not(.cert__cred)::after {
    content: " (" attr(href) ")";
    font-size: 7.5pt; color: var(--tx-muted); word-break: break-all;
  }
}