/* ============================================================================
   s.css — the legacy tool pages (check, reconcile, arr, proforma, books,
   verify, how, gallery, record, graveyard) on obrussalabs.com.
   One source of truth. Every page links this; no page redeclares :root.

   2026-09-15 — RETHEMED TO THE BRAND KIT. The tokens below are the ob.css /
   brand/tokens.css values ("Touch Needle", chosen 2026-09-04) under this
   file's older variable names, so the ~470 rules and every tool page inherit
   the same paper, ink and gold as the front door without an edit. Light is
   the default and the system preference is followed, exactly as ob.css does;
   the toggle (a.js, key `obrussa-theme`, shared with ob.js) still persists.
   No web font is loaded, for the same reason ob.css loads none.

   2026-07-29 — retuned from warm-paper editorial to instrument panel.
   DARK IS THE DEFAULT. The old palette read as a research blog; this reads as
   equipment. Every class name is unchanged so all pages inherit it untouched.

   ONE RULE THAT IS NOT AESTHETIC: the brand accent may never signal a verdict.
   `--accent` is cyan and means "us"; `--bad` is red and means "this failed".
   They were the same variable until today, which meant a detected leak rendered
   in the brand colour — a verification product must not paint a failure in the
   same ink it paints its own logo.
   ========================================================================== */

/* ---------- 1. tokens ---------------------------------------------------- */
:root{
  color-scheme:light dark;
  /* surfaces — the kit's paper. --ground/--panel/--card map to --ob-bg/--ob-surface/--ob-raised. */
  --ground:#E9E2CD;
  --panel:#F1ECDC;
  --card:#F7F3E6;
  --ink:#26221C;
  --muted:#625A4B;
  --faint:#857A64;
  --hair:#CBC1A6;
  --hair-strong:#857A64;
  /* signal — the kit's gold is the lab's own hand and NEVER a verdict; verdicts
     are good/warn/bad and always colour + word + glyph. */
  --accent:#765A15;
  --accent-soft:#B58D28;
  --accent-wash:rgba(118,90,21,.09);
  --accent-glow:rgba(118,90,21,.18);
  --good:#276848;
  --good-wash:rgba(39,104,72,.10);
  --warn:#964B1B;
  --bad:#A0352E;
  --bad-wash:rgba(160,53,46,.10);
  /* type — the kit's stack, no web font */
  --display:"Onest","Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:var(--display);
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --serif:var(--sans);
  /* space scale */
  --s1:0.4rem; --s2:0.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --measure:36rem;
  --shadow:none;
  --radius:4px;
  --track-label:.08em;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1B1815;--panel:#241F1A;--card:#2D2721;--ink:#ECE5D2;--muted:#A79C87;
    --faint:#7E7363;--hair:#3D362E;--hair-strong:#7E7363;
    --accent:#D6AF48;--accent-soft:#C9A23A;--accent-wash:rgba(214,175,72,.10);
    --accent-glow:rgba(214,175,72,.20);
    --good:#6CC49A;--good-wash:rgba(108,196,154,.12);--warn:#E08A5A;
    --bad:#E8776E;--bad-wash:rgba(232,119,110,.12);
  }
}
:root[data-theme="dark"]{
  --ground:#1B1815;--panel:#241F1A;--card:#2D2721;--ink:#ECE5D2;--muted:#A79C87;
  --faint:#7E7363;--hair:#3D362E;--hair-strong:#7E7363;
  --accent:#D6AF48;--accent-soft:#C9A23A;--accent-wash:rgba(214,175,72,.10);
  --accent-glow:rgba(214,175,72,.20);
  --good:#6CC49A;--good-wash:rgba(108,196,154,.12);--warn:#E08A5A;
  --bad:#E8776E;--bad-wash:rgba(232,119,110,.12);
}

