/* assets/article.css — the "logbook" system for the long-form pages (archiver, research, guide).
   Light only. A 30 px baseline rhythm and a left gutter that carries dates and notes. */
:root{
  --paper:#ffffff;
  --surface:#f4f5f7;
  --rule:#dfe2e7;
  --line:#e6e8ec;
  --ink:#111111;
  --ink-soft:#454a52;
  --ink-faint:#5b6068;
  --brand:#2e5cff;
  --brand-hover:#1c3fe2;
  --green:#007e26;
  --red:#df0c10;
  --amber:#ca8a04;
  --amber-ink:#8a5a00;
  --grey:#6b727b;
  --lh:30px;
  --gut:150px;
  --gap:24px;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:var(--lh);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.wrap{max-width:1060px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* header */
header.nav{display:grid;grid-template-columns:var(--gut) 1fr;column-gap:var(--gap);align-items:baseline;height:60px;line-height:60px;border-bottom:2px solid var(--ink)}
.mark{font-weight:700;font-size:20px;text-decoration:none;color:var(--ink);white-space:nowrap}
.mark .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5a9a7a;margin-right:8px;vertical-align:1px}
header.nav nav{text-align:right;font-size:15px;white-space:nowrap;overflow-x:auto}
header.nav nav a{margin-left:18px;color:var(--ink-faint);text-decoration:none}
header.nav nav a:hover{color:var(--ink)}
header.nav nav a[aria-current]{color:var(--ink);font-weight:600}

/* ledger block */
.ledger{display:grid;grid-template-columns:var(--gut) 1fr;column-gap:var(--gap);margin-top:30px;font-family:var(--mono);font-size:14px;line-height:var(--lh)}
.ledger .k{color:var(--ink-faint)}
.ledger .v{color:var(--ink);overflow-wrap:anywhere}
.ledger .v a{color:inherit}

h1{font-size:44px;line-height:60px;font-weight:700;letter-spacing:-.02em;margin:30px 0;max-width:24ch}
@media (max-width:640px){h1{font-size:32px;line-height:30px;margin:30px 0}}

/* the two-column rows: gutter + text */
.row{display:grid;grid-template-columns:var(--gut) 1fr;column-gap:var(--gap)}
.gut{font-family:var(--mono);font-size:13px;color:var(--brand);line-height:var(--lh);text-align:right;padding-right:6px}
.gut .m{color:var(--ink-faint)}
.gut a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.gut a:hover{border-bottom-color:currentColor}
.txt{max-width:66ch;min-width:0}
.txt.wide{max-width:none}
.txt p{margin:0 0 30px}
.txt ul,.txt ol{margin:0 0 30px 1.3em}
.txt li{margin:0}
h2{font-size:26px;line-height:30px;font-weight:700;letter-spacing:-.015em;margin:30px 0}
h3{font-size:19px;line-height:30px;font-weight:700;margin:0 0 30px}
a{color:inherit;text-decoration:underline;text-decoration-color:#b8bdc6;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
code{font-family:var(--mono);font-size:.86em;overflow-wrap:anywhere}
pre{font-family:var(--mono);font-size:14px;line-height:20px;background:#fff;border:1.5px solid var(--ink);padding:15px 16px;margin:0 0 30px;overflow-x:auto}
pre code{font-size:inherit}
strong{font-weight:700}
em{font-style:italic}
blockquote{margin:0 0 30px;padding:0 0 0 18px;border-left:2px solid var(--ink);font-weight:500}
.note{font-family:var(--mono);font-size:13.5px;line-height:20px;color:var(--ink-faint);margin:0 0 30px;padding:5px 0}
.note a{color:var(--ink)}
.small{font-size:15px;color:var(--ink-faint)}

/* gutter notes: a lettered reference in the text, the note (with a link out) in the gutter */
.ref{font-family:var(--mono);font-size:12px;color:var(--brand);vertical-align:super;line-height:0;text-decoration:none}
.gut .n{display:block;text-align:right;color:var(--ink-faint);font-size:12.5px;line-height:20px;padding:5px 0}
.gut .n b{color:var(--brand);font-weight:500}
.gut .n a{color:var(--ink);text-decoration:underline;text-decoration-color:#b8bdc6}

/* figures */
figure{margin:0 0 30px;background:#fff;border:1.5px solid var(--ink);padding:14px 16px 12px;overflow-x:auto}
figure .fl{font-family:var(--mono);font-size:13px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
figure .fl b{font-weight:600}
figure svg{display:block;height:auto}
figure .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctl{display:flex;gap:6px;flex-wrap:wrap}
.ctl button,.ctl label{font-family:var(--mono);font-size:12.5px;line-height:20px;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:2px 9px;cursor:pointer;border-radius:0}
.ctl button:hover{background:var(--surface)}
.ctl button[aria-pressed="true"],.ctl button.go{background:var(--brand);border-color:var(--brand);color:#fff}
.ctl button.go:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.ctl button:disabled{opacity:.45;cursor:default}
.ctl input[type=range]{accent-color:var(--brand);vertical-align:middle;width:120px}
figcaption{font-size:14.5px;line-height:20px;color:var(--ink-faint);margin-top:8px;max-width:70ch}
.svgt{font-family:var(--mono);font-size:11px;fill:var(--ink-faint)}
.svgn{font-family:var(--mono);font-size:13px;font-weight:600}
.svgk{font-family:var(--body);font-size:12px;fill:var(--ink)}
.readout{font-family:var(--mono);font-size:13px;line-height:20px;color:var(--ink);margin-top:6px}
.readout b{color:var(--brand);font-weight:600}
.readout .ok{color:var(--green)}
.readout .bad{color:var(--red)}

/* tables */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 30px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:30px;border-top:2px solid var(--ink)}
table.dense{font-size:14px;line-height:20px}
table.dense th,table.dense td{padding:5px 12px 5px 0}
th,td{text-align:left;padding:0 12px 0 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:600}
td.num,th.num{font-family:var(--mono);font-size:13.5px;text-align:right;white-space:nowrap}
td code{white-space:nowrap}
.tscroll table{min-width:560px}
.tscroll table.wide{min-width:820px}
.ev{font-family:var(--mono);font-size:12px;color:var(--brand);white-space:nowrap}
.up{color:var(--green)}.down{color:var(--red)}
s{color:var(--ink-faint)}

/* callouts kept flat: a rule above and below, no box */
.banner{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0 15px;margin:0 0 30px;font-size:16px;line-height:30px}
.offer{border-top:2px solid var(--ink);padding-top:30px;margin-top:30px}
.offer ul{margin:0 0 30px 1.3em}
.cta{display:inline-block;font-weight:600;text-decoration:none;color:#fff;background:var(--ink);padding:0 16px;line-height:40px;margin:0 0 30px}
.cta:hover{background:var(--brand)}

footer{border-top:2px solid var(--ink);margin-top:30px;padding:30px 0 60px;font-size:14.5px;line-height:20px;color:var(--ink-faint)}
.foot-row{display:grid;grid-template-columns:var(--gut) 1fr;column-gap:var(--gap)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 18px}
.foot-links a{color:var(--ink);text-decoration:none}
.foot-links a:hover{text-decoration:underline}

/* narrow screens: the gutter folds above its paragraph */
@media (max-width:760px){
  header.nav,.ledger,.row,.foot-row{grid-template-columns:1fr}
  header.nav{height:auto;line-height:40px;padding:10px 0}
  header.nav nav{text-align:left}header.nav nav a{margin:0 18px 0 0}
  .ledger .k{line-height:20px;padding-top:10px}.ledger .v{line-height:20px;padding-bottom:0}
  .gut{text-align:left;padding:0;line-height:20px;margin-bottom:10px}
  .gut .n{text-align:left}
  .gut br{display:none}.gut .m::before{content:" · "}
}

/* --- research page: cost chart --- */
#cost-ctl button{font-size:12px;padding:1px 7px}
#cost-ctl button[aria-pressed="false"]{color:var(--ink-faint);text-decoration:line-through}

/* ---- guide page: the hash demo ---- */
.hd-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.4fr);gap:16px;font-family:var(--mono);font-size:13px;line-height:20px;margin-bottom:10px}
@media (max-width:640px){.hd-grid{grid-template-columns:1fr}}
.hd-book{border:1px solid var(--line)}
.hd-lvl{display:grid;grid-template-columns:36px 1fr 1fr;padding:0 8px;border-bottom:1px solid var(--rule)}
.hd-lvl span:nth-child(2),.hd-lvl span:nth-child(3){text-align:right}
.hd-lvl.ask{color:var(--red);background:#fff6f2}.hd-lvl.bid{color:var(--green);background:#e4ffe9}
.hd-lvl.hit{outline:2px solid var(--ink);outline-offset:-2px;font-weight:600}
.hd-mid{padding:0 8px;color:var(--ink-faint);border-bottom:1px solid var(--rule)}
.hd-stream{border:1px solid var(--line)}
.hd-fr{display:grid;grid-template-columns:28px 92px 1fr;padding:0 8px;border-bottom:1px solid var(--rule);color:var(--ink-faint)}
.hd-fr.done{color:var(--ink)}.hd-fr.now{color:var(--ink);background:var(--surface);font-weight:600}.hd-fr.lost span:last-child{text-decoration:line-through}
.hd-ind{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;font-family:var(--body);font-size:12px;vertical-align:-3px}
.hd-ind.ok{background:var(--green);color:#fff}.hd-ind.bad{border:2px solid var(--red);color:var(--red);line-height:14px}.hd-ind.none{border:1px solid var(--rule);color:var(--ink-faint)}

/* --- archiver page: grid cell states (static classes used by the fallbacks and by article.js) --- */
.cell.down rect{fill:#111;fill-opacity:.88;stroke:#111}.cell.down text{fill:#fff}
.cell.hl rect{stroke-width:3.5}
.cell.dim{opacity:.22}
.cell.pick rect{stroke:#111;stroke-width:3.5}
.cell{cursor:pointer}
figure select{font-family:var(--mono);font-size:12.5px;border:1px solid var(--ink);background:#fff;padding:1px 4px;border-radius:0}
.row.full .txt.wide{grid-column:1/-1}