/* ============================================================
   THE SUBGENIUS ARCHIVE — xerox-punk broadsheet
   Ink on cheap paper. Halftone. One spot color. No gradients.
   ============================================================ */
@font-face{font-family:Anton;src:url(fonts/Anton-latin.woff2)format('woff2');
  font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Anton;src:url(fonts/Anton-latin-ext.woff2)format('woff2');
  font-display:swap;unicode-range:U+0100-024F,U+2C60-2C7F}
@font-face{font-family:'Pirata One';src:url(fonts/PirataOne-latin.woff2)format('woff2');font-display:swap}

:root{
  --paper:#efe9dc; --paper-2:#e4dccb; --ink:#15120e; --ink-soft:#453d33;
  --red:#c62222; --red-deep:#8e1414; --rule:#15120e;
  --card:#f7f3ea; --shadow:rgba(21,18,14,.9);
  --display:Anton,'Arial Narrow',Impact,sans-serif;
  --body:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --maxw:1180px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#12100d; --paper-2:#0b0a08; --ink:#ece4d4; --ink-soft:#a99c86;
  --red:#ff4040; --red-deep:#ff6a6a; --rule:#ece4d4;
  --card:#1c1815; --shadow:rgba(0,0,0,.85);
}}
:root[data-theme=dark]{
  --paper:#12100d; --paper-2:#0b0a08; --ink:#ece4d4; --ink-soft:#a99c86;
  --red:#ff4040; --red-deep:#ff6a6a; --rule:#ece4d4;
  --card:#1c1815; --shadow:rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  overflow-x:hidden;
}
/* halftone newsprint tooth */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.055;
  background-image:radial-gradient(var(--ink) 1px,transparent 1.1px);
  background-size:3px 3px;mix-blend-mode:multiply;
}
@media(prefers-color-scheme:dark){body::before{mix-blend-mode:screen;opacity:.07}}

img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ink);background:var(--red);text-decoration:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- masthead ---------- */
.masthead{border-bottom:5px double var(--rule);background:var(--paper-2)}
.masthead .wrap{padding-top:22px;padding-bottom:14px}
.masthead img{margin:0 auto;filter:var(--brandfx,none)}
@media(prefers-color-scheme:dark){.masthead img{filter:invert(1) hue-rotate(180deg)}}
:root[data-theme=dark] .masthead img{filter:invert(1) hue-rotate(180deg)}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;margin:0 0 10px;
}
.kicker b{color:var(--red)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:3px solid var(--rule);
}
.nav .wrap{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.nav a{
  font-family:var(--display);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:7px 12px;border:2px solid transparent;
}
.nav a:hover,.nav a[aria-current=page]{background:var(--ink);color:var(--paper)}
.nav .spacer{margin-left:auto}
.nav .coin{border:2px solid var(--red);color:var(--red)}
.nav .coin:hover{background:var(--red);color:var(--paper)}

/* ---------- display type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.94;margin:0}
h1{font-size:clamp(38px,8vw,88px);text-transform:uppercase}
h2{font-size:clamp(27px,4.4vw,48px);text-transform:uppercase}
h3{font-size:20px;text-transform:uppercase}
.slab{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:.12em .38em;transform:rotate(-1.2deg);
}
.slab.red{background:var(--red)}
.lede{font-size:clamp(18px,2.2vw,23px);line-height:1.45;max-width:62ch}
.dek{color:var(--ink-soft);max-width:66ch}

/* ---------- hero ---------- */
.hero{padding:52px 0 40px;border-bottom:3px solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:center}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr;gap:22px}}
.hero-art{border:4px solid var(--rule);box-shadow:12px 12px 0 var(--shadow);transform:rotate(1.4deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-size:19px;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;padding:14px 24px;
  background:var(--red);color:#fff;border:3px solid var(--rule);
  box-shadow:7px 7px 0 var(--shadow);transition:transform .08s,box-shadow .08s;
}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shadow);background:var(--red-deep);color:#fff}
.btn:active{transform:translate(7px,7px);box-shadow:0 0 0 var(--shadow)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{font-size:15px;padding:9px 15px;box-shadow:5px 5px 0 var(--shadow)}
.btnrow{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}

/* ---------- section furniture ---------- */
.band{padding:52px 0;border-bottom:3px solid var(--rule)}
.band.ink{background:var(--ink);color:var(--paper)}
.band.ink h2,.band.ink h3{color:var(--paper)}
.band.ink .dek{color:#bcb2a0}
.band.ink a{color:var(--red-deep)}
.rule-head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.rule-head::after{content:"";flex:1;height:0;border-top:3px solid var(--rule)}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:.14em}

/* ---------- event cards ---------- */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.card{
  background:var(--card);border:3px solid var(--rule);box-shadow:8px 8px 0 var(--shadow);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .1s,box-shadow .1s;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--shadow);background:var(--card)}
.card .thumb{aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid var(--rule);background:var(--paper-2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) saturate(.92)}
.card:hover .thumb img{filter:contrast(1.15) saturate(1.05)}
.card .body{padding:13px 15px 16px}
.card h3{font-size:17px;line-height:1.05}
.card .meta{font-family:var(--mono);font-size:11px;color:var(--ink-soft);
  letter-spacing:.1em;text-transform:uppercase;margin-top:7px}
.card .yr{color:var(--red);font-weight:700}

/* ---------- photo gallery ---------- */
.shots{columns:4 250px;column-gap:16px}
.shots a{display:block;break-inside:avoid;margin:0 0 16px;border:3px solid var(--rule);
  box-shadow:5px 5px 0 var(--shadow);background:var(--card)}
.shots a:hover{background:var(--card);box-shadow:9px 9px 0 var(--shadow)}
.shots figcaption{font-family:var(--mono);font-size:11px;padding:6px 8px;color:var(--ink-soft);
  border-top:2px solid var(--rule);word-break:break-word}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(8,7,5,.96);z-index:2000;display:none;
  align-items:center;justify-content:center;padding:26px}
.lb[open]{display:flex}
.lb img{max-width:94vw;max-height:82vh;border:4px solid #efe9dc;object-fit:contain}
.lb .cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#efe9dc;
  font-family:var(--mono);font-size:12px;padding:0 20px}
.lb button{position:absolute;background:none;border:0;color:#efe9dc;font-size:44px;
  cursor:pointer;font-family:var(--display);line-height:1;padding:10px 18px}
.lb .x{top:6px;right:10px}.lb .prev{left:6px;top:50%;transform:translateY(-50%)}
.lb .next{right:6px;top:50%;transform:translateY(-50%)}
.lb button:hover{color:var(--red-deep)}

/* ---------- pull quote / misc ---------- */
.pull{font-family:'Pirata One',var(--display);font-size:clamp(26px,4vw,46px);
  line-height:1.08;border-left:9px solid var(--red);padding-left:20px;margin:34px 0}
.cols{columns:2 320px;column-gap:38px}
.cols p{margin-top:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;
  background:var(--rule);border:3px solid var(--rule)}
