/* Bitcoin: The Complete Guide — single stylesheet, mobile-first, no JS required.
   The design system is the book jacket, unfolded:
   - Ground: the cover's navy ink. Action: bitcoin orange. Fine accents: the
     subtitle gold. One red band moment (the cover's title band) per page, max.
   - Voice: Archivo wide caps for jacket surfaces (display), Literata for
     everything read (the book's interior). Chrome stays system sans.
   All committed text pairs validated >= 4.8:1 (most >= 6.3:1). */

@font-face{
  font-family:'Literata';
  src:url('fonts/literata-var.woff2') format('woff2');
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Literata';
  src:url('fonts/literata-italic-var.woff2') format('woff2');
  font-weight:200 900;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#081420; --bg2:#0d1c2b; --card:#122435; --line:#263c50;
  --fg:#edf1f2; --ink:#d3dce0; --muted:#94a7b4;
  --accent:#f7931a; --accent2:#ffb04d; --gold:#cdb37e;
  --band:#e11a1e; --band-deep:#a30b0e;
  --ok:#4ade80; --err:#f87171;
  --r-s:8px; --r-m:12px; --r-l:16px;
  --wrap:1080px;
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --display:'Archivo','Arial Black',sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 var(--sans)}
h1,h2,h3,h4{font-family:var(--serif); font-optical-sizing:auto}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent2); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--accent)}
::selection{background:rgba(247,147,26,.32)}
::placeholder{color:var(--muted); opacity:1}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}
.wrap-narrow{max-width:760px}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--bg); padding:8px 14px; z-index:99; text-decoration:none}
.skip:focus{left:0}
.nowrap{white-space:nowrap}

/* Jacket display voice: wide Archivo caps, used for jacket surfaces only
   (hero, marketing section heads, the red band). Prose keeps the serif. */
.dh{font-family:var(--display); font-stretch:115%; font-weight:800; text-transform:uppercase;
  letter-spacing:.035em; line-height:1.12}
h2.dh{font-size:clamp(1.12rem,2.6vw,1.4rem); margin:0 0 12px}

/* Circuit-trace rule: the cover mark's traces as a section divider.
   One filled gold node, one open ring, on a hairline. */
.rule-circuit{height:9px; max-width:min(520px,72%); margin:0 auto;
  background:
    radial-gradient(circle at 32% 50%, var(--gold) 3px, transparent 3.8px),
    radial-gradient(circle at 68% 50%, transparent 2px, var(--muted) 2.6px, transparent 3.8px),
    linear-gradient(var(--line),var(--line)) 50% 50%/100% 1px no-repeat;
  background-repeat:no-repeat}

/* Header */
.site-header{background:rgba(8,20,32,.96); border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .site-header{position:sticky; top:0; z-index:50}
}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; padding-bottom:10px; flex-wrap:wrap}
.brand{font:500 1rem var(--serif); color:var(--fg); white-space:nowrap; text-decoration:none}
.brand:hover{color:var(--fg)}
.brand .bw{font-family:var(--display); font-stretch:115%; font-weight:850; text-transform:uppercase;
  letter-spacing:.03em; font-size:.95rem}
