/* GENERATED by build_tokens.py from source/tokens.json — do not edit by hand.
   Siddicky AI & Security Consulting Design System
   https://claude.ai/artifact/98TcCgqR43pLNBiAwFVKg6 */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");

:root {
  --track-label: 0.14em;
  --track-eyebrow: 0.15em;
  --track-brand: 0.12em;
  --track-status: 0.08em;
  --track-terminal: 0.1em;
  --content: 1180px;
  --page-max: 1440px;
  --gutter: 28px;
  --gutter-mobile: 20px;
  --section-y: 104px;
  --section-y-mobile: 78px;
  --hero-y: 120px;
  --hero-min-h: 710px;
  --header-h: 76px;
  --header-h-mobile: 68px;
  --space-1: 5px;
  --space-2: 8px;
  --space-3: 11px;
  --space-4: 13px;
  --space-5: 17px;
  --space-6: 22px;
  --space-7: 27px;
  --space-8: 30px;
  --space-9: 38px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --control-h: 48px;
  --control-h-sm: 39px;
  --control-h-field: 44px;
  --control-pad-x: 22px;
  --control-pad-x-sm: 16px;
  --card-pad: 30px;
  --card-min-h: 270px;
  --panel-min-h: 278px;
  --gap-nav: 27px;
  --gap-actions: 31px;
  --gap-columns: 80px;
  --border-w: 1px;
  --border-w-accent: 3px;
  --grid-cell: 44px;
  --radius-control: 3px;
  --radius-none: 0;
  --radius-pill: 50%;
  --blink-duration: 1.1s;
  --display-hero: clamp(54px,6.2vw,88px);
  --display-section: clamp(42px,5vw,68px);
  --display-cta: clamp(54px,7vw,96px);
  --display-specimen: clamp(62px,7vw,102px);
  --rule: 1px solid var(--line);
  --rule-subtle: 1px solid var(--steel-a12);
  --rule-light: 1px solid var(--mist-100);
  --glow-accent: 0 0 9px var(--accent);
  --blur-header: blur(16px);
  --grid-image: linear-gradient(var(--accent-a10) 1px,transparent 1px),linear-gradient(90deg,var(--accent-a10) 1px,transparent 1px);
  --grid-opacity: .18;
  --display-weight: 420;
  --weight-body: 400;
  --weight-medium: 650;
  --weight-bold: 700;
  --weight-heavy: 750;
  --display-tracking: -0.045em;
  --display-tracking-tight: -0.06em;
  --display-leading: 0.99;
  --display-leading-specimen: 0.95;
  --leading-body: 1.7;
  --leading-tight: 1.65;
  --font-sans: "Geist",Arial,sans-serif;
  --font-mono: "Geist Mono",monospace;
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --type-hero-title-size: 88px;
  --type-section-title-size: 68px;
  --type-cta-title-size: 96px;
  --type-specimen-title-size: 102px;
  --type-text-lede-size: 18px;
  --type-text-body-lg-size: 16px;
  --type-text-md-size: 14px;
  --type-text-sm-size: 13px;
  --type-text-xs-size: 12px;
  --type-text-2xs-size: 11px;
  --type-text-card-title-size: 19px;
  --type-mono-label-size: 10px;
  --type-mono-eyebrow-size: 11px;
  --type-mono-terminal-size: 12px;
  --type-mono-status-size: 9px;
  --type-mono-footer-size: 11px;
  --type-mono-code-size: 10px;
  --text-lede: 18px;
  --text-body-lg: 16px;
  --text-md: 14px;
  --text-sm: 13px;
  --text-xs: 12px;
  --text-2xs: 11px;
  --leading-lede: 1.65;
  --text-card-title: 19px;
  --mono-label: 700 10px/1 var(--font-mono);
  --mono-eyebrow: 700 11px/1 var(--font-mono);
  --mono-terminal: 12px/2.25 var(--font-mono);
  --mono-status: 9px/1 var(--font-mono);
  --mono-footer: 11px/1 var(--font-mono);
  --pad-inline: max(var(--gutter),calc((100% - var(--content))/2));
}

