/* portfolio-refactor — Phase 1 stylesheet.
   Instrument-grade, editorial: light paper, dark ink, one signal colour per
   status (always paired with text, never colour alone). */
:root {
  --paper: #fafaf7;
  --ink: #16161a;
  --muted: #5b5b60;
  --line: #e2e2da;
  --accent: #0b5fff;
  --fail: #b3261e;
  --fail-bg: #fdecea;
  --pass: #137333;
  --pass-bg: #e6f4ea;
  --lab: #7c4a03;
  --lab-bg: #fef3d7;
  /* Semantic tokens (Phase 2, step 8). The "current" theme maps them to
     the values above, so there is no visual change unless data-theme
     is flipped in src/options.mjs. */
  --surface: var(--paper);
  --surface-card: #fff;
  --surface-strong: #0d1b2a;
  --surface-strong-2: #14273d;
  --on-strong: #eef3fa;
  --on-strong-muted: #a9b8cc;
  --accent-on-strong: #9cc7ff;
  --accent-strong: #1f5fbf;
  --redacted-bg: #2e2a4a;
  --redacted-fg: #d8ccff;
  --redacted-border: #8b7fd4;
  --max: 1080px;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0.2em 0; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 2.5rem 0 0.6rem; }
h3 { font-size: 1.15rem; margin: 1.2rem 0 0.4rem; }
p { margin: 0.5em 0; }
a { color: var(--accent); }
a:visited { color: #5b21b6; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; }

/* header */
.site-header { position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); z-index: 5; }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.brand { font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 6px; }
.site-nav a:hover { background: var(--line); }
.lang-switch { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; color: var(--ink); font-weight: 600; white-space: nowrap; }

/* hero ledger */
.hero { padding: 2.5rem 0 1rem; }
.hero .kicker { color: var(--muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 1.5rem 0 0.5rem; }
.ledger figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fff; }
.ledger .num { display: block; font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ledger figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
.lab-note { background: var(--lab-bg); border: 1px solid #f0d48a; border-radius: var(--radius); padding: 10px 14px; font-size: 0.95rem; }
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.bar .f { background: var(--fail); }
.bar .p { background: var(--pass); }

/* badges */
.badge { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; border-radius: 4px; padding: 2px 7px; vertical-align: middle; }
.badge.lab { background: var(--lab-bg); color: var(--lab); border: 1px solid #e8c87a; }
.badge.fail { background: var(--fail-bg); color: var(--fail); }
.badge.pass { background: var(--pass-bg); color: var(--pass); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 1rem 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: #fff; }
.card h3 { margin-top: 0; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 10px 0; }
.mini-table td, .mini-table th { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; }
.mini-table td:last-child, .mini-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* sections */
.section-kicker { color: var(--muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding: 14px 0; }
.steps li::before { content: "0" counter(step); display: block; font-weight: 800; font-size: 1.4rem; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; }
@media (max-width: 640px) { .vs { grid-template-columns: 1fr; } }

/* tables */
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
table.data th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
table.data tr:hover td { background: #f4f4ee; }

/* case page */
pre.http { background: #111; color: #e8e8e8; padding: 16px; border-radius: var(--radius); overflow-x: auto; font-size: 0.85rem; line-height: 1.5; }
/* Redaction marker: a violet dashed chip, visually distinct from LAB amber,
   FAIL red and PASS green (the old amber text was too close to LAB). */
pre.http .redacted { background: var(--redacted-bg); color: var(--redacted-fg); border: 1px dashed var(--redacted-border); border-radius: 3px; padding: 0 3px; }
.evidence { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 16px 0; background: #fff; }
.evidence img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shots img { width: 100%; }
details.original { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; }
details.original summary { cursor: pointer; font-weight: 600; }
.unavailable { background: #f4f4ee; border-radius: var(--radius); padding: 10px 14px; color: var(--muted); }

/* chooser */
.chooser { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 8px; }
.chooser a { display: inline-block; border: 1px solid var(--ink); border-radius: var(--radius); padding: 14px 28px; margin: 6px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.1rem; }

/* footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2rem 0; color: var(--muted); font-size: 0.92rem; }

@media (max-width: 420px) {
  body { font-size: 15px; }
  .site-header .wrap { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Phase 2 components (matrix, dialog, stepper, footnote) ---- */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* results matrix */
.filters { margin: 10px 0; }
.filters p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.filters p > span:first-child { font-weight: 700; }
.filters button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.filters [aria-pressed="true"] { background: var(--ink); color: #fff; }
.showing { color: var(--muted); font-size: 0.92rem; }
.matrix-project { margin: 1.2rem 0; }
.matrix-project > h3 { margin-bottom: 0.4rem; }
.matrix-category { margin: 0.8rem 0; }
.matrix-category > h4 { margin: 0 0 6px; font-size: 0.95rem; color: var(--muted); }
.matrix-cells { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.matrix-cells .cell { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; color: var(--ink); text-decoration: none; font-size: 0.92rem; line-height: 1.4; }
.matrix-cells .cell:hover { border-color: var(--accent); }
#evidence details > summary { cursor: pointer; padding: 8px 0; }
#evidence details > summary h2 { display: inline; margin: 0; }

/* hero footnote */
.fn { font-size: 0.75rem; text-decoration: none; }
#ledger-notes { margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: #fff; color: var(--ink); }
#ledger-notes summary { cursor: pointer; font-weight: 700; }
#ledger-notes dl { margin: 10px 0 0; }
#ledger-notes dt { font-weight: 700; margin-top: 8px; }
#ledger-notes dd { margin: 2px 0 0; color: var(--muted); }

/* case viewer dialog */
dialog#case-viewer { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; width: min(880px, 92vw); max-width: 92vw; background: #fff; color: var(--ink); }
dialog#case-viewer::backdrop { background: rgba(13, 27, 42, 0.6); }
/* Right-side drawer at desktop widths, full screen below 768px. */
@media (min-width: 768px) {
  dialog#case-viewer { margin-right: 0; margin-top: 0; margin-bottom: 0; height: 100vh; max-height: none; width: min(720px, 94vw); border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0; overflow-y: auto; }
}
@media (max-width: 767.98px) {
  dialog#case-viewer { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
}
dialog#case-viewer h2 { margin-top: 0; }
.dialog-hint { color: var(--muted); font-size: 0.9rem; }
[role="tablist"] { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 12px 0; }
[role="tab"] { border: 1px solid transparent; border-bottom: none; background: none; padding: 8px 12px; cursor: pointer; font: inherit; color: var(--ink); border-radius: 6px 6px 0 0; }
[role="tab"][aria-selected="true"] { background: #fff; border-color: var(--line); border-bottom-color: #fff; font-weight: 700; }
[role="tabpanel"] { padding: 4px 0 12px; }
[role="tabpanel"] pre.http { margin: 8px 0; }
[role="tabpanel"] button[data-copy] { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 0.85rem; }
.thumb-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb-strip .thumb { border: 1px solid var(--line); border-radius: 6px; padding: 0; background: #fff; cursor: pointer; }
.thumb-strip .thumb img { display: block; width: 160px; height: auto; border-radius: 6px; }
.shot-view { margin-top: 12px; overflow: auto; }
.shot-view img { max-width: 100%; height: auto; display: block; transform-origin: top left; }
.shot-zoom { display: flex; gap: 8px; margin-top: 8px; }
.shot-zoom button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 12px; cursor: pointer; font: inherit; }

/* worked-example stepper */
.stepper ol { padding-left: 1.5em; }
/* The numbers stay visible without JS; once JS drives the stepper
   (one step at a time) they are hidden. */
.stepper[data-enhanced] ol { list-style: none; padding: 0; }
.stepper li { border-top: 1px solid var(--line); padding: 14px 0; }
.stepper .big-number { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1; color: var(--fail); font-variant-numeric: tabular-nums; margin: 0.2em 0; }
.stepper-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stepper-controls button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.stepper-position { color: var(--muted); font-size: 0.92rem; }

/* ---- Theme A: "Navy bands", Opus variant (PLAN-phase2 open decision 1,
   user-picked 6 Nov 2026) ----
   Dark navy header / full-width hero / footer; reading sections and the
   evidence archive stay cream (a 45-row table in pale text on navy is hard
   to read for the security lead who checks it). FAIL, PASS and LAB keep
   their light chip fills with dark text on both surfaces. The hero is
   full-bleed via the margin/padding compensation trick (no markup change);
   overflow-x: clip contains the 100vw-vs-scrollbar overflow. */
[data-theme="navy"] { --accent: var(--accent-strong); }
html[data-theme="navy"], html[data-theme="navy"] body { overflow-x: clip; }
[data-theme="navy"] .site-header { background: var(--surface-strong); border-bottom-color: var(--surface-strong); }
[data-theme="navy"] .site-header .brand,
[data-theme="navy"] .site-nav a,
[data-theme="navy"] .lang-switch { color: var(--on-strong); }
[data-theme="navy"] .site-nav a:hover { background: var(--surface-strong-2); }
[data-theme="navy"] .lang-switch { border-color: #33506e; }
[data-theme="navy"] .hero { background: var(--surface-strong); color: var(--on-strong); width: 100vw; margin-inline: calc(50% - 50vw); padding: 2rem calc(50vw - 50%) 1.5rem; }
[data-theme="navy"] .hero h1 { color: var(--on-strong); }
[data-theme="navy"] .hero .kicker { color: var(--on-strong-muted); }
[data-theme="navy"] .ledger figure { background: var(--surface-strong-2); border-color: #1e3a56; }
[data-theme="navy"] .ledger .num { color: var(--accent-on-strong); }
[data-theme="navy"] .ledger figcaption { color: var(--on-strong-muted); }
[data-theme="navy"] .hero a { color: var(--accent-on-strong); }
/* The LAB note keeps its light chip fill on navy, so its text must stay dark. */
[data-theme="navy"] .hero .lab-note { color: var(--ink); }
[data-theme="navy"] .site-footer { background: var(--surface-strong); color: var(--on-strong-muted); border-top-color: var(--surface-strong); }
[data-theme="navy"] .site-footer a { color: var(--accent-on-strong); }
[data-theme="navy"] .site-header :focus-visible,
[data-theme="navy"] .hero :focus-visible,
[data-theme="navy"] .site-footer :focus-visible { outline-color: var(--accent-on-strong); }
[data-theme="navy"] .site-header a:visited,
[data-theme="navy"] .hero a:visited,
[data-theme="navy"] .site-footer a:visited { color: #c4b5fd; }
[data-theme="navy"] .filters [aria-pressed="true"] { background: var(--accent-on-strong); color: var(--surface-strong); }

/* ---- Theme B: "Light + strong accent" (PLAN-phase2 open decision 1) ----
   Everything stays cream; one deep-blue accent (#1f4fd1) for the header top
   bar, active chips, section rules and ledger numbers; alternate sections
   get a pale tint; footer is dark slate. */
[data-theme="accent"] { --accent: #1f4fd1; }
[data-theme="accent"] .site-header { border-top: 4px solid var(--accent); }
[data-theme="accent"] .ledger .num { color: var(--accent); }
[data-theme="accent"] main > section:nth-of-type(even) { background: #eef3fb; border-radius: var(--radius); padding: 1.5rem; }
[data-theme="accent"] main > section > h2 { border-bottom: 3px solid var(--accent); padding-bottom: 0.4rem; }
[data-theme="accent"] .filters [aria-pressed="true"] { background: var(--accent); color: #fff; }
[data-theme="accent"] .site-footer { background: #1f2a44; color: #dbe2ef; border-top-color: #1f2a44; }
[data-theme="accent"] .site-footer a { color: var(--accent-on-strong); }


/* ---- Race Window ("modern") direction (Nov 2026) ---------------------------
   MODERN-DIRECTION.md section 2. Dark hero, light sheet, one ion glow.
   This replaces the three rejected fresh directions, deleted above.
   The Phase 1/2 base and the navy/accent theme blocks above are untouched. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Fallback face so the big number does not shift layout while the woff2
   loads (CLS < 0.05). Arial is narrower than Space Grotesk, so
   size-adjust scales it up to roughly match. */
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 105%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@keyframes md-breathe { from { opacity: .55; } to { opacity: .85; } }
@keyframes md-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* The dot travels the full width of its link/lane. cqw resolves against
   the nearest container (the link / lane sets container-type), so the
   travel tracks the element width without animating `left`. */
@keyframes md-flow-dot { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 8px)); } }
@keyframes md-contact-pulse { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 8px)); } }

/* Tokens (spec section 2). Set on <html data-direction="modern"> so they
   inherit everywhere, including the shared dialog / footer / case page. */
[data-direction="modern"] {
  --night: #0C0B10;
  --night-2: #15131C;
  --ink-night: #EDEAF5;
  --muted-night: #A29FB0;
  --lane: rgba(237, 234, 245, .10);
  --ion: #8B7BFF;
  --overdraft: #FF5B4F;
  --clear: #3DDC97;
  --paper: #F3F2F7;
  --card: #FFFFFF;
  --ink: #16141D;
  --muted: #5C5869;
  --rule: #DEDCE6;
  --ion-ink: #5B45E0;
  --fail: #C6281C;
  --fail-bg: #FCE9E7;
  --pass: #0B7A4B;
  --pass-bg: #E3F4EC;
  --lab: #5B45E0;
  --lab-bg: rgba(139, 123, 255, .14);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --font-display: "Space Grotesk", "Space Grotesk Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --max: 1200px;
  --shadow-rest: 0 1px 2px rgb(22 20 29 / .05), 0 6px 20px rgb(22 20 29 / .06);
  --shadow-hover: 0 2px 4px rgb(22 20 29 / .06), 0 14px 36px rgb(22 20 29 / .10);
}

/* No horizontal scroll at 320px (and every width): the hero number is
   oversized by design, so the page clips instead of scrolling. */
html[data-direction="modern"], html[data-direction="modern"] body { overflow-x: clip; }
[data-direction="modern"] body {
  background: var(--night);
  color: var(--ink-night);
  font: 17px/1.6 var(--font-body);
}
@media (min-width: 768px) {
  [data-direction="modern"] body { font-size: 18px; }
}
[data-direction="modern"] a { color: var(--ion-ink); }
[data-direction="modern"] a:visited { color: var(--ion-ink); }
[data-direction="modern"] :focus-visible { outline: 2px solid var(--ion-ink); outline-offset: 3px; }
[data-direction="modern"] .md-hero :focus-visible,
[data-direction="modern"] .md-nav :focus-visible,
[data-direction="modern"] .md-anatomy-diagram :focus-visible,
[data-direction="modern"] .md-tool-card :focus-visible,
[data-direction="modern"] .md-contact :focus-visible,
[data-direction="modern"] .md-case-head :focus-visible,
[data-direction="modern"] .md-report-cover :focus-visible { outline-color: var(--ion); }
[data-direction="modern"] .skip { background: var(--ion-ink); color: #fff; }
[data-direction="modern"] .lede { max-width: 68ch; }

/* Mono labels: 13px, 500, 0.06em. Uppercase only for short labels
   (gate names); never for sentences. */
[data-direction="modern"] .md-eyebrow,
[data-direction="modern"] .md-gate-label,
[data-direction="modern"] .md-num-caption,
[data-direction="modern"] .md-num-tag,
[data-direction="modern"] .md-statline,
[data-direction="modern"] .md-case-cat,
[data-direction="modern"] .md-mini-gate-label,
[data-direction="modern"] .md-mini-cwe,
[data-direction="modern"] .md-mini-window-label,
[data-direction="modern"] .md-mini-tag,
[data-direction="modern"] .md-tag,
[data-direction="modern"] .md-flow-transport,
[data-direction="modern"] .md-report-cover-lang,
[data-direction="modern"] .md-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
}
[data-direction="modern"] .md-gate-label,
[data-direction="modern"] .md-mini-gate-label { text-transform: uppercase; }

/* ---- floating nav pill ---- */
[data-direction="modern"] .md-nav {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: calc(100vw - 32px);
}
[data-direction="modern"] .md-nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 20px;
  border-radius: 999px;
  /* Solid fallback colour: readable with no JS and without
     backdrop-filter (spec: no-JS pill is solid night-2). The glass
     background below only applies with JS + backdrop-filter support. */
  background: rgba(21, 19, 28, .92);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  html.js[data-direction="modern"] .md-nav-pill {
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
[data-direction="modern"] .md-nav-pill a {
  color: var(--ink-night);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .95rem;
  white-space: nowrap;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
[data-direction="modern"] .md-nav-pill a:hover { background: rgba(255, 255, 255, .08); }
[data-direction="modern"] .md-nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin-right: 8px;
}
[data-direction="modern"] .md-nav-pill .lang-switch {
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  margin-left: 8px;
}
/* Light pill once the sheet covers the hero (hero.js toggles
   .md-nav--light on .md-nav or .md-nav-pill). 85% white, blur,
   --rule border, ink text, 200ms. */
[data-direction="modern"] .md-nav--light .md-nav-pill,
[data-direction="modern"] .md-nav-pill.md-nav--light {
  background: rgba(255, 255, 255, .85);
  border-color: var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
[data-direction="modern"] .md-nav--light .md-nav-pill a,
[data-direction="modern"] .md-nav-pill.md-nav--light a { color: var(--ink); }
[data-direction="modern"] .md-nav--light .md-nav-pill a:hover,
[data-direction="modern"] .md-nav-pill.md-nav--light a:hover { background: rgba(22, 20, 29, .06); }
[data-direction="modern"] .md-nav--light .md-nav-pill .lang-switch,
[data-direction="modern"] .md-nav-pill.md-nav--light .lang-switch { border-color: var(--rule); }
@media (max-width: 767px) {
  /* Keep the pill to one row on narrow screens: brand + language only.
     The section links are also reachable by scrolling; a wrapped pill
     grows tall enough to cover the eyebrow. */
  [data-direction="modern"] .md-nav-pill { flex-wrap: nowrap; }
  [data-direction="modern"] .md-nav-pill a:not(.md-nav-brand):not(.lang-switch) { display: none; }
  [data-direction="modern"] .md-nav-pill a { padding: 6px 8px; font-size: .88rem; }
}

/* ---- hero ---- */
[data-direction="modern"] .md-hero {
  --p: 0;
  position: sticky;
  top: 0;
  z-index: 0;
  height: calc(100vh - 24px);
  height: calc(100svh - 24px);
  background: var(--night);
  color: var(--ink-night);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Optional static grain: feTurbulence data-URI at 4% opacity. Static, so
   it never animates. */
[data-direction="modern"] .md-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
[data-direction="modern"] .md-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* One radial ion pool at 22% behind the number; gradient only, no
     filter: blur on anything animated. */
  background: radial-gradient(ellipse 55% 45% at 50% 62%, rgb(139 123 255 / .22) 0%, transparent 70%);
  transform: translate(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 10px));
}
/* Once the balance goes negative, a second overdraft pool at 18% joins
   it. hero.js adds .is-over; the final-state markup already carries
   .md-num--over, so :has covers the no-JS / reduced-motion render too. */
[data-direction="modern"] .md-hero.is-over .md-hero-glow,
[data-direction="modern"] .md-hero:has(.md-num--over) .md-hero-glow {
  background:
    radial-gradient(ellipse 45% 38% at 50% 62%, rgb(255 91 79 / .18) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 62%, rgb(139 123 255 / .22) 0%, transparent 70%);
}
[data-direction="modern"] .md-hero-top {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(88px, 14vh, 132px) 16px 0;
}
[data-direction="modern"] .md-eyebrow { color: var(--muted-night); margin: 0 0 16px; }
[data-direction="modern"] .md-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin: 0 auto 16px;
  color: var(--ink-night);
  /* Scroll: rise -40px x p, fade 1 - 1.4p (clamped at 0). */
  transform: translateY(calc(-40px * var(--p)));
  opacity: clamp(0, calc(1 - 1.4 * var(--p)), 1);
}
/* Word-mask spans for the load-in: each word rises from behind a mask. */
[data-direction="modern"] .md-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
[data-direction="modern"] .md-wi { display: inline-block; will-change: transform; }
[data-direction="modern"] .md-subline { color: var(--muted-night); max-width: 68ch; margin: 0 auto; }
[data-direction="modern"] .md-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0 0; }

/* Pill buttons. Primary: ion-ink fill, white text. Ghost: glass on dark,
   white card on the light sheet. */
[data-direction="modern"] .md-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
[data-direction="modern"] .md-btn:hover { transform: translateY(-2px); }
[data-direction="modern"] .md-btn-primary { background: var(--ion-ink); color: #fff; box-shadow: var(--shadow-rest); }
[data-direction="modern"] .md-btn-primary:visited { color: #fff; }
[data-direction="modern"] .md-btn-primary:hover { box-shadow: var(--shadow-hover); }
[data-direction="modern"] .md-btn-ghost {
  background: rgba(21, 19, 28, .92);
  color: var(--ink-night);
  border-color: rgba(255, 255, 255, .10);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  html.js[data-direction="modern"] .md-btn-ghost {
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
[data-direction="modern"] .md-btn-ghost:visited { color: var(--ink-night); }
[data-direction="modern"] .md-sheet .md-btn-ghost,
[data-direction="modern"] .md-case-body .md-btn-ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--rule);
}
[data-direction="modern"] .md-sheet .md-btn-ghost:visited { color: var(--ink); }
[data-direction="modern"] .md-btn-small { padding: 8px 16px; font-size: .9rem; }

/* ---- hero scene: lanes, gates, race window, big number ---- */
[data-direction="modern"] .md-scene { position: relative; flex: 1; min-height: 0; z-index: 1; }
[data-direction="modern"] .md-lanes {
  position: absolute;
  inset: 0;
  /* Lanes dim to 40% behind the number (radial mask on the lane layer). */
  -webkit-mask-image: radial-gradient(ellipse 34% 55% at 50% 60%, rgb(0 0 0 / .4) 0%, #000 70%);
  mask-image: radial-gradient(ellipse 34% 55% at 50% 60%, rgb(0 0 0 / .4) 0%, #000 70%);
  transform: translate(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px));
}
[data-direction="modern"] .md-lane {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lane);
  transform-origin: left;
  /* Scroll merge: each lane moves toward the centre line by
     (centre - laneY) x p, so at p = 1 all ten have merged into one. */
  top: calc(var(--lane-y) * (1 - var(--p)) + 50% * var(--p));
}
[data-direction="modern"] .md-window {
  position: absolute;
  top: 0;
  bottom: 0;
  /* The window is the space between the gates; it narrows as they meet. */
  left: calc(36% + 14% * var(--p));
  right: calc(36% + 14% * var(--p));
  background: linear-gradient(90deg, rgb(139 123 255 / .08), rgb(139 123 255 / .16), rgb(139 123 255 / .08));
  animation: md-breathe 6s ease-in-out infinite alternate;
}
[data-direction="modern"] .md-gate {
  --gate-shift: 0%;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--lane);
  transform-origin: center;
  left: calc(var(--gate-x) + var(--gate-shift) * var(--p));
}
[data-direction="modern"] .md-gate--check { --gate-shift: 14%; }
[data-direction="modern"] .md-gate--write { --gate-shift: -14%; }
[data-direction="modern"] .md-gate-label {
  position: absolute;
  top: 8px;
  left: 8px;
  color: var(--muted-night);
  white-space: nowrap;
}
[data-direction="modern"] .md-gate-seg--check { --flash: var(--clear); }
[data-direction="modern"] .md-gate-seg--write { --flash: var(--overdraft); }
[data-direction="modern"] .md-gate-seg {
  position: absolute;
  top: var(--lane-y);
  left: -2px;
  width: 5px;
  height: 10px;
  transform: translateY(-50%);
  background: transparent;
  border-radius: 2px;
}
[data-direction="modern"] .md-tags,
[data-direction="modern"] .md-ticks { position: absolute; inset: 0; pointer-events: none; }
[data-direction="modern"] .md-tag {
  position: absolute;
  top: var(--lane-y);
  left: calc(36% + 14% * var(--p));
  transform: translate(calc(-100% - 12px), -50%);
  color: var(--clear);
  white-space: nowrap;
}
/* The collapsed single tag is desktop-hidden; portrait shows it instead
   of the ten stale tags. */
[data-direction="modern"] .md-tag--all { display: none; }
[data-direction="modern"] .md-tick {
  position: absolute;
  top: var(--lane-y);
  width: 8px;
  height: 2px;
  transform: translateY(-50%);
}
[data-direction="modern"] .md-tick--check { left: calc(36% + 14% * var(--p) - 4px); background: var(--clear); }
[data-direction="modern"] .md-tick--write { left: calc(64% - 14% * var(--p) - 4px); background: var(--overdraft); }
[data-direction="modern"] .md-number-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px));
}
[data-direction="modern"] .md-number {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 19vw, 18rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: .9;
  color: var(--ink-night);
  pointer-events: auto;
  cursor: pointer;
  /* Scroll: scale 1 -> .85, fade out between p = .3 and p = .8. */
  transform: scale(calc(1 - .15 * var(--p)));
  opacity: clamp(0, calc(1 - (var(--p) - .3) / .5), 1);
}
/* On short screens the 5.5rem floor overflows the scene: the four-line ID
   headline leaves too little room, and at 390px the seven-character value
   is wider than the viewport. Cap by viewport height as well as width. */
@media (max-height: 940px) {
  [data-direction="modern"] .md-number { font-size: min(19vw, 26svh, 18rem); }
}
[data-direction="modern"] .md-num-text { display: inline-block; font-variant-numeric: tabular-nums; }
[data-direction="modern"] .md-num--over { color: var(--overdraft); }
[data-direction="modern"] .md-num-caption { color: var(--muted-night); margin: 16px 0 0; text-align: center; }
[data-direction="modern"] .md-num-tag { color: var(--muted-night); margin: 8px 0 0; text-align: center; }

/* ---- hero bottom bar ---- */
[data-direction="modern"] .md-hero-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 12px clamp(16px, 4vw, 48px) 20px;
}
[data-direction="modern"] .md-statline { color: var(--muted-night); margin: 0; }
[data-direction="modern"] .md-hero-controls { margin: 0; display: flex; gap: 8px; }
[data-direction="modern"] .md-ctl {
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-night);
  background: rgba(21, 19, 28, .92);
  border: 1px solid rgba(255, 255, 255, .10);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out);
}
[data-direction="modern"] .md-ctl:hover { transform: translateY(-2px); }
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  html.js[data-direction="modern"] .md-ctl {
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* ---- light sheet ---- */
[data-direction="modern"] .md-sheet {
  position: relative;
  z-index: 1;
  background: var(--paper);
  color: var(--ink);
  border-radius: 32px 32px 0 0;
}
[data-direction="modern"] .md-sheet-sentinel { display: block; height: 1px; }
[data-direction="modern"] .md-sheet > section {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 32px);
  scroll-margin-top: 96px;
}
[data-direction="modern"] .md-sheet h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--ink);
}
[data-direction="modern"] .md-sheet h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
[data-direction="modern"] .md-sheet p { color: var(--ink); }
[data-direction="modern"] .md-sheet .lede { color: var(--muted); margin: 0 0 32px; }

/* Shared cards on the sheet. */
[data-direction="modern"] .md-ledger-card,
[data-direction="modern"] .md-target-card,
[data-direction="modern"] .md-anatomy-step,
[data-direction="modern"] .md-role-card,
[data-direction="modern"] .md-report-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow-rest);
}

/* ---- ledger bento ---- */
[data-direction="modern"] .md-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
[data-direction="modern"] .md-ledger-card { grid-column: span 6; padding: 28px; }
[data-direction="modern"] .md-target-card { grid-column: span 3; padding: 28px; display: flex; flex-direction: column; gap: 4px; }
[data-direction="modern"] .md-target-card p { margin: .35em 0; }
[data-direction="modern"] .md-target-kind { color: var(--muted); font-size: .95rem; }
[data-direction="modern"] .md-target-count { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
/* Ledger figures reuse the main build's .ledger markup and counters. */
[data-direction="modern"] .md-ledger-card .ledger { grid-template-columns: repeat(3, 1fr); margin: 24px 0 8px; }
[data-direction="modern"] .md-ledger-card .ledger figure {
  background: var(--card);
  border-color: var(--rule);
  border-radius: 14px;
  padding: 16px;
}
[data-direction="modern"] .md-ledger-card .ledger .num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
[data-direction="modern"] .md-ledger-card .ledger figcaption { color: var(--muted); }
[data-direction="modern"] .md-ledger-card .ledger .fn { color: var(--ion-ink); }
[data-direction="modern"] .md-target-card .bar { margin: 10px 0 14px; }
[data-direction="modern"] .md-target-card .bar .f { background: var(--fail); }
[data-direction="modern"] .md-target-card .bar .p { background: var(--pass); }
[data-direction="modern"] #ledger-notes {
  background: var(--card);
  border-color: var(--rule);
  color: var(--ink);
}
[data-direction="modern"] #ledger-notes dd { color: var(--muted); }
@media (max-width: 900px) {
  [data-direction="modern"] .md-ledger-card { grid-column: span 12; }
  [data-direction="modern"] .md-target-card { grid-column: span 6; }
}
@media (max-width: 640px) {
  [data-direction="modern"] .md-target-card { grid-column: span 12; }
  [data-direction="modern"] .md-ledger-card .ledger { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Anatomy: scrolling story ---- */
[data-direction="modern"] .md-anatomy .md-anatomy-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  align-items: start;
  margin-top: 32px;
}
[data-direction="modern"] .md-anatomy-diagram {
  --merge: 0;
  position: sticky;
  top: 96px;
  background: var(--night-2);
  color: var(--ink-night);
  border-radius: 28px;
  padding: 24px;
  overflow: hidden;
}
[data-direction="modern"] .md-mini-scene { position: relative; height: 360px; }
[data-direction="modern"] .md-mini-lanes { position: absolute; inset: 0; }
[data-direction="modern"] .md-mini-lane {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lane);
  /* Step 5 (the fix): lanes serialise to the centre line. */
  top: calc(var(--lane-y) * (1 - var(--merge)) + 50% * var(--merge));
}
[data-direction="modern"] .md-mini-window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(36% + 14% * var(--merge));
  right: calc(36% + 14% * var(--merge));
  background: rgb(139 123 255 / .10);
}
[data-direction="modern"] .md-mini-gate {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(237, 234, 245, .25);
}
[data-direction="modern"] .md-mini-gate--check { left: calc(36% + 14% * var(--merge)); }
[data-direction="modern"] .md-mini-gate--write { left: calc(64% - 14% * var(--merge)); }
[data-direction="modern"] .md-mini-gate-label { position: absolute; top: 8px; left: 8px; color: var(--muted-night); white-space: nowrap; }
[data-direction="modern"] .md-mini-tags { position: absolute; inset: 0; pointer-events: none; }
[data-direction="modern"] .md-mini-tag {
  position: absolute;
  top: var(--lane-y);
  left: 36%;
  transform: translate(calc(-100% - 10px), -50%);
  color: var(--clear);
  white-space: nowrap;
}
[data-direction="modern"] .md-mini-number {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--overdraft);
  font-variant-numeric: tabular-nums;
}
[data-direction="modern"] .md-mini-window-label {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  color: var(--ion);
  white-space: nowrap;
}
[data-direction="modern"] .md-mini-cwe {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: var(--muted-night);
  white-space: nowrap;
}
[data-direction="modern"] .md-mini-tags,
[data-direction="modern"] .md-mini-tag,
[data-direction="modern"] .md-mini-window-label,
[data-direction="modern"] .md-mini-cwe { transition: opacity 250ms var(--ease-out); }
/* Diagram states, driven by data-step (hero.js IntersectionObserver).
   Default markup is step 5 (final diagram, all steps visible, no JS). */
[data-direction="modern"] .md-anatomy-diagram[data-step="1"] .md-mini-tags,
[data-direction="modern"] .md-anatomy-diagram[data-step="1"] .md-mini-window-label,
[data-direction="modern"] .md-anatomy-diagram[data-step="1"] .md-mini-cwe,
[data-direction="modern"] .md-anatomy-diagram[data-step="3"] .md-mini-tags,
[data-direction="modern"] .md-anatomy-diagram[data-step="3"] .md-mini-window-label,
[data-direction="modern"] .md-anatomy-diagram[data-step="3"] .md-mini-cwe,
[data-direction="modern"] .md-anatomy-diagram[data-step="4"] .md-mini-tags,
[data-direction="modern"] .md-anatomy-diagram[data-step="5"] .md-mini-tags,
[data-direction="modern"] .md-anatomy-diagram[data-step="5"] .md-mini-window-label { opacity: 0; }
[data-direction="modern"] .md-anatomy-diagram[data-step="1"] .md-mini-number,
[data-direction="modern"] .md-anatomy-diagram[data-step="2"] .md-mini-number { color: var(--ink-night); }
[data-direction="modern"] .md-anatomy-diagram[data-step="2"] .md-mini-window-label,
[data-direction="modern"] .md-anatomy-diagram[data-step="2"] .md-mini-cwe { opacity: 0; }
[data-direction="modern"] .md-anatomy-diagram[data-step="5"] { --merge: 1; }
[data-direction="modern"] .md-anatomy .md-anatomy-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
[data-direction="modern"] .md-anatomy-step { padding: 24px; }
[data-direction="modern"] .md-anatomy-step p { color: var(--muted); }
[data-direction="modern"] .md-anatomy-step p:first-of-type { color: var(--ink); }
[data-direction="modern"] .md-anatomy-step .big-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  color: var(--overdraft);
  margin: .2em 0;
}
[data-direction="modern"] .md-anatomy-step pre.http { background: var(--night-2); color: var(--ink-night); border-radius: 14px; }
[data-direction="modern"] .md-step-fig { margin: 16px 0 0; }
[data-direction="modern"] .md-step-fig img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); }
[data-direction="modern"] .md-step-fig figcaption { color: var(--muted); font-size: .9rem; margin-top: 8px; }
@media (max-width: 900px) {
  [data-direction="modern"] .md-anatomy .md-anatomy-grid { grid-template-columns: 1fr; }
  [data-direction="modern"] .md-anatomy-diagram { top: 64px; height: 40svh; }
  [data-direction="modern"] .md-mini-scene { height: 100%; }
}