.brand .bw span{color:var(--accent)}
.site-header nav{display:flex; align-items:center; gap:16px; overflow-x:auto; max-width:100%;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.site-header nav::-webkit-scrollbar{display:none}
.site-header nav a{color:var(--muted); font-size:.92rem; white-space:nowrap; text-decoration:none}
.site-header nav a:hover{color:var(--fg)}
.site-header nav a.active{color:var(--accent2)}
/* The nav link rule above outranks .btn on specificity; re-assert the button's
   own ink for the one button that lives in the nav. */
.site-header nav a.btn, .site-header nav a.btn:hover{color:var(--bg)}
@media(max-width:374px){
  /* Never invisible-scroll the money button: let the nav wrap instead. */
  .site-header nav{gap:6px 10px; flex-wrap:wrap; overflow:visible; justify-content:flex-end}
  .site-header nav a{font-size:.85rem}
  .brand{font-size:.9rem}
  .brand .bw{font-size:.85rem}
}

/* Buttons */
.btn{display:inline-block; background:var(--accent); color:var(--bg); font:700 .95rem/1.25 var(--display);
  font-stretch:105%; letter-spacing:.015em; padding:13px 22px; border-radius:var(--r-s); border:0; cursor:pointer; text-decoration:none}
.btn:hover{background:var(--accent2); color:var(--bg)}
.btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--card); border-color:var(--muted); color:var(--fg)}
.btn-invert{background:#fff; color:var(--bg)}
.btn-invert:hover{background:var(--fg); color:var(--bg)}
.btn-ghost-light{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12); color:#fff; border-color:#fff}
.btn-small{padding:9px 14px; font-size:.85rem}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--accent2); outline-offset:3px; border-radius:3px}

/* Sections */
.section{padding:clamp(52px,10vw,92px) 0}
.section-tight{padding:clamp(30px,6vw,52px) 0}
.section-alt{background:var(--bg2)}
.section h2{font-size:clamp(1.55rem,3.8vw,2.05rem); font-weight:600; line-height:1.25; margin:0 0 10px;
  letter-spacing:-.01em; text-wrap:balance}
.section h2.dh{font-size:clamp(1.12rem,2.6vw,1.4rem); letter-spacing:.035em}
.section .lead{font-family:var(--serif); color:var(--muted); font-size:1.04rem; line-height:1.6;
  max-width:56ch; margin:0 0 30px}