:root,
[data-theme="dark"] {
  --accent: #ff7a1a;
  --accent-bright: #ff9447;
  --accent-ink: #b34700;
  --success: #3ddc97;
  --space: #0f1115;
  --base: #171a20;
  --raised: #1f232b;
  --sunken: #0c0e11;
  --line: #2c313b;
  --steel: #a3a9b6;
  --cloud: #f3f4f6;
  --signal: #ff5c8a;
  --amber: #f5c542;
  --info: #7ab8ff;
  --ink-900: #0f1115;
  --ink-800: #0c0e11;
  --ink-700: #171a20;
  --ink-600: #1a1d24;
  --ink-500: #1f232b;
  --ink-400: #2a2e37;
  --ink-300: #2c313b;
  --ink-200: #363b46;
  --ink-100: #3b404c;
  --gray-600: #3f4450;
  --gray-500: #7a808c;
  --gray-400: #7d8491;
  --gray-300: #838a97;
  --gray-200: #8e95a2;
  --gray-100: #959ca9;
  --mist-300: #a3a9b6;
  --mist-200: #c9cdd5;
  --mist-100: #d0d3da;
  --accent-a10: #ff7a1a26;
  --accent-a18: #ff7a1a2e;
  --accent-a25: #ff7a1a40;
  --accent-a30: #ff7a1a4d;
  --steel-a12: #a3a9b61f;
  --steel-a14: #a3a9b624;
  --scrim-header: #0f1115ed;
  --scrim-terminal: #171a20f2;
  --surface-page: #0f1115;
  --surface-section: #171a20;
  --surface-sunken: #0c0e11;
  --surface-raised: #1f232b;
  --surface-card: #171a20;
  --surface-light: #f3f4f6;
  --surface-input: #171a20;
  --surface-notice: #1a1d24;
  --text-body: #f3f4f6;
  --text-muted: #a3a9b6;
  --text-meta: #7d8491;
  --text-faint: #7a808c;
  --text-accent: #ff7a1a;
  --text-on-accent: #111111;
  --text-on-light: #171a20;
  --text-muted-on-light: #5f6570;
  --border-subtle: #a3a9b61f;
  --border-default: #2c313b;
  --border-strong: #363b46;
  --border-control: #3b404c;
  --border-light: #d0d3da;
  --border-accent: #ff7a1a;
  --action-primary: #ff7a1a;
  --action-primary-hover: #ff9447;
  --action-secondary: #1f232b;
  --focus-ring: #ff7a1a40;
  --status-success: #3ddc97;
  --status-warning: #f5c542;
  --status-danger: #ff5c8a;
  --status-info: #7ab8ff;
  --shadow-terminal: 0 28px 90px #0006;
}

[data-theme="light"] {
  --accent: #1f4fff;
  --accent-bright: #1a3fd6;
  --accent-ink: #8aa6ff;
  --success: #0f7b4b;
  --space: #f6f5f1;
  --base: #ffffff;
  --raised: #ebe9e3;
  --sunken: #efede7;
  --line: #d9d6ce;
  --steel: #4e5561;
  --cloud: #15171c;
  --signal: #c8243b;
  --amber: #9a5b00;
  --info: #1f6fb2;
  --ink-900: #f6f5f1;
  --ink-800: #efede7;
  --ink-700: #ffffff;
  --ink-600: #f0eee8;
  --ink-500: #ebe9e3;
  --ink-400: #e2dfd8;
  --ink-300: #d9d6ce;
  --ink-200: #8f8b82;
  --ink-100: #837f76;
  --gray-600: #c9c5bc;
  --gray-500: #686e79;
  --gray-400: #5d636e;
  --gray-300: #5a606b;
  --gray-200: #555b66;
  --gray-100: #4e5561;
  --mist-300: #4e5561;
  --mist-200: #2a2e37;
  --mist-100: #3b404c;
  --accent-a10: #1f4fff1f;
  --accent-a18: #1f4fff2e;
  --accent-a25: #1f4fff40;
  --accent-a30: #1f4fff4d;
  --steel-a12: #15171c1f;
  --steel-a14: #15171c24;
  --scrim-header: #f6f5f1ed;
  --scrim-terminal: #fffffff2;
  --surface-page: #f6f5f1;
  --surface-section: #ffffff;
  --surface-sunken: #efede7;
  --surface-raised: #ebe9e3;
  --surface-card: #ffffff;
  --surface-light: #15171c;
  --surface-input: #ffffff;
  --surface-notice: #f0eee8;
  --text-body: #15171c;
  --text-muted: #4e5561;
  --text-meta: #5d636e;
  --text-faint: #686e79;
  --text-accent: #1f4fff;
  --text-on-accent: #ffffff;
  --text-on-light: #ffffff;
  --text-muted-on-light: #a3a9b6;
  --border-subtle: #15171c1f;
  --border-default: #d9d6ce;
  --border-strong: #8f8b82;
  --border-control: #837f76;
  --border-light: #3b404c;
  --border-accent: #1f4fff;
  --action-primary: #1f4fff;
  --action-primary-hover: #1a3fd6;
  --action-secondary: #ebe9e3;
  --focus-ring: #1f4fff40;
  --status-success: #0f7b4b;
  --status-warning: #9a5b00;
  --status-danger: #c8243b;
  --status-info: #1f6fb2;
  --shadow-terminal: 0 18px 50px #15171c26;
}

@keyframes sdk-blink{50%{opacity:0}}

.sdk-cursor{animation:sdk-blink var(--blink-duration) steps(2,end) infinite}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sdk-cursor{animation:none}}
/* Siddicky AI & Security Consulting — audit report components
   https://claude.ai/artifact/98TcCgqR43pLNBiAwFVKg6

   Component layer for security and code audit reports and their landing pages.
   Built only on the variables in siddicky-tokens.css, which must load first
   (build_style.py concatenates the two into one style.css). No @import here.

   Theme:  <html data-theme="light">  reports and PDFs   (Paper + Ink + Cobalt)
           <html data-theme="dark">   landing pages, docs (Graphite + Ember Orange)
   Print:  always the light palette, whatever the screen theme.

   Rules this file keeps: square shapes, radius only on .btn, 1px hairlines, no shadows
   except .terminal, tiled panels share one outer border, accent for one thing per view,
   status is a bar/outline plus a text label plus an icon (never colour alone), the odd
   spacing scale, Geist and Geist Mono only, mono never above 15px.

   Contents
     1  Base
     2  Page shell, header, footer, brand lock
     3  Type: headline, lede, labels, kicker, eyebrow, prose, lists
     4  Cover and hero, grid backdrop
     5  Section head, TOC
     6  Tiles: meta strip, metrics, panels
     7  Finding card, note, fields
     8  Alert
     9  Table
    10  Code, terminal
    11  Tag, buttons, text link
    12  Utilities
    13  Responsive
    14  Print
*/

