/* Binge Bulletin – "risograph zine" theme. System fonts only. */
:root{
  --paper:#fff3dc; --paper-2:#ffe9c2; --ink:#1d1a2f;
  --tomato:#ff5a36; --sun:#ffc83d; --mint:#3fd17f; --cobalt:#2f6bff; --bubblegum:#ff8ac4;
  --display: Impact, Haettenschweiler, "Franklin Gothic Heavy", "Arial Narrow Bold", "Roboto Condensed", "Liberation Sans Narrow", "DejaVu Sans Condensed", "Arial Black", sans-serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  --bw:3px; --shadow:6px 6px 0 var(--ink); --r:14px;
}
*{box-sizing:border-box}
html{font-size:112.5%}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 var(--body);
  background-image:radial-gradient(rgba(29,26,47,.09) 1.2px,transparent 1.3px);background-size:14px 14px}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{background:var(--sun)}
img,svg{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--sun);padding:8px;z-index:9}
:focus-visible{outline:3px dashed var(--cobalt);outline-offset:3px}

/* masthead */
.ticker{background:var(--ink);color:var(--sun);font:700 .72rem/1 var(--mono);letter-spacing:.2em;white-space:nowrap;overflow:hidden;padding:7px 0}
.ticker span{display:inline-block;padding-left:100%;animation:tick 40s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker span{animation:none;padding-left:20px}}
.mast-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:22px;padding-bottom:10px}
.logo{text-decoration:none;display:inline-flex;flex-wrap:wrap;font-weight:900;font-stretch:condensed;align-items:baseline;gap:.15em;font-family:var(--display);text-transform:uppercase;line-height:.9;margin:0}
.logo:hover{background:none}
.logo-binge{font-size:clamp(2.6rem,7vw,4.6rem);color:var(--tomato);-webkit-text-stroke:1px var(--ink);text-shadow:4px 4px 0 var(--ink);transform:rotate(-3deg);display:inline-block}
.logo-bulletin{font-size:clamp(2.6rem,7vw,4.6rem);background:var(--ink);color:var(--paper);padding:.05em .18em;transform:rotate(1.5deg);display:inline-block}
.logo-small .logo-binge,.logo-small .logo-bulletin{font-size:2rem;text-shadow:2px 2px 0 var(--ink)}
.issue-tag{font:700 .8rem var(--mono);text-transform:uppercase;border:var(--bw) solid var(--ink);padding:6px 10px;background:var(--paper);transform:rotate(-1deg);margin:0}
.nav{border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);background:var(--paper-2)}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:12px;margin:0 auto}
.chip{display:inline-block;font:400 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:8px 14px;border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);background:var(--paper)}
.chip:hover,.chip[aria-current]{transform:translate(-1px,-2px) rotate(-2deg);box-shadow:5px 5px 0 var(--ink)}
.chip-tomato{background:var(--tomato);color:#fff}.chip-cobalt{background:var(--cobalt);color:#fff}.chip-mint{background:var(--mint)}
.chip-sun{background:var(--sun)}.chip-bubblegum{background:var(--bubblegum)}.chip-plain{background:var(--paper)}

/* cover */
.cover{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;margin-top:36px;margin-bottom:20px}
.cover-lead{border:var(--bw) solid var(--ink);box-shadow:var(--shadow);border-radius:var(--r);padding:28px;background:var(--tomato);color:#fff}
.cover-lead h1{font:400 clamp(2rem,4.6vw,3.4rem)/1 var(--display);text-transform:uppercase;margin:.2em 0}
.cover-lead a{text-decoration:none}.cover-lead h1 a:hover{background:var(--ink)}
.cover-art{position:relative;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);transform:rotate(2deg);overflow:visible}
.sticker{position:absolute;right:-14px;top:-18px;background:var(--sun);border:var(--bw) solid var(--ink);border-radius:50%;width:92px;height:92px;display:grid;place-items:center;text-align:center;font:400 1.05rem/1 var(--display);transform:rotate(12deg);box-shadow:3px 3px 0 var(--ink)}
.btn{display:inline-block;background:var(--paper);color:var(--ink)!important;border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 18px;font:400 1.1rem var(--display);text-transform:uppercase;border-radius:8px}
.btn:hover{background:var(--sun)}

/* art panels: patterned backgrounds per colour */
[class*="art-"]{background-color:var(--paper-2)}
.art-tomato{background:var(--tomato) repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.18) 14px 28px)}
.art-sun{background:var(--sun) radial-gradient(var(--tomato) 2px,transparent 2.5px) 0 0/18px 18px}
.art-mint{background:var(--mint) repeating-linear-gradient(90deg,transparent 0 20px,rgba(29,26,47,.12) 20px 22px),repeating-linear-gradient(0deg,transparent 0 20px,rgba(29,26,47,.12) 20px 22px)}
.art-cobalt{background:var(--cobalt) radial-gradient(rgba(255,243,220,.5) 1.5px,transparent 2px) 0 0/16px 16px}
.art-bubblegum{background:var(--bubblegum) repeating-linear-gradient(-45deg,transparent 0 10px,rgba(255,243,220,.45) 10px 14px)}
.card-art svg,.cover-art svg,.post-art svg{width:100%;height:100%}