/* Hero */
.hero{padding:clamp(38px,7vw,72px) 0 clamp(44px,7vw,68px);
  background:radial-gradient(ellipse 90% 70% at 70% -10%, #1c2634 0%, var(--bg) 62%)}
.hero-grid{display:grid; gap:26px}
.hero-meta{color:var(--muted); font-size:.92rem; margin:0 0 16px}
.hero h1{font-family:var(--display); font-stretch:118%; font-weight:850; text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,2.85rem); line-height:1.06; letter-spacing:.012em; margin:0 0 18px; text-wrap:balance}
.hero .sub{font-family:var(--serif); color:var(--ink); font-size:1.09rem; line-height:1.65;
  max-width:34em; margin:0 0 10px}
.hero-by{color:var(--muted); font-size:.94rem; margin:0 0 24px}
.hero-cover-wrap{display:flex; justify-content:center}
.hero-cover{width:min(50%,210px); border-radius:4px; filter:drop-shadow(0 24px 48px rgba(0,0,0,.6))}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.cta-note{color:var(--muted); font-size:.9rem; margin-top:12px}
.hero-rating{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px;
  color:var(--muted); font-size:.92rem}
@media(min-width:820px){
  .hero-grid{grid-template-columns:6fr 5fr; grid-template-areas:"lead cover" "rest cover";
    align-items:center; column-gap:48px; row-gap:0}
  .hero-lead{grid-area:lead; align-self:end}
  .hero-rest{grid-area:rest; align-self:start}
  .hero-cover-wrap{grid-area:cover}
  .hero-cover{width:min(78%,330px)}
}

/* Star rating (real Amazon aggregate) */
.rating-stars{display:inline-block; position:relative; font-size:1.02rem; line-height:1; letter-spacing:2px}
.rating-stars::before{content:"★★★★★"; color:var(--line)}
.rating-stars::after{content:"★★★★★"; color:var(--accent); position:absolute; left:0; top:0;
  width:var(--pct,90%); overflow:hidden; white-space:nowrap}
.rating-text strong{color:var(--fg)}

/* Excerpt: a page from the book's interior. */
.excerpt-band{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(56px,11vw,104px) 0}
.excerpt-inner{max-width:620px; margin:0 auto}
.excerpt-kicker{font:italic 500 1.04rem var(--serif); color:var(--gold); margin:0 0 28px}
.excerpt-body{font-family:var(--serif); color:var(--ink);
  font-size:clamp(1.08rem,2.4vw,1.21rem); line-height:1.8}
.excerpt-body p{margin:0 0 1.15em}
.excerpt-body p:last-of-type{margin-bottom:0}
.excerpt-cta{margin-top:34px}

/* List rows: articles, related reading. Hairlines, not boxes. */
.rows{margin:0; padding:0; list-style:none}
.row{display:block; padding:20px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit}
.rows > .row:last-child, .rows > li:last-child .row{border-bottom:1px solid var(--line)}
.row-ch{font:500 .82rem var(--sans); color:var(--gold); margin:0 0 5px}
.row-ch .start{color:var(--accent2)}
.row h3{font-size:1.13rem; font-weight:600; line-height:1.35; margin:0 0 6px; color:var(--fg)}
a.row:hover h3{color:var(--accent2)}
.row p{margin:0; font-family:var(--serif); color:var(--muted); font-size:.97rem; line-height:1.55; max-width:62ch}
.row .meta{font:400 .82rem var(--sans); color:var(--muted); margin-top:8px}
.row h3.sm{font-size:1.02rem}

/* Chapter ledger (the book's real contents, set like a contents page) */
.chapters{display:grid; gap:0 44px; border-bottom:1px solid var(--line)}
@media(min-width:680px){ .chapters{grid-template-columns:1fr 1fr} }
.chapter{display:flex; gap:16px; align-items:baseline; padding:11px 0; border-top:1px solid var(--line)}
.chapter .num{font:italic 600 .95rem var(--serif); color:var(--gold); min-width:1.6em; text-align:right}
.chapter .t{font-family:var(--serif); font-size:1.01rem; color:var(--ink)}

/* Reader quotes: set as quotations, not list rows */
.quotes{max-width:680px; display:grid; gap:clamp(28px,5vw,40px)}
.quote{margin:0; position:relative; padding-left:34px}
.quote::before{content:"\201C"; position:absolute; left:0; top:-2px;
  font:600 2.6rem/1 var(--serif); color:var(--gold)}
.quote .stars{font-size:.85rem; letter-spacing:2px; line-height:1; margin-bottom:8px}
.quote .stars .on{color:var(--accent)}
.quote .stars .off{color:var(--line)}
.quote blockquote{margin:0 0 10px; font:italic 400 1.12rem/1.6 var(--serif); color:var(--ink)}
.quote figcaption{font-size:.88rem; color:var(--muted); font-weight:600}
.quote figcaption span{font-weight:400; opacity:.85}
.quotes-foot{margin:26px 0 0; font-size:.92rem; color:var(--muted)}

/* Prose (articles + md pages) */
.prose{max-width:640px}
.prose h1{font-size:clamp(1.7rem,4.6vw,2.35rem); font-weight:600; line-height:1.2; letter-spacing:-.012em; margin:0 0 10px}
.prose h2{font-size:1.48rem; font-weight:600; margin:42px 0 14px; line-height:1.3}
.prose h3{font-size:1.16rem; font-weight:600; margin:28px 0 10px}
.prose h1,.prose h2,.prose h3{text-wrap:balance}
.prose p,.prose li{font-family:var(--serif); color:var(--ink); font-size:1.0625rem; line-height:1.75}
.prose p{margin:15px 0; text-wrap:pretty}
.prose ul,.prose ol{padding-left:26px}
.prose li{margin:7px 0}
.prose strong{color:var(--fg)}
.prose blockquote{margin:24px 0; padding-left:22px; font-style:italic; color:var(--muted)}
.prose code{background:var(--card); border:1px solid var(--line); padding:1px 6px; border-radius:5px;
  font:.85em ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all}
.prose .tablewrap,.prose table{margin:20px 0}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse; width:100%; font-size:.92rem; min-width:520px; font-family:var(--sans)}
.prose th,.prose td{border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top}
.prose th{background:var(--card)}
.prose img{border-radius:var(--r-s); margin:20px 0}
.pullquote{margin:30px 0; padding:6px 0 6px 30px; position:relative;
  font:italic 500 1.25rem/1.55 var(--serif); color:var(--fg); max-width:56ch}
