/* ==========================================================================
   Zine energy. Approved by the owner Sep 24 (LEDGER).
   Layered on top of styles.css, loaded before print.css. Changes no token, colour,
   type scale or layout grid; adds the cut-and-paste construction real zines have:
   halftone, tape, a stamp, torn edges, margin notes. Third font, Caveat (OFL),
   approved for the margin notes only.
   ========================================================================== */

@font-face { font-family: 'Caveat'; src: url('fonts/Caveat-VariableFont_wght.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

/* 1. Halftone splash behind the cover, always in the Full Court Press pink (the default
      spot, #FF48B0, not a new colour): a team colour vanishes on the black cover for most
      teams, and one constant makes it a signature. Screen only: it would waste toner. */
@media screen {
  .cover { position: relative; isolation: isolate; }
  .cover::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -60px; top: 40px; width: 420px; height: 420px;
    background-image: radial-gradient(circle, #FF48B0 38%, transparent 40%);
    background-size: 11px 11px;
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    opacity: .5;
  }
  .cover > .wrap { position: relative; z-index: 1; }
}

/* 2. Masking tape pinning the score card and The Number. Torn ends via clip-path. */
.score, .num { position: relative; }
.score::before, .num::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: 96px; height: 26px;
  background: rgba(236, 226, 196, .82);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  clip-path: polygon(3% 12%, 0 50%, 4% 88%, 97% 100%, 100% 60%, 96% 20%, 100% 0, 2% 0);
}
.score::before { top: -14px; left: 34%; transform: rotate(-4deg); }
.num::before   { top: -10px; right: -18px; transform: rotate(38deg); width: 78px; }

/* 3. Rubber stamp. "Final" becomes a crooked inked stamp instead of a black pill. */
.score .ot {
  display: inline-block; background: none !important; color: var(--spot-text) !important;
  border: 3px double currentColor; border-radius: 4px;
  padding: 3px 10px 2px; transform: rotate(-7deg); letter-spacing: .24em;
  font: 800 12px/1 'Archivo', sans-serif; text-transform: uppercase;
  opacity: .9; mix-blend-mode: multiply;
}

/* 4. Torn-paper edge instead of a dashed line, with a paper tab on it that says what it is
      for. The owner asked that the reader still knows: this is where the printed zine folds. */
@media screen {
  .fold {
    border: 0 !important; height: 22px; margin: 26px -16px 18px; text-align: center; line-height: 22px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cpath d='M0 9 L8 4 L15 11 L23 5 L31 12 L38 6 L47 13 L55 5 L63 11 L70 4 L79 12 L86 6 L95 13 L103 5 L111 11 L120 7 L120 18 L0 18Z' fill='%23d9d2c6'/%3E%3Cpath d='M0 9 L8 4 L15 11 L23 5 L31 12 L38 6 L47 13 L55 5 L63 11 L70 4 L79 12 L86 6 L95 13 L103 5 L111 11 L120 7' fill='none' stroke='%231E1B18' stroke-width='1.4'/%3E%3C/svg%3E")
      repeat-x center / 120px 18px;
  }
  .fold::before, .fold::after { display: none !important; }
  .fold span {
    display: inline-block; background: var(--paper); color: var(--ink);
    border: 1.5px solid var(--ink); padding: 1px 10px; transform: rotate(-1.5deg);
    font: 800 10px/1.6 'Archivo', sans-serif; letter-spacing: .18em; text-transform: uppercase;
  }
}

/* 5. Margin notes in marker. Fixed phrases only, never numbers or claims the facts
      sheet does not hold, so they can never trip the fact lock. */
.scribble {
  font-family: 'Caveat', 'Comic Sans MS', cursive; font-weight: 700;
  color: var(--spot-text); font-size: 24px; line-height: 1;
  display: inline-block; transform: rotate(-5deg); white-space: nowrap;
}
.cover .scribble { color: var(--paper); }
/* arrows are inline SVG: Caveat has no arrow glyphs, and a fallback font would draw them
   differently on every device, or as an empty box. */
.scribble .arrow { display: inline-block; width: 26px; height: 22px; vertical-align: -4px; }
.note-gotn   { position: absolute; right: 88px; top: 20px; transform: rotate(-9deg); }
.note-run    { margin: 4px 0 0 118px; }
.note-counted{ margin: 2px 0 10px 4px; transform: rotate(-3deg); font-size: 22px; }
@media (max-width: 420px) { .note-gotn { right: 78px; top: 18px; font-size: 21px; } .note-run { margin-left: 60px; } }

/* 6. A touch more hand: section headings sit slightly crooked, like pasted strips. */
.pnl h2.slab { display: block; width: fit-content; transform: rotate(-1.2deg); }

@media print { .scribble { color: #1E1B18 !important; } }
@media (prefers-reduced-motion: reduce) { .scribble, .score .ot { transform: none; } }