/* brand-page.css — shared styling for the standalone static pages (404, privacy,
   terms). Mirrors brand-v4 tokens + the self-hosted font faces from index.html so
   these pages match the holding page without re-inlining the whole block. Linked
   same-origin, so it passes the site's default-src 'self' CSP. */

:root {
  --cathodos-ink:#0E1F2D; --cathodos-ink-soft:#1B2D3F; --cathodos-ink-deep:#06141F;
  --cathodos-paper:#F4EFE6; --cathodos-paper-bright:#FBF8F2;
  --cathodos-copper:#B26B3F; --cathodos-copper-deep:#8E4F2A; --cathodos-copper-bright:#E89455;
  --cathodos-steel:#6B7785; --cathodos-steel-mid:#8C95A3; --cathodos-steel-light:#B8BFC7;
  --cathodos-rust:#C8412B;
  --cathodos-rule:rgba(251,248,242,0.12); --cathodos-rule-mid:rgba(251,248,242,0.22);
  --cathodos-font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --cathodos-font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cathodos-font-mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  --cathodos-ease-standard:cubic-bezier(0.16,1,0.3,1);
}

@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:300; font-display:swap; src:url(/fonts/ibm-plex-sans-300-normal-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/ibm-plex-sans-400-normal-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:300; font-display:swap; src:url(/fonts/newsreader-300-normal-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap; src:url(/fonts/newsreader-400-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background:var(--cathodos-ink-deep); color:var(--cathodos-paper-bright);
  font-family:var(--cathodos-font-body); font-weight:300; line-height:1.62;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
.mono { font-family:var(--cathodos-font-mono); }
.display { font-family:var(--cathodos-font-display); }
::selection { background:var(--cathodos-copper); color:var(--cathodos-ink-deep); }

a { color:var(--cathodos-copper-bright); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }

/* top bar with the wordmark */
header.page-top { padding:28px 40px; border-bottom:1px solid var(--cathodos-rule); }
.wordmark { font-family:var(--cathodos-font-display); font-size:23px; letter-spacing:-0.02em; }
.wordmark b { font-weight:700; color:var(--cathodos-paper-bright); }
.wordmark i { font-weight:500; font-style:italic; color:var(--cathodos-copper-bright); }

/* centered 404 stage */
main.stage { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px 80px; }
.code { font-family:var(--cathodos-font-mono); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cathodos-copper-bright); margin-bottom:18px; }
.stage h1 { font-family:var(--cathodos-font-display); font-weight:300; font-size:clamp(32px,5vw,56px); line-height:1.08; letter-spacing:-0.02em; margin-bottom:18px; }
.stage p { max-width:460px; color:var(--cathodos-steel-light); margin-bottom:30px; }
.btn { font-family:var(--cathodos-font-mono); font-size:12.5px; letter-spacing:0.04em; padding:12px 22px; background:var(--cathodos-copper); color:var(--cathodos-ink-deep); display:inline-block; transition:background .3s var(--cathodos-ease-standard); }
.btn:hover { background:var(--cathodos-copper-bright); text-decoration:none; }

/* 404 schematic + readout */
.stage-404 .diagram-404 { width:100%; max-width:500px; height:auto; margin:6px 0 26px; }
.diagram-404 .svg-lbl { font-family:var(--cathodos-font-mono); font-size:9px; fill:var(--cathodos-steel); letter-spacing:0.03em; }
.diagram-404 .svg-lbl-miss { font-family:var(--cathodos-font-mono); font-size:9px; fill:var(--cathodos-rust); letter-spacing:0.03em; }
.diagram-404 .svg-q { font-family:var(--cathodos-font-mono); font-size:17px; font-weight:500; fill:var(--cathodos-rust); }
.stage p.req { font-size:12px; color:var(--cathodos-steel); margin:-6px 0 30px; letter-spacing:0.02em; }
.stage p.req #req-path { color:var(--cathodos-copper-bright); }
.actions { display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:center; }
a.subtle { color:var(--cathodos-steel); font-size:11.5px; }
a.subtle:hover { color:var(--cathodos-copper-bright); }

/* legal prose layout */
main.prose { flex:1 1 auto; width:100%; max-width:760px; margin:0 auto; padding:56px 32px 96px; }
.prose .code { text-align:left; }
.prose h1 { font-family:var(--cathodos-font-display); font-weight:300; font-size:clamp(30px,4vw,44px); letter-spacing:-0.02em; margin-bottom:10px; }
.prose .updated { font-family:var(--cathodos-font-mono); font-size:11.5px; color:var(--cathodos-steel); margin-bottom:32px; }
.prose h2 { font-family:var(--cathodos-font-display); font-weight:400; font-size:21px; margin:34px 0 12px; }
.prose p, .prose li { color:var(--cathodos-steel-light); font-size:15px; margin-bottom:12px; }
.prose ul { padding-left:22px; margin-bottom:12px; }

/* shared foot */
footer.page-foot { padding:24px 40px; border-top:1px solid var(--cathodos-rule); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer.page-foot span, footer.page-foot a { font-family:var(--cathodos-font-mono); font-size:11px; color:var(--cathodos-steel); }