/* ---- Evidence: filter chips, case card grid, archive table ---- */
[data-direction="modern"] .md-cases .filters p { gap: 8px; }
[data-direction="modern"] .md-cases .filters button {
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
[data-direction="modern"] .md-cases .filters button:hover { border-color: var(--ion-ink); }
[data-direction="modern"] .md-cases .filters [aria-pressed="true"] {
  background: var(--ion-ink);
  border-color: var(--ion-ink);
  color: #fff;
}
[data-direction="modern"] .md-cases .filters [data-clear-filters] { background: transparent; }
[data-direction="modern"] .md-cases .showing { color: var(--muted); }
[data-direction="modern"] .md-case-groups .matrix-category { margin: 1.5rem 0; }
[data-direction="modern"] .md-case-groups .matrix-category > h3 {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  padding: 8px 0;
  margin: 0 0 12px;
  font-size: 1.05rem;
}
[data-direction="modern"] .md-case-groups .matrix-cells {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
[data-direction="modern"] .md-case-groups .cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-rest);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
[data-direction="modern"] .md-case-groups .cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--rule);
}
[data-direction="modern"] .md-case-status { display: flex; }
[data-direction="modern"] .md-case-title {
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-direction="modern"] .md-case-cat { color: var(--muted); }
/* Status is never colour alone: the chip carries its word plus an icon. */
[data-direction="modern"] .badge.fail::before { content: "\2715\00A0"; }
[data-direction="modern"] .badge.pass::before { content: "\2713\00A0"; }
[data-direction="modern"] .badge.fail { background: var(--fail-bg); color: var(--fail); }
[data-direction="modern"] .badge.pass { background: var(--pass-bg); color: var(--pass); }
[data-direction="modern"] .badge.lab { background: var(--lab-bg); color: var(--lab); border: 1px solid rgba(91, 69, 224, .35); }
[data-direction="modern"] .md-tableview { margin-top: 2.5rem; }
[data-direction="modern"] .md-tableview > summary { cursor: pointer; padding: 8px 0; list-style: none; }
[data-direction="modern"] .md-tableview > summary::-webkit-details-marker { display: none; }
[data-direction="modern"] .md-tableview > summary h2 { display: inline; margin: 0; }
[data-direction="modern"] .md-tableview > summary h2::after { content: " \2193"; color: var(--ion-ink); font-size: .7em; }
[data-direction="modern"] .md-tableview table.data { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
[data-direction="modern"] .md-tableview table.data th { color: var(--muted); }
[data-direction="modern"] .md-tableview table.data th,
[data-direction="modern"] .md-tableview table.data td { border-bottom-color: var(--rule); }
[data-direction="modern"] .md-tableview table.data tr:hover td { background: #ECEAF2; }
[data-direction="modern"] .md-tableview table.data a { color: var(--ion-ink); }

/* ---- Tooling: Burp-TCP dark card ---- */
[data-direction="modern"] .md-tooling .md-tool-card {
  background: var(--night-2);
  color: var(--ink-night);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-rest);
}
[data-direction="modern"] .md-tool-left h2 { color: var(--ink-night); }
[data-direction="modern"] .md-tool-left p { color: var(--muted-night); }
[data-direction="modern"] .md-tool-left p:first-of-type { color: var(--ink-night); }
[data-direction="modern"] .md-tool-flow {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
[data-direction="modern"] .md-flow-node {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-night);
  white-space: nowrap;
}
[data-direction="modern"] .md-flow-link {
  position: relative;
  flex: 1 1 72px;
  min-width: 72px;
  height: 1px;
  background: var(--lane);
  container-type: inline-size;
}
[data-direction="modern"] .md-flow-transport {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted-night);
  white-space: nowrap;
}
[data-direction="modern"] .md-flow-dot {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ion);
  animation: md-flow-dot 3.2s linear infinite;
}
[data-direction="modern"] .md-flow-link ~ .md-flow-link .md-flow-dot { background: var(--clear); }
[data-direction="modern"] .md-tool-card.is-paused .md-flow-dot { animation-play-state: paused; }
[data-direction="modern"] .md-tool-cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
[data-direction="modern"] .md-tool-cols h3 { color: var(--ink-night); }
[data-direction="modern"] .md-tool-cols ul { color: var(--muted-night); margin: .5em 0; padding-left: 1.2em; }
[data-direction="modern"] .md-tool-cols li { margin: .3em 0; }
@media (max-width: 900px) {
  [data-direction="modern"] .md-tooling .md-tool-card { grid-template-columns: 1fr; }
  [data-direction="modern"] .md-tool-cols { grid-template-columns: 1fr; }
}

