/* Catppuccin Mocha (always dark) — https://catppuccin.com */
:root{
  --paper:#1e1e2e; --ink:#bac2de; --head:#cdd6f4; --ember:#fab387; --ash:#6c7086;
  --slate:#a6adc8; --card:#313244; --rule:#45475a; --bold:#f9e2af;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Newsreader", Georgia, serif; font-size:1.25rem; line-height:1.75;
}
.wrap{max-width:40rem; margin:0 auto; padding:0 1.25rem 4rem}
.util, .eyebrow, nav a, .tape-label, .pn a .dir, footer{
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
}
/* ---- tape counter (signature) ---- */
.counter{display:flex; gap:3px; padding:1.1rem 0 .35rem}
.counter a{flex:1; height:7px; background:var(--rule); border-radius:1px; display:block}
.counter a.done{background:var(--slate)}
.counter a.here{background:var(--ember)}
.counter a:hover{background:var(--ember)}
.tape-label{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
  display:flex; justify-content:space-between; padding-bottom:2.2rem}
/* ---- header ---- */
.eyebrow{color:var(--ember); font-weight:700; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:.6rem}
h1{font-family:"Archivo", sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.9rem,5.5vw,2.7rem); line-height:1.08; margin-bottom:1rem; color:var(--head)}
main h2, main h3, .takeaway h3{color:var(--head)}
.lede{color:var(--slate); font-size:1.2rem; margin-bottom:1rem}
.src{font-family:"Archivo",sans-serif; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase}
.src a{color:var(--slate)}
hr.head{border:0; border-top:2px solid var(--ink); margin:1.6rem 0 2rem}
/* ---- content ---- */
main h2{font-family:"Archivo",sans-serif; font-weight:800; letter-spacing:-.01em;
  font-size:1.35rem; margin:2.4rem 0 .8rem}
main h3{font-family:"Archivo",sans-serif; font-weight:700; font-size:1.05rem; margin:1.8rem 0 .6rem}
main p{margin:.85rem 0}
main ul, main ol{margin:.85rem 0 .85rem 1.4rem}
main li{margin:.45rem 0}
main a{color:var(--ember); text-decoration-thickness:1px; text-underline-offset:3px}
main strong{font-weight:700; color:var(--bold)}
main blockquote{border-left:3px solid var(--ember); padding:.35rem 0 .35rem 1.1rem;
  margin:1.4rem 0; font-size:1.28rem; font-style:italic; color:var(--slate)}
main blockquote strong{color:var(--bold)}
/* ---- prev/next (rewind / fast-forward) ---- */
.pn{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3.5rem}
.pn a{display:block; background:var(--card); border:1px solid var(--rule); border-radius:8px;
  padding:1rem 1.1rem; text-decoration:none; color:var(--ink)}
.pn a:hover{border-color:var(--ember)}
.pn a .dir{display:block; font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ember); margin-bottom:.35rem}
.pn a .t{font-family:"Newsreader",serif; font-size:1.05rem; line-height:1.3}
.pn .next{text-align:right}
.pn .only{grid-column:2}
footer{margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--rule);
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
footer a{color:var(--slate)}
/* ---- index page ---- */
.hero{padding-top:3.2rem}
.hero .flame{font-size:2.2rem}
.takeaway{display:grid; grid-template-columns:2.6rem 1fr; gap:.9rem; margin:1.6rem 0}
.takeaway .n{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.5rem;
  color:var(--ember); line-height:1.2}
.takeaway h3{margin:0 0 .3rem; font-family:"Archivo",sans-serif; font-size:1.12rem; font-weight:800}
.takeaway p{margin:0; color:var(--slate)}
.takeaway p a{color:var(--ember)}
.map{margin-top:1rem}
.map .part{margin:1.8rem 0}
.map .part h3{font-family:"Archivo",sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:.6rem}
.map ol{list-style:none; margin:0; border-top:1px solid var(--rule)}
.map li{margin:0; border-bottom:1px solid var(--rule)}
.map li a{display:flex; gap:.9rem; align-items:baseline; padding:.6rem .2rem;
  text-decoration:none; color:var(--ink)}
.map li a:hover{color:var(--ember)}
.map li .num{font-family:"Archivo",sans-serif; font-weight:700; font-size:.8rem; color:var(--ash)}
.map li a:hover .num{color:var(--ember)}
.start{display:inline-block; margin-top:1.5rem; background:var(--ember); color:var(--paper);
  font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:.85rem; padding:.85rem 1.4rem; border-radius:6px; text-decoration:none}
.start:hover{filter:brightness(1.08)}
.start.alt{background:transparent; color:var(--ember); border:1px solid var(--ember); margin-left:.6rem}
@media (max-width:560px){ .pn{grid-template-columns:1fr} .pn .only{grid-column:1}
  .pn .next{text-align:left} }