.pullquote::before{content:"\201C"; position:absolute; left:0; top:0;
  font:600 2.4rem/1 var(--serif); color:var(--gold)}

/* Article chrome */
.article-head{padding:clamp(30px,5vw,48px) 0 4px}
.crumbs{font:.85rem var(--sans); color:var(--muted); margin:0 0 18px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.byline{display:flex; align-items:center; gap:12px; margin:16px 0 4px; color:var(--muted); font-size:.9rem}
.byline img{width:38px; height:38px; border-radius:50%}
.byline a{color:var(--fg); font-weight:600; text-decoration:none}
.byline a:hover{text-decoration:underline}

/* Article layout + tables of contents */
.article-grid{display:grid; gap:36px}
.article-main{min-width:0}
@media(max-width:1079px){
  .article-main{max-width:640px; margin-inline:auto; width:100%}
}
.toc{display:none}
.toc-head{font:600 .85rem var(--sans); color:var(--muted); margin:0 0 10px}
.toc ol{list-style:none; padding:0; margin:0}
.toc li{margin:0}
.toc a{display:block; color:var(--muted); padding:6px 0 6px 14px; border-left:1px solid var(--line);
  line-height:1.35; font-size:.9rem; text-decoration:none}
.toc a:hover{color:var(--fg); border-left-color:var(--accent)}
@media(min-width:1080px){
  .article-grid{grid-template-columns:minmax(0,640px) 220px; justify-content:center; gap:56px; align-items:start}
  .toc{display:block; position:sticky; top:92px; align-self:start; max-height:calc(100vh - 120px); overflow:auto}
}
.toc-m{margin:20px 0 4px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg2)}
.toc-m summary{cursor:pointer; padding:12px 16px; font:600 .93rem var(--sans); color:var(--ink)}
.toc-m ol{list-style:none; margin:0; padding:2px 16px 14px}
.toc-m a{display:block; padding:7px 0; color:var(--muted); font-size:.92rem; text-decoration:none}
.toc-m a:hover{color:var(--fg)}
@media(min-width:1080px){ .toc-m{display:none} }

/* End-of-article close: cover + the book, once */
.book-close{display:flex; gap:20px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-m); padding:24px; margin:44px 0 8px; max-width:640px}
.book-close img{width:82px; flex-shrink:0; border-radius:3px}
.book-close h2{font-size:1.18rem; font-weight:600; margin:0 0 8px}
.book-close p{margin:0 0 14px; font-family:var(--serif); color:var(--muted); font-size:.96rem; line-height:1.6}
.book-close p:last-child{margin-bottom:0}

