/* ============================================================
   PATCH fansite — "JUNKYARD PUNK ZINE" deep-pass identity
   Riveted steel, spray-paint stencil, caution-tape, neon.
   Two themes: Midnight Junkyard (dark, default) + Sun-Bleached
   Scrapyard (light, via [data-theme="light"] on <html>).
   Pure CSS/SVG. No inline <style> used by pages.
   ============================================================ */

/* ---------- type ---------- */
:root{
  --font-display:"Anton",Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  --font-spray:"Permanent Marker","Segoe Print","Bradley Hand",cursive;
  --font-body:"IBM Plex Mono","Courier New",ui-monospace,Menlo,Consolas,monospace;

  /* Midnight Junkyard (dark) */
  --bg:#131210; --bg-2:#0d0c0b; --paper:#1a1917;
  --card:#1f1e1a; --card-2:#191814;
  --ink:#f2ede1; --ink-dim:#cfccc0; --ink-faint:#8f8b7e;
  --neon:#3bff6e; --pink:#ff2e88; --yellow:#ffe14d; --orange:#ff6b1a;
  --line:#3a382f; --line-hard:#565246;
  --link:var(--neon); --link-hover:var(--pink);
  --btn-ink:#0d0c0b;
  --shadow:#000;
  --tape-bg:rgba(255,225,77,.85);
  --glass:rgba(10,10,9,.92);
  --plate:linear-gradient(180deg,#23221e 0%,#171613 100%);
  --rivet:#4a463c;
}

html[data-theme="light"]{
  /* Sun-Bleached Scrapyard (light) */
  --bg:#e9e2d2; --bg-2:#ddd4bd; --paper:#f4efe1;
  --card:#f6f1e3; --card-2:#ece5d1;
  --ink:#211e17; --ink-dim:#3d392e; --ink-faint:#6d675a;
  --neon:#0a6c34; --pink:#b10e5c; --yellow:#f5c400; --orange:#b34400;
  --line:#b9ae93; --line-hard:#8a7f66;
  --link:#0a6c34; --link-hover:#b10e5c;
  --btn-ink:#0d0c0b;
  --shadow:rgba(33,30,23,.35);
  --tape-bg:rgba(245,196,0,.9);
  --glass:rgba(244,239,225,.94);
  --plate:linear-gradient(180deg,#f8f4e8 0%,#e6ddc6 100%);
  --rivet:#a89c80;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0; color:var(--ink);
  font-family:var(--font-body); line-height:1.65;
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 500px at 50% -120px, rgba(59,255,110,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] body{
  background-image:
    radial-gradient(1200px 500px at 50% -120px, rgba(10,108,52,.08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,.stencil{
  font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.05em; line-height:1.02;
  font-weight:400;
}
h1{
  font-size:clamp(2.4rem,6vw,4.4rem); margin:.35em 0;
  text-shadow:4px 4px 0 var(--pink), 8px 8px 0 rgba(0,0,0,.25);
}
h2{
  font-size:clamp(1.5rem,3.4vw,2.2rem); margin:1.8em 0 .6em;
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  background:var(--plate);
  border:3px solid var(--line-hard); border-left:8px solid var(--neon);
  padding:.45em .7em;
  box-shadow:5px 5px 0 var(--shadow);
  transform:rotate(-.5deg);
  position:relative;
}
h2::after{ /* rivet pair on the plate */
  content:""; position:absolute; right:12px; top:50%; width:10px; height:10px;
  margin-top:-5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8 0 2px, var(--rivet) 3px, #222 6px);
  box-shadow:-24px 0 0 -1px var(--rivet);
}
h2 .num{
  background:var(--neon); color:var(--btn-ink);
  font-size:.62em; padding:.25em .5em; letter-spacing:.1em;
  transform:rotate(2deg); box-shadow:3px 3px 0 var(--pink);
  text-shadow:none;
}
h3{font-size:1.25rem; margin:1.1em 0 .4em; color:var(--neon)}
html[data-theme="light"] h3{color:var(--pink)}
a{color:var(--link); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--link-hover)}
img{max-width:100%; height:auto}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}

/* ---------- accessibility: skip link + focus ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--yellow); color:#0d0c0b;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  padding:10px 18px; text-decoration:none; border:3px solid #0d0c0b;
  transition:top .15s ease;
}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--neon); outline-offset:3px}

/* ---------- riveted header ---------- */
.site-header{
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
  position:sticky; top:0; z-index:50;
  border-bottom:4px solid var(--neon);
}
.site-header::before{ /* rivet strip */
  content:""; display:block; height:12px;
  background-image:
    radial-gradient(circle at 50% 50%, #8a8474 2.4px, #3a382f 3.4px, transparent 4.4px);
  background-size:30px 12px; background-position:0 0;
  border-bottom:2px solid var(--line-hard);
}
html[data-theme="light"] .site-header::before{
  background-image:radial-gradient(circle at 50% 50%, #d8cfb6 2.4px, #8a7f66 3.4px, transparent 4.4px);
}
.brand{display:flex; align-items:center; gap:14px; padding:14px 0 6px; flex-wrap:wrap}
.brand .logo{
  font-family:var(--font-display); font-size:2.2rem; letter-spacing:.1em;
  color:var(--neon); text-decoration:none;
  text-shadow:3px 3px 0 var(--pink), 6px 6px 0 rgba(0,0,0,.3);
  transform:rotate(-2deg); display:inline-block;
}
.brand .tag{
  font-family:var(--font-spray); font-size:1rem; color:var(--ink-dim);
  border:2px dashed var(--pink); padding:4px 12px;
  transform:rotate(1.5deg); background:var(--card);
}

/* theme toggle: icon-only rivet button */
.theme-toggle{
  margin-left:auto; width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--card) 0, var(--bg-2) 70%);
  border:3px solid var(--line-hard); color:var(--yellow);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:2px 2px 0 var(--shadow), inset 0 0 0 2px rgba(0,0,0,.15);
  transition:transform .15s ease, color .15s ease;
}
.theme-toggle:hover{color:var(--neon); transform:rotate(-8deg)}
.theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:block}
html[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* ---------- nav: sticker tags ---------- */
nav.mainnav{display:flex; flex-wrap:wrap; gap:8px 6px; padding:8px 0 16px}
nav.mainnav a{
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border:2px solid var(--line-hard); padding:6px 11px; background:var(--card);
  transform:rotate(-.6deg);
  box-shadow:2px 2px 0 var(--shadow);
  transition:background .12s ease, color .12s ease, transform .12s ease;
}
nav.mainnav a:nth-child(even){transform:rotate(.7deg)}
nav.mainnav a:hover{background:var(--neon); color:#0d0c0b; border-color:var(--neon); transform:rotate(0)}
nav.mainnav a.active{
  background:var(--pink); border-color:var(--pink); color:#0d0c0b;
  box-shadow:2px 2px 0 var(--neon);
}

/* ---------- caution-tape divider ---------- */
.torn{
  height:30px; margin:34px 0; position:relative;
  background:repeating-linear-gradient(-45deg,
    var(--yellow) 0 22px, #131210 22px 44px);
  clip-path:polygon(0 38%,3% 12%,7% 52%,11% 18%,15% 58%,19% 24%,24% 62%,28% 20%,33% 55%,37% 14%,42% 60%,46% 22%,51% 52%,55% 16%,60% 58%,64% 20%,69% 50%,73% 14%,78% 56%,82% 22%,87% 60%,91% 18%,96% 52%,100% 30%,100% 100%,0 100%);
  box-shadow:0 3px 0 var(--shadow);
  border-top:2px solid rgba(0,0,0,.35);
}
html[data-theme="light"] .torn{
  background:repeating-linear-gradient(-45deg, var(--yellow) 0 22px, #211e17 22px 44px);
}

/* ---------- hero: riveted steel frame ---------- */
.hero{
  position:relative; overflow:hidden;
  border:4px solid var(--pink);
  box-shadow:8px 8px 0 var(--shadow);
  background:var(--bg-2);
  margin-top:26px;
}
.hero::before{ /* corner bolts */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    radial-gradient(circle at 18px 18px, #d9d2bd 0 3px, #6b6552 4px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 18px) 18px, #d9d2bd 0 3px, #6b6552 4px, transparent 5.5px),
    radial-gradient(circle at 18px calc(100% - 18px), #d9d2bd 0 3px, #6b6552 4px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #d9d2bd 0 3px, #6b6552 4px, transparent 5.5px);
}
html[data-theme="light"] .hero::before{
  background-image:
    radial-gradient(circle at 18px 18px, #fff 0 3px, #8a7f66 4px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 18px) 18px, #fff 0 3px, #8a7f66 4px, transparent 5.5px),
    radial-gradient(circle at 18px calc(100% - 18px), #fff 0 3px, #8a7f66 4px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #fff 0 3px, #8a7f66 4px, transparent 5.5px);
}
.hero img.hero-img{
  width:100%; max-height:540px; object-fit:cover; display:block;
  filter:saturate(1.15) contrast(1.05);
}
.hero .hero-text{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 24px 22px;
  background:linear-gradient(180deg,transparent,var(--glass) 55%);
}
.hero .kicker{
  display:inline-block; background:var(--yellow); color:#0d0c0b;
  font-family:var(--font-display); text-transform:uppercase; font-size:.95rem;
  padding:5px 14px; transform:rotate(-2deg); letter-spacing:.1em; margin-bottom:12px;
  box-shadow:3px 3px 0 var(--pink);
}
.hero h1{
  margin:.1em 0; color:#fff;
  text-shadow:4px 4px 0 var(--pink), 0 0 26px rgba(59,255,110,.35);
  font-size:clamp(2.4rem,7vw,4.6rem);
}
html[data-theme="light"] .hero h1{color:#f2ede1; text-shadow:4px 4px 0 var(--pink), 0 0 18px rgba(0,0,0,.6)}
.hero .lede{max-width:640px; font-size:1.06rem; color:#e9e4d4; text-shadow:0 1px 3px rgba(0,0,0,.7)}
.hero .spray{color:var(--neon); text-shadow:3px 3px 0 var(--pink)}
.hero .btn{margin-top:6px}

/* ---------- cards / stickers ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; margin:26px 0}
.card{
  background:var(--card); border:3px solid var(--line-hard); padding:18px 16px 14px;
  transform:rotate(-.5deg); position:relative;
  box-shadow:5px 5px 0 var(--shadow);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card::before{ /* rivets in the top corners */
  content:""; position:absolute; top:7px; left:7px; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff7 0 2px, var(--rivet) 3px, #222 5px);
}
.card::after{
  content:""; position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff7 0 2px, var(--rivet) 3px, #222 5px);
}
.card:nth-child(even){transform:rotate(.6deg)}
.card:hover{border-color:var(--neon); transform:rotate(0) translateY(-3px); box-shadow:7px 9px 0 var(--shadow)}
.card h3{margin-top:2px}
.card p:last-child{margin-bottom:0}

/* sticker-button links */
.sticker{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.06em; border:3px solid var(--neon); color:var(--neon);
  padding:9px 16px; margin:6px; transform:rotate(-3deg); background:var(--card);
  box-shadow:4px 4px 0 var(--pink); font-size:1rem; text-decoration:none;
  transition:transform .12s ease, background .12s ease;
}
.sticker:hover{transform:rotate(0) scale(1.05); background:var(--neon); color:#0d0c0b}
.sticker.pink{border-color:var(--pink); color:var(--pink); box-shadow:4px 4px 0 var(--neon); transform:rotate(2.5deg)}
.sticker.pink:hover{background:var(--pink); color:#0d0c0b}
.sticker.yellow{border-color:var(--yellow); color:var(--yellow); box-shadow:4px 4px 0 var(--pink); transform:rotate(-1.5deg)}
.sticker.yellow:hover{background:var(--yellow); color:#0d0c0b}
.sticker.orange{border-color:var(--orange); color:var(--orange); box-shadow:4px 4px 0 var(--yellow)}
.sticker.orange:hover{background:var(--orange); color:#0d0c0b}

/* masking tape */
.tape{
  display:inline-block; background:var(--tape-bg); color:#131210;
  font-weight:bold; font-size:.75rem; padding:4px 16px; transform:rotate(-2deg);
  margin-bottom:8px; text-transform:uppercase; letter-spacing:.12em;
  clip-path:polygon(2% 0, 98% 2%, 100% 92%, 97% 100%, 3% 98%, 0 8%);
  box-shadow:2px 2px 0 rgba(0,0,0,.25);
}

/* wheat-pasted quote flyer */
.quote-box{
  border:3px solid var(--line-hard); border-left:10px solid var(--pink);
  background:var(--card);
  background-image:linear-gradient(115deg, transparent 92%, rgba(59,255,110,.07) 92%);
  padding:18px 22px 14px; margin:20px 0;
  font-size:1.18rem; transform:rotate(-.4deg);
  box-shadow:6px 6px 0 var(--shadow);
  position:relative;
}
.quote-box::before{
  content:"\201C"; position:absolute; top:-26px; left:6px;
  font-family:var(--font-display); font-size:4rem; color:var(--pink);
  text-shadow:2px 2px 0 var(--neon); line-height:1;
}
.quote-box .who{
  display:block; font-size:.8rem; color:var(--neon); margin-top:8px;
  font-family:var(--font-spray); letter-spacing:.02em;
}
html[data-theme="light"] .quote-box .who{color:var(--pink)}

/* scene / stage directions */
.scene{
  background:var(--card-2); border:2px dashed var(--line-hard);
  padding:20px; margin:20px 0; position:relative;
}
.scene::before{
  content:""; position:absolute; top:-3px; left:24px; right:24px; height:5px;
  background:repeating-linear-gradient(90deg, var(--pink) 0 14px, transparent 14px 22px);
  opacity:.7;
}
.scene .stage{color:var(--ink-dim); font-style:italic; font-size:.92rem}

/* ---------- timeline: riveted rail ---------- */
.timeline{
  border-left:5px solid var(--neon); margin:24px 0 24px 12px; padding-left:26px;
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:-5px; top:0; bottom:0; width:5px;
  background:repeating-linear-gradient(180deg, transparent 0 26px, rgba(0,0,0,.35) 26px 30px);
}
.timeline .event{margin:0 0 26px; position:relative}
.timeline .event::before{
  content:""; position:absolute; left:-38px; top:4px; width:16px; height:16px;
  background:radial-gradient(circle at 35% 30%, #ffd7e7 0 2px, var(--pink) 4px, #7a0f3c 8px);
  border:2px solid var(--neon); transform:rotate(45deg);
  box-shadow:0 0 10px rgba(255,46,136,.55);
}
.timeline .when{
  font-family:var(--font-display); color:var(--yellow); text-transform:uppercase;
  letter-spacing:.08em; font-size:1.05rem; text-shadow:2px 2px 0 rgba(0,0,0,.4);
}
html[data-theme="light"] .timeline .when{color:#8a5a00; text-shadow:none}

/* ---------- gallery frames ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; margin:26px 0}
.gallery figure{
  margin:0; background:var(--card); border:3px solid var(--line-hard);
  padding:10px; transform:rotate(-.6deg);
  box-shadow:6px 6px 0 var(--shadow);
  transition:transform .15s ease;
}
.gallery figure:nth-child(even){transform:rotate(.7deg)}
.gallery figure:hover{transform:rotate(0) translateY(-3px)}
.gallery figure img{border:2px solid var(--line); display:block; width:100%}
.gallery figcaption{font-size:.86rem; color:var(--ink-dim); padding:10px 4px 2px}
.gallery .ai-label{
  display:block; font-size:.72rem; color:var(--neon); margin-top:6px;
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
}

/* social pack download cards */
.social-card{
  background:var(--card); border:3px solid var(--line-hard); padding:12px;
  text-align:center; transform:rotate(-.5deg);
  box-shadow:5px 5px 0 var(--shadow);
  transition:transform .15s ease;
}
.social-card:nth-child(even){transform:rotate(.6deg)}
.social-card:hover{transform:rotate(0) translateY(-3px)}
.social-card img{border:2px solid var(--line); display:block; width:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.06em; background:var(--neon); color:#0d0c0b; text-decoration:none;
  padding:11px 22px; border:3px solid #0d0c0b; box-shadow:5px 5px 0 var(--pink);
  transform:rotate(-1deg); margin:8px 8px 8px 0;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover{background:var(--pink); box-shadow:5px 5px 0 var(--neon); color:#0d0c0b; transform:rotate(0)}
.btn.ghost{background:transparent; color:var(--neon); border-color:var(--neon); box-shadow:none}
html[data-theme="light"] .btn.ghost{color:var(--link)}
.btn.ghost:hover{background:var(--neon); color:#0d0c0b; box-shadow:5px 5px 0 var(--pink)}

/* ---------- FAQ ---------- */
.faq details{
  background:var(--card); border:2px solid var(--line-hard); margin:12px 0;
  padding:14px 18px; box-shadow:4px 4px 0 var(--shadow);
}
.faq summary{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; color:var(--neon); font-size:1.05rem;
}
html[data-theme="light"] .faq summary{color:var(--pink)}
.faq summary::marker{color:var(--pink)}

/* ---------- stream ---------- */
.video-wrap{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border:4px solid var(--pink); margin:20px 0;
  box-shadow:8px 8px 0 var(--shadow);
  background:#000;
}
.video-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}
.mockup-banner{
  background:repeating-linear-gradient(45deg,var(--yellow),var(--yellow) 18px,#131210 18px,#131210 36px);
  padding:10px; margin:20px 0; transform:rotate(-.5deg);
  box-shadow:5px 5px 0 var(--shadow);
}
.mockup-banner span{
  display:block; background:#131210; color:var(--yellow);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  text-align:center; padding:12px; font-size:1.1rem;
}

/* ---------- footer ---------- */
footer.site-footer{
  border-top:4px solid var(--neon); margin-top:60px; padding:30px 0 44px;
  background:linear-gradient(180deg, var(--bg-2), #0a0a09);
  position:relative;
}
html[data-theme="light"] footer.site-footer{background:linear-gradient(180deg, var(--bg-2), #cfc5ac)}
footer.site-footer::before{
  content:""; position:absolute; top:-14px; left:0; right:0; height:10px;
  background-image:radial-gradient(circle at 50% 50%, #8a8474 2.2px, #3a382f 3px, transparent 4px);
  background-size:30px 10px;
}
footer .footgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px}
footer h4{
  color:var(--pink); font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.08em; margin:0 0 10px; font-size:1.05rem;
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin:5px 0; font-size:.9rem}
footer a{color:var(--ink-dim)}
footer a:hover{color:var(--neon)}
.fineprint{font-size:.78rem; color:var(--ink-faint); margin-top:22px; line-height:1.6}

/* spray-paint accents */
.spray{
  font-family:var(--font-spray); color:var(--pink);
  text-shadow:2px 2px 0 var(--neon); letter-spacing:.02em;
}

/* ---------- lexicon table ---------- */
table.lex{width:100%; border-collapse:collapse; margin:20px 0; box-shadow:6px 6px 0 var(--shadow)}
table.lex th{
  background:repeating-linear-gradient(-45deg, var(--pink) 0 16px, #a3124f 16px 32px);
  color:#fff; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.08em; padding:12px; text-align:left; font-weight:400;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
table.lex td{border:2px solid var(--line-hard); padding:11px; vertical-align:top}
table.lex tr:nth-child(even) td{background:var(--card-2)}

/* ---------- manifesto: stenciled list plate ---------- */
.manifesto{
  background:var(--plate); border:3px solid var(--line-hard);
  padding:8px 26px 8px 10px; margin:22px 0;
  box-shadow:7px 7px 0 var(--shadow); transform:rotate(.3deg);
}
.manifesto p{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:1.06rem; margin:1em 0; padding-left:.4em;
  border-bottom:2px dashed var(--line); padding-bottom:1em;
}
.manifesto p:last-child{border-bottom:0}
.manifesto strong{color:var(--pink); text-shadow:2px 2px 0 rgba(0,0,0,.3); margin-right:.4em}
.manifesto p:nth-child(even) strong{color:var(--neon)}

/* ---------- mixtape tracklist ---------- */
ol.tracks{list-style:none; margin:22px 0; padding:0; counter-reset:trk}
ol.tracks li{
  counter-increment:trk; background:var(--card);
  border:2px solid var(--line-hard); border-left:8px solid var(--neon);
  margin:12px 0; padding:14px 16px 10px 64px; position:relative;
  box-shadow:4px 4px 0 var(--shadow); transform:rotate(-.25deg);
}
ol.tracks li:nth-child(even){transform:rotate(.25deg); border-left-color:var(--pink)}
ol.tracks li::before{
  content:counter(trk,decimal-leading-zero);
  position:absolute; left:14px; top:12px;
  font-family:var(--font-display); font-size:1.6rem; color:var(--yellow);
  text-shadow:2px 2px 0 rgba(0,0,0,.4); transform:rotate(-4deg);
}
ol.tracks .tape{margin-left:8px}

/* ---------- sticker wall: real sticker designs ---------- */
.stickers{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:22px; margin:26px 0;
}
.stk{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); text-transform:uppercase; line-height:1.1;
  min-height:150px; padding:16px 10px; cursor:default;
  border:4px solid #131210;
  box-shadow:5px 5px 0 var(--shadow), inset 0 0 0 3px rgba(255,255,255,.25);
  transition:transform .15s ease;
}
.stk:hover{transform:scale(1.07) rotate(0deg) !important}
.stk.s1{background:var(--pink); color:#fff; font-size:2.6rem; border-radius:50%; transform:rotate(-6deg); text-shadow:3px 3px 0 #131210}
.stk.s2{background:var(--yellow); color:#131210; font-size:1.2rem; transform:rotate(4deg); text-shadow:1px 1px 0 #fff8}
.stk.s3{background:#131210; color:var(--orange); border-color:var(--orange); font-size:1.15rem; transform:rotate(-3deg); border-radius:18px}
.stk.s4{background:var(--neon); color:#0d0c0b; font-size:1.5rem; transform:rotate(-4deg); border-radius:50% 50% 50% 4px}
.stk.s5{background:#fff; color:#131210; font-size:1.3rem; transform:rotate(5deg); box-shadow:5px 5px 0 var(--shadow), inset 0 0 0 4px var(--pink)}
.stk.s6{background:var(--orange); color:#131210; font-size:1.25rem; transform:rotate(-5deg); border-radius:4px 50% 4px 50%}
.stk.s7{background:#131210; color:var(--neon); border-color:var(--neon); font-size:1rem; transform:rotate(3deg)}
.stk.s8{background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,#131210 12px 24px); color:#fff; font-size:1.15rem; transform:rotate(-4deg); text-shadow:2px 2px 0 #000}
.stk.s9{background:var(--pink); color:#fff; font-size:1.05rem; transform:rotate(5deg); border-radius:50%; text-shadow:2px 2px 0 #131210}
.stk.s10{background:#e8e2d2; color:#131210; font-size:1.2rem; transform:rotate(-3deg); border-style:dashed}
.stk.s11{background:linear-gradient(135deg,#2b2a26,#131210); color:var(--neon); border-color:var(--neon); font-size:1.2rem; transform:rotate(4deg); text-shadow:0 0 12px rgba(59,255,110,.7)}
.stk.s12{background:#131210; color:var(--yellow); border:4px dashed var(--yellow); font-size:1.1rem; transform:rotate(-5deg)}
html[data-theme="light"] .stk{box-shadow:5px 5px 0 var(--shadow), inset 0 0 0 3px rgba(0,0,0,.08)}
html[data-theme="light"] .stk.s3{color:#d14e00}
html[data-theme="light"] .stk.s11{color:#0a6c34; text-shadow:none}

/* ---------- misc ---------- */
.lede{font-size:1.08rem; color:var(--ink-dim); max-width:68ch}
main .wrap{padding-top:6px; padding-bottom:10px}
code{background:var(--card-2); border:1px solid var(--line-hard); padding:1px 6px; font-size:.9em}

/* ---------- light-theme contrast repairs (AA on light surfaces) ---------- */
html[data-theme="light"] .btn{color:#fff}
html[data-theme="light"] .btn:hover{color:#fff}
html[data-theme="light"] h2 .num{color:#fff}
html[data-theme="light"] .sticker:hover{color:#fff}
html[data-theme="light"] nav.mainnav a.active{color:#fff}
html[data-theme="light"] .stk.s4{color:#fff}
html[data-theme="light"] .stk.s6{color:#fff}
html[data-theme="light"] .hero .hero-text{background:linear-gradient(180deg,transparent,rgba(10,10,9,.93))}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .hero h1{font-size:clamp(2rem,11vw,2.6rem)}
  nav.mainnav a{font-size:.7rem; padding:5px 8px}
  .brand .logo{font-size:1.7rem}
  .theme-toggle{width:40px; height:40px}
  h2{font-size:1.35rem}
  .wrap{padding:0 16px}
  .hero .hero-text{padding:20px 16px 16px}
  .quote-box{font-size:1.05rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  .card:hover,.gallery figure:hover,.social-card:hover{transform:none}
  .stk:hover{transform:none !important}
}