/* Dark mode (the default): black construction paper with light xerox scraps pasted on.
   Loaded after zine.css, so it only overrides. */
:root{--night:#0d0d0d;--chalk:#e8e6e0;--lift:#bdbdbd}
body{background:var(--night);color:var(--chalk)}
::selection{background:var(--chalk);color:var(--night)}

/* grit: white grain + light toner streaks */
.grain{opacity:.12;
  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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.toner{opacity:.35;
  background:linear-gradient(90deg,transparent 7%,rgba(255,255,255,.07) 7.3%,transparent 7.8%,transparent 61%,rgba(255,255,255,.05) 61.2%,transparent 61.6%,transparent 88%,rgba(255,255,255,.08) 88.1%,transparent 88.4%)}
.tape{background:rgba(220,218,210,.35)}

/* glitch slices sit on the dark page */
.gl.glitching::before{background:var(--night);color:var(--chalk)}
.gl.glitching::after{background:var(--night)}

nav{background:#000;border-bottom:1px solid #222}
nav .links a:hover{background:var(--chalk);color:var(--night)}

.btn{background:var(--night);color:var(--chalk);border-color:var(--chalk);box-shadow:6px 6px 0 var(--chalk)}
.btn:hover{box-shadow:3px 3px 0 var(--chalk)}
.btn.dark{background:var(--chalk);color:var(--night)}

/* hero */
.copy{box-shadow:14px 16px 0 rgba(232,230,224,.85)}
.copy .stamp{background:rgba(13,13,13,.85)}
.right .mark{filter:drop-shadow(0 0 10px rgba(255,255,255,.35)) drop-shadow(.6px 0 0 #fff)}
.right .stack .o{-webkit-text-stroke:2px var(--chalk)}
.right .stack .x{background:var(--chalk);color:var(--night)}

/* ticker becomes a pasted paper strip */
.ticker{background:var(--chalk);color:var(--night);border-color:var(--night);outline-color:var(--chalk)}
.ticker .spk{color:#555}
.ticker em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--night)}

.hd .num{background:var(--chalk);color:var(--night)}
h2 .s{color:var(--chalk)}

/* scraps stay light paper with dark ink */
.flyer{color:var(--ink);box-shadow:12px 12px 0 var(--lift)}
.receipt{color:var(--ink)}
.tik{color:var(--ink);box-shadow:6px 6px 0 var(--lift)}
.tik:hover{box-shadow:10px 10px 0 var(--pink)}
.tik.disc{color:var(--chalk)}
.tags span{color:var(--ink)}
.tags span:nth-child(3n){background:var(--night);color:var(--chalk);border-color:var(--chalk)}
.bio .q{border-color:var(--chalk)}
.collage .scrap{box-shadow:8px 10px 0 rgba(232,230,224,.8)}
.wall figure{color:var(--ink)}
.wall .add{border-color:var(--chalk);color:var(--chalk)}
.partners{background:transparent;border:2px dashed #444}

/* the "ink flood" flips into a paper flood */
.ink{background:var(--chalk);color:var(--ink)}
.ink::before,.ink::after{background:var(--chalk)}
.ink .hd .num{background:var(--ink);color:var(--chalk)}
.ink h2 .s{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink)}
.ink .gl.glitching::before{background:var(--chalk);color:var(--ink)}
.ink .gl.glitching::after{background:var(--chalk)}
.main-vid{border-color:#999}
.main-vid .c{color:var(--ink)}
.main-vid .play span{background:var(--ink);color:var(--chalk)}
.main-vid p{color:#555}
.pol{box-shadow:0 8px 18px rgba(0,0,0,.25)}

footer{background:#000}
footer::before{background:#000}

/* live site components */
.icon-btn{border-color:#444}
.icon-btn:hover{background:var(--chalk);color:var(--night)}
.live-pill.off{color:var(--chalk);border-color:#444}
.row.now{background:var(--pink);color:var(--ink)}
.yt .poster span{background:var(--chalk);color:var(--night)}
.ink .yt .poster span{background:var(--ink);color:var(--chalk)}
.ink .vid-title{color:var(--ink)}
.live-card{background:#000}
.modal .sheet{box-shadow:12px 12px 0 var(--pink)}
.partners .hint{color:#777}
.wall .add:hover{background:var(--chalk);color:var(--night)}
@media (max-width:900px){
  .flyer{box-shadow:8px 8px 0 var(--lift)}
}
@media (max-width:900px){
  .tik{box-shadow:4px 4px 0 var(--lift)}
}