/* Forms */
form.stack{display:grid; gap:14px; max-width:640px}
.field-row{display:grid; gap:14px}
@media(min-width:680px){ .field-row{grid-template-columns:1fr 1fr} }
.field{display:block}
.field > span{display:block; font-size:.85rem; color:var(--muted); margin:0 0 6px}
input[type=text],input[type=email],select,textarea{width:100%; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
textarea{min-height:130px; resize:vertical}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.notice{border-radius:var(--r-s); padding:12px 16px; font-size:.95rem; margin:0 0 16px; max-width:640px}
.notice-ok{background:rgba(74,222,128,.1); border:1px solid var(--ok); color:var(--ok)}
.notice-err{background:rgba(248,113,113,.1); border:1px solid var(--err); color:var(--err)}

/* Buy page: two ways to pay, one price */
.pay-choice{max-width:720px}
.choice{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between;
  padding:22px 0; border-top:1px solid var(--line)}
.choice:last-of-type{border-bottom:1px solid var(--line)}
.choice-body{flex:1; min-width:230px}
.choice-body h3{font-size:1.12rem; font-weight:600; margin:0 0 4px}
.choice-body p{margin:0; font-family:var(--serif); color:var(--muted); font-size:.95rem; max-width:46ch}

/* Payment blocks */
.pay-amount{background:rgba(247,147,26,.09); border:1px solid rgba(247,147,26,.35); border-radius:var(--r-s);
  padding:12px 16px; font-size:.95rem; color:#ecd9b8; max-width:720px}
.pay-amount strong{color:var(--fg)}
.pay-block{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-m); padding:20px; margin:14px 0; max-width:720px}
.pay-qr{background:#fff; border-radius:var(--r-s); padding:8px; line-height:0; flex-shrink:0}
.pay-qr img{width:120px; height:120px; display:block}
.pay-detail{flex:1; min-width:230px}
.pay-block h3{margin:0 0 4px; display:flex; align-items:center; gap:10px; font-size:1.05rem}
.pay-block h3 img{width:26px; height:26px; border-radius:50%}
.pay-block p{color:var(--muted); font-size:.92rem; margin:6px 0}
.addr{display:block; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-s); padding:10px 12px;
  font:.8rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; user-select:all; color:var(--fg)}

/* The red band: the cover's title band, one per page, conversion only */
.jacket-band{background:radial-gradient(ellipse 120% 160% at 50% 50%, var(--band) 0%, var(--band-deep) 78%);
  border-top:1px solid #7c090c; border-bottom:1px solid #7c090c; padding:clamp(44px,8vw,76px) 0}
.jacket-grid{display:grid; gap:26px; align-items:center}
.jacket-cover{margin:0 auto; width:min(40%,140px); border-radius:3px; filter:drop-shadow(0 16px 32px rgba(0,0,0,.45))}
.jacket-body h2{font-family:var(--display); font-stretch:118%; font-weight:850; text-transform:uppercase;
  color:#fff; font-size:clamp(1.5rem,4vw,2.2rem); letter-spacing:.02em; line-height:1.08; margin:0 0 10px}
.jacket-price{color:#fff; font:600 1.35rem var(--serif); margin:0 0 12px}
.jacket-price span{font:400 .95rem var(--sans); color:#fff}
.jacket-body > p{font-family:var(--serif); color:#fff; margin:0 0 20px; max-width:54ch}
.jacket-note{font:.9rem var(--sans); margin-top:14px}
.jacket-note a{color:#fff}
.jacket-note a:hover{color:rgba(255,255,255,.8)}
@media(min-width:720px){ .jacket-grid{grid-template-columns:150px 1fr; gap:44px} .jacket-cover{width:140px} }

/* Footer */
.site-footer{border-top:1px solid var(--line); background:var(--bg2); margin-top:clamp(40px,8vw,72px)}
.footer-grid{display:grid; gap:26px; padding:44px 18px}
@media(min-width:820px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr} }
.footer-brand{font:600 1.02rem var(--serif); margin:0 0 8px}
.footer-head{font-family:var(--display); font-stretch:110%; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:.76rem; color:var(--fg); margin:0 0 12px}
.site-footer a{color:var(--muted); font-size:.93rem; text-decoration:none}
.site-footer a:hover{color:var(--fg); text-decoration:underline}
.footer-col a{display:block; padding:6px 0}
.site-footer p{color:var(--muted); font-size:.93rem; margin:0 0 6px; font-family:var(--serif)}
.footer-btm{border-top:1px solid var(--line); padding-top:16px; padding-bottom:22px;
  display:flex; gap:8px 22px; flex-wrap:wrap; align-items:baseline}
.footer-btm p{font:.82rem var(--sans); margin:0}
.footer-btm a{font-size:.82rem}

/* Author page */
.author-grid{display:grid; gap:30px; align-items:start}
@media(min-width:820px){ .author-grid{grid-template-columns:300px 1fr} }
.author-photo{border-radius:var(--r-m); width:100%}
.author-facts{list-style:none; padding:0; margin:18px 0 0}
.author-facts li{padding:9px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.95rem}
.author-facts li:last-child{border-bottom:1px solid var(--line)}

/* 404 */
.lost{display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap}
.lost img{width:110px; border-radius:3px; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ── Reference / link-magnet pages (stats, hacks, timeline) ─────────────── */
.updated{font:500 .82rem/1.5 var(--sans); color:var(--muted); margin-top:8px}
.livedot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok);
  margin-right:6px; vertical-align:middle; animation:livepulse 2.4s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

.statgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:16px}
.stat-num{font:800 1.6rem/1.1 var(--display); color:var(--accent2); letter-spacing:-.01em}
.stat-label{font:600 .9rem/1.3 var(--sans); color:var(--fg); margin-top:6px}
.stat-sub{font:400 .78rem/1.35 var(--sans); color:var(--muted); margin-top:3px}
.stat-foot{font:400 .84rem/1.55 var(--sans); color:var(--muted); margin-top:14px}
.stat-foot a{color:var(--accent2)}

.datatable{border-collapse:collapse; width:100%; font:.92rem/1.5 var(--sans); min-width:560px}
.datatable th,.datatable td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
.datatable thead th{background:var(--card); color:var(--fg); font-weight:700}
.datatable tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.datatable tr.projected{color:var(--muted)}
.tag{display:inline-block; font:600 .68rem/1 var(--sans); text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent2); background:rgba(247,147,26,.12); border:1px solid rgba(247,147,26,.3);
  padding:2px 6px; border-radius:5px; margin-left:6px; vertical-align:middle}

.milestones{display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:10px; margin-top:6px}
.milestone{background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); padding:12px; text-align:center}
.ms-price{font:800 1.15rem/1.1 var(--display); color:var(--accent2)}
.ms-date{font:500 .78rem/1.3 var(--sans); color:var(--muted); margin-top:4px}

.factgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.fact{background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:14px 16px}
.fact-val{font:700 1.25rem/1.15 var(--display); color:var(--fg)}
.fact-label{font:600 .86rem/1.3 var(--sans); color:var(--ink); margin-top:4px}
.fact-note{font:400 .76rem/1.35 var(--sans); color:var(--muted); margin-top:2px}

.cite{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-m); padding:20px 22px}
.cite-head{font:700 1.15rem/1.2 var(--display); color:var(--fg); margin:0 0 8px}
.cite p{font:400 .92rem/1.55 var(--sans); color:var(--ink); margin:0 0 10px}
.cite a{color:var(--accent2)}
.cite-text{font:.85rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted);
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-s); padding:10px 12px; user-select:all; word-break:break-word}
.cite-more{margin-top:10px}
.cite-more summary{font:600 .85rem/1.4 var(--sans); color:var(--accent2); cursor:pointer}
.cite-more p{font-size:.85rem; color:var(--muted); margin-top:8px}

