@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

/* Vtks Troath — self-hosted (not on Google Fonts). Personal-use license
   (1001Fonts FFP) — not cleared for commercial use; used here per explicit
   direction despite that, on a small/local band site. */
@font-face{
  font-family:'Vtks Troath';
  src:url('assets/fonts/vtks-troath.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ==================================================================
   zine-final.css — COMBINED DIRECTION
   Loaded AFTER zine.css.
   = Paste-Up (1b) base: sticker buttons, full color, glued tilts
   + Hero title from 1a: the original zine.css glitch title (no paper)
   + Section headings from 1a: rubber-stamp boxes
   ================================================================== */

:root{
  --zine-paper:#ece7d8;
  --zine-paper-ink:#141216;
  --zine-pink:#ff2b6a;
}

/* ---- HERO (from 1b, minus the paper-strip title) ------------------
   Title breaks from the site-wide --zine-display (Anton) used for nav
   links/stamp headings — Vtks Troath instead: a punk/brush/handdrawn
   display face, self-hosted (see @font-face above). */
.hero h1.glitch-title{
  font-family:'Vtks Troath', 'Permanent Marker', cursive;
  font-weight:400;
  letter-spacing:0; /* brush script reads worse with the base's +0.04em tracking */
  text-transform:none;
  /* Was landing as near-white: .hero h1{color:var(--fg)} in styles.css
     out-specifies .glitch-title's own muted color. Override here instead —
     a warm dusty lavender/cream blend, toned down from the harsh white. */
  color:rgba(211,202,208,0.99);
  /* worn print: fine sandy grain eaten out of the ink (masks the glitch
     layers too) — grittier + more solid than the original soft/sparse
     worn-paper mask (higher baseFrequency, fewer octaves, more graduated
     alpha steps instead of mostly-solid). */
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0.4 0.7 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='80' fill='%23fff' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-size:200px 80px;
}
.hero p{
  font-family:var(--zine-mono);
  letter-spacing:.08em;
  background:rgba(11,11,13,.78);
  color:var(--fg);
  display:inline-block;
  padding:4px 12px;
  transform:rotate(.8deg);
  clip-path:polygon(1% 12%, 0 55%, 2% 90%, 7% 100%, 94% 96%, 100% 68%, 98% 20%, 92% 0, 35% 6%);
}

/* ---- SECTION HEADINGS → RUBBER STAMP (from 1a) -------------------- */
main h2.visually-hidden{
  position:static !important;
  width:auto;height:auto;
  padding:2px 16px 0;margin:0 0 26px;
  overflow:visible;
  clip:auto;clip-path:none;
  white-space:normal;
}
main h2.glitch-soft{
  font-size:clamp(16px,2.2vw,22px);
  font-family:var(--zine-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--fg);
  -webkit-text-fill-color:var(--fg);
  background:transparent;
  background-image:none;
  background-clip:border-box;
  -webkit-background-clip:border-box;
  border:2px solid var(--fg);
  border-radius:2px;
  transform:rotate(-1.6deg);
  filter:none;
  animation:none;
  text-shadow:none;
  opacity:.7;
  /* dirtier stamp: two noise layers eaten out of the ink + a hint of
     misregistered second hit */
  text-shadow:2px 1px 0 rgba(255,43,106,.28);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='60' fill='%23fff' filter='url(%23w)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0.35 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='90' height='90' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E");
  mask-size:160px 60px, 90px 90px;
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}
#shows h2.glitch-soft, #videos h2.glitch-soft{ transform:rotate(1.2deg); }
#contact h2.glitch-soft{ transform:rotate(-2.2deg); }

/* ---- PHOTOS: keep color, push it like cheap print (1b) ------------ */
.show-media img,
.gallery-item img{ filter:saturate(1.18) contrast(1.08); }

/* ---- BUTTONS → STICKERS (1b) -------------------------------------- */
.btn,.btn-tickets,.btn-map,.btn-details,.cta{
  border:2px solid var(--zine-paper);
  border-radius:0;
  background:rgba(0,0,0,.45);
  transform:rotate(-.6deg);
}
.btn:hover,.btn-tickets[href]:hover,.cta:hover{
  background:var(--zine-paper);
  color:var(--zine-paper-ink);
  transform:rotate(.4deg) translateY(-1px);
}
.show-actions .btn-map{ transform:rotate(.8deg); }

/* nav links stay quiet, just squared */
.site-nav a,.top-socials a,.nav-hamburger{ border-radius:0; }

/* ---- NO GALLERY TILT -----------------------------------------------
   Gallery photos sit straight; posters/press keep the zine.css tilt. */
.gallery-item:nth-child(5n+1),
.gallery-item:nth-child(5n+2),
.gallery-item:nth-child(5n+3),
.gallery-item:nth-child(5n+4),
.gallery-item:nth-child(5n+5){
  transform:none;
}

/* ---- POSTER WEAR -----------------------------------------------------
   Fold line across the middle + yellowed corners, printed ON the
   poster (all show cards incl. featured). Real tape cutouts are placed
   by initTapeDecor() in index.html — zine.css no longer draws CSS tape. */
.show-media::after{
  content:"";
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 47.5%, rgba(0,0,0,.15) 49.8%, rgba(255,255,255,.06) 50.6%, transparent 53%),
    radial-gradient(55% 38% at 0% 0%, rgba(205,185,120,.16), transparent 70%),
    radial-gradient(48% 32% at 100% 100%, rgba(205,185,120,.13), transparent 70%),
    radial-gradient(42% 28% at 100% 0%, rgba(0,0,0,.14), transparent 70%);
}

/* ---- STICKER-SHEET SOCIALS + NAV ------------------------------------ */
.top-socials a{
  border:2px solid var(--fg);
  border-radius:0;
  background:rgba(11,11,13,.75);
  transform:rotate(-2deg);
}
.top-socials a:nth-child(2){ transform:rotate(1.7deg); }
.top-socials a:nth-child(3){ transform:rotate(-1.1deg); }
.top-socials a:hover{
  transform:rotate(0deg) translateY(-1px);
  background:var(--fg);
  color:#0b0b0d;
}
/* nav links: same die-cut sticker treatment, alternating tilts */
.site-nav a{
  border:2px solid var(--fg);
  border-radius:0;
  background:rgba(11,11,13,.75);
  font-family:var(--zine-display);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:.04em;
  font-size:16px;
  padding:5px 12px 3px;
  transform:rotate(-1.6deg);
}
.site-nav-links a:nth-child(2){ transform:rotate(1.4deg); }
.site-nav-links a:nth-child(3){ transform:rotate(-1deg); }
.site-nav-links a:nth-child(4){ transform:rotate(1.8deg); }
.site-nav-links a:nth-child(5){ transform:rotate(-1.3deg); }
.site-nav a:hover{
  transform:rotate(0deg) translateY(-1px);
  background:var(--fg);
  color:#0b0b0d;
}
.nav-hamburger{ border:2px solid var(--fg); border-radius:0; background:rgba(11,11,13,.75); }
@media (prefers-reduced-motion:reduce){
  .site-nav a:hover,.top-socials a:hover{ transform:none; }
}

/* ---- HANDWRITTEN ANNOTATIONS ----------------------------------------- */
.shows-featured{ position:relative; }
.shows-featured::after{
  content:"don't miss this!!";
  position:absolute; top:-10px; right:6%;
  font-family:'Permanent Marker', cursive;
  font-size:clamp(18px,2.4vw,26px);
  color:var(--zine-pink);
  transform:rotate(-5deg);
  pointer-events:none;
}
.about-scrawl{
  font-family:'Permanent Marker', cursive;
  font-size:clamp(16px,2vw,22px);
  color:var(--zine-pink);
  transform:rotate(-3deg);
  display:inline-block;
  margin:8px 0 0;
}
/* "New Song!" badge → handwritten, scrawled to the right of the embed */
.featured-release{ position:relative; }
.new-song-badge{
  position:absolute;
  left:calc(50% + 225px);
  top:42%;
  margin:0;
  font-family:'Permanent Marker', cursive;
  font-size:clamp(18px,2.2vw,26px);
  font-weight:400;
  letter-spacing:0;
  color:var(--zine-pink);
  -webkit-text-fill-color:var(--zine-pink);
  background:none;
  background-image:none;
  background-clip:border-box;
  -webkit-background-clip:border-box;
  animation:none;
  filter:none;
  transform:rotate(-4deg);
  white-space:nowrap;
  pointer-events:none;
}
.new-song-badge::before{ content:"\2190\00a0"; }
@media (max-width:820px){
  /* no room beside the embed on small screens — sit above it, still scrawled */
  .new-song-badge{
    position:static;
    display:inline-block;
    transform:rotate(-3deg);
    margin-bottom:2px;
  }
  .new-song-badge::before{ content:""; }
}

/* ---- SHOW CARD: poster not uploaded yet ------------------------------- */
/* Card is announced (date/venue/tickets are real) but the poster art isn't
   ready. .show-media img still gets a real src (flat-fill SVG matching the
   backing color) so scripts/sync-show-schema.js — which requires an <img
   src/alt> to build the MusicEvent block — keeps working; the handwritten
   note is a visual overlay on top. Swap in the real poster later and drop
   the "poster-pending" class + note span. */
.show-media.poster-pending{ background:#0f0f14; }
.poster-pending-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px;
  font-family:'Permanent Marker', cursive;
  font-size:clamp(18px,2.6vw,24px);
  line-height:1.35;
  color:var(--zine-pink);
  transform:rotate(-4deg);
  pointer-events:none;
}

/* ---- ABOUT SECTION ---------------------------------------------------- */
#about{ padding:32px 0 0; }
.about-wrap{
  display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start;
}
.about-copy{
  flex:1 1 380px; min-width:280px; max-width:640px;
  font-family:var(--zine-mono);
  letter-spacing:.04em;
  font-size:clamp(17px,2.4vw,20px); line-height:1.9;
  color:var(--fg);
}
.about-copy p{ margin:0 0 16px; }
.about-photo{
  position:relative;
  flex:0 1 340px; min-width:260px; margin:0;
  transform:rotate(1.6deg);
}
.about-photo image-slot,
.about-photo .about-img{
  width:100%; height:230px; display:block;
  object-fit:cover;
  box-shadow:0 8px 20px rgba(0,0,0,.55);
}

/* Pins the stand-in photo down like the taped-up show posters — same
   real-tape cutouts, straddling the image's actual top corners (percentage
   position + translate(-50%,-50%), same technique as the show-card tape). */
.about-tape{ z-index:3; top:0; }
.about-tape-left{ width:100px; left:2%; transform:translate(-50%,-50%) rotate(-9deg); }
.about-tape-right{ width:82px; left:98%; transform:translate(-50%,-50%) rotate(12deg); }

/* ---- GRUNGE PASS ------------------------------------------------------
   Heavier grain + faint photocopier toner streaks + grimy corner
   vignette, all in the one fixed overlay. */
body::after{
  opacity:.09;
  background-image:
    radial-gradient(140% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.9) 100%),
    repeating-linear-gradient(90deg, transparent 0 110px, rgba(255,255,255,.05) 110px 118px, transparent 118px 240px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.9'/%3E%3C/svg%3E");
  background-size:auto, auto, 180px 180px;
}

/* ---- SCUFF MARK --------------------------------------------------------
   Light scratch strokes behind the contact block. */
#contact .container{ position:relative; }
#contact .container::before{
  content:"";
  position:absolute; top:-30px; right:4%;
  width:200px; height:120px; z-index:0; pointer-events:none;
  opacity:.14;
  background:
    repeating-linear-gradient(-24deg, transparent 0 7px, rgba(245,245,247,.8) 7px 9px, transparent 9px 18px);
  clip-path:polygon(8% 20%, 0 60%, 14% 100%, 88% 84%, 100% 30%, 78% 0, 30% 12%);
}