/* ---- Reports: five document cards ---- */
[data-direction="modern"] .md-reports .md-report-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}
[data-direction="modern"] .md-report-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
[data-direction="modern"] .md-report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
[data-direction="modern"] .md-report-cover {
  position: relative;
  background: var(--night-2);
  color: var(--ink-night);
  min-height: 180px;
  padding: 20px;
  display: flex;
  overflow: hidden;
}
[data-direction="modern"] .md-report-cover-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
[data-direction="modern"] .md-report-cover-lanes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(237, 234, 245, .10) 26px 27px);
  transition: transform 250ms var(--ease-out);
}
[data-direction="modern"] .md-report-card:hover .md-report-cover-lanes { transform: translateY(4px); }
[data-direction="modern"] .md-report-cover-lang {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  color: var(--ink-night);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  padding: 4px 10px;
}
[data-direction="modern"] .md-report-body { padding: 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
[data-direction="modern"] .md-report-body p { margin: .3em 0; color: var(--muted); }
[data-direction="modern"] .md-report-body h3 { margin-bottom: 4px; }
[data-direction="modern"] .md-report-meta { font-size: .92rem; }
[data-direction="modern"] .md-report-body p:last-child { margin-top: auto; padding-top: 12px; }
@media (max-width: 1199px) {
  [data-direction="modern"] .md-reports .md-report-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  [data-direction="modern"] .md-reports .md-report-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  [data-direction="modern"] .md-report-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---- Experience ---- */
[data-direction="modern"] .md-experience .md-role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
[data-direction="modern"] .md-role-card { padding: 24px; }
[data-direction="modern"] .md-role-card p { color: var(--muted); }
[data-direction="modern"] .md-role-card p:first-of-type { color: var(--ink); }
[data-direction="modern"] .md-experience .md-cert-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
[data-direction="modern"] .md-chip {
  display: inline-block;
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}
@media (max-width: 640px) {
  [data-direction="modern"] .md-experience .md-role-cards { grid-template-columns: 1fr; }
}

/* ---- Contact: closing dark band ---- */
[data-direction="modern"] .md-sheet > .md-contact {
  max-width: none;
  background: var(--night);
  color: var(--ink-night);
  border-radius: 32px 32px 0 0;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 32px);
  overflow: hidden;
}
[data-direction="modern"] .md-contact h2 { color: var(--ink-night); max-width: 18ch; margin-inline: auto; }
[data-direction="modern"] .md-contact p { color: var(--muted-night); }
[data-direction="modern"] .md-contact-lane {
  position: relative;
  height: 1px;
  max-width: 800px;
  margin: 0 auto 48px;
  background: var(--lane);
  container-type: inline-size;
}
[data-direction="modern"] .md-contact-pulse {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ion);
  animation: md-contact-pulse 4s linear infinite;
}
[data-direction="modern"] .md-contact-email { margin: 24px 0; }
[data-direction="modern"] .md-contact-email a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-night);
  text-decoration: none;
  overflow-wrap: anywhere;
}
[data-direction="modern"] .md-contact-email a:hover { color: var(--ion); }