/* bands + cards */
.band{margin-top:48px}
.band-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-bottom:18px}
.band-head p{margin:0;max-width:60ch;font-style:italic}
.stamp{display:inline-block;font:400 clamp(1.6rem,3.4vw,2.4rem)/1 var(--display);text-transform:uppercase;margin:0;padding:6px 14px;border:var(--bw) solid var(--ink);background:var(--ink);color:var(--paper);transform:rotate(-1.5deg)}
.stamp a{text-decoration:none}.stamp a:hover{background:none;color:var(--sun)}
.band-tomato .stamp{background:var(--tomato);color:#fff}.band-cobalt .stamp{background:var(--cobalt);color:#fff}
.band-mint .stamp{background:var(--mint);color:var(--ink)}.band-sun .stamp{background:var(--sun);color:var(--ink)}.band-bubblegum .stamp{background:var(--bubblegum);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px}
.card{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s}
.card:nth-child(3n+1){transform:rotate(-.8deg)}.card:nth-child(3n+2){transform:rotate(.6deg)}
.card:hover{transform:rotate(0) translateY(-4px)}
.card-art{aspect-ratio:16/9;border-bottom:var(--bw) solid var(--ink)}
.card-body{padding:16px 18px 20px}
.card h3{font:400 1.45rem/1.08 var(--display);text-transform:uppercase;margin:.25em 0 .4em}
.card h3 a{text-decoration:none}
.card p{margin:0;font-size:.95rem}
.kicker{font:700 .74rem var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0}
.kicker a{text-decoration:none}

/* posts */
.post{max-width:820px;margin-top:36px}
.post-head{position:relative;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 26px 0;background:var(--paper);overflow:hidden}
.post-head h1{font:400 clamp(2rem,5vw,3.3rem)/1.02 var(--display);text-transform:uppercase;margin:.35em 0 .25em}
.standfirst{font-size:1.15rem;font-style:italic;margin:.2em 0 .6em}
.byline{font:700 .78rem var(--mono);text-transform:uppercase}
.post-art{height:170px;margin:18px -26px 0;border-top:var(--bw) solid var(--ink)}
.note{margin:22px 0;padding:12px 16px;border:var(--bw) dashed var(--ink);background:var(--paper-2);font-size:.92rem;border-radius:8px}
.prose{font-size:1.06rem}
.prose h2{font:400 1.9rem/1.05 var(--display);text-transform:uppercase;margin:1.6em 0 .4em;display:inline-block;background:var(--sun);padding:2px 10px;transform:rotate(-1deg);border:2px solid var(--ink)}
.prose h3{font:400 1.35rem/1.1 var(--display);text-transform:uppercase;margin:1.4em 0 .3em}
.prose h3::before{content:"▶ ";color:var(--tomato)}
.prose ul,.prose ol{padding-left:1.3em}.prose li{margin:.35em 0}
.prose blockquote{margin:1.5em 0;padding:14px 18px;background:var(--bubblegum);border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:8px;font-style:italic}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem;margin:1.2em 0;background:var(--paper)}
.prose th,.prose td{border:2px solid var(--ink);padding:7px 9px;text-align:left;vertical-align:top}
.prose th{background:var(--ink);color:var(--paper);font:400 1rem var(--display);text-transform:uppercase;letter-spacing:.03em}
.prose tr:nth-child(even) td{background:var(--paper-2)}
.tbc{font:700 .75rem var(--mono);background:var(--ink);color:var(--sun);padding:1px 6px;border-radius:4px;white-space:nowrap}
.sources{margin:46px 0 10px;padding:18px 20px;border:var(--bw) solid var(--ink);background:var(--paper-2);border-radius:var(--r);font-size:.88rem}
.sources h2{font:400 1.4rem var(--display);text-transform:uppercase;margin:0 0 6px}
.sources li{word-break:break-word}
.more{margin-top:50px}
.more .stamp{margin-bottom:18px}

/* footer */
.footer{margin-top:70px;background:var(--ink);color:var(--paper);padding:34px 0 20px;border-top:6px solid var(--tomato)}
.footer a:hover{background:var(--tomato)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
.footer-links{list-style:none;padding:0;margin:0;font:400 1.1rem/1.9 var(--display);text-transform:uppercase}
.footer-links a{text-decoration:none}
.tiny{font-size:.8rem;opacity:.85}

@media (max-width:760px){
  .cover,.footer-grid{grid-template-columns:1fr}
  .cover-art{min-height:200px}
  .card:nth-child(n){transform:none}
}
@media print{.ticker,.nav,.footer,.more{display:none}body{background:#fff}}

h1,h2,h3,.chip,.stamp,.btn,.footer-links,.sticker{font-weight:900!important;font-stretch:condensed}
@media (max-width:480px){.logo-binge,.logo-bulletin{font-size:2.4rem}}