/* ---- PLATFORM ICON ROW: bare, no boxes -------------------------------- */
.platform-icons a{
  border:none;
  border-radius:0;
  background:transparent;
  padding:6px 8px;
}
.platform-icons a:hover{
  background:transparent;
  transform:translateY(-2px);
}
.platform-icons a:hover .platform-text{ color:var(--zine-pink); }

/* ---- PRINT-MISREGISTRATION HOVER --------------------------------------
   Poster/gallery images split their ink channels for a beat on hover. */
@keyframes zine-misreg{
  0%{ filter:saturate(1.18) contrast(1.08) drop-shadow(3px 0 0 rgba(255,43,106,.7)) drop-shadow(-3px 0 0 rgba(106,227,255,.7)); }
  100%{ filter:saturate(1.18) contrast(1.08) drop-shadow(1.5px 0 0 rgba(255,43,106,.55)) drop-shadow(-1.5px 0 0 rgba(106,227,255,.55)); }
}
.show-card:hover .show-media img,
.gallery-item:hover img{
  animation:zine-misreg .16s steps(2,end) 1 both;
}
@media (prefers-reduced-motion:reduce){
  .show-card:hover .show-media img,
  .gallery-item:hover img{ animation:none; }
}

/* ---- NO SECTION DIVIDERS -------------------------------------------
   Remove the torn-paper strips between sections (zine.css). */
#music::before, #shows::before, #gallery::before,
#videos::before, #press::before, #contact::before{ content:none; }

@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn-tickets[href]:hover,.cta:hover{ transform:none; }
}