@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}
/*
 * Rail design system — tokens.
 *
 * Every colour token is a light-dark() pair. The pair resolves against the
 * *using* element's color-scheme, so a subtree can be pinned to one theme with
 * .rl-scheme-light / .rl-scheme-dark (the /design page renders both side by side).
 *
 * Theme selection: prefers-color-scheme by default; html[data-theme=light|dark]
 * overrides it (set by the theme toggle, persisted in localStorage 'rail.theme').
 *
 * Contrast: every *-fg on its *-bg, and every text token on --surface / --bg, is
 * WCAG AA (>= 4.5:1) in both themes. Solid ramp fills (--rung-N, --disc-*) are
 * graphical marks (>= 3:1 against the surface), never the only carrier of meaning.
 */

:root {
  color-scheme: light dark;
}
:root[data-theme='light'],
.rl-scheme-light {
  color-scheme: light;
}
:root[data-theme='dark'],
.rl-scheme-dark {
  color-scheme: dark;
}

:root {
  /* ---------- type ---------- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs: 0.75rem; /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.875rem; /* 14 — body */
  --fs-lg: 1rem; /* 16 */
  --fs-xl: 1.25rem; /* 20 */
  --fs-2xl: 1.625rem; /* 26 */
  --fs-3xl: 2.125rem; /* 34 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-label: 0.06em;

  /* ---------- space (4px grid) ---------- */
  --sp-0: 0;
  --sp-px: 1px;
  --sp-0h: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- radii ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  /* ---------- sizing ---------- */
  --control-h-sm: 26px;
  --control-h-md: 32px;
  --control-h-lg: 40px;
  --nav-w: 232px;
  --topbar-h: 52px;
  --content-max: 1440px;

  /* ---------- motion ---------- */
  --dur-fast: 90ms;
  --dur-med: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- neutrals ---------- */
  --bg: light-dark(#eef0ed, #0b1015);
  --surface: light-dark(#ffffff, #121a21);
  --surface-2: light-dark(#f7f8f6, #18222b);
  --surface-sunken: light-dark(#e7eae6, #0e141a);
  --surface-inverse: light-dark(#17202a, #e4e9ed);
  --border: light-dark(#d3d8d4, #26323c);
  --border-strong: light-dark(#a9b1ac, #3a4954);
  --divider: light-dark(#e3e6e2, #1f2a33);

  --text: light-dark(#121920, #e4e9ed);
  --text-muted: light-dark(#475259, #a3afb8);
  --text-faint: light-dark(#5f6a71, #85929c);
  --text-inverse: light-dark(#f4f6f4, #121920);

  /* interactive accent: signal blue */
  --accent: light-dark(#1d5c8a, #6fb0e0);
  --accent-hover: light-dark(#174b72, #8cc2ea);
  --accent-fg: light-dark(#ffffff, #071521);
  --accent-subtle: light-dark(#e2edf5, #13283a);
  --accent-text: light-dark(#1b5682, #86bfe8);

  --focus-ring-color: light-dark(#1f6fd1, #7cc0ff);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring-color);

  /* ---------- elevation ---------- */
  --shadow-1: 0 1px 0 light-dark(rgb(16 24 32 / 0.04), rgb(0 0 0 / 0.3)),
    0 1px 2px light-dark(rgb(16 24 32 / 0.06), rgb(0 0 0 / 0.35));
  --shadow-2: 0 2px 4px light-dark(rgb(16 24 32 / 0.06), rgb(0 0 0 / 0.35)),
    0 8px 24px light-dark(rgb(16 24 32 / 0.1), rgb(0 0 0 / 0.5));
  --shadow-3: 0 12px 48px light-dark(rgb(16 24 32 / 0.18), rgb(0 0 0 / 0.6));
  --scrim: light-dark(rgb(18 25 32 / 0.45), rgb(0 0 0 / 0.6));

  /* ---------- band (good / warning / risk / critical / none) ---------- */
  --band-good-fg: light-dark(#17633a, #7ed29b);
  --band-good-bg: light-dark(#e2f2e8, #0f2619);
  --band-good-border: light-dark(#a6d3b6, #22553a);
  --band-good-solid: light-dark(#2a8a52, #3fae6c);

  --band-warning-fg: light-dark(#6e4b00, #f0c35c);
  --band-warning-bg: light-dark(#faefd3, #2a2210);
  --band-warning-border: light-dark(#e3c678, #5a4718);
  --band-warning-solid: light-dark(#c4901f, #d6a43a);

  --band-risk-fg: light-dark(#a1251b, #ff9b8f);
  --band-risk-bg: light-dark(#fbe5e2, #321410);
  --band-risk-border: light-dark(#ecaea6, #6b2b22);
  --band-risk-solid: light-dark(#c73a2d, #e5594a);

  --band-critical-fg: light-dark(#ffffff, #ffffff);
  --band-critical-bg: light-dark(#9b1b12, #b8261a);
  --band-critical-border: light-dark(#7e140d, #e5594a);
  --band-critical-solid: light-dark(#9b1b12, #e5594a);

  --band-none-fg: light-dark(#475259, #a3afb8);
  --band-none-bg: light-dark(#eceeeb, #1b252e);
  --band-none-border: light-dark(#cdd2ce, #2f3c46);
  --band-none-solid: light-dark(#8b959b, #5c6a74);

  /* ---------- severity (none..critical) ---------- */
  --sev-none-fg: var(--band-none-fg);
  --sev-none-bg: var(--band-none-bg);
  --sev-none-border: var(--band-none-border);
  --sev-none-solid: var(--band-none-solid);

  --sev-low-fg: light-dark(#24557a, #8fc0e6);
  --sev-low-bg: light-dark(#e3edf5, #132636);
  --sev-low-border: light-dark(#a9c6dd, #284a66);
  --sev-low-solid: light-dark(#4f84ad, #5d95c2);

  --sev-medium-fg: var(--band-warning-fg);
  --sev-medium-bg: var(--band-warning-bg);
  --sev-medium-border: var(--band-warning-border);
  --sev-medium-solid: var(--band-warning-solid);

  --sev-high-fg: light-dark(#9a3a0b, #ffab78);
  --sev-high-bg: light-dark(#fde8dc, #331b0e);
  --sev-high-border: light-dark(#efb795, #6e3a1c);
  --sev-high-solid: light-dark(#d2622a, #ec7d3f);

  --sev-critical-fg: var(--band-critical-fg);
  --sev-critical-bg: var(--band-critical-bg);
  --sev-critical-border: var(--band-critical-border);
  --sev-critical-solid: var(--band-critical-solid);

  /* ---------- rung ladder R0..R5: sequential, quiet → alarming ---------- */
  --rung-0: light-dark(#a3acb1, #4d5a63);
  --rung-1: light-dark(#6c90ab, #4f7ea3);
  --rung-2: light-dark(#c99a33, #c99a3a);
  --rung-3: light-dark(#d86c2c, #e07a3a);
  --rung-4: light-dark(#c3342a, #e4483a);
  --rung-5: light-dark(#7a1036, #d0347a);

  --rung-0-fg: light-dark(#3f4a51, #b1bcc4);
  --rung-0-bg: light-dark(#eef0ee, #1a242c);
  --rung-1-fg: light-dark(#28506c, #9cc4e4);
  --rung-1-bg: light-dark(#e4edf3, #14263a);
  --rung-2-fg: light-dark(#6b4900, #f0c66e);
  --rung-2-bg: light-dark(#f8eed6, #2b2211);
  --rung-3-fg: light-dark(#8a380a, #f9a771);
  --rung-3-bg: light-dark(#fbe6d8, #33190b);
  --rung-4-fg: light-dark(#ffffff, #ffffff);
  --rung-4-bg: light-dark(#b02c23, #b8261a);
  --rung-5-fg: light-dark(#ffffff, #ffffff);
  --rung-5-bg: light-dark(#6a0d2f, #8f1d52);

  /* ---------- discipline accents (categorical) ---------- */
  --disc-safety: light-dark(#a8501c, #f0935a);
  --disc-reliability: light-dark(#1d6c7c, #5ec4d6);
  --disc-security: light-dark(#5544a8, #a698f0);
  --disc-compliance: light-dark(#255f9f, #78aef0);
  --disc-governance: light-dark(#5f6420, #c4c66a);
  --disc-risk: light-dark(#9a2b64, #ef8fc0);
  --disc-hazop: light-dark(#2f6f33, #84cf86);

  /* ---------- hazop cell states ---------- */
  --hz-covered-bg: var(--band-good-bg);
  --hz-covered-fg: var(--band-good-fg);
  --hz-covered-border: var(--band-good-border);
  --hz-waived-bg: var(--band-warning-bg);
  --hz-waived-fg: var(--band-warning-fg);
  --hz-waived-border: var(--band-warning-border);
  --hz-uncovered-bg: var(--band-risk-bg);
  --hz-uncovered-fg: var(--band-risk-fg);
  --hz-uncovered-border: var(--band-risk-border);
  --hz-oos-bg: var(--surface-sunken);
  --hz-oos-fg: var(--text-faint);
  --hz-oos-border: var(--border);
}

/*
 * ARC site — marketing layer on the Rail design system.
 * tokens.css (copied verbatim from railconsole/src/design) is prepended at build.
 * Layout idea: an instrument-panel editorial — condensed display type on a 12-col grid,
 * the six-rung ladder as the brand's single loud mark, everything else quiet.
 */
:root {
  --fs-4xl: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
  --fs-5xl: clamp(2.9rem, 1.6rem + 4.8vw, 5.75rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --page-max: 1200px;
  --prose-max: 68ch;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 112px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
code, kbd, .mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ── the rail: six rungs, the brand mark ─────────────────────────────── */
.rail { display: grid; grid-template-columns: repeat(6, 1fr); height: 6px; }
.rail span:nth-child(1) { background: var(--rung-0); }
.rail span:nth-child(2) { background: var(--rung-1); }
.rail span:nth-child(3) { background: var(--rung-2); }
.rail span:nth-child(4) { background: var(--rung-3); }
.rail span:nth-child(5) { background: var(--rung-4); }
.rail span:nth-child(6) { background: var(--rung-5); }

/* ── header ──────────────────────────────────────────────────────────── */
.site-head { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-head .wrap { display: flex; align-items: center; gap: var(--sp-6); min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand svg { flex: none; }
.brand b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.01em; }
.brand small { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.site-nav { display: flex; gap: var(--sp-5); margin-left: auto; flex-wrap: wrap; align-items: center; }
.site-nav a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--text); }
.site-nav a.btn-primary, .site-nav a.btn-primary:hover { color: var(--accent-fg); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-2);
  font: var(--fw-semibold) var(--fs-md)/1 var(--font-sans); text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }
.btn-sm { min-height: 36px; padding: 0 14px; }

/* ── type helpers ────────────────────────────────────────────────────── */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); max-width: 60ch; }
.h-xl { font-size: var(--fs-5xl); line-height: 0.98; letter-spacing: -0.025em; }
.h-lg { font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: -0.02em; }
.h-md { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.h-sm { font-size: var(--fs-xl); line-height: var(--lh-snug); }
.muted { color: var(--text-muted); }

/* ── chips (from the console) ────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-1); border: 1px solid;
  font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.b-good { color: var(--band-good-fg); background: var(--band-good-bg); border-color: var(--band-good-border); }
.b-warning { color: var(--band-warning-fg); background: var(--band-warning-bg); border-color: var(--band-warning-border); }
.b-risk { color: var(--band-risk-fg); background: var(--band-risk-bg); border-color: var(--band-risk-border); }
.b-critical { color: var(--band-critical-fg); background: var(--band-critical-bg); border-color: var(--band-critical-border); }
.b-none { color: var(--band-none-fg); background: var(--band-none-bg); border-color: var(--band-none-border); }
.s-high { color: var(--sev-high-fg); background: var(--sev-high-bg); border-color: var(--sev-high-border); }
.s-medium { color: var(--sev-medium-fg); background: var(--sev-medium-bg); border-color: var(--sev-medium-border); }
.r0 { color: var(--rung-0-fg); background: var(--rung-0-bg); border-color: var(--rung-0); }
.r1 { color: var(--rung-1-fg); background: var(--rung-1-bg); border-color: var(--rung-1); }
.r2 { color: var(--rung-2-fg); background: var(--rung-2-bg); border-color: var(--rung-2); }
.r3 { color: var(--rung-3-fg); background: var(--rung-3-bg); border-color: var(--rung-3); }
.r4 { color: var(--rung-4-fg); background: var(--rung-4-bg); border-color: var(--rung-4); }
.r5 { color: var(--rung-5-fg); background: var(--rung-5-bg); border-color: var(--rung-5); }

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding-block: var(--section-y); border-top: 1px solid var(--border); }
.section-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8) var(--sp-12); align-items: end; margin-bottom: var(--sp-12); }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-1); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 16px; border-bottom: 1px solid var(--divider); }

/* ── footer ──────────────────────────────────────────────────────────── */
.site-foot { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--sp-16) var(--sp-10); }
.site-foot a { color: var(--text-inverse); opacity: 0.82; text-decoration: none; }
.site-foot a:hover { opacity: 1; color: var(--text-inverse); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--sp-10); }
.foot-grid h4 { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 500; opacity: 0.7; margin-bottom: var(--sp-3); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-md); }
.foot-tag { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.15; max-width: 22ch; margin-top: var(--sp-4); }
.foot-base { margin-top: var(--sp-12); padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--text-inverse) 18%, transparent);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); opacity: 0.75; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ── review banner (design-approval builds only) ─────────────────────── */
.review { background: var(--accent-subtle); color: var(--accent-text); font-size: var(--fs-sm); }
.review .wrap { display: flex; gap: var(--sp-3); align-items: center; min-height: 36px; flex-wrap: wrap; }
.review b { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ── blog ────────────────────────────────────────────────────────────── */
.post-head { padding-block: var(--sp-16) var(--sp-10); }
.post-head .wrap { max-width: 900px; }
.post-meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--text-muted); }
.post-meta .sep { width: 1px; height: 14px; background: var(--border-strong); }
.prose { max-width: var(--prose-max); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--sp-16); font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-2xl); line-height: 1.2; margin-top: 2.2em; }
.prose h3 { font-size: var(--fs-xl); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--rung-2); font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.35; color: var(--text); }
.prose code { font-size: 0.88em; background: var(--surface-sunken); padding: 1px 5px; border-radius: var(--r-1); }
.prose pre { background: var(--surface-inverse); color: var(--text-inverse); padding: 18px 20px; border-radius: var(--r-3); overflow-x: auto; font-size: 0.86rem; line-height: 1.6; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); line-height: 1.45; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.prose th { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); font-weight: 500; background: var(--surface-2); }
.prose tr:last-child td { border-bottom: 0; }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 8px; }
.callout { border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface); padding: 14px 18px; border-radius: var(--r-2); font-size: var(--fs-md); }
.post-foot { border-top: 1px solid var(--border); padding-block: var(--sp-12); }
.post-foot .wrap { max-width: 900px; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; }
@media (max-width: 640px) { .post-foot .wrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── page-level classes (no inline styles, strict CSP) ───────────────── */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--surface); color: var(--text); padding: 8px 12px; border-radius: var(--r-2); }
.skip:focus { left: 8px; }
.post-title { margin-top: 14px; }
.post-dek { margin-top: 20px; }
.next-title { margin-top: 6px; }
.foot-brand, .foot-brand:hover { color: var(--text-inverse); }
.blog-index { padding-block: var(--sp-16); }
.blog-title { margin-top: 14px; max-width: 16ch; }
.blog-lead { margin-top: 20px; }
.post-list { list-style: none; margin: var(--sp-12) 0 0; padding: 0; border-top: 1px solid var(--border); }
.post-row { display: grid; grid-template-columns: 150px 1fr 60px; gap: var(--sp-6); padding: var(--sp-6) 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.post-row a { color: var(--text); text-decoration: none; }
.post-row a:hover { color: var(--accent-text); text-decoration: underline; }
.post-row-dek { margin-top: 6px; font-size: var(--fs-md); }
.post-row-min { font-size: var(--fs-xs); }
@media (max-width: 700px) { .post-row { grid-template-columns: 1fr; gap: var(--sp-2); } }
.intake { display: grid; gap: 10px; align-content: center; border: 1px solid color-mix(in srgb, var(--text-inverse) 25%, transparent); border-radius: var(--r-3); padding: 28px; }
.notfound { padding-block: var(--sp-16) 120px; }
.notfound h1 { margin-top: 14px; }
.notfound .lead { margin-top: 18px; }
.cta-404 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }