/* The shared theme: "visitor hours" (light, default) and "after hours" (dark) for every page except the Crypt.
 * Loaded after style.css. It only changes colour tokens, type and a few shared components; layout stays in style.css.
 * Mode is set on <html data-hours="day|after"> by hours.js before first paint and stored in localStorage "den-hours". */
@font-face{font-family:"Special Elite";src:url(/assets/fonts/special-elite.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---- tokens ---- */
:root{
  --bg:#f1eadb;--bg-2:#e9e0cc;--ox:#d9ccb1;--ox-2:#e3d8c0;--ox-hi:#8e1a24;
  --paper:#1d1612;--paper-hi:#1d1612;--soft:#3f342a;--muted:#6b5a49;--amber:#9b1c28;--amber-hi:#5e0f17;--teal:#2d7a73;--line:#c8b999;--line-hi:#1d1612;
  --ink:#1d1612;--blood:#9b1c28;--bone:#f1eadb;--museum:#2d7a73;
  --type:"Special Elite","Courier New",ui-monospace,monospace;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --reading:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --shadow:#1d1612;--scrim-a:rgba(241,234,219,.9);--scrim-b:rgba(241,234,219,.95);--scrim-c:rgba(241,234,219,.98);
  color-scheme:light;
}
html[data-hours="after"]{
  --bg:#0d0707;--bg-2:#160a0b;--ox:#4a0e14;--ox-2:#2b0a0e;--ox-hi:#7a1a22;
  --paper:#eadfcb;--paper-hi:#f1e6d1;--soft:#d8cbb4;--muted:#bba98f;--amber:#e6ab62;--amber-hi:#ffd29a;--teal:#5db4a9;--line:#3a1a1d;--line-hi:#5a2a2e;
  --ink:#eadfcb;--blood:#c2323f;--bone:#0d0707;--museum:#5db4a9;
  --shadow:#000;--scrim-a:rgba(13,7,7,.5);--scrim-b:rgba(13,7,7,.64);--scrim-c:rgba(13,7,7,.8);
  color-scheme:dark;
}
html{background:var(--bg)}

/* ---- base ---- */
body{font-family:var(--ui);transition:background-color .4s,color .4s}
html[data-hours="day"] body,:root:not([data-hours]) body{background-image:none}
html:not([data-hours="after"]) body::after{opacity:.07}
a:hover{color:var(--amber-hi)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--museum);outline-offset:3px}
h1,h2,h3{font-family:var(--tag);font-weight:400;letter-spacing:.01em;line-height:1.05}
h1{font-size:clamp(2.3rem,8.5vw,4.2rem);text-transform:uppercase;margin-bottom:.3em}
h2{font-size:clamp(1.5rem,4.6vw,2.1rem);text-transform:uppercase;margin-top:2em}
h3{font-size:1.3rem}
.kicker{font-family:var(--type);letter-spacing:.14em;color:var(--blood);font-size:.85rem}
.meta,.crumbs,.ticker-kicker,.filter-count{font-family:var(--type);letter-spacing:.02em}
.crumbs{font-size:.85rem}
.crumbs a{color:var(--muted)}
.lead{color:var(--paper-hi);font-size:1.18rem}
blockquote{color:var(--paper-hi)}
/* long-form reading text keeps a book face; everything else is the Den's sans */
.article .read p,.article .read li,.story p,.article-head .lead{font-family:var(--reading)}
.article .read p,.article .read li{font-size:1.08rem;line-height:1.8}
.article-head .lead{font-style:italic;font-size:1.22rem}
::selection{background:var(--blood);color:#fff}

/* ---- header ---- */
.site-header{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:2px solid var(--ink)}
.nav a{font-family:var(--ui);font-size:.98rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blood);border-bottom-color:var(--blood)}
.nav-toggle{color:var(--ink);border-color:var(--ink)}
.brand,.brand:hover{color:var(--ink)}
.brand img{border-color:var(--ink)}
.hdr-lights{display:inline-flex;align-items:center;gap:.45rem;order:4;min-height:2.75rem;padding:.35rem .8rem;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:2rem;font-family:var(--type);font-size:.85rem;cursor:pointer;white-space:nowrap}
.hdr-lights:hover{background:var(--ink);color:var(--bg)}
.hdr-lights svg{width:1.15rem;height:1.15rem;flex:none}
.hdr-lights .lamp-glow{fill:transparent;transition:fill .3s}
.hdr-lights[aria-pressed="true"] .lamp-glow{fill:var(--amber)}
@media (min-width:46.01rem){.site-header .nav{order:2}.site-header .wrap{gap:.8rem}}
@media (max-width:46rem){
  .hdr-lights{order:0;padding:.35rem;min-width:2.75rem;justify-content:center}
  .hdr-lights span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .js .nav{background:var(--bg-2)}
  .js .nav a{border-bottom-color:var(--line)}
}

/* ---- buttons, chips, tags ---- */
.btn{font-family:var(--tag);letter-spacing:.04em;text-transform:uppercase;border-radius:.2rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);transition:transform .12s,box-shadow .12s,background-color .2s}
.btn,.btn:hover{color:#fff}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow);background:var(--blood)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn.ghost,.btn.ghost:hover{color:var(--ink);background:transparent;border-color:var(--ink)}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.chip{font-family:var(--type);border:2px solid var(--ink);color:var(--ink);letter-spacing:.04em}
.chip:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tag{font-family:var(--type);letter-spacing:.1em;border-radius:.15rem}
.tag.fiction{background:var(--blood);color:#fff}
a.tag:hover{background:var(--blood);color:#fff}
.ibtn:hover,.vote:hover{border-color:var(--ink)}
.stamp{display:inline-block;font-family:var(--type);text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;line-height:1;padding:.4rem .6rem .3rem;border:3px double var(--blood);color:var(--blood);border-radius:.2rem;transform:rotate(-5deg)}

/* ---- sections, cards ---- */
section.block{border-bottom:2px solid var(--line)}
.card,.law-list li,.tl-card,.acct-card,.facts,.summary,.signup{border-radius:.15rem}
.card{background:var(--bg-2);border:2px solid var(--line-hi);border-top-width:2px;box-shadow:4px 4px 0 var(--shadow);transition:transform .15s,box-shadow .15s}
.card::before{font-family:var(--type);color:var(--muted);letter-spacing:.14em;font-size:.68rem}
.card h3 a{color:var(--paper)}
.card p{color:var(--soft)}
.card:hover,.card:focus-within{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.card:not(.fic):hover::before,.card:not(.fic):focus-within::before{content:"PULLED";color:var(--blood)}
.card.fic::before{color:var(--blood)}
.card.fic{border-top-color:var(--blood)}
.card .thumb{border-bottom:2px solid var(--line-hi);position:relative}
.card .thumb img{transition:filter .35s,transform .5s}
.card:hover .thumb img{filter:sepia(0) contrast(1.05) saturate(1.1);transform:scale(1.04)}
.thumb.ph span{color:#e6ab62}
/* after hours: thumbnails sit in the dark and a lantern follows the pointer across them */
.card .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle 7rem at var(--mx,50%) var(--my,50%),transparent 0,rgba(8,4,4,.15) 40%,rgba(8,4,4,.62) 100%)}
html[data-hours="after"] .card:hover .thumb::after{opacity:1}
.law-list li{background:var(--bg-2);border:2px solid var(--line-hi);box-shadow:4px 4px 0 var(--shadow);padding:1rem 1.1rem;transition:transform .15s,box-shadow .15s}
.law-list li:hover,.law-list li:focus-within{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.law-list p{color:var(--soft)}
.law-list a,.law-list a:hover{color:var(--paper)}
.law-list a:hover{color:var(--blood)}
.tag.myth{background:#5b4a14;color:#fff3c9}
.facts,.summary{background:var(--ox-2)}
.summary{border-left-color:var(--blood)}
.summary h2,.know h2,.dontknow h2{color:var(--blood)}
.note,.fic-note{border-color:var(--line-hi)}
.fic-note{border-left-color:var(--blood);background:color-mix(in srgb,var(--blood) 8%,transparent)}
figure img,.feature img{border:2px solid var(--line-hi)}
figcaption{font-family:var(--type);font-size:.8rem}
.sources h2{color:var(--blood)}
.story p:first-child::first-letter{color:var(--blood)}
.end-note{border-top-style:dashed}
.den-mark{color:var(--line)}

/* ---- page banners ---- */
.page-banner{border-bottom:2px solid var(--ink)}
html:not([data-hours="after"]) .page-banner::after{background:linear-gradient(180deg,rgba(241,234,219,0) 0,rgba(241,234,219,0) 50%,rgba(241,234,219,.78) 88%,var(--bg) 100%)}
html:not([data-hours="after"]) .page-banner img{filter:saturate(.85) contrast(1.02)}

/* ---- forms ---- */
.sub-form{background:var(--bg-2);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow)}
.sub-form input[type=text],.sub-form input[type=email],.sub-form textarea,.acct-name-row input,.cmt-form textarea,.signup input{background:var(--bg);color:var(--paper);border:2px solid var(--line-hi)}
.sub-form label,.sub-form .lbl{font-family:var(--type);letter-spacing:.04em}
.sub-form .err{color:var(--blood)}
html[data-hours="after"] .sub-form .err{color:#ffb0a3}
.sub-form input:focus,.sub-form textarea:focus,.acct-name-row input:focus,.cmt-form textarea:focus{outline:3px solid var(--museum);border-color:var(--museum)}
.sub-alert{border-color:var(--blood);background:color-mix(in srgb,var(--blood) 8%,transparent)}
.sub-alert a{color:var(--amber-hi)}
.sub-thanks{background:var(--bg-2);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow)}
html:not([data-hours="after"]) .sub-thanks{background:radial-gradient(ellipse at 50% 0,rgba(155,28,40,.12),transparent 65%),var(--bg-2)}
.noscript-note{border-color:var(--ink)}

/* ---- account ---- */
.acct-tabs{border-bottom:2px solid var(--ink)}
.acct-tab{font-family:var(--tag);text-transform:uppercase}
.acct-tab[aria-selected="true"]{color:var(--blood);background:var(--bg-2);border-color:var(--ink);border-top:3px solid var(--blood)}
.acct-tab#acct-tab-signup[aria-selected="true"]{color:var(--blood)}
html[data-hours="after"] .acct-tab[aria-selected="true"]{color:var(--amber);background:rgba(13,7,7,.78)}
.acct-panel{background:var(--bg-2);border:2px solid var(--ink);border-top:0}
html[data-hours="after"] .acct-panel{background:rgba(13,7,7,.78);border-color:var(--line)}
.acct-card{background:var(--bg-2);border:2px solid var(--ink);border-top-width:3px;box-shadow:4px 4px 0 var(--shadow)}
.acct-note{border-left-color:var(--blood)}
.acct-h{color:var(--museum)}
.acct-link{color:var(--blood)}
.acct-art img{opacity:.35}
html[data-hours="after"] .acct-art img{opacity:.55}

/* ---- timeline ---- */
.tl-card{background:var(--bg-2);border:2px solid var(--line-hi);border-left:4px solid var(--blood);box-shadow:3px 3px 0 var(--shadow)}
.tl-fiction .tl-card{background:color-mix(in srgb,var(--blood) 6%,var(--bg-2));border:2px dashed var(--blood)}
.tl-mark img{background:var(--bg-2);border-color:var(--blood);box-shadow:0 0 0 4px var(--bg)}
.tl-fiction .tl-mark img{border-color:var(--blood)}
.tl-year{font-family:var(--tag);color:var(--blood)}
.tl::before{background:linear-gradient(180deg,var(--blood),var(--line-hi))}

/* ---- the ticker ("From the files") ---- */
.ticker{background:var(--bg-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
html:not([data-hours="after"]) .ticker{background:var(--bg-2)}

/* ---- footer: always the dark archive, in both modes ---- */
.site-footer{--paper:#eadfcb;--muted:#bba98f;--amber:#e6ab62;--line:#3a1a1d;--bg:#080404;--ox-hi:#7a1a22;
  margin-top:0;border-top:2px solid var(--ink);color:#b9aa91;
  background:linear-gradient(180deg,rgba(8,4,4,.9),rgba(8,4,4,.78)),url(/assets/img/art/footer-parchment-1600.webp) 50% 100%/cover no-repeat,#080404}
.site-footer a{color:#e6ab62}
.site-footer a:hover{color:#ffd29a}
.site-footer a:focus-visible{outline-color:#5db4a9}
main{min-height:60vh}
main+.ticker,main+.site-footer,main+.watchers{margin-top:3rem}

/* ---- cave backdrop: dark scrim after hours, a parchment wash in daylight (the cave shows through as a faint watermark) ---- */
body::before{--scrim:linear-gradient(180deg,var(--scrim-a) 0,var(--scrim-b) 45%,var(--scrim-c) 100%)}
html:not([data-hours="after"]) body::before{filter:grayscale(.5) sepia(.3)}

/* ---- watchers: eyes above the footer (injected by den.js) ---- */
.watchers{position:relative;background:#080404;display:flex;justify-content:space-around;align-items:center;gap:.5rem;padding:2.4rem 1rem 1rem;overflow:hidden;border-top:2px solid var(--ink)}
.watchers+.site-footer{margin-top:0;border-top:0}
.watchers .eye{position:relative;display:block;width:3.2rem;height:1.7rem;background:#e9dcc0;border-radius:50% / 60%;border:2px solid #000;box-shadow:0 0 14px rgba(93,180,169,.35);overflow:hidden;padding:0;cursor:pointer;transition:transform .15s}
.watchers .eye.sm{width:2.2rem;height:1.2rem}
.watchers .eye i{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5db4a9 0,#13302d 55%,#000 100%);transform:translate(calc(-50% + var(--ex,0px)),calc(-50% + var(--ey,0px)))}
.watchers .eye:nth-child(3n){opacity:.7}
.watchers .eye.blink{transform:scaleY(.12)}
.watchers .eye:focus-visible{outline:3px solid #5db4a9;outline-offset:4px}
.watch-say{position:absolute;left:0;right:0;bottom:.3rem;margin:0;text-align:center;font-family:var(--type);font-size:.85rem;color:#b9aa91;opacity:0;transition:opacity 1.2s;pointer-events:none}
.watch-say.on{opacity:1}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dust b{position:absolute;bottom:-6px;width:3px;height:3px;border-radius:50%;background:#e6ab62;opacity:0;animation:dust-up 14s linear infinite}
@keyframes dust-up{0%{transform:translate(0,0);opacity:0}10%{opacity:.5}90%{opacity:.25}100%{transform:translate(18px,-9rem);opacity:0}}
html:not([data-hours="after"]) .dust b{opacity:0;animation:none}

/* ---- reading lamp (progress) ---- */
.lamp-rail{position:fixed;left:0;top:0;right:0;height:4px;z-index:60;pointer-events:none;background:transparent}
.lamp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--blood)}
.lamp-flame{position:absolute;top:-4px;left:calc(var(--p,0) * 100%);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle,#fff3c9 0,#e6ab62 45%,rgba(230,171,98,0) 72%);box-shadow:0 0 14px 4px rgba(230,171,98,.55);opacity:calc(var(--p,0) * 20)}
.lamp-flame{animation:flame 3.4s ease-in-out infinite}
@keyframes flame{0%,100%{transform:scale(1)}40%{transform:scale(1.25)}70%{transform:scale(.9)}}
html:not([data-hours="after"]) .lamp-flame{box-shadow:0 0 12px 3px rgba(155,28,40,.4)}

/* ---- reveal: cards come out of the drawer as they scroll in ---- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal-ready{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
  .js .reveal-ready.seen{opacity:1;transform:none}
  .js .reveal-ready.seen:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .card,.law-list li,.btn,.card .thumb img{transition:none}
  .card:hover,.card:focus-within,.law-list li:hover{transform:none}
  .lamp-flame,.dust b{animation:none}
  html{scroll-behavior:auto}
}
@media print{.lamp-rail,.watchers,.hdr-lights{display:none!important}}

/* Google button stays a dark slab in both modes */
.gbtn,.gbtn:hover{color:#f3ece0}
html[data-hours="day"] .gbtn{border-color:#1d1612}

/* ======== CAVE BACKDROP SWITCH ========
   The fixed cave layer (body::before in style.css, files assets/img/art/bg-cave-*.webp) is parked:
   - daylight (default): off on every page
   - landing + shop (body.home2): off in both modes
   - after hours on the other pages: ON
   To bring it back, change a value below from "none" to "block" (see docs/CAVE-BACKDROP.md). */
:root{--cave-day:none;--cave-home:none}
html:not([data-hours="after"]) body::before{display:var(--cave-day)}
body.home2::before{display:var(--cave-home)}
/* ======== end cave backdrop switch ======== */