/* ---- Footer (light, on the sheet's paper) ---- */
[data-direction="modern"] .site-footer {
  background: var(--paper);
  color: var(--muted);
  border-top: 1px solid var(--rule);
  margin-top: 0;
}
[data-direction="modern"] .site-footer a { color: var(--ion-ink); }
[data-direction="modern"] .site-footer a:visited { color: var(--ion-ink); }

/* ---- Case viewer dialog ---- */
[data-direction="modern"] dialog#case-viewer {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-hover);
}
[data-direction="modern"] dialog#case-viewer::backdrop {
  background: rgba(12, 11, 16, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (min-width: 768px) {
  /* Right-side drawer: 24px left corners only. */
  [data-direction="modern"] dialog#case-viewer { border-radius: 24px 0 0 24px; }
}
[data-direction="modern"] dialog#case-viewer h2 { font-family: var(--font-display); font-weight: 500; }
[data-direction="modern"] dialog#case-viewer .dialog-hint { color: var(--muted); }
/* Tabs as a pill segmented control. */
[data-direction="modern"] dialog#case-viewer [role="tablist"] {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px;
  margin: 12px 0;
}
[data-direction="modern"] dialog#case-viewer [role="tab"] {
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  background: none;
  color: var(--muted);
  font-weight: 600;
}
[data-direction="modern"] dialog#case-viewer [role="tab"][aria-selected="true"] {
  background: var(--ion-ink);
  color: #fff;
  border: none;
}
[data-direction="modern"] dialog#case-viewer [role="tabpanel"] pre.http {
  background: var(--night-2);
  color: var(--ink-night);
  border-radius: 14px;
}
[data-direction="modern"] dialog#case-viewer .evidence { background: var(--card); border-color: var(--rule); }
[data-direction="modern"] dialog#case-viewer .thumb-strip .thumb { background: var(--card); border-color: var(--rule); }
[data-direction="modern"] dialog#case-viewer .shot-zoom button,
[data-direction="modern"] dialog#case-viewer [role="tabpanel"] button[data-copy],
[data-direction="modern"] dialog#case-viewer [data-prev],
[data-direction="modern"] dialog#case-viewer [data-next],
[data-direction="modern"] dialog#case-viewer [data-close] {
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font: inherit;
}
[data-direction="modern"] dialog#case-viewer a { color: var(--ion-ink); }