/* ---------- 2. base ------------------------------------------------------ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","ss01";
}
.wrap{max-width:var(--wrapw,54rem);margin:0 auto;padding:0 clamp(1rem,4vw,1.6rem) var(--s7);}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--accent-soft);}
img,canvas,svg{max-width:100%;}
hr{border:0;height:1px;background:linear-gradient(90deg,var(--hair-strong),transparent);
  margin:var(--s5) 0;}
::selection{background:var(--accent-glow);color:var(--ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}

h1,h2,h3{font-family:var(--display);letter-spacing:-0.026em;text-wrap:balance;}
h1{
  font-weight:700;font-size:clamp(2.3rem,6.4vw,3.9rem);line-height:1.02;
  margin:var(--s3) 0 var(--s2);
}
h2{font-weight:600;font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.18;margin:var(--s6) 0 var(--s3);}
h3{font-weight:600;font-size:1.14rem;line-height:1.3;margin:0 0 var(--s1);letter-spacing:-0.015em;}
p{margin:0 0 var(--s3);}
.dek{font-size:1.14rem;color:var(--muted);max-width:var(--measure);line-height:1.58;}
.dek b,.dek strong{color:var(--ink);font-weight:600;}
.measure{max-width:var(--measure);}
.small{font-size:0.92rem;}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
b,strong{font-weight:600;color:var(--ink);}

/* the small uppercase mono label is the workhorse of this system */
.label{
  font-family:var(--mono);font-size:0.63rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--faint);display:block;font-weight:500;
}
.label.accent{color:var(--accent);}
.mono{font-family:var(--mono);}

/* was an editorial drop-cap; that is exactly what read as "blog". Now just a lead. */
.lead{font-size:1.1rem;color:var(--muted);max-width:var(--measure);}
.lead::first-letter{font-size:inherit;float:none;font-weight:inherit;color:inherit;padding:0;}

/* ---------- 3. masthead + nav ------------------------------------------- */
.masthead{
  border-bottom:1px solid var(--hair);
  background:color-mix(in srgb,var(--ground) 78%,transparent);
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
}
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-glow) 35%,var(--accent-glow) 65%,transparent);
}
.masthead .bar{
  max-width:var(--wrapw,54rem);margin:0 auto;padding:0.7rem clamp(1rem,4vw,1.6rem);
  display:flex;align-items:center;gap:var(--s3);
}

/* wordmark */
.mark{display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:var(--ink);flex:none;}
/* 2026-09-14 — the glyph is now the Obrussa Labs symbol (two horizontal marks
   compared). The brand guide says horizontal only, so the old hover ROTATION is
   gone; scale is all that is left. */
.mark .glyph{width:1.2rem;height:1.2rem;flex:none;color:var(--ink);
  transition:transform .2s;}
.mark:hover .glyph{transform:scale(1.06);}
.mark .name{
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:0.005em;
}
.mark .ai{
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:3px;padding:0.12rem 0.26rem;background:var(--accent-wash);
  position:relative;top:-0.04rem;font-weight:500;
}
.mark:hover .name{color:var(--accent);}

nav.top{display:flex;align-items:center;gap:0.1rem;margin-left:auto;flex-wrap:wrap;}
nav.top > a, .menu > button{
  font-family:var(--sans);font-size:0.9375rem;
  color:var(--muted);text-decoration:none;padding:0.44rem 0.6rem;border-radius:4px;
  background:none;border:0;cursor:pointer;font-weight:500;line-height:1.4;transition:.15s;
}
nav.top > a:hover, .menu > button:hover{color:var(--ink);background:var(--panel);}
nav.top > a.here, .menu.here > button{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:0.15em;}
/* the beta pill — the same control as ob.css `.nav .cta-small`, so the bar reads
   as one family from the front door to the deepest tool page */
nav.top > a.cta-small{color:var(--ground);background:var(--ink);font-weight:600;
  padding:6px 12px;margin-left:0.4rem;}
nav.top > a.cta-small:hover{background:var(--ink);color:var(--ground);opacity:.88;}
:root[data-theme="dark"] nav.top > a.cta-small{background:var(--accent-soft);color:var(--ground);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) nav.top > a.cta-small{background:var(--accent-soft);color:var(--ground);}
}

.menu{position:relative;}
.menu > button::after{content:" \25BE";opacity:.45;}
.menu .drop{
  position:absolute;top:calc(100% + 4px);right:0;min-width:17rem;
  background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0.35rem;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s;
}
.menu:hover .drop,.menu:focus-within .drop{opacity:1;visibility:visible;transform:none;}
.menu .drop a{
  display:block;text-decoration:none;color:var(--ink);padding:0.48rem 0.6rem;border-radius:4px;
  font-family:var(--sans);font-size:0.93rem;line-height:1.32;font-weight:500;
}
.menu .drop a span{
  display:block;font-family:var(--mono);font-size:0.64rem;color:var(--faint);
  letter-spacing:0.02em;text-transform:none;margin-top:0.12rem;font-weight:400;
}
.menu .drop a:hover{background:var(--panel);color:var(--accent);}
.menu .drop a:hover span{color:var(--muted);}
.menu .drop hr{margin:0.3rem 0;}

