/* norviq.dev/blog and /404 — shared styling.
   Tokens, nav chrome and footer are copied verbatim from index.html so the blog is the same site,
   not a lookalike. If index.html's palette changes, change it here too — there is no build step to
   share them automatically.
   Same-origin only: no external fonts, no CDN, nothing third-party. */

:root{
  --ink:#F4F7F5; --surface:#FFFFFF; --surface-2:#EEF3F0; --surface-3:#E4EBE7;
  --line:#DCE5E0; --line-strong:#C6D2CC;
  --text:#0A110E; --text-dim:#48564F; --text-faint:#7A8A82;
  --brand:#00A576; --brand-2:#0FB587; --brand-ink:#04120D;
  --allow:#0E9E72; --block:#D2384A; --escalate:#B27714; --audit:#1877CF;
  --code-bg:#0A0F0D; --code-panel:#0D1311; --code-line:#1C2521;
  --code-text:#E7EEEA; --code-dim:#8B9C94;
  --shadow:0 1px 2px rgba(6,20,15,.05), 0 18px 44px -22px rgba(6,20,15,.16);
  --maxw:1200px; --gut:clamp(20px,5vw,52px);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo","Consolas",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#05080A; --surface:#0B1010; --surface-2:#0F1614; --surface-3:#141C19;
  --line:#1C2521; --line-strong:#2A3631;
  --text:#E9F0EC; --text-dim:#93A49C; --text-faint:#5E6E66;
  --brand:#57C39B; --brand-2:#6ECFA9; --brand-ink:#04120D;
  --allow:#57C39B; --block:#E97782; --escalate:#DCAF66; --audit:#82B2E0;
  --code-bg:#030706; --code-panel:#070C0B; --code-line:#1E2925;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 22px 50px -24px rgba(0,0,0,.72);
}}

*{box-sizing:border-box}
body{margin:0; padding:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:inherit}

/* Full-width chrome, matching index.html exactly */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);}
/* Prose is narrower than the marketing grid — 1200px is unreadable for body text */
.wrap-prose{max-width:46rem; margin:0 auto; padding-inline:var(--gut);}

/* ---- nav: values copied from index.html ---- */
.nav{position:sticky; top:0; z-index:60; background:var(--ink);
  border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px;}
.brand{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-weight:600; font-size:16px; text-decoration:none; color:var(--text);}
.brand svg{width:19px; height:23px; color:var(--brand);}
.nav-mid{display:flex; align-items:center; gap:2px;}
.nav-mid a{font-size:14px; color:var(--text-dim); padding:8px 10px; border-radius:8px;
  transition:.15s; white-space:nowrap; text-decoration:none;}
.nav-mid a:hover{color:var(--text); background:var(--surface-2);}
.nav-mid a[aria-current="page"]{color:var(--brand);}

/* ---- nav-right buttons: copied from index.html ---- */
.nav-right{display:flex; align-items:center; gap:8px;}
.btn{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:550;
  font-family:var(--sans); padding:12px 20px; border-radius:11px; cursor:pointer;
  border:1px solid transparent; text-decoration:none; transition:.15s;}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--line-strong); background:var(--surface-2);}
.btn-light{background:var(--text); color:var(--ink);}
.btn-light:hover{opacity:.9;}
@media (max-width:640px){ .nav-mid{display:none} }

/* ---- listing ---- */
header.page{padding:56px 0 28px; border-bottom:1px solid var(--line);}
header.page h1{font-size:clamp(28px,5vw,40px); margin:0 0 10px; letter-spacing:-.025em;
  line-height:1.15;}
header.page p{color:var(--text-dim); margin:0; max-width:34rem;}

ul.posts{list-style:none; padding:0; margin:0;}
ul.posts li{padding:28px 0; border-bottom:1px solid var(--line);}
ul.posts h2{font-size:19px; margin:6px 0 6px; letter-spacing:-.01em;}
ul.posts h2 a{text-decoration:none;}
ul.posts h2 a:hover{color:var(--brand);}
ul.posts p{color:var(--text-dim); margin:0; font-size:15px;}
time{font-family:var(--mono); font-size:12px; color:var(--text-faint);
  letter-spacing:.06em; text-transform:uppercase;}

.empty{padding:48px 0; color:var(--text-dim);}
.empty code{font-family:var(--mono); font-size:13px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:2px 6px;}

/* ---- post ---- */
article{padding:48px 0 16px;}
article h1{font-size:clamp(26px,4.5vw,36px); margin:8px 0 12px; letter-spacing:-.025em;
  line-height:1.2;}