@media (max-width:520px){ .stat-num{font-size:1.4rem} }
@media (prefers-reduced-motion: reduce){ .livedot{animation:none} }

/* ── Timeline page ─────────────────────────────────────────────────────── */
.tl-filter{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.tl-pill{font:600 .8rem/1 var(--sans); color:var(--muted); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer}
.tl-pill.active{color:var(--bg); background:var(--accent); border-color:var(--accent)}
.timeline{position:relative}
.timeline::before{content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-year{position:relative; font:800 1.35rem/1 var(--display); color:var(--fg); margin:24px 0 14px; padding-left:36px}
.tl-event{position:relative; padding:0 0 18px 36px}
.tl-dot{position:absolute; left:4px; top:5px; width:14px; height:14px; border-radius:50%; border:3px solid var(--bg)}
.tl-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px}
.tl-date{font:600 .8rem/1.3 var(--sans); color:var(--muted)}
.tl-cat{font:600 .66rem/1 var(--sans); text-transform:uppercase; letter-spacing:.04em; padding:3px 7px; border-radius:5px}
.tl-title{font:700 1.05rem/1.35 var(--serif); color:var(--fg); margin:0 0 4px}
.tl-desc{font:400 .92rem/1.55 var(--sans); color:var(--ink); margin:0 0 5px}
.tl-src{display:inline-block; font:500 .76rem/1 var(--sans); color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--muted)}
.tl-src:hover{color:var(--accent2); border-color:var(--accent2)}
/* category colour coding (tag background + dot fill) */
.tl-technical{background:rgba(247,147,26,.15); color:var(--accent2)}   .tl-dot.tl-technical{background:var(--accent)}
.tl-market{background:rgba(205,179,126,.16); color:var(--gold)}        .tl-dot.tl-market{background:var(--gold)}
.tl-regulatory{background:rgba(91,155,213,.16); color:#8fc0f0}         .tl-dot.tl-regulatory{background:#5b9bd5}
.tl-adoption{background:rgba(74,222,128,.14); color:var(--ok)}         .tl-dot.tl-adoption{background:var(--ok)}
.tl-security{background:rgba(248,113,113,.14); color:var(--err)}       .tl-dot.tl-security{background:var(--err)}
.tl-culture{background:rgba(148,167,180,.16); color:var(--muted)}      .tl-dot.tl-culture{background:var(--muted)}
.tl-pill.active{color:var(--bg)}

/* ── Hack database page ────────────────────────────────────────────────── */
.hack-sort{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font:600 .8rem/1 var(--sans); color:var(--muted)}
.sortbtn{font:600 .8rem/1 var(--sans); color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer}
.sortbtn.active{color:var(--bg); background:var(--gold); border-color:var(--gold)}
.hacks{margin-top:4px}
.hack{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--line)}
.hack:first-child{border-top:1px solid var(--line)}
.hack-amt{font:800 1.5rem/1.05 var(--display); color:var(--accent2); letter-spacing:-.01em}
.hack-cat{display:inline-block; margin-top:9px; font:600 .64rem/1.3 var(--sans); text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:5px}
.hack-head{display:flex; align-items:baseline; gap:12px; justify-content:space-between; flex-wrap:wrap}
.hack-name{font:700 1.1rem/1.3 var(--serif); color:var(--fg); margin:0}
.hack-date{font:600 .8rem/1 var(--sans); color:var(--muted); white-space:nowrap}
.hack-sum{font:400 .92rem/1.55 var(--sans); color:var(--ink); margin:6px 0 5px}
.hack-out{font:400 .86rem/1.5 var(--sans); color:var(--muted); margin:0 0 6px}
.hack-out-l{color:var(--fg); font-weight:600}
.hack-foot{display:flex; gap:12px; align-items:center; margin:0}
.hack-flag{font:600 .7rem/1 var(--sans); color:var(--err); border:1px solid rgba(248,113,113,.4); border-radius:5px; padding:3px 6px; cursor:help}
.hack-empty{text-align:center; color:var(--muted); padding:30px 0}
/* category colours (tag background + text) */
.hc-exchange{background:rgba(247,147,26,.15); color:var(--accent2)}
.hc-collapse{background:rgba(248,113,113,.15); color:var(--err)}
.hc-defi{background:rgba(91,155,213,.16); color:#8fc0f0}
.hc-bridge{background:rgba(205,179,126,.16); color:var(--gold)}
.hc-fraud{background:rgba(184,148,224,.16); color:#cbaef0}
.hc-rug{background:rgba(248,113,113,.15); color:var(--err)}
.hc-other{background:rgba(148,167,180,.16); color:var(--muted)}
.tl-pill.hc-exchange,.tl-pill.hc-collapse,.tl-pill.hc-defi,.tl-pill.hc-bridge,.tl-pill.hc-fraud,.tl-pill.hc-rug,.tl-pill.hc-other{color:var(--muted); background:var(--card)}
.tl-pill.active{color:var(--bg); background:var(--accent)}
@media(max-width:600px){
  .hack{grid-template-columns:1fr; gap:6px}
  .hack-amt{display:inline; font-size:1.35rem}
  .hack-cat{margin-top:0; margin-left:10px; vertical-align:middle}
}