#theme{
  font-family:var(--mono);font-size:0.68rem;color:var(--faint);background:none;border:0;
  cursor:pointer;padding:0.44rem 0.45rem;border-radius:4px;transition:.15s;
}
#theme:hover{color:var(--accent);background:var(--panel);}

@media(max-width:44rem){
  .masthead{position:static;}
  .masthead .bar{flex-wrap:wrap;gap:0.4rem var(--s2);}
  nav.top{margin-left:0;width:100%;}
  .menu .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;background:none;padding:0 0 0 0.55rem;display:none;}
  .menu:focus-within .drop{display:block;}
}

/* ---------- 4. buttons -------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:0.76rem;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:500;
  text-decoration:none;padding:0.7rem 1.15rem;border-radius:5px;
  border:1px solid var(--accent);cursor:pointer;
  transition:background .15s,color .15s,box-shadow .18s,transform .08s;
}
.btn:active{transform:translateY(1px);}
.btn.primary{
  background:var(--accent);color:#04141b;border-color:var(--accent);font-weight:500;
}
.btn.primary:hover{box-shadow:0 0 0 1px var(--accent),0 6px 22px -6px var(--accent-glow);}
.btn.ghost{color:var(--accent);background:none;}
.btn.ghost:hover{background:var(--accent-wash);box-shadow:0 0 20px -8px var(--accent-glow);}
.btn.quiet{border-color:var(--hair-strong);color:var(--muted);}
.btn.quiet:hover{border-color:var(--accent);color:var(--accent);}
.btn[disabled]{opacity:.4;cursor:default;box-shadow:none;}
.cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0;align-items:center;}

/* ---------- 5. cards / grids -------------------------------------------- */
.cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;}
@media(min-width:40rem){.cards.two{grid-template-columns:1fr 1fr;}}
@media(min-width:52rem){.cards.three{grid-template-columns:repeat(3,1fr);}}
.cards > a, .cards > div{background:var(--card);padding:1.15rem 1.2rem;text-decoration:none;
  display:block;transition:background .15s;}
.cards > a:hover{background:var(--panel);}
.cards h3{color:var(--ink);margin:0.35rem 0 0.35rem;font-size:1.1rem;}
.cards > a:hover h3{color:var(--accent);}
.cards p{font-size:0.9rem;color:var(--muted);margin:0;line-height:1.52;}
.cards .k{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500;}
.cards .go{font-family:var(--mono);font-size:0.66rem;color:var(--accent);margin-top:0.6rem;
  display:inline-block;letter-spacing:0.06em;}

/* the two doors */
.doors{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4);}
@media(min-width:44rem){.doors{grid-template-columns:1fr 1fr;}}
.door{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1.35rem 1.4rem 1.2rem;
  text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.door::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);opacity:.7;transition:opacity .18s;}
.door:hover{border-color:var(--hair-strong);transform:translateY(-3px);box-shadow:var(--shadow);}
.door:hover::before{opacity:1;}
.door .q{font-family:var(--display);font-weight:600;font-size:1.24rem;color:var(--ink);
  line-height:1.22;margin:0.4rem 0 0.45rem;letter-spacing:-0.022em;}
.door p{font-size:0.93rem;color:var(--muted);margin:0 0 var(--s3);}
.door .who{font-family:var(--mono);font-size:0.63rem;color:var(--faint);letter-spacing:0.06em;
  margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--hair);}
.door .go{font-family:var(--mono);font-size:0.7rem;color:var(--accent);letter-spacing:0.06em;}

/* editorial list with hairlines */
.rows{list-style:none;padding:0;margin:var(--s2) 0 0;}
.rows li{padding:0.92rem 0;border-bottom:1px solid var(--hair);color:var(--muted);font-size:0.97rem;
  line-height:1.55;}
.rows li:first-child{border-top:1px solid var(--hair);}
.rows li b{color:var(--ink);font-weight:600;}

/* ---------- 6. tool page furniture -------------------------------------- */
.grid2{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4);}
@media(min-width:52rem){.grid2{grid-template-columns:1.12fr 1fr;}}
.panel{border:1px solid var(--hair);background:var(--panel);border-radius:var(--radius);
  overflow:hidden;}
