:root{
  /* MarkMyVerse brand palette — matched to the Ko-fi banner (see src/brand/BRAND.md) */
  --paper:#f2ead6; --surface:#fdfaf3; --ink:#0b0b0b; --ink2:#52514e; --muted:#8c8574;
  --line:#e7ddc6; --ring:rgba(138,90,18,.08);
  --accent:#b9791f; --accent-d:#8a5a12; --on-accent:#ffffff;
  --s0:#f6efdd; --s1:#f3e2b8; --s2:#e6c063; --s3:#d29a2f; --s4:#a9741a; --s5:#6e4a12;
  /* warm cream-to-gold page wash, same stops as the banner background */
  --bg-grad:linear-gradient(135deg,#f5f2ec 0%,#efe6d1 55%,#e7d3a8 100%);
  --bar-track:#eaddc0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--paper);background-image:var(--bg-grad);background-attachment:fixed;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent-d)}
.wrap{max-width:1040px;margin:0 auto;padding:20px}
.sitenav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.brand{font-weight:750;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--accent-d)}
.navlinks a{margin-left:14px;font-size:.9rem;text-decoration:none;color:var(--ink2)}
.navlinks a:hover{color:var(--accent-d)}
/* header call-to-action buttons (Support / Discord) */
.navbtn{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:6px 13px;border-radius:999px;
  font-size:.85rem;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background .15s ease,transform .05s ease}
.navbtn svg{width:16px;height:16px;display:block;flex:none;fill:currentColor}
.navbtn:active{transform:translateY(1px)}
.navbtn.kofi{background:var(--accent-d);color:var(--on-accent)}
.navbtn.kofi:hover{background:#744a10;color:var(--on-accent)}
.navbtn.discord{background:#5865f2;color:#fff}
.navbtn.discord:hover{background:#4752c4;color:#fff}
@media (max-width:560px){.navbtn span{display:none}.navbtn{padding:7px 10px}}
.tag{color:var(--ink2);font-size:.92rem;margin:.1rem 0 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:16px;box-shadow:0 1px 0 var(--ring)}
.hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bignum{font-size:2.6rem;font-weight:750;letter-spacing:-.02em;line-height:1}
.bignum small{font-size:1rem;font-weight:500;color:var(--muted)}
.subtle{color:var(--ink2);font-size:.92rem;margin-top:4px}
.bar{height:10px;background:var(--bar-track);border-radius:6px;overflow:hidden;flex:1;min-width:200px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--s3),var(--accent-d));transition:width .18s ease}
h1{font-size:1.5rem;letter-spacing:-.01em;margin:.2rem 0}
h2.sec{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
h3.sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px}
.crumb{color:var(--ink2);font-size:.9rem;margin:0 0 6px}
.crumb a{text-decoration:none}
.status{color:var(--accent-d);min-height:1.2em;font-size:.9rem}
/* heatmap */
.legend{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted);margin-top:10px}
.legend i{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--ring)}
.heat{display:flex;flex-wrap:wrap;gap:14px}
.hbook{display:flex;flex-direction:column;gap:3px}
.hbook .nm{font-size:.62rem;color:var(--ink2);white-space:nowrap;text-decoration:none}
.hbook .nm:hover{color:var(--accent-d)}
.hrow{display:flex;gap:2px;flex-wrap:wrap;max-width:150px}
.cell{width:11px;height:11px;border-radius:2px;background:var(--s0);border:1px solid var(--line);display:block}
.cell.f1{background:var(--s1);border-color:transparent}.cell.f2{background:var(--s2);border-color:transparent}
.cell.f3{background:var(--s3);border-color:transparent}.cell.f4{background:var(--s4);border-color:transparent}
.cell.f5{background:var(--s5);border-color:transparent}
/* book grid on home */
.booksec{margin-top:6px}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.book-grid a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--surface)}
.book-grid a:hover{border-color:var(--accent)}
.book-grid .bp{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
/* chapter tabs */
.chaptabs{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
.chaptabs a{width:36px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  background:var(--surface);border-radius:8px;text-decoration:none;color:var(--ink2);font-size:.85rem}
.chaptabs a:hover{border-color:var(--accent)}
.chaptabs a.done{background:var(--accent-d);border-color:var(--accent-d);color:var(--on-accent)}
.chaptabs a.part{background:var(--s1);border-color:transparent;color:var(--accent-d)}
.chaptabs a.cur{outline:2px solid var(--accent);outline-offset:1px}
/* verses */
.verse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:7px;margin-top:8px}
.verse{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:10px 0;text-align:center;cursor:pointer;
  font:inherit;font-size:.9rem;color:var(--ink2)}
.verse:hover{border-color:var(--accent)}
.verse:active{transform:scale(.94)}
.verse.read{background:var(--accent-d);border-color:var(--accent-d);color:var(--on-accent);font-weight:600}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
button.act{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.5rem .8rem;color:var(--ink)}
button.act:hover{border-color:var(--accent)}
.prevnext{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.prevnext a{text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;color:var(--ink2);background:var(--surface)}
.prevnext a:hover{border-color:var(--accent);color:var(--accent-d)}
.prevnext span{visibility:hidden}
footer{color:var(--muted);font-size:.82rem;margin:22px auto;text-align:center;max-width:1040px;padding:0 20px}
/* Stage 3: backup, search, footer links */
:root{--danger:#8a2f24}
.footlinks{margin-top:8px}
.footlinks a{margin:0 8px;text-decoration:none;color:var(--ink2)}
.footlinks a:hover{color:var(--accent-d)}
.footlinks .kofi{color:var(--on-accent);background:var(--accent-d);padding:4px 10px;border-radius:999px}
label{display:block;font-size:.8rem;color:var(--ink2);margin:.3rem 0 .2rem}
textarea,input[type=text]{width:100%;font-size:.9rem;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink)}
textarea{font-family:ui-monospace,Menlo,monospace}
input[type=file]{font:inherit;font-size:.85rem}
.backup{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.qrhost{width:200px;min-height:200px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff}
.qrhost canvas{display:block}
.grow{flex:1;min-width:260px}
.danger{color:var(--danger);border-color:var(--danger)}
.results{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.results .result{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--surface)}
.results .result:hover{border-color:var(--accent);color:var(--accent-d)}
/* Stage 4: reading paths */
.bar.mini{height:6px;margin-top:6px;min-width:0}
.pathgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pathcard{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--surface)}
.pathcard:hover{border-color:var(--accent)}
.pathcard b{font-size:1rem}
.pathcard span{font-size:.85rem;color:var(--ink2)}
.chron-entry{padding:9px 0;border-top:1px solid var(--line)}
.chron-entry:first-of-type{border-top:0}
.chron-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chron-link{text-decoration:none;font-weight:600;color:var(--ink)}
.chron-link:hover{color:var(--accent-d)}
.chron-pct{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.chron-note{color:var(--ink2);font-size:.82rem;margin:5px 0 0}
.days{display:flex;flex-direction:column;gap:5px;max-height:72vh;overflow:auto;padding-right:4px}
.day{display:flex;gap:12px;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--surface)}
.day:hover{border-color:var(--accent)}
.day .dnum{color:var(--muted);font-size:.82rem;min-width:64px;font-variant-numeric:tabular-nums}
.day .dlabel{font-size:.9rem}
.day.done{background:var(--accent-d);border-color:var(--accent-d)}
.day.done .dnum,.day.done .dlabel{color:var(--on-accent)}
.day.part{background:var(--s1);border-color:transparent}
.day.cur{outline:2px solid var(--accent);outline-offset:1px}
/* Stage 5: brand, accessibility */
.brandmark{display:inline-flex;align-items:center}
.brandmark img{width:24px;height:24px;border-radius:6px;display:block;margin-right:8px}
:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px;border-radius:6px}
.navlinks a[aria-current=page]{color:var(--accent-d);font-weight:600}
.faq{margin-top:6px}
.faq h2{font-size:1.05rem;margin:18px 0 4px}
.faq p{color:var(--ink2);margin:.3rem 0}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Light theme only — MarkMyVerse ships a single warm-cream/gold scheme. */