/* ---------- 1  Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Smooth scrolling is opt-in: an unconditional rule here would beat the tokens file's
   reduced-motion reset, which has the same specificity and loads first. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
.icon { display: block; flex: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text-accent); }
/* A bare link inside copy carries a hairline underline; nav, TOC and classed links style themselves. */
:is(p, dd, td, .rows > li) a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--border-control);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(p, dd, td, .rows > li) a:not([class]):hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

b, strong { font-weight: var(--weight-medium); }
em, i { font-style: normal; }

/* ---------- 2  Page shell, header, footer, brand lock ---------- */

/* Content column: 1180px, gutter 28px (20px under 980px), centred inside page-max. */
.wrap { padding-inline: var(--pad-inline); }

.page {
  position: relative;
  padding: var(--section-y) var(--pad-inline);
  border-top: var(--border-w) solid var(--border-subtle);
  scroll-margin-top: var(--header-h);
}
.page > * + * { margin-top: var(--space-8); }
.page > .kicker + .section-head { margin-top: 42px; }
.page > .section-head + * { margin-top: var(--space-9); }
.page > * + h3 { margin-top: var(--space-9); }
.page > h3 + * { margin-top: var(--space-5); }

.page--section { background: var(--surface-section); }
.page--sunken { background: var(--surface-sunken); }

/* The one inverted section per page: Cloud on dark pages, Ink on light ones.
   It remaps text, border and accent tokens, and sets the notice, sunken and secondary-button
   surfaces to the ground itself, so these stay legible inside it: headings, ledes, .rows,
   .prose, .fields, .note, inline code, .code-block, .table, buttons and text links.
   Status colours are NOT remapped. The dark theme's mint, amber, pink and blue fall to about
   2-3:1 on Cloud, so .alert, .tag, .metric and .terminal belong in .page / .page--section. */
.page--invert {
  background: var(--surface-light);
  color: var(--text-on-light);
  --text-body: var(--text-on-light);
  --text-muted: var(--text-muted-on-light);
  --text-meta: var(--text-muted-on-light);
  --border-default: var(--border-light);
  --border-strong: var(--border-light);
  --border-subtle: var(--border-light);
  --accent: var(--accent-ink);
  --text-accent: var(--accent-ink);
  --surface-notice: var(--surface-light);
  --surface-sunken: var(--surface-light);
  --action-secondary: var(--surface-light);
}

/* Brand lock: Split S mark + Geist Mono wordmark ending in the thin cursor. */
.brand-lock {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cloud);
  text-decoration: none;
}
.brand-lock:hover { color: var(--cloud); }
.brand-mark { display: block; flex: none; width: 28px; height: 28px; }
.brand-mark .mark-upper { fill: currentColor; }
.brand-mark .mark-lower { fill: var(--accent); }
.brand-word {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-cursor {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 0.36em;
  background: var(--accent);
}
/* Footer size: 22px mark, 11px wordmark. */
.brand-lock--sm { gap: 11px; }
.brand-lock--sm .brand-mark { width: 22px; height: 22px; }
.brand-lock--sm .brand-word { font-size: var(--text-2xs); }

/* Site header: sticky on screen, hidden in print. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--header-h);
  padding: 0 var(--pad-inline);
  background: var(--scrim-header);
  -webkit-backdrop-filter: var(--blur-header);
  backdrop-filter: var(--blur-header);
  border-bottom: var(--border-w) solid var(--steel-a14);
}
.site-nav { display: flex; gap: var(--gap-nav); margin-left: auto; }
.site-nav a {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  transition: color 0.15s linear;
}
.site-nav a:hover { color: var(--text-accent); }
.site-header__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.site-nav ~ .site-header__meta { margin-left: 0; }

/* Site footer: wordmark left, tagline, meta right. */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  padding: var(--space-8) var(--pad-inline);
  border-top: var(--border-w) solid var(--border-subtle);
  color: var(--text-meta);
  font: var(--mono-footer);
  letter-spacing: 0;
}
.site-footer p { margin: 0; }
.site-footer__tag { text-align: center; }
.site-footer__meta { text-align: right; text-transform: uppercase; }

/* ---------- 3  Type ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
}
h1 { font-size: var(--display-hero); }
h2 { font-size: var(--display-section); }
h3 {
  font-size: var(--text-card-title);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* Emphasis in a headline is colour, never weight, slope or underline. */
h1 em, h2 em, h3 em, .display em { color: var(--accent); }
.display {
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
}
.display--cta { font-size: var(--display-cta); }

p { margin: 0; }

.lede {
  max-width: 610px;
  color: var(--text-muted);
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
}

/* Mono labels: ALL CAPS, wide tracking, never above 15px. */
.mono-label {
  margin: 0;
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.mono-code {
  padding: 0;
  border: 0;
  background: none;
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-meta);
}

/* Eyebrow opens a hero or closing block; Kicker opens a numbered section. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-muted);
  font: var(--mono-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-meta);
  font: var(--mono-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.kicker b { color: var(--accent); font-weight: inherit; }

/* Running copy. */
.prose { max-width: 760px; }
.prose > * + * { margin-top: var(--space-5); }
.prose > h3 { margin-top: var(--space-9); }
.prose > h3 + * { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-7); }
.prose li + li { margin-top: var(--space-2); }
.prose--muted { color: var(--text-muted); }

