/* ============================================================
   TALISMAN ZINE — ZINE CRAFT LAYER
   Photocopy grain, riso misregistration, rubber stamps, tape,
   cut-out photos, tilts, scribbles, halftone, Cheee poster words.
   All textures are self-contained (inline SVG data-URIs).
   ============================================================ */

/* --- PHOTOCOPY GRAIN over the whole page --------------------- */
.grain{
  position:fixed; inset:0; z-index:350; pointer-events:none;
  opacity:.52; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
}
@media (prefers-reduced-motion:reduce){ .grain{ opacity:.28; } }

/* --- paper wash on light spreads ----------------------------- */
.spread:not(.is-dark):not(.s-cover)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 8% -12%, rgba(255,199,0,.06), transparent 55%),
    radial-gradient(120% 90% at 112% 112%, rgba(70,0,100,.055), transparent 55%);
}
.spread > *:not(.media-fill):not(.bgword){ position:relative; z-index:1; }

/* --- RUBBER-STAMP LABEL -------------------------------------- */
.stamp,
.spread__top > .code:first-child{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  border:2px solid currentColor; padding:.34em .72em;
  transform:rotate(-2.3deg); opacity:.92;
}
.is-dark .spread__top > .code:first-child,
.is-dark .stamp{ color:var(--accent-2); }
.is-wash .spread__top > .code:first-child{ color:var(--accent); }
.stamp--r{ transform:rotate(2deg); }

/* --- WASHI TAPE ---------------------------------------------- */
.tape{
  position:absolute; width:104px; height:30px; z-index:4;
  background:repeating-linear-gradient(96deg, rgba(255,199,0,.62) 0 7px, rgba(255,199,0,.46) 7px 14px);
  mix-blend-mode:multiply; transform:rotate(-5deg); box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.tape--tl{ top:-14px; left:-18px; }
.tape--tr{ top:-14px; right:-18px; transform:rotate(6deg); }
.tape--purple{ background:repeating-linear-gradient(96deg, rgba(124,59,151,.5) 0 7px, rgba(124,59,151,.36) 7px 14px); }

/* --- CUT-OUT PHOTO (pasted look) ----------------------------- */
.cutout{ background:var(--bone); padding:12px 12px 30px; box-shadow:0 12px 30px rgba(20,10,30,.22);
  transform:rotate(-2.2deg); position:relative; }
.cutout img,.cutout video{ display:block; width:100%; height:100%; object-fit:cover; }

/* --- TILT UTILITIES ------------------------------------------ */
.tilt-1{ transform:rotate(-2deg); } .tilt-2{ transform:rotate(1.6deg); }
.tilt-3{ transform:rotate(-1deg); } .tilt-4{ transform:rotate(2.3deg); }

/* --- RISO MISREGISTRATION TEXT ------------------------------- */
.riso{ color:var(--accent); text-shadow:3px 3px 0 var(--accent-2); }

/* --- GOO — Cheee poster word --------------------------------- */
.goo{ font-family:var(--font-goo); text-transform:uppercase; line-height:.86; letter-spacing:0; }

/* giant faint Cheee word bleeding off an edge */
.bgword{ position:absolute; font-family:var(--font-goo); text-transform:uppercase;
  font-size:clamp(8rem,25vw,22rem); line-height:.68; color:var(--accent);
  opacity:.07; z-index:0; pointer-events:none; white-space:nowrap; }
.bgword--br{ right:-.08em; bottom:-.14em; }
.bgword--bl{ left:-.06em; bottom:-.14em; }
.is-dark .bgword{ color:var(--accent-2); opacity:.09; }

/* --- HALFTONE dot shading ------------------------------------ */
.halftone{ background-image:radial-gradient(var(--accent) 22%, transparent 24%); background-size:8px 8px; }

/* --- HAND-DRAWN scribble underline --------------------------- */
.scribble{ position:relative; display:inline-block; }
.scribble::after{ content:""; position:absolute; left:-3%; right:-3%; bottom:-.18em; height:.34em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='14' viewBox='0 0 220 14'%3E%3Cpath d='M3 9 C 45 3, 85 12, 125 6 S 205 4, 217 8' fill='none' stroke='%23FFC700' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; }