.stat{background:var(--card);padding:16px}
.stat b{display:block;font-family:var(--display);font-size:34px;color:var(--red);line-height:1}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:40px 0 54px}
footer a{color:var(--red-deep)}
footer .fine{font-family:var(--mono);font-size:11px;color:#8d8272;line-height:1.8}
.disclaimer{border:2px dashed #6d6455;padding:13px 16px;margin-top:20px;
  font-family:var(--mono);font-size:11.5px;line-height:1.7;color:#bcb2a0}
.themetoggle{background:none;border:2px solid currentColor;color:inherit;cursor:pointer;
  font-family:var(--display);font-size:13px;padding:5px 11px;text-transform:uppercase}

/* ---------- lore entries ---------- */
.lore-body .entry{margin:0 0 54px;max-width:74ch}
.lore-body .entry p{font-size:18px}
.ital{font-style:italic;color:var(--ink-soft)}
blockquote.src{margin:22px 0 0;padding:15px 18px;background:var(--card);
  border:2px solid var(--rule);border-left:9px solid var(--red)}
blockquote.src p{margin:0;font-size:15.5px;line-height:1.55;font-style:italic}
blockquote.src cite{display:block;margin-top:9px;font-family:var(--mono);font-size:10.5px;
  font-style:normal;letter-spacing:.06em;color:var(--ink-soft);word-break:break-all}

/* ---------- hour of slack ---------- */
.search{width:100%;max-width:620px;font-family:var(--body);font-size:17px;padding:13px 16px;
  background:var(--card);color:var(--ink);border:3px solid var(--rule);
  box-shadow:5px 5px 0 var(--shadow)}
.search:focus{outline:none;border-color:var(--red);box-shadow:5px 5px 0 var(--red)}
.eplist{display:grid;gap:14px}
.ep{display:grid;grid-template-columns:98px 1fr;gap:16px;padding:14px 16px;
  background:var(--card);border:3px solid var(--rule);box-shadow:5px 5px 0 var(--shadow)}
.ep:hover{box-shadow:9px 9px 0 var(--shadow)}
.ep .epn{font-family:var(--display);font-size:27px;color:var(--red);text-decoration:none;
  line-height:1;padding-top:3px}
.ep .epn:hover{background:var(--red);color:var(--paper)}
.ep h3{font-size:17px;line-height:1.1}
.ep .syn{font-size:14.5px;color:var(--ink-soft);margin:7px 0 0;line-height:1.5}
.ep .meta{font-family:var(--mono);font-size:11px;color:var(--red);margin:5px 0 0;letter-spacing:.1em}

/* ---------- misc ---------- */
.card.pad .body{padding:19px 20px 22px}
.card.pad p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:9px 0 0}
.centered{text-align:center}
.btn.big{font-size:24px;padding:19px 32px;box-shadow:9px 9px 0 var(--shadow)}
.fineprint{font-family:var(--mono);font-size:11px;color:var(--ink-soft);
  line-height:1.7;margin-top:16px;max-width:62ch}
.sell{text-align:center}
.sell .lede{margin-left:auto;margin-right:auto}
.sell .btnrow{justify-content:center}
.sell .fineprint{margin-left:auto;margin-right:auto}
@media(max-width:900px){.nav .wrap{gap:2px}.nav a{font-size:13px;padding:6px 8px}}
.lore-body .entry{max-width:none}
.entry-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
@media(max-width:860px){.entry-cols{grid-template-columns:1fr}}
.entry-text{max-width:70ch}
.lorepic{margin:0;border:3px solid var(--rule);box-shadow:8px 8px 0 var(--shadow);
  background:var(--card);transform:rotate(-1deg)}
.lorepic img{width:100%;display:block;border-bottom:2px solid var(--rule)}
.lorepic figcaption{font-family:var(--mono);font-size:10.5px;padding:7px 9px;color:var(--ink-soft)}
.byline-h{color:var(--red)!important;font-weight:700}
/* ---------- the dispenser ---------- */
.oracle-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
@media(max-width:860px){.oracle-grid{grid-template-columns:1fr}}
.or-pic{margin:0;border:3px solid var(--rule);box-shadow:9px 9px 0 var(--shadow);
  background:var(--card);transform:rotate(-.7deg)}
.or-pic img{width:100%;display:block;border-bottom:2px solid var(--rule);
  min-height:200px;background:var(--paper-2)}
.or-pic figcaption{font-family:var(--mono);font-size:11px;padding:8px 10px;color:var(--ink-soft)}
.or-side{display:flex;flex-direction:column;gap:22px}
.or-q{margin:0;border-left:9px solid var(--red);padding:4px 0 4px 20px}
.or-q p{font-family:'Pirata One',var(--display);font-size:clamp(21px,2.7vw,31px);
  line-height:1.16;margin:0}
.or-q cite{display:block;margin-top:11px;font-family:var(--mono);font-size:11px;font-style:normal;
  letter-spacing:.08em;color:var(--ink-soft)}
.or-ep{border:2px dashed var(--rule);padding:14px 16px;background:var(--card)}
.or-ep h3{font-size:17px;line-height:1.15}
.or-ep h3 a{text-decoration:none}
.or-ep .syn{font-size:14px;color:var(--ink-soft);margin:8px 0 0;line-height:1.5}
button.btn{cursor:pointer;font-family:var(--ui)}
/* ---------- the reader: made for actually reading ---------- */
.reader{padding:46px 0 60px}
.reader .wrap{max-width:760px}
.readtitle{font-size:clamp(32px,5.6vw,60px);line-height:.95;margin:6px 0 14px}
.prose{margin-top:34px}
.prose p{font-size:19.5px;line-height:1.68;margin:0 0 1.25em;
  hyphens:auto;-webkit-hyphens:auto}
.prose p.dropcap::first-letter{font-family:var(--display);font-size:4.2em;line-height:.82;
  float:left;padding:.04em .09em 0 0;color:var(--red)}
.endrule{border:0;border-top:3px solid var(--rule);margin:44px 0 26px}
@media(max-width:600px){.prose p{font-size:18px;line-height:1.62}}
.seealso{margin-top:26px;padding-top:18px;border-top:2px dashed var(--rule)}
.seealso .btnrow{margin-top:10px;gap:10px}
.surprise{background:var(--red);color:#fff;border:2px solid var(--rule);cursor:pointer;
  font-family:var(--display);font-size:14px;text-transform:uppercase;padding:6px 12px;
  letter-spacing:.05em;margin-left:6px}
.surprise:hover{background:var(--ink);color:var(--paper)}
/* ---------- scripture: verse-numbered like the thing it parodies ---------- */
.scripture{margin-top:30px}
.scripture .versehead{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--rule);
  padding-bottom:12px;margin-bottom:24px}
.verse{position:relative;padding-left:52px;font-size:19px;line-height:1.62;margin:0 0 .85em}
.verse .vn{position:absolute;left:0;top:.2em;width:40px;text-align:right;
  font-family:var(--display);font-size:14px;color:var(--red);letter-spacing:.02em}
@media(max-width:600px){.verse{padding-left:40px;font-size:17.5px}.verse .vn{width:30px}}
/* ---------- art inside a document ---------- */
.docart{margin:34px 0;border:3px solid var(--rule);box-shadow:10px 10px 0 var(--shadow);
  background:var(--card);max-width:100%}
.docart img{width:100%;height:auto;display:block;border-bottom:2px solid var(--rule)}
.docart figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  padding:10px 12px;color:var(--ink-soft);text-transform:uppercase}

/* ============================================================
   SACRED PASS — warm the ink, calm the contrast, illuminate.
   Keeps the masthead and the header bar; softens everything
   that was shouting underneath them.
   ============================================================ */
:root{
  --paper:#f2ecdc; --paper-2:#e9e0c9; --card:#f8f3e6;
  --ink:#2a2118;            /* warm brown-black, not pure black */
  --ink-soft:#6b5c48;
  --red:#9d2320;            /* liturgical, not fire-engine */
  --red-deep:#7a1a17;
  --gold:#b08d3f;
  --rule:#7a6a53;           /* brown rules instead of black */
  --shadow:rgba(94,80,58,.30);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#14110d; --paper-2:#0e0c09; --card:#1d1811;
  --ink:#ece0c8; --ink-soft:#a8977c; --red:#d9605c; --red-deep:#e8807c;
  --gold:#d4ae5c; --rule:#6b5c44; --shadow:rgba(0,0,0,.55);
}}
:root[data-theme=dark]{
  --paper:#14110d; --paper-2:#0e0c09; --card:#1d1811;
  --ink:#ece0c8; --ink-soft:#a8977c; --red:#d9605c; --red-deep:#e8807c;
  --gold:#d4ae5c; --rule:#6b5c44; --shadow:rgba(0,0,0,.55);
}

/* softer paper grain */
body::before{opacity:.035}

/* rules and frames: thinner, warmer, less shadow */
.band,.nav,.hero{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--rule)}
.masthead{border-bottom:3px double var(--rule)}
.rule-head::after{border-top:1px solid var(--rule)}
.card,.ep,.search,.or-pic,.lorepic,.docart,blockquote.src{
  border-width:1px;border-color:var(--rule);box-shadow:0 2px 10px var(--shadow)}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow)}
.ep:hover,.or-pic,.lorepic{box-shadow:0 3px 14px var(--shadow)}
.shots a{border-width:1px;border-color:var(--rule);box-shadow:0 2px 9px var(--shadow)}
.shots a:hover{box-shadow:0 7px 20px var(--shadow)}
.hero-art,.or-pic,.lorepic{transform:none}
.docart{box-shadow:0 4px 18px var(--shadow)}
.stats{border-width:1px;border-color:var(--rule);background:var(--rule)}

/* the black slab: keep it, but make it ink-on-parchment, not a brick */
.slab{background:none;color:var(--ink);padding:0;transform:none;
  border-bottom:3px double var(--gold)}
.slab.red{background:none;color:var(--red);border-bottom-color:var(--red)}

/* buttons: pressed seal, not a punk sticker */
.btn{border-width:1px;border-color:var(--rule);box-shadow:0 2px 8px var(--shadow);
  font-size:16px;letter-spacing:.09em;padding:12px 22px}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--shadow)}
.btn:active{transform:translateY(0)}
.btn.big{font-size:20px;padding:16px 30px}
.btn.ghost{background:transparent;border-color:var(--rule)}
.surprise{background:transparent;color:var(--red);border-color:var(--red)}
.surprise:hover{background:var(--red);color:var(--paper)}
.nav a:hover,.nav a[aria-current=page]{background:none;color:var(--red);
  box-shadow:inset 0 -3px 0 var(--red)}
.band.ink{background:var(--ink);color:var(--paper-2)}
.band.ink .btn.ghost{color:var(--paper-2);border-color:var(--paper-2)}

/* display type: blackletter for section heads — the sacred register */
h2{font-family:'Pirata One',var(--display);text-transform:none;letter-spacing:.005em;
  font-size:clamp(29px,4.2vw,46px);line-height:1.02}
h1{text-transform:none;font-family:'Pirata One',var(--display);
  font-size:clamp(36px,7vw,74px);line-height:1.0}
h3{font-family:var(--display);letter-spacing:.03em}
.kicker{color:var(--ink-soft);letter-spacing:.28em}
.kicker b{color:var(--red)}

/* ---------- the reader ---------- */
.readtitle{
  font-family:'Pirata One',var(--display);text-transform:none;
  font-size:clamp(30px,4.6vw,50px);line-height:1.06;
  text-wrap:balance;hyphens:none;max-width:20ch;margin:10px 0 18px;
}
.reader .count{margin-bottom:0}
.reader .prose{margin-top:40px}

/* illuminated capital, not a slab of Anton */
.prose p.dropcap::first-letter{
  font-family:'Pirata One',var(--display);
  font-size:3.4em;line-height:.9;float:left;
  margin:.06em .12em 0 0;padding:0 .06em;
  color:var(--red);
}
.versehead{font-family:var(--body)!important;font-size:14.5px!important;
  letter-spacing:.02em!important;text-transform:none!important;font-style:italic;
  border-bottom:1px solid var(--rule)!important;color:var(--ink-soft);
  padding-bottom:14px!important;margin-bottom:30px!important}
.verse .vn{font-family:var(--body);font-size:12.5px;color:var(--gold);font-style:italic}
.prose p{font-size:19px;line-height:1.72}
blockquote.src{border-left-width:4px;border-left-color:var(--gold);background:var(--paper-2)}
.or-q p{color:var(--ink)}
.pull,.or-q p{font-family:'Pirata One',var(--display)}
.endrule{border-top:3px double var(--rule)}
.frontmatter{font-family:var(--body);font-style:italic;color:var(--ink-soft);
  font-size:16.5px;line-height:1.7;margin:0 0 34px;padding-bottom:20px;
  border-bottom:1px solid var(--rule)}
.qline{font-family:'Pirata One',var(--display);font-size:24px;line-height:1.15;
  text-transform:none;color:var(--red);margin:38px 0 14px;letter-spacing:.01em}
.qline+p{margin-top:0}
/* ---------- the Hour of Slack player ---------- */
.player{margin-top:30px;padding:20px 22px;background:var(--card);
  border:1px solid var(--rule);box-shadow:0 3px 14px var(--shadow)}
.player-head{margin-bottom:12px}
.nowplaying{font-family:'Pirata One',var(--display);font-size:clamp(20px,2.6vw,29px);
  line-height:1.15;margin:4px 0 4px;color:var(--ink)}
.player audio{width:100%;margin:8px 0 4px;height:38px}
.player .btnrow{margin-top:12px}
.ep .epn{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:transparent;border:1px solid var(--rule);cursor:pointer;
  font-family:var(--display);font-size:19px;color:var(--red);padding:8px 4px;line-height:1}