/* Hairline row list. */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-w) solid var(--border-default);
}
.rows > li {
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}
.rows b, .rows strong { color: var(--text-body); }

/* ---------- 4  Cover and hero ---------- */

.cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-min-h);
  padding-block: var(--hero-y);
  border-top: 0;
}
.cover > * + * { margin-top: 0; }
.cover__bar { display: none; }
.cover .eyebrow { margin-bottom: var(--space-5); }
.cover h1 { max-width: 14ch; margin-bottom: var(--space-7); }
.cover .lede { margin: 0; }
.cover .meta-strip { margin-top: var(--space-11); max-width: 880px; }
.cover__note { margin-top: var(--space-7); max-width: 610px; }

/* Landing hero: copy left, Terminal right, grid motif behind. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--gap-columns);
  min-height: var(--hero-min-h);
  padding-block: var(--hero-y);
  overflow: hidden;
  border-top: 0;
}
.hero > * + * { margin-top: 0; }
.hero__copy, .hero__visual { position: relative; z-index: 1; min-width: 0; }
.hero h1 { margin: var(--space-5) 0 var(--space-7); }
.hero .lede { margin: 0; }
.hero .actions { margin-top: var(--space-9); }

/* GridBackdrop: one per page, hero only. */
.grid-backdrop {
  position: absolute;
  inset: 0;
  opacity: var(--grid-opacity);
  background-image: var(--grid-image);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: radial-gradient(circle at 82% 45%, black, transparent 48%);
  mask-image: radial-gradient(circle at 82% 45%, black, transparent 48%);
  transform: perspective(600px) rotateX(60deg) translateY(180px) scale(1.2);
  pointer-events: none;
}
.hero__diamond {
  position: absolute;
  top: 50%;
  right: -170px;
  width: 430px;
  height: 430px;
  margin-top: -215px;
  border: var(--border-w) solid var(--accent-a18);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ---------- 5  Section head, TOC ---------- */

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--gap-columns);
  margin-top: 42px;
}
.section-head h2 { font-size: var(--display-section); }
.section-head p {
  color: var(--text-muted);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}
.section-head--stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.section-head--stack p { max-width: 610px; }