.panel .bar{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;justify-content:space-between;
  padding:0.56rem 0.78rem;border-bottom:1px solid var(--hair);background:var(--card);}
.panel .bar .t{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--faint);font-weight:500;}
.chips{display:flex;flex-wrap:wrap;gap:0.34rem;}
.chip{font-family:var(--mono);font-size:0.65rem;padding:0.28rem 0.5rem;
  border:1px solid var(--hair-strong);
  background:var(--ground);color:var(--accent);border-radius:4px;cursor:pointer;transition:.15s;}
.chip:hover{background:var(--accent-wash);border-color:var(--accent);}
textarea{width:100%;min-height:340px;border:0;background:var(--ground);color:var(--ink);
  font-family:var(--mono);font-size:12.5px;line-height:1.55;padding:0.85rem;resize:vertical;tab-size:4;
  display:block;}
textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;}
.runbar{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3);flex-wrap:wrap;}
.status{font-family:var(--mono);font-size:0.72rem;color:var(--muted);}
.result{padding:1.1rem;min-height:340px;font-size:0.94rem;}
.result p{margin:0.75rem 0;}
.placeholder{color:var(--faint);}
.privacy{font-family:var(--mono);font-size:0.7rem;color:var(--good);margin:var(--s2) 0 0;
  letter-spacing:0.04em;}

/* VERDICTS. `leak` is a FAILURE and must never wear the brand colour. */
.verdict{display:flex;align-items:center;gap:0.6rem;font-family:var(--mono);font-size:0.76rem;
  letter-spacing:0.14em;text-transform:uppercase;padding:0.58rem 0.8rem;border-radius:5px;
  border:1px solid;font-weight:500;}
.verdict.clean{color:var(--good);border-color:color-mix(in srgb,var(--good) 55%,transparent);
  background:var(--good-wash);}
.verdict.leak{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,transparent);
  background:var(--bad-wash);}
.verdict.error{color:var(--faint);border-color:var(--hair-strong);}

.loc{font-family:var(--mono);font-size:0.74rem;background:var(--panel);border:1px solid var(--hair);
  border-radius:5px;padding:0.65rem;margin-top:0.7rem;overflow-x:auto;white-space:pre;
  color:var(--muted);}

details.doc{margin-top:var(--s5);border-top:1px solid var(--hair);padding-top:var(--s3);}
details.doc summary{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);cursor:pointer;font-weight:500;}
details.doc .body{color:var(--muted);font-size:0.93rem;margin-top:var(--s2);}
details.doc code, .doc code{font-family:var(--mono);background:var(--panel);padding:0.12em 0.36em;
  border-radius:4px;font-size:0.85em;border:1px solid var(--hair);color:var(--accent-soft);}
details.doc b{color:var(--ink);}

/* wide content must scroll itself, never the page */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{border-collapse:collapse;width:100%;font-size:0.91rem;}
th,td{text-align:left;padding:0.55rem 0.65rem;border-bottom:1px solid var(--hair);}
th{font-family:var(--mono);font-size:0.63rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--faint);font-weight:500;}
td{color:var(--muted);}
td b{color:var(--ink);}

/* ---------- 7. pull quote / epigraph ------------------------------------ */
.epigraph{
  border-left:2px solid var(--accent);padding:0.15rem 0 0.15rem 1.15rem;margin:var(--s4) 0;
  color:var(--muted);max-width:var(--measure);font-size:1rem;line-height:1.55;
}
.epigraph cite{display:block;font-style:normal;font-family:var(--mono);font-size:0.64rem;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);margin-top:0.55rem;}

/* ---------- 7b. data intake (drop zone + column mapper) ----------------- */
.intake{margin-top:var(--s2);}
.intake .dz{
  border:1.5px dashed var(--hair-strong);border-radius:var(--radius);background:var(--card);
  padding:1.4rem 1.15rem;text-align:center;transition:border-color .15s,background .15s;
}
.intake .dz.over{border-color:var(--accent);background:var(--accent-wash);}
.intake .dzin{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;justify-content:center;}
.intake .dzin b{font-size:1rem;width:100%;font-family:var(--display);font-weight:600;}
.intake .dzin span{font-family:var(--mono);font-size:0.68rem;color:var(--faint);}
.intake .dzhint{width:100%;margin:0.45rem 0 0;font-family:var(--mono);font-size:0.64rem;
  color:var(--faint);line-height:1.55;}
.intake .pastewrap{margin-top:var(--s2);border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--panel);padding:0.5rem;}
.intake .pastewrap textarea{background:var(--ground);border:1px solid var(--hair);border-radius:4px;
  margin-bottom:0.5rem;}

.intake .istatus{font-family:var(--mono);font-size:0.72rem;margin-top:var(--s2);color:var(--muted);
  line-height:1.55;}
.intake .istatus.ok{color:var(--good);}
.intake .istatus.warn{color:var(--warn);}
.intake .istatus.bad{color:var(--bad);}
.intake .istatus b{color:var(--ink);}

.intake .mapgrid{margin-top:var(--s2);border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--card);overflow:hidden;}
.intake .maprow{display:grid;grid-template-columns:9rem 1fr 9rem;gap:0.6rem;align-items:center;
  padding:0.48rem 0.62rem;border-bottom:1px solid var(--hair);}
.intake .maprow:last-child{border-bottom:0;}
/* an unmapped column needs attention, but it is not a failure — amber, not red. */
.intake .maprow.unset{background:rgba(251,191,36,.07);}
.intake .mapname{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.04em;color:var(--muted);}
.intake .mapex{font-family:var(--mono);font-size:0.64rem;color:var(--faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.intake select{font-family:var(--mono);font-size:0.72rem;padding:0.32rem 0.42rem;border-radius:4px;
  border:1px solid var(--hair-strong);background:var(--ground);color:var(--ink);width:100%;}
.intake select:focus{outline:2px solid var(--accent);outline-offset:-1px;}
@media(max-width:34rem){
  .intake .maprow{grid-template-columns:1fr;gap:0.25rem;}
  .intake .mapex{white-space:normal;}
}

details.raw{margin-top:var(--s2);}
details.raw summary{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;
  color:var(--faint);cursor:pointer;}
details.raw summary:hover{color:var(--accent);}
details.raw textarea{margin-top:0.4rem;min-height:150px;border:1px solid var(--hair);
  border-radius:4px;}

.pagenote{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--hair);
  color:var(--muted);font-size:0.89rem;}
.pagenote p{margin:0 0 var(--s2);}
.pagenote p:last-child{margin-bottom:0;}

/* ---------- 8. footer --------------------------------------------------- */
footer.site{margin-top:var(--s6);border-top:1px solid var(--hair);padding-top:var(--s4);
  color:var(--muted);font-size:0.9rem;}
footer.site .cols{display:grid;grid-template-columns:1fr;gap:var(--s4);}
/* auto-fit rather than a fixed three: the footer gained a Company column on
   2026-09-14 and a hard-coded count would have wrapped one link column onto a
   row of its own. */
@media(min-width:44rem){footer.site .cols{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));}}
footer.site h4{font-family:var(--mono);font-size:0.61rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 var(--s2);font-weight:500;}
footer.site ul{list-style:none;padding:0;margin:0;}
footer.site li{margin-bottom:0.36rem;font-size:0.9rem;}
footer.site a{color:var(--muted);text-decoration:none;}
footer.site a:hover{color:var(--accent);}
footer.site .fine{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:0.63rem;letter-spacing:0.08em;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:0.4rem 1.2rem;}

/* ---------- 9. report artifact (download / share) ----------------------- */
.reportbar{display:flex;flex-wrap:wrap;gap:0.45rem;align-items:center;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--hair);}
.reportbar .hint{font-family:var(--mono);font-size:0.66rem;color:var(--faint);}

/* ---------- 10. optional futurist accents (opt-in per page) ------------- */
/* a hairline technical grid — put class="gridbg" on a section, not the body */
.gridbg{position:relative;}
.gridbg::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(50rem 24rem at 50% 0,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(50rem 24rem at 50% 0,#000,transparent 72%);
  opacity:.5;
}
/* an accent-gradient word inside a heading: <span class="lit">verify</span> */
.lit{
  background:linear-gradient(92deg,var(--accent),var(--accent-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* a live status pip */
.pip{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 3px var(--good-wash);margin-right:.4rem;vertical-align:middle;}

@media print{
  .masthead,nav.top,.reportbar,.cta,#theme{display:none !important;}
  body{background:#fff;color:#000;font-size:11pt;background-image:none;}
  .wrap{max-width:none;padding:0;}
  a{color:#000;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}