/* @MadBitcoins archive — shared styles
   Theme: dark, cyan + amber accents (1n2.org house)
   Fonts: Space Grotesk (body), Space Mono (UI/headlines)
*/
:root{
  --bg:#070b14;
  --bg2:#0d1322;
  --card:#111a2e;
  --card-hover:#152138;
  --border:#1e2a44;
  --border-soft:rgba(56,189,248,.12);
  --text:#dde6f3;
  --muted:#7a8aa6;
  --dim:#4a5a78;
  --cyan:#38bdf8;
  --cyan-dim:#0ea5e9;
  --amber:#f59e0b;
  --amber-dim:#d97706;
  --green:#34d399;
  --red:#ef4444;
  --gold:#e8c547;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:radial-gradient(ellipse at top,#0a1428 0%,#070b14 60%);
  background-attachment:fixed;
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--cyan);text-decoration:none;transition:.15s}
a:hover{color:var(--amber)}
code,pre,.mono{font-family:'Space Mono','JetBrains Mono',monospace}


/* --- Top crumb bar --- */
.crumbs{
  position:sticky;top:0;z-index:50;
  background:rgba(7,11,20,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.crumbs-inner{
  max-width:1180px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Space Mono',monospace;font-size:.78rem;
  color:var(--muted);
}
.crumbs a{color:var(--cyan)}
.crumbs .sep{color:var(--dim)}
.crumbs .handle{
  margin-left:auto;font-family:'Space Mono',monospace;
  color:var(--amber);font-size:.74rem;letter-spacing:.5px;
  border:1px solid rgba(245,158,11,.3);padding:3px 8px;border-radius:3px;
  background:rgba(245,158,11,.05);
}

/* --- Page container --- */
.wrap{max-width:1180px;margin:0 auto;padding:32px 20px 80px}
.wrap-narrow{max-width:820px}

/* --- Hero --- */
.hero{margin:18px 0 28px}
.hero h1{
  font-family:'Space Mono',monospace;
  font-size:clamp(2.2rem,5.5vw,3.6rem);
  font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:12px;color:#fff;
}
.hero h1 .at{color:var(--cyan)}
.hero h1 .handle{color:var(--amber)}
.hero .kicker{
  font-family:'Space Mono',monospace;font-size:.78rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;
}
.hero .lede{font-size:1.08rem;color:#bcc8db;line-height:1.7;max-width:760px}
.hero .lede em{color:var(--cyan);font-style:normal}

/* --- Stats strip --- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin:20px 0 36px;
}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:14px 16px;text-align:center;
}
.stat .n{
  font-family:'Space Mono',monospace;font-size:1.55rem;font-weight:700;
  color:var(--cyan);letter-spacing:-.02em;
}
.stat .l{
  font-size:.7rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:1.2px;margin-top:3px;
}


/* --- Section headings --- */
h2{
  font-family:'Space Mono',monospace;
  font-size:1.05rem;color:var(--amber);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  margin:36px 0 14px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
h3{
  font-family:'Space Mono',monospace;
  font-size:.92rem;color:var(--cyan);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  margin:24px 0 10px;
}

/* --- Era timeline --- */
.era-timeline{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:18px 0 32px;
}
.era-card{
  display:block;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:18px 16px 14px;
  transition:.18s;text-decoration:none;color:var(--text);
  position:relative;overflow:hidden;
}
.era-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan);
  opacity:.6;transition:.18s;
}
.era-card:hover{border-color:var(--cyan);background:var(--card-hover);transform:translateY(-1px)}
.era-card:hover::before{width:5px;opacity:1}
.era-card .yr{
  font-family:'Space Mono',monospace;font-size:.7rem;
  color:var(--amber);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;
}
.era-card .name{
  font-family:'Space Mono',monospace;font-size:1.02rem;font-weight:700;
  color:#fff;letter-spacing:-.01em;margin-bottom:4px;
}
.era-card .count{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--cyan);margin-bottom:8px}
.era-card .blurb{font-size:.82rem;color:var(--muted);line-height:1.5}

/* --- Data tables --- */
.kv-table{
  width:100%;margin:14px 0;border-collapse:collapse;font-size:.85rem;
}
.kv-table td, .kv-table th{
  padding:6px 12px;border-bottom:1px solid var(--border);text-align:left;
}
.kv-table th{
  font-family:'Space Mono',monospace;font-size:.72rem;
  color:var(--amber);letter-spacing:1px;text-transform:uppercase;
}
.kv-table td.n{font-family:'Space Mono',monospace;color:var(--cyan);text-align:right}
.kv-table tr:last-child td{border-bottom:none}

/* --- Top lists --- */
.top-pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.pill{
  font-family:'Space Mono',monospace;font-size:.74rem;
  padding:4px 10px;border-radius:14px;
  background:var(--card);border:1px solid var(--border);color:var(--text);
}
.pill .pn{color:var(--cyan);margin-left:6px;font-size:.7rem}
.pill.htag{color:var(--amber)}
.pill.mention{color:var(--green)}

/* --- Word cloud --- */
.wordcloud{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;
  padding:18px;background:var(--card);border:1px solid var(--border);border-radius:10px;
  line-height:1.4;
}
.wordcloud .w{
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  color:var(--text);transition:.15s;cursor:default;
}
.wordcloud .w:hover{color:var(--cyan)}


/* --- Tweet card --- */
.tweets{display:grid;gap:12px;margin:14px 0}
.tweet{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;
}
.tweet .meta{
  font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted);
  display:flex;gap:14px;margin-bottom:8px;align-items:center;flex-wrap:wrap;
}
.tweet .meta .date{color:var(--cyan)}
.tweet .meta .eng{color:var(--amber)}
.tweet .meta a{color:var(--cyan)}
.tweet .text{color:#dde6f3;font-size:.95rem;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}

/* --- Charts --- */
.chart-box{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:18px;margin:14px 0;
}
.chart-box canvas{display:block;width:100% !important;height:340px !important}
.chart-caption{font-size:.78rem;color:var(--muted);margin-top:8px;text-align:center;font-family:'Space Mono',monospace}

/* --- Prose (markdown-rendered) --- */
.prose{font-size:.97rem;line-height:1.75;color:#cad4e6}
.prose p{margin:14px 0}
.prose ul, .prose ol{margin:12px 0 12px 24px}
.prose li{margin:6px 0}
.prose strong{color:var(--cyan)}
.prose em{color:var(--amber);font-style:normal}
.prose h2{margin:36px 0 14px}
.prose h3{margin:24px 0 10px}
.prose blockquote{
  border-left:3px solid var(--cyan);padding:8px 16px;margin:14px 0;
  background:rgba(56,189,248,.05);color:var(--text);font-style:italic;
}
.prose code{font-size:.85em;background:var(--bg2);padding:1px 6px;border-radius:3px;color:var(--amber)}

/* --- Era nav --- */
.era-nav{
  display:flex;gap:6px;margin:14px 0 28px;flex-wrap:wrap;
}
.era-nav a{
  font-family:'Space Mono',monospace;font-size:.76rem;
  padding:6px 14px;background:var(--card);border:1px solid var(--border);
  border-radius:4px;color:var(--muted);transition:.1s;
  letter-spacing:.5px;
}
.era-nav a:hover{color:var(--cyan);border-color:var(--cyan)}
.era-nav a.active{color:var(--amber);border-color:var(--amber);background:rgba(245,158,11,.08)}

/* --- TOC inline --- */
.toc{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:14px 18px;margin:18px 0 28px;font-size:.86rem;
}
.toc h4{
  font-family:'Space Mono',monospace;font-size:.72rem;color:var(--amber);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;
}
.toc ul{margin:0;list-style:none}
.toc li{padding:3px 0}
.toc a{color:var(--text)}
.toc a:hover{color:var(--cyan)}

/* --- Footer --- */
footer{
  margin-top:60px;padding:28px 20px;
  border-top:1px solid var(--border);
  text-align:center;color:var(--muted);font-size:.78rem;
  font-family:'Space Mono',monospace;letter-spacing:.5px;
}
footer .nb{color:var(--gold);margin-bottom:6px}
footer a{color:var(--cyan)}

/* --- Two-column grid --- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:18px 0}
@media (max-width:760px){
  .two-col{grid-template-columns:1fr}
}

/* --- Flagship gallery --- */
.flag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:14px 0}
.flag{
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:8px;transition:.15s;
}
.flag:hover{border-color:var(--cyan)}
.flag .head{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:.72rem}
.flag .date{color:var(--cyan)}
.flag .era{color:var(--amber);text-transform:uppercase;letter-spacing:1px}
.flag .text{font-size:.86rem;line-height:1.5;color:var(--text);white-space:pre-wrap;word-wrap:break-word}
.flag .eng{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted);margin-top:auto}
.flag .eng span{color:var(--amber);margin-right:12px}