article h2{font-size:21px; margin:36px 0 10px; letter-spacing:-.01em;}
article h3{font-size:17px; margin:28px 0 8px;}
article p{margin:0 0 18px;}
article a{color:var(--brand);}
article ul,article ol{margin:0 0 18px; padding-left:20px;}
article li{margin:5px 0;}
article blockquote{margin:20px 0; padding:4px 0 4px 16px; border-left:2px solid var(--brand);
  color:var(--text-dim);}
article pre{background:var(--code-bg); border:1px solid var(--code-line); border-radius:10px;
  padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:13.5px;
  line-height:1.6; color:var(--code-text);}
article code{font-family:var(--mono); font-size:.875em;}
article :not(pre)>code{background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:2px 6px;}
article table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px;
  display:block; overflow-x:auto;}
article th,article td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);}
article th{color:var(--text-dim); font-weight:600; font-size:13.5px;}

/* ---- footer: padding-block copied from index.html ---- */
.foot{border-top:1px solid var(--line); padding-block:52px; margin-top:48px;
  color:var(--text-faint); font-size:14px;}
.foot a{color:var(--text-faint); text-decoration:none;}
.foot a:hover{color:var(--brand);}

/* ---- blog figures -------------------------------------------------------------
   Diagrams are dark in BOTH themes, deliberately: --code-bg already is, so a dark
   figure panel reads as the same kind of object as a code block rather than as a
   hole in a light page. Flow dots are animated inline SVG; no third-party anything.

   filterUnits="userSpaceOnUse" is load-bearing in the SVGs, not decoration: a
   percentage filter region on a perfectly horizontal line resolves to zero height,
   and an element with a zero-area filter region is not painted at all. */
article figure{margin:26px 0 30px;}
article figure .fig{background:var(--code-panel); border:1px solid var(--code-line);
  border-radius:10px; padding:10px 10px 4px; overflow-x:auto;}
article figure svg{display:block; width:100%; min-width:660px; height:auto;}
article figcaption{margin:11px 2px 0; font-size:14px; line-height:1.5; color:var(--text-dim);}
article figcaption b,article figcaption strong{color:var(--text); font-weight:600;}
article figcaption code{font-size:.86em;}

/* figure-internal palette: the site's own decision vocabulary, not a second set */
article figure svg{--nq-ink:#E9F0EC; --nq-muted:#93A49C; --nq-faint:#5E6E66; --nq-dead:#243033;
  --nq-brand:#57C39B; --nq-accent:#2ddab8; --nq-allow:#00e5a0; --nq-block:#ff3b5c;
  --nq-escalate:#ffb020; --nq-audit:#7c5cfc;}
article figure .track{fill:none; stroke:rgba(87,195,155,.16); stroke-width:1.5;}
article figure .track-r{stroke:rgba(255,59,92,.18);} article figure .track-a{stroke:rgba(0,229,160,.18);}
article figure .track-p{stroke:rgba(124,92,252,.20);}
article figure .flow{fill:none; stroke:var(--nq-accent); stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:2 11; filter:url(#nqglow); animation:nq-march .85s linear infinite;}
@keyframes nq-march{to{stroke-dashoffset:-13;}}
article figure .rev{animation-direction:reverse;}
article figure .d1{animation-delay:-.10s} article figure .d2{animation-delay:-.35s}
article figure .d3{animation-delay:-.60s} article figure .d4{animation-delay:-.85s}
article figure .d5{animation-delay:-1.0s} article figure .slow{animation-duration:2.3s}
article figure .fa{stroke:var(--nq-allow)} article figure .fb{stroke:var(--nq-block)}
article figure .fe{stroke:var(--nq-escalate)} article figure .fdef{stroke:var(--nq-accent)}
article figure .fcall{stroke:var(--nq-audit)}
article figure .inert{fill:none; stroke:var(--nq-dead); stroke-width:1.4; stroke-dasharray:3 6; opacity:.7;}
article figure .node{fill:#0A1316; stroke:rgba(87,195,155,.34); stroke-width:1.3;}
article figure .node-dim{fill:#080C0E; stroke:var(--nq-dead); stroke-width:1.2; stroke-dasharray:4 5;}
article figure .lbl{font-family:var(--mono); font-size:12px; fill:var(--nq-ink);}
article figure .s{font-family:var(--mono); font-size:11px; fill:var(--nq-muted);}
article figure .xs{font-family:var(--mono); font-size:10px; fill:var(--nq-faint);}
article figure .cap{font-family:var(--mono); font-size:10.5px; fill:var(--nq-brand); letter-spacing:.14em;}
article figure .capd{font-family:var(--mono); font-size:10.5px; fill:var(--nq-faint); letter-spacing:.14em;}
article figure .pulse{animation:nq-pulse 2.6s ease-in-out infinite;}
@keyframes nq-pulse{0%,100%{opacity:.3}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  article figure .flow,article figure .pulse{animation:none;}
}