/* HTTP code blocks + redaction markers, everywhere in the direction. */
[data-direction="modern"] pre.http { background: var(--night-2); color: var(--ink-night); border-radius: 14px; }
[data-direction="modern"] pre.http .redacted {
  background: rgba(139, 123, 255, .18);
  color: #C9BFFF;
  border: 1px solid rgba(139, 123, 255, .5);
  border-radius: 999px;
  padding: 0 8px;
}
[data-direction="modern"] .md-case-body pre.http .redacted { border-style: solid; }

/* ---- Case page: 280px static dark header band ---- */
[data-direction="modern"] .md-case-page { background: var(--paper); color: var(--ink); }
[data-direction="modern"] .md-case-head {
  position: relative;
  height: 280px;
  background: var(--night-2);
  color: var(--ink-night);
  padding: clamp(24px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
}
[data-direction="modern"] .md-case-head > * { position: relative; z-index: 1; }
[data-direction="modern"] .md-case-head p { margin: 0; color: var(--muted-night); }
[data-direction="modern"] .md-case-head a { color: var(--ion); }
[data-direction="modern"] .md-case-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink-night);
}
/* Still lane motif behind the header content. */
[data-direction="modern"] .md-case-lanes {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(237, 234, 245, .08) 34px 35px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
[data-direction="modern"] .md-case-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem clamp(16px, 4vw, 32px);
}
[data-direction="modern"] .md-case-body h2,
[data-direction="modern"] .md-case-body h3 { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
[data-direction="modern"] .md-case-body .evidence { background: var(--card); border-color: var(--rule); border-radius: 20px; box-shadow: var(--shadow-rest); }
[data-direction="modern"] .md-case-body .lab-note { background: var(--card); border: 1px solid var(--rule); color: var(--ink); }
[data-direction="modern"] .md-case-body .unavailable { background: var(--paper); color: var(--muted); }
[data-direction="modern"] .md-case-body details.original { border-color: var(--rule); }

/* ---- Load-in starting states + scroll reveals ----
   Scoped to html.js AND no-preference, so nothing is ever invisible
   without JS or under reduced motion. hero.js drives these in with the
   Web Animations API; every WAAPI call that ends on one of these
   elements MUST use fill: "forwards" (or commitStyles), otherwise the
   element returns to this hidden state when the animation finishes. */
@media (prefers-reduced-motion: no-preference) {
  html.js[data-direction="modern"] .md-eyebrow,
  html.js[data-direction="modern"] .md-subline,
  html.js[data-direction="modern"] .md-hero-ctas,
  html.js[data-direction="modern"] .md-num-text,
  html.js[data-direction="modern"] .md-num-caption,
  html.js[data-direction="modern"] .md-num-tag,
  html.js[data-direction="modern"] .md-tag,
  html.js[data-direction="modern"] .md-tick,
  html.js[data-direction="modern"] .md-gate-label { opacity: 0; }
  html.js[data-direction="modern"] .md-wi { transform: translateY(105%); }
  html.js[data-direction="modern"] .md-lane { transform: scaleX(0); }
  html.js[data-direction="modern"] .md-gate { transform: scaleY(0); }
  /* Bottom bar and glow fade in on CSS alone (spec load-in table). */
  html.js[data-direction="modern"] .md-hero-bar { animation: md-fade-in 650ms var(--ease-out) 1400ms both; }
  html.js[data-direction="modern"] .md-hero-glow { animation: md-fade-in 600ms var(--ease-out) both; }
  /* Scroll reveals: fade + 16px rise, once (hero.js adds .is-in). */
  html.js[data-direction="modern"] [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
  }
  html.js[data-direction="modern"] [data-reveal].is-in { opacity: 1; transform: translateY(0); }
}

/* ---- Portrait layout (aspect ratio <= 4/5) ----
   The scene rotates: lanes run vertically, gates become horizontal
   lines (CHECK 44%, WRITE 74%), the number sits between them, and the
   ten stale tags collapse to the single .md-tag--all. */
@media (max-aspect-ratio: 4/5) {
  [data-direction="modern"] .md-lane {
    top: 0;
    bottom: 0;
    left: calc(var(--lane-y) * (1 - var(--p)) + 50% * var(--p));
    right: auto;
    width: 1px;
    height: auto;
    transform-origin: top;
  }
  [data-direction="modern"] .md-gate {
    left: 0;
    right: 0;
    top: calc(var(--gate-x) + var(--gate-shift) * var(--p));
    bottom: auto;
    width: auto;
    height: 1px;
    transform-origin: left;
  }
  [data-direction="modern"] .md-gate--check { --gate-x: 44%; --gate-shift: 15%; }
  [data-direction="modern"] .md-gate--write { --gate-x: 74%; --gate-shift: -15%; }
  [data-direction="modern"] .md-gate-label { top: -22px; left: 8px; }
  [data-direction="modern"] .md-window {
    left: 0;
    right: 0;
    top: calc(44% + 15% * var(--p));
    bottom: calc(26% + 15% * var(--p));
  }
  [data-direction="modern"] .md-tag { display: none; }
  [data-direction="modern"] .md-tag--all {
    display: block;
    top: calc(44% + 15% * var(--p));
    left: 50%;
    transform: translate(16px, -50%);
  }
  [data-direction="modern"] .md-tick { top: auto; width: 2px; height: 8px; transform: translateX(-50%); }
  [data-direction="modern"] .md-tick--check { top: calc(44% + 15% * var(--p)); left: var(--lane-y); }
  [data-direction="modern"] .md-tick--write { top: calc(74% - 15% * var(--p)); left: var(--lane-y); }
  [data-direction="modern"] .md-mini-tag { left: 50%; top: var(--lane-y); transform: translate(-50%, calc(-100% - 10px)); }
}

/* ---- Reduced motion ----
   Final state, no animation at all: hero not sticky (scrolls normally),
   Replay/Pause hidden, no breathing / echo / parallax / scroll merge.
   The base stylesheet already kills animations and transitions globally
   under reduce; this block removes the sticky hero, the controls, and
   the scroll-driven transforms. */
@media (prefers-reduced-motion: reduce) {
  [data-direction="modern"] .md-hero { position: static; height: auto; min-height: calc(100vh - 24px); min-height: calc(100svh - 24px); }
  [data-direction="modern"] .md-hero-controls { display: none; }
  [data-direction="modern"] .md-window,
  [data-direction="modern"] .md-flow-dot,
  [data-direction="modern"] .md-contact-pulse { animation: none; }
  /* Scroll merge off: lanes, gates, window, number and h1 stay in their
     final resting positions regardless of --p. Landscape geometry: */
  @media (min-aspect-ratio: 4/5) {
    [data-direction="modern"] .md-lane { top: var(--lane-y); }
    [data-direction="modern"] .md-gate--check { left: 36%; }
    [data-direction="modern"] .md-gate--write { left: 64%; }
    [data-direction="modern"] .md-window { left: 36%; right: 36%; }
    [data-direction="modern"] .md-tag { left: 36%; }
    [data-direction="modern"] .md-tick--check { left: calc(36% - 4px); }
    [data-direction="modern"] .md-tick--write { left: calc(64% - 4px); }
  }
  /* Portrait geometry: */
  @media (max-aspect-ratio: 4/5) {
    [data-direction="modern"] .md-lane { left: var(--lane-y); top: 0; }
    [data-direction="modern"] .md-gate--check { top: 44%; }
    [data-direction="modern"] .md-gate--write { top: 74%; }
    [data-direction="modern"] .md-window { top: 44%; bottom: 26%; }
    [data-direction="modern"] .md-tick--check { top: 44%; left: var(--lane-y); }
    [data-direction="modern"] .md-tick--write { top: 74%; left: var(--lane-y); }
  }
  [data-direction="modern"] .md-number { transform: none; opacity: 1; }
  [data-direction="modern"] .md-h1 { transform: none; opacity: 1; }
  [data-direction="modern"] .md-lanes,
  [data-direction="modern"] .md-number-wrap,
  [data-direction="modern"] .md-hero-glow { transform: none; }
  [data-direction="modern"] .md-anatomy-diagram { position: static; }
}

/* Shared utility used by the modern markup; the base rule also applies,
   restated here so every class in modern.mjs has a modern-block rule. */
[data-direction="modern"] .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }