/* Blindproof — shared styles for the document pages (record, evidence, roadmap, whitepaper).
   The home deck keeps its own inline styles; tokens below match it exactly. */
:root{
  --ink:#0b0b0b;
  --ink-2:#151515;
  --ink-3:#1c1c1c;
  --line:#2a2a2a;
  --bone:#f5f5f5;
  --muted:#a8a8a8;
  --brand:#b22b2c;
  --brand-hi:#de4747;
  --signal:#d4d4d4;
  --ok:#7ccf9a;
  --bad:#de4747;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mark:"Source Serif 4", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pad:clamp(16px,5vw,80px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ink);color:var(--bone);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--brand);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{text-decoration-color:var(--bone)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
code,.mono{font-family:var(--mono);font-size:.88em}

/* ---------- top bar (same as home) ---------- */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad);background:var(--ink);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 24px/1 var(--mark)}
.brand img{width:24px}
.bar nav{display:flex;gap:26px;font-size:16px;font-weight:500;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.bar nav a{text-decoration:none;color:var(--muted)}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--bone)}
.bar nav a[aria-current="page"]{box-shadow:0 2px 0 var(--brand)}
.bar nav a.navcta{color:var(--bone);background:var(--brand);padding:8px 16px;border-radius:3px;margin:-8px 0}
.bar nav a.navcta:hover{background:var(--brand-hi)}
@media (max-width:1180px){.bar nav{gap:18px}}
@media (max-width:1100px){
  .bar{flex-direction:column;align-items:flex-start;gap:10px;padding-top:12px;padding-bottom:12px}
  .bar nav{gap:14px;justify-content:flex-start;font-size:15px}
  .bar nav a.navcta{margin:0}
}

/* ---------- page frame ---------- */
main{padding:0 var(--pad)}
.wrap{max-width:1180px;margin:0 auto}
.narrow{max-width:760px}
.page-head{padding:clamp(48px,8vw,104px) 0 clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.eyebrow{font:700 14px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.eyebrow b{color:var(--bone)}
h1{font:800 clamp(40px,6vw,76px)/1.02 var(--sans);letter-spacing:-.03em;margin:0 0 20px}
h1::before{content:"";display:block;width:88px;height:8px;background:var(--brand);margin-bottom:22px}
.standfirst{font:500 clamp(20px,2vw,25px)/1.45 var(--sans);color:var(--signal);max-width:44ch;margin:0}
h2{font:800 clamp(28px,3vw,40px)/1.15 var(--sans);letter-spacing:-.02em;margin:0 0 14px}
h3{font:700 21px/1.3 var(--sans);margin:0 0 8px}
p{margin:0 0 1em;max-width:68ch}
.muted{color:var(--muted)}
section.block{padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--line)}
section.block:last-of-type{border-bottom:0}
.kicker{font:600 18px/1.5 var(--sans);color:var(--muted);max-width:62ch;margin-bottom:28px}

/* ---------- status tags (site-wide claim discipline) ---------- */
.tag{display:inline-block;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:2px;
  border:1px solid currentColor;vertical-align:middle;white-space:nowrap}
.tag.measured{color:var(--ok)}
.tag.prototype{color:#e3c27a}
.tag.designed{color:var(--muted)}
.tag.pending{color:var(--bone);border-style:dashed}
.legend{display:flex;flex-wrap:wrap;gap:12px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:15px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:10px}

/* ---------- buttons ---------- */
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{display:inline-block;padding:14px 22px;border:2px solid var(--bone);text-decoration:none;font-weight:600;font-size:17px;border-radius:3px}
.btn.primary{background:var(--brand);border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.btn:not(.primary):hover{background:var(--bone);color:var(--ink)}

/* ---------- receipt (the record's signature object) ---------- */
.receipt{background:var(--bone);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.55;
  padding:28px 28px 22px;position:relative;max-width:560px;width:100%;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.receipt h3{font:800 15px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px}
.receipt .sub{font-size:13px;color:#555555;margin:0 0 16px}
.receipt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.receipt dt{color:#555555}
.receipt dd{margin:0;text-align:right;overflow-wrap:anywhere}
.receipt hr{border:0;border-top:2px dashed #bbbbbb;margin:14px 0}
.receipt .total{font-weight:800;font-size:16px}
.receipt .stamp{display:inline-block;margin-top:14px;padding:6px 12px;border:3px solid var(--brand);color:var(--brand);
  font:800 14px/1 var(--mono);letter-spacing:.14em;transform:rotate(-3deg)}
.receipt a{text-decoration-color:var(--brand)}
@media (max-width:480px){.receipt{font-size:13.5px;padding:22px 18px 18px}}

/* ---------- record hero ---------- */
.record-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:980px){.record-hero{grid-template-columns:minmax(0,1fr)}}
.headline-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:34px 0 0}
.headline-stats div{border-top:4px solid var(--line);padding-top:14px}
.headline-stats div:first-child{border-top-color:var(--brand)}
.headline-stats b{display:block;font:800 clamp(36px,4vw,54px)/1 var(--sans);letter-spacing:-.03em}
.headline-stats span{display:block;margin-top:8px;font-size:15px;color:var(--muted);line-height:1.4}
@media (max-width:560px){.headline-stats{grid-template-columns:1fr}}

/* ---------- credit tally (who got paid) ---------- */
.tally{display:grid;gap:26px;margin-top:8px}
.tally-tier h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.tally-tier h3 small{font:500 15px var(--sans);color:var(--muted)}
.tally-row{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.tally-row .who{font-weight:700}
.tally-row .who small{display:block;font-weight:500;font-size:14px;color:var(--muted)}
.cells{display:flex;flex-wrap:wrap;gap:5px}
.cells i{width:18px;height:18px;border-radius:2px;display:block}
.cells i.c{background:var(--ok)}
.cells i.x{background:transparent;border:2px solid var(--bad);position:relative}
.cells i.x::after{content:"";position:absolute;inset:6px 1px auto;height:2px;background:var(--bad);transform:rotate(-45deg)}
.tally-row .score{font:700 17px var(--mono);text-align:right}
.tally-row .score.bad{color:var(--bad)}
@media (max-width:640px){
  .tally-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .tally-row .cells{grid-column:1 / -1;grid-row:2}
}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 0}
table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
th{font:700 14px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 16px 12px 0;border-bottom:2px solid var(--brand)}
td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
td.mono,td code{font-family:var(--mono);font-size:14.5px;overflow-wrap:anywhere}
td .tag{font-size:11px}
td.num{text-align:right;font-family:var(--mono);white-space:nowrap}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 22px 26px}
.timeline li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;background:var(--ink);border:2px solid var(--muted);border-radius:50%}
.timeline li.hit::before{background:var(--brand);border-color:var(--brand)}
.timeline .when{font:600 14px/1.4 var(--mono);color:var(--muted)}
.timeline .what{font-weight:600}
.timeline .ref{font:500 14px var(--mono)}

/* ---------- scope box ---------- */
.scope{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:8px}
.scope > div{background:var(--ink-2);border:1px solid var(--line);padding:24px 26px}
.scope > div:first-child{border-top:4px solid var(--ok)}
.scope > div:last-child{border-top:4px solid var(--bad)}
.scope ul{margin:0;padding-left:20px}
.scope li{margin:0 0 10px;color:var(--muted)}
.scope li b{color:var(--bone)}
@media (max-width:860px){.scope{grid-template-columns:minmax(0,1fr)}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.card{background:var(--ink-2);border:1px solid var(--line);border-top:4px solid var(--line);padding:24px 24px 20px;display:flex;flex-direction:column;gap:6px}
.card.live{border-top-color:var(--brand)}
.card p{color:var(--muted);font-size:16.5px;margin:0}
.card .meta{font:500 14px var(--mono);color:var(--muted);margin-top:auto;padding-top:14px}
.card a.more{font-weight:600;margin-top:10px;text-decoration:none}
.card a.more:hover{color:var(--signal)}

/* ---------- report sections (evidence) ---------- */
.report{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.report-nav{position:sticky;top:96px;align-self:start;font-size:15px}
.report-nav ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.report-nav a{display:block;padding:6px 0 6px 16px;text-decoration:none;color:var(--muted)}
.report-nav a:hover{color:var(--bone)}
.report h3{margin-top:30px}
.report h3:first-child{margin-top:0}
@media (max-width:900px){.report{grid-template-columns:minmax(0,1fr)}.report-nav{position:static}}

/* ---------- ladder (roadmap) ---------- */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rung{display:grid;grid-template-columns:72px minmax(0,1fr) 84px 124px;gap:20px;align-items:center;padding:18px 22px;background:var(--ink-2);border:1px solid var(--line)}
.rung .code{font:800 22px/1 var(--mono);color:var(--muted)}
.rung.done{border-left:6px solid var(--ok)}
.rung.done .code{color:var(--ok)}
.rung.now{border-left:6px solid var(--brand);background:var(--ink-3)}
.rung.now .code{color:var(--bone)}
.rung h3{margin:0 0 2px;font-size:19px}
.rung p{margin:0;color:var(--muted);font-size:16px}
.rung .tag{justify-self:start}
.rung .when{font:700 14px/1 var(--mono);color:var(--signal);white-space:nowrap;letter-spacing:.02em}
.rung.done .when{color:var(--ok)}
@media (max-width:640px){.rung{grid-template-columns:52px minmax(0,1fr)}.rung .when,.rung .tag{grid-column:2;justify-self:start}}

/* ---------- whitepaper contents ---------- */
.toc{list-style:none;margin:0;padding:0;counter-reset:t;columns:2;column-gap:48px}
.toc li{counter-increment:t;break-inside:avoid;padding:10px 0 10px 44px;position:relative;border-bottom:1px solid var(--line)}
.toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:10px;font:700 15px/1.6 var(--mono);color:var(--brand)}
.toc li b{display:block}
.toc li span{color:var(--muted);font-size:15.5px}
@media (max-width:800px){.toc{columns:1}}
.note{background:var(--ink-2);border-left:4px solid var(--brand);padding:22px 26px;margin:0}
.note p:last-child{margin-bottom:0}

footer{padding:30px var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:15px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;margin-top:40px}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{text-decoration:none}
footer a:hover{color:var(--bone)}