.ep .epn span{font-size:11px;color:var(--ink-soft);letter-spacing:.04em}
.ep .epn:hover:not([disabled]){background:var(--red);color:var(--paper)}
.ep .epn:hover:not([disabled]) span{color:var(--paper)}
.ep .epn[disabled]{opacity:.4;cursor:default;color:var(--ink-soft)}
.ep.playing{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.ep.noaudio{opacity:.72}
.yrrail{display:flex;flex-wrap:wrap;gap:8px}
.yrchip{background:var(--card);border:1px solid var(--rule);cursor:pointer;
  font-family:var(--display);font-size:15px;color:var(--ink);padding:8px 11px;
  display:flex;align-items:baseline;gap:6px;letter-spacing:.03em}
.yrchip span{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.yrchip:hover{background:var(--red);color:var(--paper);border-color:var(--red)}
.yrchip:hover span{color:var(--paper)}
.yrchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.yrchip.on span{color:var(--gold)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--rule);padding:4px 8px;color:var(--ink-soft)}
.player .syn{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:8px 0 0}
.btn[disabled]{opacity:.5;cursor:default}
.gohost{color:var(--red)!important;margin-top:12px!important;letter-spacing:.08em}
a.card:hover .gohost{color:var(--red-deep)!important}

/* ============================================================
   LEGIBILITY PASS
   The halftone was a fixed overlay at z-index 9999 with
   mix-blend-mode:multiply -- i.e. a dot screen printed ON TOP of
   every glyph. That is what made red display type look fuzzy.
   Texture now lives in the body background, behind the text.
   ============================================================ */
body::before{content:none!important;display:none!important}
body{
  background-color:var(--paper);
  background-image:radial-gradient(rgba(42,33,24,.055) 1px, transparent 1.15px);
  background-size:3px 3px;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body{
  background-image:radial-gradient(rgba(236,224,200,.06) 1px, transparent 1.15px)}}
:root[data-theme=dark] body{
  background-image:radial-gradient(rgba(236,224,200,.06) 1px, transparent 1.15px)}

/* Red display numerals: darker, tighter, and no longer screened */
.stat b{
  color:#8a1a17;
  font-size:38px;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
.stat span{color:var(--ink-soft);font-size:11.5px;letter-spacing:.1em}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .stat b{color:#ff7b76}}
:root[data-theme=dark] .stat b{color:#ff7b76}

/* the same screening hurt every other red heading */
h1,h2,.nowplaying,.qline,.or-q p,.pull,.readtitle{-webkit-font-smoothing:antialiased}
.verse .vn{color:#8a6a24}
.doclist{list-style:none;padding:0;margin:18px 0}
.doclist li{padding:9px 0 9px 26px;border-bottom:1px solid var(--rule);position:relative;
  font-size:18px;line-height:1.5}
.doclist li::before{content:"\2767";position:absolute;left:0;top:9px;color:var(--red);font-size:14px}
.doclist.cols2{columns:2 240px;column-gap:32px}
.doclist.cols2 li{break-inside:avoid;border-bottom:none;padding:5px 0 5px 26px}
.band.ink .doclist li{border-bottom-color:#4a4034}
.band.ink blockquote.src{background:#231d17;border-color:#4a4034;border-left-color:var(--gold)}
.quiz .q{font-family:'Pirata One',var(--display);font-size:clamp(23px,3.4vw,36px);
  line-height:1.15;margin:0 0 14px}
.quiz .q.big{color:var(--red)}
.quiz .a{font-size:19px;color:var(--ink-soft);margin-top:22px;max-width:64ch}

/* ============================================================
   CONTRAST AUDIT FIXES — measured, not guessed.
   Worst offender: links on the dark band and in the footer were
   --red-deep (#7a1a17) on --ink (#2a2118) = 1.50:1. Invisible.
   ============================================================ */
.band.ink a,
footer a          { color:#e8a54e; }                    /* 7.47:1 on ink */
.band.ink a:hover,
footer a:hover    { color:#2a2118; background:#e8a54e; }
footer .fine      { color:#a89c88; }                    /* 4.19 -> 5.85:1 */
footer .fine a    { color:#e8a54e; }
.disclaimer       { border-color:#8a7f6b; color:#c6bcaa; }
.band.ink blockquote.src cite,
.band.ink .dek    { color:#c6bcaa; }
.band.ink .doclist li { border-bottom-color:#544a3c; }

/* verse numbers were 4.27:1 light / 3.74:1 dark */
.verse .vn        { color:#6f5518; }                    /* 5.96:1 on paper */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .verse .vn{color:#d4ae5c}}
:root[data-theme=dark] .verse .vn { color:#d4ae5c; }    /* 8.97:1 */

/* borders in dark theme were 2.90:1 -- lift them so panels stay readable */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--rule:#8a7758}}
:root[data-theme=dark]{--rule:#8a7758}

/* ============================================================
   TYPE + NAV SCALING
   Anton is an ultra-condensed display face. It is fine at 40px
   and hostile at 14px. Display sizes keep it; anything small
   moves to a real UI sans. Nav now scales fluidly instead of
   wrapping [INVERT] onto its own line.
   ============================================================ */
:root{
  --ui:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---- the nav: one line, fluid, never wraps ---- */
.nav .wrap{
  display:flex; flex-wrap:nowrap; align-items:center;
  gap:clamp(1px,.30vw,7px);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-top:7px; padding-bottom:7px;
}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{
  font-family:var(--ui);
  font-weight:650;
  font-size:clamp(11.5px,1.02vw,15px);
  letter-spacing:.01em;
  text-transform:uppercase;
  padding:6px clamp(4px,.55vw,11px);
  white-space:nowrap;
  flex:0 0 auto;
}
.nav .spacer{flex:1 1 auto;min-width:clamp(4px,1vw,20px)}
.surprise,.themetoggle{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(10.5px,.92vw,13px);
  padding:5px clamp(6px,.6vw,11px);
  white-space:nowrap; flex:0 0 auto; margin-left:0;
}

/* ---- small text moves off the condensed face ---- */
h3,
.card h3,
.ep h3,
.or-ep h3,
.stat span,
.btn,
.count,
.meta,
.yrchip{
  font-family:var(--ui);
  letter-spacing:.005em;
}
h3,.card h3{font-weight:700;font-size:17.5px;line-height:1.25;text-transform:none}
.card .meta,.ep .meta,.count{font-weight:600;letter-spacing:.06em}
.btn{font-weight:700;font-size:clamp(14px,1.05vw,16px);letter-spacing:.02em;text-transform:none}
.btn.big{font-size:clamp(17px,1.5vw,21px)}
.btn.sm{font-size:13.5px}
.stat span{font-weight:600;letter-spacing:.08em;font-size:11.5px}
.yrchip{font-weight:700;font-size:14px}
.kicker{font-family:var(--ui);font-weight:700;letter-spacing:.18em;font-size:11.5px}

/* display type keeps the character */
h1,h2,.readtitle,.nowplaying,.qline,.or-q p,.pull,.quiz .q{font-family:'Pirata One',Anton,serif}
.stat b{font-family:Anton,'Arial Narrow',sans-serif}

/* The nav is chrome, not content: it gets the full viewport, not the 1180px
   text column. Previously it overflowed the column and scrolled INVERT
   off-screen at most desktop widths. */
.nav .wrap{max-width:none;padding-left:clamp(10px,1.6vw,26px);padding-right:clamp(10px,1.6vw,26px)}
@media(min-width:1300px){.nav a{font-size:15px}}

/* Phones: the link list scrolls, but the two controls stay pinned to the
   right edge so Surprise and Invert are never scrolled out of reach. */
@media(max-width:899px){
  .nav .wrap{gap:2px;padding-right:2px}
  .nav a{font-size:13px;padding:6px 7px}
  .nav .spacer{display:none}
  .surprise,.themetoggle{
    position:sticky; flex:0 0 auto;
    font-size:11px; padding:6px 8px;
    background:var(--paper); box-shadow:-10px 0 12px -6px var(--shadow);
  }
  .themetoggle{right:0; z-index:3; border-left:1px solid var(--rule)}
  .surprise{right:64px; z-index:2; color:var(--red)}
}

/* ============================================================
   [hidden] MUST WIN.
   .card{display:flex} was overriding the UA sheet's
   [hidden]{display:none}, so every search filter set the
   attribute and nothing ever disappeared -- "1 document
   matching" while all 76 stayed on screen.
   ============================================================ */
[hidden]{display:none!important}

/* filtering feedback */
.searchwrap{position:relative}
.noresults{padding:26px 0;font-size:18px;color:var(--ink-soft)}

/* ---------- The Book: page-marked reading edition ---------- */
.bookprose .bpage{position:relative;padding-top:6px}
.bookprose .pnum{
  position:absolute;left:-72px;top:12px;width:56px;text-align:right;
  font-family:var(--mono);font-size:11px;color:var(--ink-soft);
  letter-spacing:.04em;padding-top:4px;border-top:1px solid var(--rule);
}
@media(max-width:980px){
  .bookprose .pnum{position:static;display:inline-block;width:auto;border-top:none;
    border-bottom:1px solid var(--rule);margin:22px 0 10px;padding:0 0 4px}
}
.bookprose p.shout{
  font-family:'Pirata One',var(--display);font-size:clamp(21px,2.6vw,30px);
  line-height:1.16;color:var(--red);margin:26px 0 18px;
}
.chapcard .body h3{font-size:19px;line-height:1.2}
.chapcard .body p{font-size:15px}
.bhit{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:13px 15px;margin:0 0 10px;
  background:var(--card);border:1px solid var(--rule);text-decoration:none;color:inherit;
  box-shadow:0 2px 8px var(--shadow);font-size:15px;line-height:1.55}
.bhit:hover{background:var(--card);box-shadow:0 6px 16px var(--shadow)}
.bhit .bp{font-family:var(--mono);font-size:12px;color:var(--red);padding-top:2px}
.bhit b{font-family:var(--ui);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}

/* ============================================================
   CALM PASS
   The blackletter belongs on the masthead image and nowhere else.
   Headings become plain, readable type. Paper luminance drops to
   cut glare, ink is warm dark brown rather than near-black, rules
   go quiet, and red stops being a background.
   ============================================================ */
:root{
  --paper:#e9e3d5; --paper-2:#e2dbc9; --card:#f2ede1;
  --ink:#3a2f22;            /* 10.2:1 -- readable without glare */
  --ink-soft:#6f6353;       /* 4.58:1 */
  --red:#8f2b22; --red-deep:#7a231b;
  --gold:#9a7c3a;
  --rule:#c3b69e;           /* quiet hairlines, not black bars */
  --shadow:rgba(90,78,58,.16);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#191510; --paper-2:#12100b; --card:#221d16;
  --ink:#e6dcc6; --ink-soft:#a5977f; --red:#e08a80; --red-deep:#eda69c;
  --gold:#c9a862; --rule:#4f4534; --shadow:rgba(0,0,0,.45);
}}
:root[data-theme=dark]{
  --paper:#191510; --paper-2:#12100b; --card:#221d16;
  --ink:#e6dcc6; --ink-soft:#a5977f; --red:#e08a80; --red-deep:#eda69c;
  --gold:#c9a862; --rule:#4f4534; --shadow:rgba(0,0,0,.45);
}
body{background-image:none}                 /* drop the dot texture entirely */

/* ---- no blackletter anywhere but the masthead image ---- */
h1,h2,h3,
.readtitle,.nowplaying,.qline,.or-q p,.pull,.quiz .q,
.bookprose p.shout,.slab,.stat b{
  font-family:var(--ui);
  font-weight:700;
  letter-spacing:-.005em;
  text-transform:none;
  color:var(--ink);
}
h1,.readtitle{font-size:clamp(29px,3.6vw,44px);line-height:1.14;font-weight:800}
h2{font-size:clamp(21px,2.3vw,29px);line-height:1.2}
h3,.card h3{font-size:17px;font-weight:700;line-height:1.3}
.quiz .q{font-size:clamp(19px,2vw,25px);font-weight:700;line-height:1.3}
.pull,.or-q p{font-size:clamp(18px,1.9vw,24px);font-weight:600;line-height:1.4;font-style:italic}
.bookprose p.shout{font-size:clamp(17px,1.7vw,21px);font-weight:700;color:var(--red);
  letter-spacing:.01em;margin:26px 0 14px}
.nowplaying{font-size:clamp(18px,1.9vw,24px);font-weight:700}

/* ---- red stops being a slab ---- */
.slab,.slab.red{background:none!important;color:var(--ink)!important;
  border-bottom:2px solid var(--gold);padding:0;transform:none}
.slab.red{color:var(--red)!important;border-bottom-color:var(--red)}
.stat b{color:var(--red);font-weight:800;font-size:31px;letter-spacing:-.01em}
.band.ink{background:#2f261b;color:#e6dcc6}
.band.ink h2,.band.ink h3{color:#f0e7d4}

/* ---- structure gets quieter ---- */
.band,.hero{border-bottom:1px solid var(--rule)}
.rule-head::after{border-top:1px solid var(--rule)}
.card,.ep,.bhit,.or-pic,.lorepic,.docart,.player,.search,blockquote.src{
  border:1px solid var(--rule);box-shadow:0 1px 4px var(--shadow)}
.card:hover{box-shadow:0 4px 14px var(--shadow);transform:translateY(-1px)}
.btn{border:1px solid var(--red);background:var(--red);color:#fdfaf3;box-shadow:none;font-weight:650}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep);transform:none;color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink);border-color:var(--ink-soft)}
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav{border-bottom:1px solid var(--rule)}
.endrule{border-top:1px solid var(--rule)}
.verse .vn{color:var(--ink-soft)}
.prose p.dropcap::first-letter{font-family:var(--ui);font-size:2.9em;font-weight:800;
  color:var(--red);margin:.02em .1em 0 0}

/* ---------- book chapter navigation ---------- */
.booknav{position:sticky;top:0;z-index:45;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.booknav .wrap{display:flex;align-items:center;gap:8px;padding-top:8px;padding-bottom:8px}
.bn-arrow{font-family:var(--ui);font-size:22px;line-height:1;text-decoration:none;
  color:var(--ink);border:1px solid var(--rule);padding:2px 12px 5px;flex:0 0 auto}
.bn-arrow:hover{background:var(--ink);color:var(--paper)}
.bn-sel{font-family:var(--ui);font-size:14px;padding:7px 9px;background:var(--card);
  color:var(--ink);border:1px solid var(--rule);max-width:100%}
.bn-chap{flex:1 1 auto;min-width:0}
.bn-page{flex:0 0 auto}
.bn-toc{font-family:var(--ui);font-size:13px;font-weight:650;text-transform:uppercase;
  letter-spacing:.04em;text-decoration:none;color:var(--red);flex:0 0 auto;padding:0 4px}
.bn-progress{height:3px;background:transparent}
.bn-progress i{display:block;height:3px;background:var(--red);width:0}
@media(max-width:700px){.bn-page{display:none}.bn-toc{display:none}.bn-sel{font-size:13px}}
.chapart{margin:26px 0 34px;border:1px solid var(--rule);background:var(--card);
  box-shadow:0 1px 6px var(--shadow);max-width:560px}
.chapart img{width:100%;height:auto;display:block;border-bottom:1px solid var(--rule)}
.chapart figcaption{font-family:var(--ui);font-size:12.5px;padding:10px 12px;color:var(--ink)}
.chapart figcaption span{color:var(--ink-soft);font-size:11.5px}

/* ============================================================
   NAV: centered, and it never wraps at any width.
   A script shrinks the type until the row fits; CSS guarantees
   the no-wrap regardless.
   ============================================================ */
.nav .wrap{
  justify-content:center;
  flex-wrap:nowrap!important;
  overflow:hidden;
  gap:0;
  font-size:var(--navfs,15px);
}
.nav .spacer{display:none!important}
.nav a{
  font-size:1em;
  padding:6px clamp(3px,.7vw,13px);
  white-space:nowrap;
  flex:0 0 auto;
}
.surprise,.themetoggle{
  font-size:.85em;
  padding:5px clamp(4px,.55vw,10px);
  white-space:nowrap;flex:0 0 auto;margin-left:6px;
  position:static!important;box-shadow:none;background:transparent;
}
.surprise{color:var(--red);border:1px solid var(--red)}
.themetoggle{border:1px solid var(--rule)}
@media(max-width:899px){
  .nav .wrap{gap:0;padding-left:6px;padding-right:6px}
  .surprise,.themetoggle{margin-left:4px}
}
/* only when the row genuinely cannot fit at a readable size */
.nav .wrap.nav-scroll{overflow-x:auto;justify-content:flex-start;
  scrollbar-width:none;-ms-overflow-style:none}
.nav .wrap.nav-scroll::-webkit-scrollbar{display:none}

/* ---------- World Without Slack: stitched novel ---------- */
.wwsnote{background:var(--card);border:1px solid var(--rule);padding:18px 20px;margin:26px 0 20px}
.wwsnote p{font-size:16px;line-height:1.6;margin:0 0 10px}
.wwsnote p:last-child{margin-bottom:0}
.wwschap{margin:52px 0 0}
.wwschap h2{margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.wwsepi{margin:0 0 26px;padding-left:18px;border-left:3px solid var(--gold)}
.wwsepi p{font-size:15.5px;font-style:italic;color:var(--ink-soft);line-height:1.5;margin:0 0 6px}
.wwsgap{text-align:center;font-family:var(--ui);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--red);margin:48px 0 0;padding:14px 0;
  border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule)}

/* ---------- Pamphlet #1: original art in its original places ---------- */
.pampage{margin:0 0 46px;padding-bottom:34px;border-bottom:1px solid var(--rule)}
.pampage:last-child{border-bottom:none}
.pamlabel{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px}
.pamimg{margin:0 0 14px}
.pamimg img{max-width:100%;height:auto;display:block;border:1px solid var(--rule);background:#fff}
.pamimg.fl{float:left;margin:4px 20px 12px 0;max-width:46%}
.pamimg.fr{float:right;margin:4px 0 12px 20px;max-width:46%}
.pamimg.fb{margin:18px auto;max-width:100%}
.pamh{clear:none;margin:18px 0 12px;line-height:1.15}
h2.pamh{font-size:clamp(23px,2.7vw,33px)}
h3.pamh{font-size:clamp(19px,2.1vw,25px)}
h4.pamh{font-size:17px;font-weight:700}
.clearfix{clear:both}
.pamprose p{font-size:17.5px;line-height:1.62}
@media(max-width:640px){.pamimg.fl,.pamimg.fr{float:none;max-width:100%;margin:14px 0}}

/* ---------- The Book of Dobbscoin ---------- */
.canonprose .cverse{font-family:var(--ui);font-size:18px;font-weight:700;line-height:1.3;
  margin:30px 0 12px;color:var(--ink)}
.canonprose .cvn{display:inline-block;min-width:44px;color:var(--red);font-weight:800;
  font-variant-numeric:tabular-nums}
.canonprose p{font-size:18.5px;line-height:1.68}
.canonprose p.cline{line-height:1.55;margin:0 0 1.1em}
.canonprose .wwschap{margin:56px 0 0}
.canonprose .wwschap h2{margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
@media print{
  .nav,.booknav,.masthead,footer,.btnrow,.surprise,.themetoggle{display:none!important}
  .canonprose p{font-size:11pt;line-height:1.45}
  .canonprose .wwschap{page-break-before:always}
  .canonprose .cverse{page-break-after:avoid}
}

/* section headers must outrank verse numbers, not hide beneath them */
.canonprose .csect{
  font-family:var(--ui);font-weight:800;
  font-size:clamp(22px,2.5vw,30px);line-height:1.2;
  margin:52px 0 20px;padding-bottom:10px;
  border-bottom:2px solid var(--rule);color:var(--ink);
  display:flex;align-items:baseline;gap:14px;
}
.canonprose .csect .csn{
  font-size:.62em;font-weight:800;color:var(--red);
  border:2px solid var(--red);padding:2px 10px;line-height:1.25;
  flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.canonprose .cverse{font-size:17px;font-weight:700;margin:24px 0 8px}
.canonprose .cverse .cvn{min-width:52px;font-size:.92em;font-weight:700;opacity:.95}
.canonprose .cscribe{
  font-family:var(--body);font-style:italic;font-size:16.5px;line-height:1.6;
  background:var(--card);border-left:4px solid var(--gold);
  padding:16px 20px;margin:30px 0;color:var(--ink-soft);
}

/* a verse is a paragraph with a numbered marker -- not a heading */
.canonprose p.cverse{
  font-family:var(--body);font-weight:400;font-size:18.5px;line-height:1.68;
  margin:0 0 1.05em;padding-left:60px;text-indent:-60px;
}
.canonprose p.cverse .cvn{
  display:inline-block;width:52px;margin-right:8px;text-indent:0;
  font-family:var(--ui);font-weight:800;font-size:14px;color:var(--red);
  vertical-align:baseline;font-variant-numeric:tabular-nums;
}
.canonprose p.cverse.cline{line-height:1.5}
@media(max-width:640px){
  .canonprose p.cverse{padding-left:44px;text-indent:-44px}
  .canonprose p.cverse .cvn{width:38px;margin-right:6px}
}
/* emphasis inside an already-italic quote flips upright, so it still reads as stress */
.canonprose em em, .canonprose em i, .cscribe em em{font-style:normal}

/* ---- ATARI PASS ---------------------------------------------------------
   A code listing inside a lore entry, and crisp scaling for 1-bit pixel art
   (a 640x400 ST screenshot goes to mush under the browser's default smoothing). */
.tinycode{font-family:var(--mono);font-size:12.5px;line-height:1.55;
  background:var(--paper-deep,rgba(0,0,0,.05));border-left:4px solid var(--red-deep);
  padding:12px 14px;margin:14px 0;overflow-x:auto;white-space:pre;color:var(--ink)}
.lorepic img[src$=".gif"]{image-rendering:pixelated;image-rendering:crisp-edges}

/* an artifact reproduced at full column width, inside the prose */
.inlineshot{margin:16px 0;border:3px solid var(--rule);box-shadow:6px 6px 0 var(--shadow)}
.inlineshot img{width:100%;display:block;border-bottom:2px solid var(--rule);
  image-rendering:pixelated;image-rendering:crisp-edges}
.inlineshot figcaption{font-family:var(--mono);font-size:10.5px;padding:7px 9px;
  color:var(--ink-soft)}
/* a #hash link used to drop the entry's own headline behind the sticky nav */
.entry{scroll-margin-top:86px}

/* the magnified Dobbshead is 1:2 -- unchecked it eats a whole phone screen */
.lorepic img[src$="dobbshead.png"]{width:auto;max-width:100%;max-height:520px;margin:0 auto}

/* a note about where a citation points, not part of the argument */
.srcnote{font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--ink-soft);
  border-left:3px solid var(--rule);padding:2px 0 2px 12px;margin:14px 0}
.srcnote em{font-style:normal;color:var(--ink)}

/* ---- READING INDEX -------------------------------------------------------
   A rail of jump links beside the canon. --navh/--stickh come from site.js;
   the fallbacks are the measured heights, so it degrades sanely without JS. */
.booknav{top:var(--navh,55px)}
.csect,.wwschap,.readtitle{scroll-margin-top:var(--stickh,122px)}

.canonwrap{max-width:var(--maxw);margin:0 auto}
@media(min-width:1100px){
  .canonwrap{display:grid;grid-template-columns:262px minmax(0,1fr);gap:30px;
    align-items:start;padding:0 20px}
}
.canonidx{font-family:var(--ui);font-size:13px}
.canonidx summary{cursor:pointer;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--ink-soft);padding:9px 0}
.canonidx ul{list-style:none;margin:0;padding:0}
.canonidx a{display:block;text-decoration:none;color:var(--ink-soft);
  padding:4px 8px 4px 9px;line-height:1.35;border-left:3px solid transparent}
.canonidx a:hover{color:var(--ink);background:var(--card)}
.canonidx a.on{color:var(--ink);font-weight:700;border-left-color:var(--red)}
.ix-part>a{font-weight:650;color:var(--ink);margin-top:6px}
.ix-sub{display:none;margin-bottom:6px}
.ix-part.on>.ix-sub{display:block}
.ix-sub a{font-size:12.5px;padding-left:22px}
.ix-n{display:inline-block;min-width:1.7em;color:var(--red-deep);font-weight:700}

@media(min-width:1100px){
  .canonidx{position:sticky;top:calc(var(--stickh,67px) + 8px);
    max-height:calc(100vh - var(--stickh,67px) - 28px);overflow:auto;
    margin-top:52px;border-left:2px solid var(--rule);padding-left:2px}
  .canonidx summary{display:none}
}
@media(max-width:1099px){
  /* no room for a rail, so the index rides along as a thin bar under the other
     sticky chrome -- closed it costs one line, open it scrolls on its own. */
  .canonidx{position:sticky;top:var(--stickh,61px);z-index:44;margin:0;
    background:var(--paper);border-bottom:2px solid var(--rule);padding:0 20px}
  .canonidx>summary,.canonidx>ul{max-width:760px;margin-left:auto;margin-right:auto}
  .canonidx>summary{padding:10px 0}
  .canonidx[open]{max-height:min(62vh,520px);overflow:auto;padding-bottom:12px}
}
@media print{.canonidx{display:none!important}}

/* a part with no section headings gets no rail -- and must not keep the grid,
   or its single child lands in the empty 262px rail column */
@media(min-width:1100px){.canonwrap.norail{display:block;padding:0}}

/* a Proof entry with no artifact photo must not leave a 300px hole beside it */
.entry-cols.nopic{grid-template-columns:minmax(0,1fr)}
.proofleads{list-style:none;margin:18px 0 0;padding:0}
.proofleads li{border-left:3px solid var(--rule);padding:0 0 0 14px;margin:0 0 16px;
  line-height:1.6}
.lead-src{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-soft);
  margin-top:4px;letter-spacing:.04em}

/* ---- PAMPHLET #1 ON ITS OWN SHEET ----------------------------------------
   The 1980 tract is black line art on white paper, and every GIF carries its
   own white ground. On the site's cream those grounds read as patches stuck to
   the page; in dark mode the art vanishes into white-on-white. So the tract
   gets a real sheet, with its colours pinned rather than themed -- a printed
   page does not change colour when you turn the lights off. */
.pamprose{
  background:#fff;color:#14110d;
  border:2px solid #14110d;
  box-shadow:12px 12px 0 rgba(20,17,13,.20);
  padding:clamp(20px,4vw,46px);
  margin-top:32px;
}
.pamprose strong{color:#14110d}
.pamprose a{color:#8e1414}
.pamprose a:hover{color:#c62222}
.pamprose .pamlabel{color:#6b6153}
.pamprose .pampage{border-bottom-color:rgba(20,17,13,.22)}
.pamprose .pamh{color:#14110d}
.pamprose .pamimg img{border:1px solid rgba(20,17,13,.22);background:#fff}

/* art the original wrapped in <center> stays centred -- the figure has to
   shrink to the image or auto margins have nothing to balance */
.pamimg.fc{width:fit-content;max-width:100%;margin:24px auto}
.pamimg.fc img{margin:0 auto}
@media(max-width:640px){.pamimg.fc{margin:16px auto}}

/* ---- THE DOCTRINE AS A BILLBOARD -----------------------------------------
   /doctrine/ is a 1980 hard-sell tract and it is the page most visitors will
   actually read. The site-wide type-scaling pass (the legibility fix) dialled
   the display sizes down everywhere, which was right for reader pages and
   wrong for this one -- it left the pitch whispering. Everything here is
   scoped to .tract so the rest of the site keeps the quieter scale. */
.tract .band{padding:clamp(46px,5.5vw,84px) 0}

.tract .readtitle{font-size:clamp(44px,6.6vw,96px);line-height:.94;font-weight:800;
  letter-spacing:-.015em;max-width:19ch}
.tract .lede{font-size:clamp(21px,2.5vw,30px);line-height:1.4;max-width:34ch;
  color:var(--ink)}

/* the four questions are the hook -- they should read across a room */
/* ch resolves against the CONTAINER's font-size, not the children's -- 24ch of
   17px text caged 54px questions into a 250px ribbon. Constrain the questions
   themselves, in a unit that does not lie. */
.tract .quiz{max-width:none}
.tract .quiz .q{font-size:clamp(27px,3.7vw,54px);font-weight:800;line-height:1.12;
  letter-spacing:-.012em;margin:0 0 .42em;color:var(--ink);max-width:min(100%,1040px)}
.tract .quiz .q.big{color:var(--red);font-size:clamp(32px,4.4vw,66px)}
.tract .quiz .a{font-size:clamp(18px,1.7vw,23px);line-height:1.55;color:var(--ink);
  max-width:46ch;margin-top:1.1em}

/* body copy: bigger, brighter, and centred so the page stops looking half empty */
/* one hard left edge the whole way down -- the hero is left-aligned, so a
   centred body column below it just reads as a second, weaker layout */
.tract .prose{max-width:74ch;margin-left:0;margin-right:auto}
.tract .prose p{font-size:clamp(18px,1.45vw,21px);line-height:1.68;color:var(--ink)}
.tract .prose h2{font-size:clamp(31px,3.4vw,52px);line-height:1.08;font-weight:800;
  letter-spacing:-.012em;margin:0 0 .5em}
.tract .prose strong{font-weight:800}

/* a blocky drop cap is the thing he already told us bites down on the eye --
   the emphasis comes from size and colour instead */
.tract .prose p.dropcap::first-letter{font:inherit;float:none;margin:0;padding:0;color:inherit}
.tract .prose p.dropcap{font-size:clamp(23px,2.4vw,32px);line-height:1.35;color:var(--red);
  font-weight:800}

.tract .doclist li{font-size:clamp(18px,1.5vw,22px);line-height:1.45;padding:14px 0 14px 32px}
.tract .doclist li::before{font-size:18px;top:15px}
.tract .doclist.cols2 li{padding:8px 0 8px 32px}
.tract .pull{font-size:clamp(26px,3.1vw,44px);line-height:1.2}
.tract blockquote.src p{font-size:clamp(20px,2vw,27px);line-height:1.35}
.tract blockquote.src cite{font-size:13px}

/* the close */
.tract .sell h2{font-size:clamp(38px,5.2vw,78px);line-height:1;margin-bottom:.24em}
.tract .sell .lede{font-size:clamp(24px,2.9vw,38px);max-width:none;color:var(--red)}
.tract .sell .kicker{font-size:13px}
.tract .btn.big{font-size:clamp(19px,1.9vw,26px);padding:20px 34px}
.tract .fineprint{font-size:12.5px;color:var(--ink-soft);max-width:62ch}

@media(max-width:640px){
  .tract .quiz,.tract .readtitle,.tract .lede{max-width:none}
}

/* ---- THE STARK FIST SCANS ------------------------------------------------
   Sixteen issues of a photocopied zine. The scans are the artifact, so they get
   a white mount like the pamphlet does -- a scan of paper is paper. */
.fistgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.fistcard{display:block;text-decoration:none;color:inherit;overflow:hidden}
.fistcard img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;
  object-position:top center;background:#fff;border-bottom:2px solid var(--rule)}
.fistcard .body{padding:12px 14px 16px}
.fistcard h3{margin:4px 0 0;font-size:17px;line-height:1.25}

.fistpages{margin-top:30px}
.fistpage{margin:0 0 26px;background:#fff;border:2px solid #14110d;
  box-shadow:8px 8px 0 rgba(20,17,13,.18)}
.fistpage img{width:100%;display:block}
.fistpage figcaption{font-family:var(--mono);font-size:11px;color:#6b6153;
  padding:6px 10px;border-top:1px solid rgba(20,17,13,.2)}
.fistpage:target{outline:3px solid var(--red);outline-offset:4px}

/* the page rail is numbers, not titles -- chips, not a column of text */
.fistrail{display:flex;flex-wrap:wrap;gap:3px}
.fistrail li{margin:0}
.fistrail a{min-width:2.1em;text-align:center;padding:5px 6px;border-left:0;
  border:1px solid var(--rule);font-family:var(--mono);font-size:11.5px}
.fistrail a.on{background:var(--red);color:var(--paper);border-color:var(--red)}
@media(min-width:1100px){.canonidx .fistrail{max-width:230px}}

/* ---- STILL GOING: living creators on Fellow Travelers --------------------
   Everything else on that page is a name with a page count. These are people
   with something to sell this year, so the card leads with the goods. */
.livinggrid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.livingcard{display:block;text-decoration:none;color:inherit;overflow:hidden}
.livingcard .covers{display:flex;gap:0;background:#fff;border-bottom:2px solid var(--rule)}
.livingcard .covers img{width:25%;display:block;object-fit:cover;object-position:top center;
  aspect-ratio:3/4}
.livingcard .body{padding:16px 18px 18px}
.livingcard h3{margin:0 0 2px;font-size:20px;line-height:1.2}
.livingcard .byline-h{margin:0 0 10px}
.livingcard .gohost{margin-top:12px}
@media(max-width:520px){.livingcard .covers img{width:25%}}

/* ---- THE SCATALOG -------------------------------------------------------
   A shop window. The goods are visible, the price is on the card, and every
   card leaves for subgenius.com where the PayPal button is. */
.scatgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.scat{display:block;text-decoration:none;color:inherit;overflow:hidden}
.scat > img{width:100%;display:block;aspect-ratio:4/3;object-fit:contain;
  background:#fff;padding:10px;border-bottom:2px solid var(--rule)}
.scat .body{padding:14px 16px 16px}
.scat h3{margin:0 0 4px;font-size:18px;line-height:1.2}
.scat .meta{margin:0 0 8px}
.scat .gohost{margin:10px 0 0}

/* a shop card for something that cannot currently be bought */
.cartwarn{font-size:13.5px;line-height:1.5;margin:10px 0 0;padding:9px 11px;
  background:rgba(198,34,34,.10);border-left:3px solid var(--red);color:var(--ink)}
.cartwarn a{color:var(--red-deep)}

/* 2026-09-27: dark mode kept a beige footer under a dark page (footer used
   var(--ink), which dark mode flips light). The footer stays dark in dark mode. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) footer{background:#0f0c09;color:#d9ccb0;border-top:1px solid #3a3027}}
:root[data-theme=dark] footer{background:#0f0c09;color:#d9ccb0;border-top:1px solid #3a3027}

/* ============================================================
   2026-09-27: THE FRAME, SITE-WIDE ("the dudeism facelift").
   The front page's look -- a paper column on a grained table,
   a dashed strip, a compact mast with a notes box, a ruled nav
   -- applied to every page built through sg-build's chrome.
   head() opens <div class="page">, foot() closes it.
   ============================================================ */
:root{--table:#b99a78;--block:#eadfc6;--paper-edge:#e2d4b6;--black:'Pirata One',Georgia,serif}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--table:#15110d;--block:#2a2219;--paper-edge:#2c241c}}
:root[data-theme=dark]{--table:#15110d;--block:#2a2219;--paper-edge:#2c241c}
html{background:var(--table)}
body{background-color:var(--table);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.page{max-width:1120px;margin:22px auto;background:var(--paper);border-radius:6px;overflow:hidden;
 box-shadow:0 2px 0 var(--paper-edge),0 18px 50px rgba(0,0,0,.35),inset 0 0 90px rgba(120,90,50,.18)}
.page .wrap{max-width:none;padding-left:40px;padding-right:40px}
.strip{display:flex;justify-content:space-between;gap:12px;padding:9px 26px;font:600 11px/1.3 var(--ui);
 letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px dashed var(--rule)}
.strip i{font-style:italic;letter-spacing:.04em;text-transform:none;font-size:13px;font-family:var(--body,Georgia,serif)}
.page .masthead.mast{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:18px 26px 14px;
 background:none;border-bottom:0}
.page .mast .brand img{width:100%;max-width:470px;height:auto;display:block;margin:0}
.notes{border:1px solid var(--rule);background:var(--block);border-radius:6px;padding:10px 16px;text-align:center;
 font:15px/1.4 var(--ui);color:var(--ink-soft)}
.notes .nlabel{display:block;font:14px var(--black);letter-spacing:.14em;color:var(--red);margin-bottom:2px}
.notes b{color:var(--ink);font-weight:650}
.page .nav a{text-transform:none;letter-spacing:0;font:600 15px var(--ui)}
.page .nav .wrap{justify-content:flex-start}
.page .nav .spacer{flex:1}
.page .nav{background:none;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);position:static}
.page .nav .wrap{padding-left:26px;padding-right:26px}
.page h1{font-family:var(--black);font-weight:400;color:var(--red);letter-spacing:0;line-height:1.05;
 font-size:clamp(34px,4.2vw,48px)}
.page h1 .slab,.page h1 .slab.red{font-family:inherit!important;border-bottom:0;color:var(--red)!important}
.page h1 .slab:not(.red){color:var(--ink)!important}
.page footer{margin:0}
.page footer .wrap{padding-left:40px;padding-right:40px}
@media(max-width:860px){
 .page{margin:0;border-radius:0}
 .page .wrap,.page footer .wrap{padding-left:16px;padding-right:16px}
 .page .masthead.mast{grid-template-columns:1fr;padding:14px 16px}
 .strip{padding:8px 16px}.strip i{display:none}
 .page .nav .wrap{padding-left:16px;padding-right:16px}
}

/* ============================================================
   2026-09-27: CONTRAST SWEEP (automated audit, light + dark).
   1. Dark .band.ink sections kept prose at var(--ink) -- dark on
      dark in light mode ("Feeling like there's just no Slack?").
   2. Footer headings used var(--ink) on a var(--ink) footer:
      "The SubGenius Archive" was invisible on every page.
   3. Dark mode: .btn keeps a pale-red fill, so its text goes dark.
   ============================================================ */
.band.ink :is(p,li,em,strong,b,i,span,dd,dt,td,th,small,cite,figcaption){color:inherit}
.band.ink a:not(.btn){color:#f0b36a}
.band.ink blockquote.src{background:rgba(255,255,255,.05);border-color:rgba(230,220,198,.28)}
.band.ink blockquote.src cite{color:#cbbd9f}
footer :is(h1,h2,h3,h4){color:inherit}
.notes{color:var(--ink)}
blockquote.src cite{color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .btn:not(.ghost){color:#1b0f0b}}
:root[data-theme=dark] .btn:not(.ghost){color:#1b0f0b}
.band.ink .btn:not(.ghost){color:#fdfaf3}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .band.ink .btn:not(.ghost){color:#1b0f0b}}
:root[data-theme=dark] .band.ink .btn:not(.ghost){color:#1b0f0b}

/* 2026-09-27: a:hover paints a red background, and a link that is only an
   image (the masthead logo, pictures) showed it through the transparent parts. */
a.brand:hover,a:has(>picture):hover,a:has(>img:only-child):hover{background:transparent}

/* ---- headline faces (btcbob 2026-09-29) ----
   Blackletter is for church words and taglines. .impact = billboard headlines in the
   Impact-style face; .plain = utility titles in the universal face. */
.page h1.impact{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.page h1.plain{font-family:var(--ui);font-weight:800;letter-spacing:-.01em}
.page h1.impact .slab{text-transform:inherit!important}

/* dobbscoin.info wallpaper on the table, i.e. the L/R margins (btcbob 2026-09-29).
   Light: the tile multiplied into the tan twice, as dobbscoin.info does. Dark: an
   inverted tile screened onto the dark table. The paper column stays opaque. */
body{background-image:url(/assets/bg-dobbs.png),url(/assets/bg-dobbs.png);background-blend-mode:multiply,multiply;
 background-repeat:repeat;background-attachment:fixed;background-size:auto;background-position:center top}
:root[data-theme="dark"] body{background-image:url(/assets/bg-dobbs-dark.png);background-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background-image:url(/assets/bg-dobbs-dark.png);background-blend-mode:screen}}

/* Reader titles in book-title case and ink, not forced capitals (btcbob 2026-09-30:
   capital blackletter read like an ordination certificate). Titles are title-cased
   in the data by sg-build book_title(). */
.reader .readtitle{text-transform:none;color:var(--ink)}

/* "Bob" entry: the Removal picture gets half the row, no caption (btcbob 2026-10-04) */
#bob .entry-cols{grid-template-columns:minmax(0,1fr) minmax(0,46%)}
@media(max-width:860px){#bob .entry-cols{grid-template-columns:1fr}}
.lorepic.nocap img{border-bottom:0}