.toc {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-w) solid var(--border-default);
}
.toc li { border-bottom: var(--border-w) solid var(--border-default); }
.toc a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  color: var(--text-body);
}
.toc__n {
  color: var(--text-meta);
  font: var(--mono-eyebrow);
  letter-spacing: var(--track-eyebrow);
}
.toc__t {
  font-size: var(--text-body-lg);
  line-height: 1.3;
  transition: color 0.15s linear;
}
.toc__d { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.toc a:hover .toc__t { color: var(--text-accent); }

/* ---------- 6  Tiles: meta strip, metrics, panels ---------- */

/* The grid is the card: one outer hairline, shared inner rules.
   The container draws top and left, every tile draws right and bottom. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0 solid var(--border-default);
  border-width: var(--border-w) 0 0 var(--border-w);
}
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.tiles > * {
  min-width: 0;
  border: 0 solid var(--border-default);
  border-width: 0 var(--border-w) var(--border-w) 0;
}

/* Meta strip: prepared for / prepared by / date. */
.meta { padding: var(--space-5) var(--space-6); }
.meta__v {
  margin-top: var(--space-3);
  color: var(--text-body);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

/* Metrics: numeral coloured by status, with a mono text label. */
.metric { padding: var(--space-8); }
.metric__value {
  display: block;
  color: var(--text-body);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric__label { margin-top: var(--space-5); }
.metric__note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.metric--danger .metric__value, .metric--critical .metric__value, .metric--high .metric__value { color: var(--status-danger); }
.metric--warning .metric__value, .metric--medium .metric__value { color: var(--status-warning); }
.metric--info .metric__value, .metric--low .metric__value, .metric--lead .metric__value { color: var(--status-info); }
.metric--success .metric__value, .metric--pass .metric__value { color: var(--status-success); }

/* Panel: hairline card, transparent fill, no shadow, no radius. */
.panel {
  min-width: 0;
  padding: var(--card-pad);
  border: var(--border-w) solid var(--border-default);
  background: transparent;
  position: relative;
}
.tiles > .panel { border-width: 0 var(--border-w) var(--border-w) 0; }
.panel--min { min-height: var(--panel-min-h); }

/* Open tile variant: the grid draws no rules — content floats on the surface. */
.tiles--open, .tiles--open > * { border-color: transparent; }

/* Typed terminal: when a script adds .terminal--typing, lines print in
   sequence (hard on/off, no fade). Without JS, or under reduced motion,
   the terminal renders complete. */
.terminal--typing .terminal__line,
.terminal--typing .terminal__status { opacity: 0; }
.terminal--typing .terminal__line.is-shown,
.terminal--typing .terminal__status.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .terminal--typing .terminal__line,
  .terminal--typing .terminal__status { opacity: 1; }
}

@media print {
  .terminal--typing .terminal__line,
  .terminal--typing .terminal__status { opacity: 1; }
}

/* Availability marker in the header meta: the live dot plus a mono label. */
.site-header__meta .avail { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-header__meta .avail .terminal__live { margin-right: 0; }

/* Credential badge: the issuer's own badge artwork (transparent PNG), sized
   by height so mixed badge shapes align on one baseline, centred in its panel. */
.credential__badge {
  display: block;
  height: 120px;
  width: auto;
  margin: 0 auto var(--space-5);
}
.panel > * + * { margin-top: var(--space-3); }
.panel__label {
  margin: 0 0 var(--space-9);
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.panel__label + * { margin-top: 0; }
.panel__icon { display: block; width: 28px; height: 28px; margin-bottom: var(--space-9); color: var(--text-body); }
.panel h3 { color: var(--text-body); }
.panel p {
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}
.panel ul { margin: 0; padding-left: var(--space-6); color: var(--text-muted); font-size: var(--text-md); line-height: var(--leading-tight); }
.panel li + li { margin-top: var(--space-1); }
/* Linked panel: colour swap on hover, no lift. */
a.panel { display: block; color: inherit; }
a.panel h3 { transition: color 0.15s linear; }
a.panel:hover h3 { color: var(--text-accent); }
.panel__go {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: color 0.15s linear;
}
.panel > .panel__go { margin-top: var(--space-7); }
a.panel:hover .panel__go { color: var(--text-accent); }

/* ---------- 7  Finding card, note, fields ---------- */

.finding {
  min-width: 0;
  padding: var(--card-pad);
  border: var(--border-w) solid var(--border-default);
  background: transparent;
}
/* Overlap the shared hairline; a card that starts a printed sheet keeps its own top rule. */
.finding + .finding { margin-top: -1px; }
.finding__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.finding__meta {
  margin: 0;
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.finding__title { color: var(--text-body); }

/* Label / value rows: Observed, Risk, Scope, Method. */
.fields { margin: var(--space-6) 0 0; padding: 0; }
.field {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: var(--border-w) solid var(--border-subtle);
}
.field > dt {
  margin: 0;
  padding-top: 3px;
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.field > dd {
  margin: 0;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}
.field > dd > * + * { margin-top: var(--space-3); }
.field > dd b, .field > dd strong { color: var(--text-body); }

/* Recommendation note: notice surface, mono label, no status bar. */
.note {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: var(--border-w) solid var(--border-subtle);
  background: var(--surface-notice);
}
.note > * + * { margin-top: var(--space-2); }
.note__label {
  margin: 0;
  color: var(--text-muted);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.note p:not(.note__label) {
  color: var(--text-body);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

/* Evidence line: mono, with links. */
.finding__evidence {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--border-subtle);
  color: var(--text-muted);
  font: var(--mono-footer);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.finding__evidence .mono-label { display: inline; margin-right: var(--space-2); }

/* ---------- 8  Alert ---------- */

/* Notice surface + 3px status bar + Lucide icon + title. The bar is the only colour. */
.alert {
  --tone: var(--status-success);
  display: flex;
  gap: 13px;
  padding: 15px;
  border-left: var(--border-w-accent) solid var(--tone);
  background: var(--surface-notice);
}
.alert--success { --tone: var(--status-success); }
.alert--warning { --tone: var(--status-warning); }
.alert--danger { --tone: var(--status-danger); }
.alert--info { --tone: var(--status-info); }
.alert + .alert { margin-top: 12px; }
.alert__icon { display: inline-flex; flex: none; width: 18px; color: var(--tone); }
.alert__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.alert__title { font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.4; }
.alert__body p {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* ---------- 9  Table ---------- */

.table-wrap {
  overflow-x: auto;
  border: var(--border-w) solid var(--border-default);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.table-wrap > .table { min-width: 600px; }
.table-wrap > .table--narrow { min-width: 0; }
/* Cue for a table that scrolls sideways: a mono label and icon under the wrapper, phones only.
   Add it after any .table-wrap that holds a wide table; leave it off a .table--narrow. */
.table-hint {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  line-height: 1.4;
  text-transform: uppercase;
}
.page > .table-wrap + .table-hint { margin-top: var(--space-2); }
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.table thead th {
  overflow-wrap: normal;
  color: var(--text-meta);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-bottom: var(--border-w) solid var(--border-strong);
}
.table tbody td, .table tbody th {
  border-top: var(--border-w) solid var(--border-default);
  color: var(--text-muted);
  font-weight: var(--weight-body);
}
.table tbody tr:first-child td, .table tbody tr:first-child th { border-top: 0; }
.table tbody th[scope="row"], .table td:first-child { color: var(--text-body); font-weight: var(--weight-medium); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table code { font-size: 11px; }

/* ---------- 10  Code, terminal ---------- */

code, kbd, samp, pre { font-family: var(--font-mono); }
code {
  padding: 0.08em 0.38em;
  border: var(--border-w) solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text-body);
  /* 0.88em of the surrounding copy, capped so a chip inside a lede or a heading stays under the 15px mono limit. */
  font-size: min(0.88em, 15px);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.code-block {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: var(--border-w) solid var(--border-default);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-size: var(--text-xs);
  line-height: 1.7;
  tab-size: 2;
  overflow-x: auto;
  white-space: pre;
}
.code-block code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  word-break: normal;
  overflow-wrap: normal;
}

/* Terminal: the brand's signature object and the one shadow in the system. */
.terminal {
  position: relative;
  isolation: isolate;
  background: var(--scrim-terminal);
  border: var(--border-w) solid var(--border-strong);
  box-shadow: var(--shadow-terminal);
  min-width: 0;
}
.terminal::before {
  content: "";
  position: absolute;
  inset: 13px -14px -14px 13px;
  border-right: var(--border-w) solid var(--accent-a30);
  border-bottom: var(--border-w) solid var(--accent-a30);
  z-index: -1;
  pointer-events: none;
}
.terminal--flush::before { display: none; }
.terminal__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 48px;
  padding: 0 17px;
  border-bottom: var(--border-w) solid var(--border-default);
  color: var(--text-meta);
}
.terminal__dots { display: flex; gap: 7px; }
.terminal__dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--gray-600);
}
.terminal__host {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-meta);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-terminal);
}
.terminal__icon { display: inline-flex; justify-self: end; width: 15px; }
.terminal__body {
  min-height: 265px;
  padding: 28px 27px 33px;
  color: var(--mist-200);
  font: var(--mono-terminal);
  overflow-x: auto;
}
.terminal__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  white-space: nowrap;
}
.terminal__no { flex: none; margin-right: var(--space-2); color: var(--text-meta); }
.terminal__status {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 14px 18px;
  border-top: var(--border-w) solid var(--border-default);
  color: var(--text-meta);
  font: var(--mono-status);
  letter-spacing: var(--track-status);
  text-transform: uppercase;
}
.terminal__live {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--glow-accent);
}
/* Dense: evidence output that must wrap and read like a log. */
.terminal--dense .terminal__body {
  min-height: 0;
  padding: var(--space-6) var(--space-7);
  font-size: var(--text-xs);
  line-height: 1.75;
}
.terminal--dense .terminal__line {
  align-items: baseline;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.terminal--dense .terminal__line > :last-child { min-width: 0; }
.t-prompt { color: var(--accent); font-weight: var(--weight-bold); }
.t-path { color: var(--info); }
.t-dim { color: var(--text-muted); }
.t-ok { color: var(--status-success); }
.t-warn { color: var(--status-warning); }
.t-err { color: var(--status-danger); }
.t-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: var(--space-1);
  background: var(--accent);
}

/* ---------- 11  Tag, buttons, text link ---------- */

/* Square mono label. Colour carries severity, the text always names it. */
.tag {
  --tone: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 8px;
  border: var(--border-w) solid var(--tone);
  color: var(--tone);
  font: var(--mono-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--danger, .tag--critical, .tag--high { --tone: var(--status-danger); }
.tag--warning, .tag--medium { --tone: var(--status-warning); }
.tag--info, .tag--low, .tag--lead { --tone: var(--status-info); }
.tag--success, .tag--pass { --tone: var(--status-success); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-heavy);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
}
/* The solid accent outline carries focus contrast; the offset keeps it clear of the
   primary fill, where a border swap alone is invisible. */
.btn:focus-visible { border-color: var(--border-accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--text-on-accent); }
.btn--secondary { background: var(--action-secondary); border-color: var(--border-control); color: var(--text-body); }
.btn--secondary:hover { border-color: var(--border-accent); color: var(--text-body); }
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { color: var(--text-accent); }
.btn--small { height: var(--control-h-sm); padding: 0 var(--control-pad-x-sm); font-size: var(--text-xs); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  transition: color 0.15s linear;
}
/* Decorative arrows degrade to no content, not a phantom gap, where the
   alternative-text syntax is unsupported. */
.text-link::after { content: "\2198"; content: "\2198" / ""; }
.text-link--out::after { content: "\2197"; content: "\2197" / ""; }
.text-link:hover { color: var(--text-accent); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--gap-actions); }

/* ---------- 12  Utilities ---------- */

.muted { color: var(--text-muted); }
.small { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--space-5); }
.keep-together { break-inside: avoid; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.print-only { display: none; }

/* Skip to content: hidden until focused, then a raised chip at the top-left corner. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 80;
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border-accent);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

/* A skip-target container takes programmatic focus without a visible ring. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- 13  Responsive ---------- */

/* Wrapped labels. The mono tokens set line-height 1, which collides once a label wraps. */
.mono-label, .eyebrow, .kicker, .panel__label, .finding__meta, .note__label,
.field > dt, .table thead th, .terminal__status { line-height: 1.4; }

/* From 981px to 1100px the lockup, a five-link nav and the meta labels need about 1024px
   side by side, so the meta yields to the nav. Under 981px the nav is hidden and the meta returns. */
@media screen and (min-width: 981px) and (max-width: 1100px) {
  .site-nav ~ .site-header__meta { display: none; }
}

@media screen and (max-width: 980px) {
  :root { --gutter: var(--gutter-mobile); }

  .page { padding-block: var(--section-y-mobile); }
  .site-header { height: var(--header-h-mobile); }
  .site-nav { display: none; }
  .site-nav ~ .site-header__meta { margin-left: auto; }

  .cover, .hero { min-height: 0; padding-block: var(--space-12); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .hero__diamond { right: -260px; }

  .section-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

  .tiles--3, .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--3 > :last-child:nth-child(odd),
  .tiles--4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .panel__label { margin-bottom: var(--space-7); }
}

@media screen and (max-width: 600px) {
  .brand-lock { gap: 11px; }
  .brand-mark { width: 22px; height: 22px; }
  .brand-word { font-size: var(--text-2xs); }
  .site-header__meta { display: none; }

  .tiles:not(.metrics) { grid-template-columns: minmax(0, 1fr); }
  .tiles:not(.metrics) > :last-child:nth-child(odd) { grid-column: auto; }
  .metric, .meta, .panel, .finding { padding: var(--space-5); }
  .panel--min { min-height: 0; }
  .metric__value { font-size: 40px; }

  .field { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .field > dt { padding-top: 0; }

  .toc a { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
  .toc__d { grid-column: 2; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .site-footer__tag, .site-footer__meta { text-align: left; }

  .terminal__body { padding: var(--space-6) var(--space-5); }
  .terminal--dense .terminal__body { padding: var(--space-5); }
  /* A command line wraps instead of clipping at phone width. */
  .terminal__line { align-items: baseline; white-space: pre-wrap; overflow-wrap: anywhere; }
  .terminal__line > :last-child { min-width: 0; }
  /* A table that scrolls inside its wrapper gets a visible cue (see .table-hint). */
  .table-hint { display: flex; }
  .actions { gap: var(--space-4) var(--space-7); }
  .cover .meta-strip { margin-top: var(--space-10); }
  /* A long button label (an email address) wraps instead of overflowing the viewport. */
  .btn { white-space: normal; }
  /* Display floors drop once: two-line headlines stay two lines at phone width. */
  h1 { font-size: 42px; }
  .display--cta { font-size: 42px; }
}

@media screen and (max-width: 360px) {
  /* The small footer lockup outranks the bare wordmark rule; both drop together. */
  .brand-word, .brand-lock--sm .brand-word { font-size: 10px; }
}

/* ---------- 14  Print ---------- */

@page { size: A4; margin: 0; }

/* >>> PRINT-LIGHT: generated by build_style.py --sync from the light theme in siddicky-tokens.css */
@media print {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --accent: #1f4fff;
    --accent-bright: #1a3fd6;
    --accent-ink: #8aa6ff;
    --success: #0f7b4b;
    --space: #f6f5f1;
    --base: #ffffff;
    --raised: #ebe9e3;
    --sunken: #efede7;
    --line: #d9d6ce;
    --steel: #4e5561;
    --cloud: #15171c;
    --signal: #c8243b;
    --amber: #9a5b00;
    --info: #1f6fb2;
    --ink-900: #f6f5f1;
    --ink-800: #efede7;
    --ink-700: #ffffff;
    --ink-600: #f0eee8;
    --ink-500: #ebe9e3;
    --ink-400: #e2dfd8;
    --ink-300: #d9d6ce;
    --ink-200: #8f8b82;
    --ink-100: #837f76;
    --gray-600: #c9c5bc;
    --gray-500: #686e79;
    --gray-400: #5d636e;
    --gray-300: #5a606b;
    --gray-200: #555b66;
    --gray-100: #4e5561;
    --mist-300: #4e5561;
    --mist-200: #2a2e37;
    --mist-100: #3b404c;
    --accent-a10: #1f4fff1f;
    --accent-a18: #1f4fff2e;
    --accent-a25: #1f4fff40;
    --accent-a30: #1f4fff4d;
    --steel-a12: #15171c1f;
    --steel-a14: #15171c24;
    --scrim-header: #f6f5f1ed;
    --scrim-terminal: #fffffff2;
    --surface-page: #f6f5f1;
    --surface-section: #ffffff;
    --surface-sunken: #efede7;
    --surface-raised: #ebe9e3;
    --surface-card: #ffffff;
    --surface-light: #15171c;
    --surface-input: #ffffff;
    --surface-notice: #f0eee8;
    --text-body: #15171c;
    --text-muted: #4e5561;
    --text-meta: #5d636e;
    --text-faint: #686e79;
    --text-accent: #1f4fff;
    --text-on-accent: #ffffff;
    --text-on-light: #ffffff;
    --text-muted-on-light: #a3a9b6;
    --border-subtle: #15171c1f;
    --border-default: #d9d6ce;
    --border-strong: #8f8b82;
    --border-control: #837f76;
    --border-light: #3b404c;
    --border-accent: #1f4fff;
    --action-primary: #1f4fff;
    --action-primary-hover: #1a3fd6;
    --action-secondary: #ebe9e3;
    --focus-ring: #1f4fff40;
    --status-success: #0f7b4b;
    --status-warning: #9a5b00;
    --status-danger: #c8243b;
    --status-info: #1f6fb2;
    --shadow-terminal: 0 18px 50px #15171c26;
  }
}
/* <<< PRINT-LIGHT */

/* Sheet model. @page margin is 0, so each .page pads itself (15mm by 16mm).
   The cover owns the first sheet. Every other .page flows: a section that fits on a sheet is
   kept whole and moves to the next sheet when it would not fit, so short sections share a sheet
   and none prints as a stub. A section longer than a sheet continues with the same padding.
   Add .page--break to force a section onto a fresh sheet.
   Type floors: 12px body, 11px for card and table copy, 9.5px for the smallest mono. */
@media print {
  html, body { background: var(--surface-page); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { font-size: 12px; line-height: 1.55; }

  .site-header, .no-print, .table-hint { display: none !important; }
  .print-only { display: revert; }
  .grid-backdrop, .hero__diamond { display: none; }

  .page {
    padding: 14mm 16mm;
    border: 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .page--break { break-before: page; page-break-before: always; }
  .page > * + * { margin-top: var(--space-5); }
  .page > .kicker + .section-head { margin-top: var(--space-4); }
  .page > .section-head + * { margin-top: var(--space-6); }
  .page > h3 + * { margin-top: var(--space-3); }
  .page:first-of-type, .page--first { break-before: auto; page-break-before: auto; }
  /* A partial band would stop mid-sheet, so sections print on the page surface. */
  .page--section, .page--sunken { background: transparent; }
  /* The inverted band returns to the light palette on paper. */
  .page--invert {
    background: transparent;
    color: var(--cloud);
    --text-body: var(--cloud);
    --text-muted: var(--steel);
    --text-meta: var(--gray-400);
    --border-default: var(--line);
    --border-strong: var(--ink-200);
    --border-subtle: var(--steel-a12);
    --accent: var(--action-primary);
    --text-accent: var(--action-primary);
    --surface-notice: var(--ink-600);
    --surface-sunken: var(--ink-800);
    --action-secondary: var(--ink-500);
  }

  .cover {
    min-height: 296mm;
    justify-content: space-between;
    padding: 16mm;
    break-after: page;
    page-break-after: always;
  }
  .cover > * + * { margin-top: 0; }
  .cover__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-12);
  }
  .cover__bar .brand-lock { color: var(--cloud); }
  .cover h1 { font-size: 58px; max-width: none; margin-bottom: var(--space-6); }
  .cover .lede { font-size: 13.5px; max-width: 540px; }
  .cover .meta-strip { margin-top: var(--space-10); max-width: none; }
  .cover__main { margin-block: auto; }

  .lede { font-size: 13.5px; }

  h2 { font-size: 30px; }
  h3 { font-size: 15px; }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .section-head h2 { font-size: 30px; }
  .section-head p { font-size: 12px; max-width: 540px; }
  .prose { max-width: none; }
  .prose > * + * { margin-top: var(--space-3); }

  .meta { padding: var(--space-4) var(--space-5); }
  .meta__v { font-size: 12px; }
  .metric { padding: var(--space-4) var(--space-5); }
  .metric__value { font-size: 34px; }
  .metric__label { margin-top: var(--space-3); }
  .panel { padding: var(--space-4) var(--space-5); }
  .panel__label { margin-bottom: var(--space-4); }
  .panel__icon { margin-bottom: var(--space-5); }
  .panel p, .panel ul { font-size: 11.5px; line-height: 1.5; }
  .panel > .panel__go, .panel__go { margin-top: var(--space-4); }

  .finding { padding: var(--space-5) var(--space-6); }
  .finding__head { margin-bottom: var(--space-3); }
  .finding__title { font-size: 16px; }
  .fields { margin-top: var(--space-4); }
  .field { grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; }
  .field > dd { font-size: 11.5px; line-height: 1.5; }
  .note { margin-top: var(--space-4); padding: var(--space-3) var(--space-5); }
  .note p:not(.note__label) { font-size: 11.5px; line-height: 1.5; }
  .finding__evidence { margin-top: var(--space-4); padding-top: var(--space-3); font-size: 10.5px; }

  .alert { padding: var(--space-4); }
  .alert__title, .alert__body p { font-size: 11.5px; }

  .toc a { padding: var(--space-2) 0; }
  .toc__t { font-size: 12.5px; }
  .toc__d { font-size: 11.5px; }
  .rows > li { font-size: 11.5px; padding: var(--space-3) 0; }

  .table-wrap { overflow: visible; }
  .table-wrap > .table { min-width: 0; }
  .table { font-size: 11px; }
  .table th, .table td { padding: var(--space-2) var(--space-3); }
  .table code { font-size: 10px; }
  code { font-size: min(0.9em, 15px); }
  .code-block { font-size: 10.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

  .terminal { margin-right: 14px; margin-bottom: 14px; box-shadow: none; }
  .hero, .cover { min-height: 0; }
  .terminal__bar { height: 36px; }
  .terminal__body { min-height: 0; padding: var(--space-5) var(--space-6); font-size: 11px; line-height: 1.7; overflow: visible; }
  .terminal__line { white-space: pre-wrap; overflow-wrap: anywhere; align-items: baseline; }
  .terminal__status { padding: var(--space-3) var(--space-5); font-size: 9.5px; }
  .terminal__live { box-shadow: none; }
  .t-cursor, .brand-cursor { animation: none; }

  .site-footer {
    break-inside: avoid;
    padding: var(--space-5) 16mm;
    font-size: 9.5px;
  }
  .site-footer .brand-word { font-size: 9.5px; }

  /* Keep cards, findings, notes, terminals and table rows whole; keep headings with their content. */
  .finding, .panel, .metric, .meta, .alert, .note, .terminal, .code-block, .field,
  .table tr, .toc li, .rows > li { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, .kicker, .section-head, .panel__label, .finding__head { break-after: avoid; page-break-after: avoid; }
  .section-head { break-inside: avoid; page-break-inside: avoid; }
  .table thead { display: table-header-group; }
  p:has(+ .code-block), p:has(+ .table-wrap), p:has(+ .terminal), p:has(+ .tiles) { break-after: avoid; page-break-after: avoid; }
  .tiles > * { break-inside: avoid; }
  /* The grid is the card: a tile grid moves to the next sheet whole, so its top rule never strands. */
  .tiles { break-inside: avoid; page-break-inside: avoid; }
  /* A table split across sheets closes its frame on each sheet. */
  .table-wrap { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}