/* Zine polish (Block 5c, Sep 26). Loaded after zine-energy.css, before print.css.
   CSS only: photocopy grain, pasted-on crooked cards, tape, rubber stamps, highlighter,
   ransom-note masthead, compact edition/voice tabs. Colors stay the palette tokens, so the
   contrast tests still hold. print.css comes last and keeps the print sheet clean. */

/* 1. photocopy grain over everything, stronger than the paper grit */
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.08; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size:220px 220px; }

/* 2. index header lines up with the card grid */
.top .wrap.wide { max-width:1040px; }

/* 3. ransom-note masthead, front page only */
.mast.ransom { text-shadow:none; line-height:1.15; letter-spacing:0; display:flex; flex-wrap:wrap; gap:4px 3px; align-items:flex-end; }
.mast.ransom .rn { display:inline-block; padding:0 .08em; line-height:1; border:2px solid var(--ink); box-shadow:2px 2px 0 rgba(0,0,0,.35); }
.mast.ransom { column-gap:.35em; }
.mast.ransom .word { display:inline-flex; gap:3px; white-space:nowrap; }   /* never break inside a word */
.mast.ransom .rn0 { background:var(--paper); color:var(--ink); transform:rotate(-3deg); }
.mast.ransom .rn1 { background:#FF48B0; color:var(--ink); transform:rotate(2deg) translateY(-3px); font-size:.92em; }
.mast.ransom .rn2 { background:var(--ink); color:var(--paper); border-color:var(--paper); transform:rotate(-1deg); font-family:'Archivo',sans-serif; font-weight:900; }
.mast.ransom .rn3 { background:#FFFBF3; color:var(--ink); transform:rotate(4deg) translateY(2px); font-size:1.06em; }
.mast.ransom .rn4 { background:#F4E27A; color:var(--ink); transform:rotate(-2deg); font-size:.96em; }

/* 4. index cards: pasted on crooked, taped, straighten on hover/focus */
.slate .card { transition:transform .15s ease; }
.slate .card:nth-child(4n+1) { transform:rotate(-.9deg); }
.slate .card:nth-child(4n+2) { transform:rotate(.7deg); }
.slate .card:nth-child(4n+3) { transform:rotate(-.4deg); }
.slate .card:nth-child(4n)   { transform:rotate(1deg); }
.slate .card:hover, .slate .card:focus-within { transform:rotate(0) translateY(-2px); }
.slate .card:not(.gotn)::before { content:""; position:absolute; top:-12px; left:calc(50% - 40px); width:80px; height:22px;
  background:rgba(244,226,122,.75); border:1px solid rgba(30,27,24,.12); transform:rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .slate .card { transition:none; } }

/* 5. rubber-stamp FINAL */
.meta .stamp { display:inline-block; color:#B8156E; border:2px solid #B8156E; border-radius:3px; padding:1px 7px;
  transform:rotate(-4deg); letter-spacing:.18em; opacity:.9; }

/* 6. highlighter under the winning score */
.card .row.win .sc { background:linear-gradient(transparent 58%, rgba(255,72,176,.45) 58%, rgba(255,72,176,.45) 88%, transparent 88%); padding:0 3px; }

/* 7. issue page: drop the second nav bar (it only ever said "All"; the back bar does that job) */
nav.teams:not(.index) { display:none; }

/* 8. compact edition / voice tabs */
.voices { gap:6px; margin-bottom:10px; }
.voices a { font:800 10.5px 'Archivo',sans-serif; letter-spacing:.1em; padding:6px 11px; border-width:2px; transform:none; min-height:32px; display:inline-flex; align-items:center; }
.voices a[aria-current="page"] { background:var(--spot); color:var(--on-spot); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink); }
:root[data-lowc="1"] .voices a[aria-current="page"] { background:var(--ink); color:var(--paper); }
.voices .grp { min-width:62px; font-size:9.5px; }

/* QA pass, Sep 26 */
/* D3: "Last night" and its label stack on a phone instead of squeezing */
.slatehead { flex-wrap:wrap; }
@media (max-width:520px) { .slatehead .date { flex-basis:100%; } }
/* D4: the cover's small score line repeats the score card right below it (kept in print) */
@media screen { .cover .date { display:none; } }
/* D5: on an issue, the game comes first; the masthead steps back */
.cover .mast { font-size:clamp(30px,8.5vw,64px); }

/* Soft riso paper (owner picked riso, "softer rather than so bold", Sep 26).
   Blush paper, a fine faint pink dot screen, no notebook lines. Text colors unchanged; contrast re-checked. */
:root { --lines:none; }
body { background-color:#FCF3F5;
  background-image:var(--grit), radial-gradient(circle, rgba(255,72,176,.11) 26%, transparent 28%);
  background-size:160px 160px, 11px 11px; }

/* Staples: two on the Game of the Night card and on the spotlight clipping */
.slate .card.gotn::after, .p4 .clip::after { content:""; position:absolute; top:-5px; right:28px; width:30px; height:5px;
  border-radius:2px; background:linear-gradient(#e6e6e6,#9b9b9b); box-shadow:0 1px 0 rgba(0,0,0,.35); transform:rotate(-7deg); }
.p4 .clip::before { content:""; position:absolute; top:-5px; left:28px; width:30px; height:5px; z-index:2;
  border-radius:2px; background:linear-gradient(#e6e6e6,#9b9b9b); box-shadow:0 1px 0 rgba(0,0,0,.35); transform:rotate(5deg); }

/* Torn bottom edge on the spotlight clipping (clip-path drops box-shadow, so the offset
   color block moves to a drop-shadow on the wrapper) */
.p4 .clip { box-shadow:none; border-bottom:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),96% 100%,91% calc(100% - 7px),86% calc(100% - 1px),80% calc(100% - 9px),73% 100%,67% calc(100% - 6px),60% calc(100% - 1px),53% calc(100% - 8px),46% 100%,39% calc(100% - 5px),32% calc(100% - 10px),25% calc(100% - 2px),18% calc(100% - 8px),11% 100%,5% calc(100% - 6px),0 calc(100% - 2px)); }
.p4 .cliphold { filter:drop-shadow(6px 6px 0 var(--spot)); }
.p4 .clip { padding-bottom:26px; }

/* Off-register ink: headlines print with a pink ghost a hair out of line */
.cover .headline { text-shadow:-2px 1px 0 rgba(255,72,176,.55); }
.misreg { text-shadow:2px 2px 0 var(--spot), -1px -1px 0 rgba(255,72,176,.45); }
@media print { .p4 .clip { clip-path:none; } .p4 .cliphold { filter:none; } }

/* Plum ink for the dark surfaces (owner picked over black, Sep 26): a second riso ink next to the
   pink, softer than black, same contrast for the cream text on it. Text ink stays --ink. */
:root { --plum:#2B1A2F; }
.top, .cover, .ticker, footer { background-color:var(--plum); }