:root{
    color-scheme:dark;
    --r:14px; --r-sm:10px; --r-pill:999px;
    --bg:#0d0b09; --bg-alt:#17130f; --bg-card:#1c1712; --line:#332a20;
    --ink:#eee5d3; --ink-dim:#a89a86; --yellow:#ff8ac1; --red:#ff5fa2; --red-text:#ff8ac1; --red-deep:#5a1436;
    --font-display:'Nosifer', 'Copperplate', 'Impact', sans-serif;
    --font-head:'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --font-body:'Source Serif 4', Georgia, serif;
  }
  *{box-sizing:border-box;}
  /* overflow-x:hidden belongs on html, not body: setting it on body alone
     (as this used to) leaves body's overflow-y unset ("visible"), and per
     the CSS spec that auto-promotes it to "auto" - silently turning body
     into its own independent scroll container, separate from the window.
     That broke window.scrollTo/pageYOffset-based scroll logic (the
     now-playing player's reveal-on-scroll), since the real scrollable
     bottom of the page became unreachable via the window. */
  html{scroll-behavior:smooth; scroll-padding-top:5.5rem; overflow-x:hidden;}
  body{
    margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
    font-size:1.05rem; line-height:1.68;
    background-image:
      url("/imgs/print-cheetah-a.svg?v=1b33af13"), url("/imgs/print-cheetah-b.svg?v=44ce31e3"), url("/imgs/print-cheetah-c.svg?v=e70b9dfc"),
      radial-gradient(circle at 15% 0%, rgba(255,95,162,0.08), transparent 45%),
      radial-gradient(circle at 85% 20%, rgba(255,95,162,0.04), transparent 40%);
  }
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
  }
  a{color:var(--yellow); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:0.2em;}
  nav a, a.wordmark, a.btn, a.btn.ghost{text-decoration:none; text-decoration-color:transparent;}
  a:hover{color:var(--ink);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--yellow); outline-offset:3px;}
  img{max-width:100%; height:auto; display:block;}
  /* Images are wrapped in <picture> for WebP, which would otherwise break every
     `.parent > img` rule and let the raw height attribute win. */
  picture{display:contents;}
  h1,h2,h3{font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.03em; text-wrap:balance; margin:0;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 2rem;}

  header.site{position:fixed; top:0; left:0; right:0; z-index:100; background:linear-gradient(rgba(10,8,7,0.85), rgba(10,8,7,0.0));}
  body{padding-top:78px;}
  body.pg-index{padding-top:0;}
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:1rem clamp(1.25rem, 5vw, 4.5rem); gap:2rem;}
  .wordmark{font-family:var(--font-display); font-size:1.15rem; line-height:1; color:#fff0f7; letter-spacing:0.02em; white-space:nowrap; text-shadow:0 0 0.05em #ffc2dd, 0 0 0.25em rgba(255,95,162,0.45), 0 0 0.6em rgba(255,61,146,0.25); display:inline-flex; align-items:center; min-height:44px; padding:0.3rem 0;}
  a.wordmark:hover{color:#fff;}
  nav.links{display:flex; gap:2.1rem;}
  nav.links a{position:relative; padding:0.4rem 0; font-family:var(--font-head); font-weight:700; font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim); transition:color 0.2s;}
  nav.links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--red); transition:right 0.25s ease;}
  nav.links a:hover{color:var(--ink);}
  nav.links a:hover::after, nav.links a.active::after{right:0;}
  nav.links a.active{color:var(--ink);}
  .btn{
    font-family:var(--font-head); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:0.85rem;
    /* Near-black on the pink fill, not cream: #fff1e6 on #ff5fa2 measures 2.56:1,
       under the 4.5:1 minimum, and these are the site's conversion buttons.
       #170a10 on the same pink is about 9:1 and keeps the fill unchanged. */
    padding:0.8rem 1.5rem; border:2px solid var(--red); background:var(--red); color:#170a10; border-radius:var(--r-pill);
    white-space:nowrap; display:inline-block; transition:background 0.15s, color 0.15s, transform 0.1s; min-height:44px;
  }
  .btn:hover{background:transparent; color:var(--red); transform:translateY(-1px);}
  .btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink-dim);}
  .btn.ghost:hover{border-color:var(--yellow); color:var(--yellow);}
  .ig-link{display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border:1px solid rgba(238,229,211,0.18); border-radius:50%; color:var(--ink-dim); flex:none; transition:color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;}
  .ig-link:hover, .ig-link:focus-visible{color:var(--ink); border-color:var(--red); box-shadow:0 0 22px rgba(255,95,162,0.35);}
  .ig-link svg{width:1rem; height:1rem;}
  .nav-actions{display:flex; align-items:center; gap:1.2rem;}
  .nav-actions .btn{padding:0.75rem 1.3rem; font-size:0.74rem; letter-spacing:0.14em;}

  .marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(17,13,11,0.78); overflow:hidden; padding:0.9rem 0; font-family:var(--font-head); font-weight:700; letter-spacing:0.28em; text-transform:uppercase; font-size:0.74rem; color:var(--ink-dim);}
  .marquee .track{display:flex; gap:3.5rem; width:max-content; animation:marquee 40s linear infinite;}
  .marquee span{white-space:nowrap;}
  .marquee span::before{content:"\2726"; color:var(--red); margin-right:3.5rem; font-size:0.6rem; vertical-align:middle;}
  @keyframes marquee{to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){ .marquee .track{animation:none;} }
  .hero{padding:4rem 1.5rem 3rem; text-align:center; position:relative; border-bottom:1px solid var(--line); overflow:hidden;}
  .hero .eyebrow{font-family:var(--font-head); font-weight:700; letter-spacing:0.3em; font-size:0.8rem; color:var(--yellow); text-transform:uppercase; position:relative; z-index:2;}
  .hero h1{font-family:var(--font-display); font-size:clamp(2.6rem, 9vw, 6rem); color:var(--ink); line-height:1; margin:0.6rem 0; text-shadow:0 0 18px rgba(255,95,162,0.45), 0 0 46px rgba(255,95,162,0.15); position:relative; z-index:2; overflow-wrap:break-word; hyphens:none; text-wrap:balance;}
  .hero .tagline{font-family:var(--font-body); font-style:normal; color:var(--ink-dim); font-size:0.95rem; opacity:0.85; max-width:38ch; margin:0 auto 1.8rem; position:relative; z-index:2;}
  .cta-row{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
  .hero .cta-row{position:relative; z-index:2;}
  .hero-note{font-size:0.82rem; color:var(--ink-dim); max-width:44ch; margin:1.4rem auto 0; position:relative; z-index:2;}

  @keyframes flicker{
    0%, 100%{ text-shadow:0 0 18px rgba(255,95,162,0.45), 0 0 46px rgba(255,95,162,0.15); }
    50%{ text-shadow:0 0 26px rgba(255,95,162,0.6), 0 0 60px rgba(255,95,162,0.2); }
    52%{ text-shadow:0 0 12px rgba(255,95,162,0.35), 0 0 30px rgba(255,95,162,0.1); }
  }

  @media (prefers-reduced-motion: reduce){
    .hero h1{animation:none;}
  }

  .page-head{padding:3.5rem 1.5rem 2.5rem; text-align:center; border-bottom:1px solid var(--line);}
  .page-head{position:relative;}
  .page-head::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 50% 55%, rgba(13,11,9,0.88) 0%, rgba(13,11,9,0.7) 38%, rgba(13,11,9,0.15) 75%, rgba(13,11,9,0) 100%);}
  .page-head > *{position:relative; z-index:1;}
  .page-head h1{font-family:var(--font-display); font-size:clamp(1.9rem, 8vw, 4rem); color:var(--ink); text-shadow:0 0 18px rgba(255,95,162,0.4); overflow-wrap:break-word; hyphens:none; white-space:nowrap;}
  @media (max-width:480px){ .page-head h1{white-space:normal; font-size:clamp(1.6rem, 8vw, 4rem);} }
  .page-head p{color:var(--ink-dim); max-width:46ch; margin:0.8rem auto 0; font-style:italic;}

  section{padding:3.5rem 0;}
  section:not(.alt):not(.finale):not(.hero):not(.ig-bg-wrap):not(.merch-table):not(.tapes){background:rgba(13,11,9,0.74);}
  section.alt{background:rgba(23,19,15,0.6);}
  section.tight{padding:2.5rem 0;}
  .kicker{font-family:var(--font-head); font-weight:700; color:var(--red-text); letter-spacing:0.25em; font-size:0.95rem; text-transform:uppercase; margin-bottom:0.6rem;}
  .sec-head{margin-bottom:2.2rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
  .sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem); color:var(--ink);}
  /* Vertical padding, not a min-height on an inline-flex box: this link is a
     baseline-aligned flex item next to the section h2, so giving it a height
     would drop its text off the heading's baseline. Padding grows the hit area
     to the 44px minimum (26px of line box + 9px each side) and leaves the
     baseline where it is. */
  .sec-head .more{font-family:var(--font-head); font-size:0.95rem; letter-spacing:0.06em; color:var(--yellow); white-space:nowrap; padding:9px 0;}

  .shows-banner{background:linear-gradient(180deg, rgba(255,95,162,0.10), transparent);}
  .show-list{border-top:1px solid var(--line);}
  .show-row{display:flex; gap:1.5rem; align-items:baseline; padding:1.1rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; text-decoration:none; color:inherit;}
  a.show-row{cursor:pointer; transition:background 0.15s;}
  a.show-row:hover, a.show-row:focus-visible{color:inherit; background:rgba(255,95,162,0.05);}
  .show-date{font-family:var(--font-head); font-weight:700; color:var(--yellow); min-width:9rem; font-size:0.95rem; letter-spacing:0.03em;}
  .show-venue{font-weight:600; color:var(--ink);}
  .show-bill{color:var(--ink-dim); font-size:0.92rem;}
  .show-tag{margin-left:auto; font-family:var(--font-head); font-size:0.7rem; letter-spacing:0.1em; padding:0.2rem 0.6rem; border:1px solid var(--red); color:var(--red); border-radius:var(--r-sm); text-transform:uppercase;}
  .show-tag.past{border-color:var(--ink-dim); color:var(--ink-dim);}
  .show-addr{color:var(--ink-dim); font-size:0.85rem; display:block; margin-top:0.2rem;}
  .show-directions{font-size:0.8rem; color:var(--yellow); text-decoration:none; display:inline-flex; align-items:center; gap:0.3rem; margin-top:0.35rem;}
  .show-directions svg{width:0.85rem; height:0.85rem;}
  .show-directions:hover{text-decoration:underline;}
  .show-empty{color:var(--ink-dim); font-style:italic; padding:1.2rem 0;}

  .release-banner{display:grid; grid-template-columns:1fr 1.3fr; gap:2.5rem; align-items:center; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
  .release-banner img{width:100%; height:100%; object-fit:cover; max-height:420px;}
  .release-banner .rb-body{padding:2rem 2.2rem 2rem 0;}
  .release-banner .rb-tag{font-family:var(--font-head); font-weight:700; color:var(--yellow); letter-spacing:0.2em; font-size:0.78rem; text-transform:uppercase;}
  .release-banner h2{font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; font-size:clamp(1.6rem,4vw,2.4rem); color:var(--ink); margin:0.5rem 0 0.9rem; line-height:1.15;}
  .release-banner p{color:var(--ink-dim); margin:0 0 1.4rem; max-width:44ch;}
  @media (max-width:720px){ .release-banner{grid-template-columns:1fr;} .release-banner .rb-body{padding:0 1.5rem 1.8rem;} }

  .tape-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem;}
  .tape{background:linear-gradient(160deg, #221b14, #14100c); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem; position:relative; overflow:hidden; transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;}
  .tape:hover{transform:translateY(-4px); border-color:var(--red); box-shadow:0 10px 26px rgba(255,95,162,0.25);}
  .tape::after{content:""; position:absolute; top:-30px; right:-30px; width:90px; height:90px; background:radial-gradient(circle, rgba(255,95,162,0.35), transparent 70%);}
  .tape.has-art{padding:0; overflow:hidden;}
  .tape.has-art img{height:auto; aspect-ratio:1; object-fit:cover;}
  .tape.has-art .tape-body{padding:1.3rem;}
  .gen-cover{aspect-ratio:1; position:relative; overflow:hidden; background:linear-gradient(160deg,#221b14,#0d0b09);}
  .gen-cover img{width:100%; height:100%; object-fit:contain; padding:16%; opacity:0.5; filter:sepia(1) hue-rotate(-12deg) saturate(2.2) brightness(0.9);}
  .gen-cover .gen-year{position:absolute; left:0; right:0; bottom:0; padding:0.55rem 0.5rem; text-align:center; font-family:var(--font-head); font-weight:800; letter-spacing:0.1em; color:var(--yellow); background:linear-gradient(0deg, rgba(0,0,0,0.88), transparent 90%); font-size:1.15rem;}
  .tape .yr{font-family:var(--font-head); font-weight:800; color:var(--red); font-size:1.6rem;}
  .tape h3{font-size:1.05rem; margin:0.3rem 0 0.5rem; color:var(--ink); text-transform:none; letter-spacing:0;}
  .tape p{margin:0 0 0.9rem; font-size:0.9rem; color:var(--ink-dim);}
  .tape a.buy{font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.08em; font-weight:700; color:var(--yellow);}

  .merch-panel{background:linear-gradient(135deg, var(--red-deep), #1a0c12 60%); border:1px solid #5a1436; border-radius:var(--r); padding:3rem 2rem; text-align:center;}
  .merch-panel h2{font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; font-size:clamp(1.8rem,5vw,2.8rem); color:var(--yellow); margin-bottom:0.8rem;}
  .merch-panel p{color:#f5d6e6; max-width:52ch; margin:0 auto 1.8rem;}

  .product-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem;}
  .product{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform 0.15s, border-color 0.15s;}
  a.product{color:inherit; text-decoration:none;}
  .product:hover{transform:translateY(-4px); border-color:var(--red); box-shadow:0 10px 26px rgba(255,95,162,0.25);}
  .product img{height:auto; aspect-ratio:1; object-fit:contain; background:#0d0b09;}
  .product .pbody{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.3rem; flex:1;}
  .product .tag{font-family:var(--font-head); font-size:0.68rem; letter-spacing:0.1em; color:var(--yellow); text-transform:uppercase;}
  .product h3{font-size:0.98rem; text-transform:none; letter-spacing:0; color:var(--ink); margin:0.1rem 0;}
  .product .price{font-family:var(--font-head); color:var(--ink-dim); font-size:0.9rem; margin-top:auto; padding-top:0.5rem;}
  .product a.buy-link{display:block;}

  .ig-bg-wrap{background:linear-gradient(135deg, rgba(255,95,162,0.12), rgba(0,0,0,0.3)), url("imgs/live.jpg") center/cover no-repeat; border-bottom:1px solid var(--line); position:relative; z-index:1;}
  .ig-banner{background:linear-gradient(135deg, rgba(26,17,8,0.48), rgba(13,11,9,0.52)); border:none; border-radius:0; padding:0.6rem 2rem; text-align:center; margin-bottom:0;}
  .ig-banner h2{font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; font-size:clamp(0.9rem,2vw,1.2rem); color:var(--yellow); margin-bottom:0.4rem;}
  .ig-banner p{color:#e9d9b8; margin:0 0 0.8rem; font-size:0.85rem; display:none;}
  @media (min-width:768px){ .ig-banner p{display:block;} }
  /* Inherit, so the handle tracks the button's label colour instead of sitting
     cream-on-pink at 2.26:1. */
  .ig-banner .handle{font-family:var(--font-head); font-weight:700; letter-spacing:0.04em; color:inherit;}

  .gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem;}
  .g-item{aspect-ratio:1; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--bg-card); position:relative; transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;}
  button.g-item{padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; width:100%;}
  .g-item:hover{transform:translateY(-3px); border-color:var(--yellow); box-shadow:0 10px 26px rgba(255,95,162,0.2);}
  .g-item img{height:auto; width:100%; height:100%; object-fit:cover; object-position:top;}
  .g-item.soon{display:flex; flex-direction:column; gap:0.4rem; align-items:center; justify-content:center; color:var(--ink-dim); font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; text-align:center; padding:1rem; border-style:dashed;}
  .g-item.video .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(13,11,9,0.25);}
  .g-item.video .play svg{width:3rem; height:3rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));}
  .g-item.video .cap{position:absolute; left:0; right:0; bottom:0; padding:0.5rem 0.7rem; background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent); font-family:var(--font-head); font-size:0.72rem; letter-spacing:0.05em; color:#fff;}

  .video-list{display:grid; grid-template-columns:repeat(2, 1fr); gap:0.4rem;}
  .video-row{
    position:relative; display:block; width:100%; aspect-ratio:16/9; cursor:pointer;
    background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-sm); padding:0;
    transition:border-color 0.2s ease, transform 0.15s ease; overflow:hidden;
  }
  .video-row:hover, .video-row:focus-visible{border-color:var(--red); transform:scale(1.02);}
  .video-thumb{position:absolute; inset:0; width:100%; height:100%; border-radius:0; overflow:hidden; background:#000;}
  .video-thumb picture{display:block; width:100%; height:100%;}
  .video-thumb img{width:100%; height:100%; object-fit:cover; opacity:1; display:block;}
  .video-preview{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.25s ease; z-index:1; pointer-events:none;}
  .is-previewing .video-preview{opacity:1;}
  .tapes-grid .tape .video-preview{filter:none; z-index:1;}
  .play-badge{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; opacity:0.75; transition:opacity 0.2s ease, transform 0.2s ease;}
  .video-row:hover .play-badge, .video-row:focus-visible .play-badge{opacity:1; transform:scale(1.1);}
  .play-badge svg{width:2rem; height:2rem; filter:drop-shadow(0 0 4px rgba(0,0,0,0.8));}
  .video-title{position:absolute; bottom:0; left:0; right:0; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.02em; color:#fff; padding:0.5rem; line-height:1.2; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent); z-index:3; overflow-wrap:anywhere;}
  @media (min-width:768px){
    .video-list{grid-template-columns:repeat(3, 1fr); gap:0.5rem;}
    .video-title{font-size:0.75rem; padding:0.6rem;}
  }
  @media (min-width:1024px){
    .video-list{grid-template-columns:repeat(4, 1fr); gap:0.6rem;}
    .video-title{font-size:0.8rem;}
  }

  .video-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem;}
  .video-modal[hidden]{display:none;}
  .video-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.88);}
  .video-modal-box{position:relative; width:100%; max-width:900px; background:#000; border-radius:var(--r); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.6);}
  .video-modal-frame{position:relative; width:100%; aspect-ratio:16/9;}
  .video-modal-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .video-modal-frame video{position:absolute; inset:0; width:100%; height:100%; background:#000;}
  .video-modal-close{position:absolute; top:-2.6rem; right:0; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--bg-card); border:1px solid var(--line); color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; z-index:2;}
  .video-modal-close:hover{border-color:var(--yellow); color:var(--yellow);}
  @media (max-width:768px){ .video-modal{padding:0.5rem; align-items:flex-start; padding-top:5rem;} .video-modal-box{max-width:none; width:calc(100% - 1rem); max-height:calc(100vh - 6rem);} .video-modal-frame{aspect-ratio:16/9; max-height:calc(100vh - 10rem);} .video-modal-close{top:0.6rem; right:0.6rem; background:rgba(0,0,0,0.8); border:2px solid var(--ink); color:#fff;} }

  .history-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:start;}
  .history-grid > aside{position:sticky; top:6.5rem;}
  @media (max-width:800px){ .history-grid > aside{position:static;} }
  @media (max-width:800px){ .history-grid{grid-template-columns:1fr;} }
  .pull{border-left:3px solid var(--red); padding-left:1.2rem; font-family:var(--font-head); font-weight:600; font-size:1.3rem; color:var(--yellow); text-transform:uppercase; line-height:1.35; margin:1.6rem 0;}

  .timeline{border-left:2px solid var(--line); padding-left:1.8rem; max-width:700px; margin:0 auto;}
  .timeline-item{position:relative; margin-bottom:1.4rem; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.3rem; transition:border-color 0.15s;}
  .timeline-item:hover{border-color:var(--red); box-shadow:0 8px 24px rgba(255,95,162,0.2);}
  .timeline-item::before{content:""; position:absolute; left:-1.88rem; top:1.35rem; width:11px; height:11px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px var(--bg);}
  .timeline-item.milestone{border-color:var(--red); background:linear-gradient(180deg, rgba(255,95,162,0.08), var(--bg-card) 60%);}
  .timeline-item.milestone::before{width:14px; height:14px; left:-1.98rem; top:1.3rem; background:var(--yellow);}
  .timeline-item .yr{font-family:var(--font-head); font-weight:800; color:var(--yellow); letter-spacing:0.05em; font-size:1rem; margin-bottom:0.35rem;}
  .timeline-item .ev{color:var(--ink-dim); font-size:0.95rem; line-height:1.5;}
  .timeline-item .ev a{color:var(--yellow);}
  .content p{margin:0 0 1.2rem;}
  aside{position:sticky; top:5.5rem; display:flex; flex-direction:column; gap:1.2rem;}
  .fact-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-sm); padding:1.4rem 1.5rem;}
  .fact-card h3{font-size:1rem; color:var(--yellow); margin-bottom:0.9rem; letter-spacing:0.08em;}
  .fact-card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0.5rem 0.8rem; font-size:0.92rem;}
  .fact-card dt{color:var(--ink-dim); font-family:var(--font-head); letter-spacing:0.05em; font-size:0.78rem; text-transform:uppercase; padding-top:0.15rem;}
  .fact-card dd{margin:0;}
  .fact-card.note{border-color:#5a1436; background:rgba(255,95,162,0.06);}
  .fact-card.note p{font-size:0.85rem; color:var(--ink-dim); margin:0;}
  h2.section-title{font-size:1.5rem; color:var(--ink); margin:2.4rem 0 1rem;}
  .member-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.4rem;}
  .member-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
  .member-card{display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:0; overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color 0.15s, transform 0.15s;}
  a.member-card:hover{border-color:var(--red); transform:translateY(-3px); box-shadow:0 8px 24px rgba(255,95,162,0.2);}
  .member-card.soon{opacity:0.55;}
  .member-photo{width:100%; aspect-ratio:4/3; overflow:hidden; margin:0; border-bottom:1px solid var(--line); background:#000;}
  .member-photo img{width:100%; height:100%; object-fit:cover; object-position:center 22%;}
  .member-card > :not(.member-photo){margin-left:1.2rem; margin-right:1.2rem;}
  .member-card > h3{margin-top:1.1rem;}
  .member-card > .member-more{margin-bottom:1.2rem; margin-top:auto; padding-top:0.4rem;}
  .member-card h3{font-family:var(--font-head); font-size:1.15rem; letter-spacing:0.02em; margin:0 0 0.2rem;}
  .member-role{color:var(--yellow); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 0.6rem;}
  .member-hook{font-size:0.9rem; color:var(--ink-dim); margin:0 0 0.8rem; line-height:1.4;}
  .member-more{font-size:0.85rem; color:var(--red-text); font-weight:600;}
  .member-former-tag{display:inline-block; margin-left:0.5rem; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); border-radius:var(--r-sm); padding:0.08rem 0.4rem; font-family:var(--font-head); font-weight:700; vertical-align:middle;}
  .former-member-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.2rem; align-items:start;}
  .former-member-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem; display:flex; flex-direction:column;}
  a.former-member-card{text-decoration:none; color:inherit; transition:border-color 0.15s, transform 0.15s;}
  a.former-member-card:hover{border-color:var(--red); transform:translateY(-2px);}
  .former-member-card.has-photo{padding:0;}
  .former-member-card.has-photo > :not(.fm-photo){margin-left:1.3rem; margin-right:1.3rem;}
  .former-member-card.has-photo > h4{margin-top:1.1rem;}
  .former-member-card.has-photo > :last-child{margin-bottom:1.2rem;}
  .fm-photo{width:100%; aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--line); background:#000;}
  .fm-photo img{width:100%; height:100%; object-fit:cover; object-position:center 22%;}
  .fm-more{font-size:0.85rem; color:var(--red-text); font-weight:600; margin-top:auto; padding-top:0.7rem;}
  .former-member-card h4{font-family:var(--font-head); font-size:1.05rem; margin:0 0 0.2rem;}
  .former-member-card p{font-size:0.88rem; color:var(--ink-dim); line-height:1.5; margin:0.3rem 0 0;}
  .xlink-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.1rem;}
  .xlink-card{display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;}
  .xlink-card:hover{transform:translateY(-4px); border-color:var(--red); box-shadow:0 10px 26px rgba(255,95,162,0.25);}
  .xlink-card img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:top; display:block;}
  .xlink-body{padding:0.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:0.25rem;}
  .xlink-role{font-family:var(--font-head); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--yellow);}
  .xlink-card h3{font-size:1rem; margin:0.1rem 0; color:var(--ink); text-transform:none; letter-spacing:0;}
  .xlink-card p{font-size:0.85rem; color:var(--ink-dim); margin:0;}

  .member-hero{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin-bottom:1.6rem;}
  .member-hero img{width:100%; height:auto; display:block; max-height:520px; object-fit:cover; object-position:top;}
  .member-texthead{padding-top:3.2rem;}
  .member-texthead h1{margin-bottom:0.4rem;}
  .member-masthead{position:relative; min-height:clamp(360px,58vh,600px); display:flex; align-items:flex-end; overflow:hidden; background:#000; border-bottom:1px solid var(--line);}
  .member-masthead .masthead-blur{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:blur(50px) brightness(0.55) saturate(1.2); transform:scale(1.15); z-index:0;}
  .member-masthead .masthead-photo{position:absolute; inset:0; margin:auto; width:auto; max-width:min(100%,1000px); height:100%; max-height:100%; object-fit:contain; z-index:1;}
  .member-masthead::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(13,11,9,0) 0%, rgba(13,11,9,0) 40%, rgba(13,11,9,0.6) 65%, rgba(13,11,9,0.98) 100%); z-index:2;}
  .member-masthead-inner{position:relative; z-index:3; padding:2rem 1.5rem 2.4rem; max-width:900px; margin:0 auto; width:100%; text-align:center;}
  .member-masthead .kicker{color:var(--yellow);}
  .member-masthead h1{font-family:var(--font-display); font-size:clamp(2.2rem, 6.5vw, 4rem); color:var(--ink); line-height:1; margin:0.3rem 0; text-shadow:0 6px 30px rgba(0,0,0,0.85), 0 0 40px rgba(255,95,162,0.45); overflow-wrap:break-word;}
  .member-masthead p{color:var(--ink-dim); max-width:46ch; margin:0.6rem auto 0; font-style:italic; font-size:1rem;}
  @media (max-width:700px){ .member-masthead{min-height:clamp(300px,52vh,440px);} }
  .member-inline-img{margin:1.4rem 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-card); max-width:260px; float:right; margin-left:1.4rem;}
  .member-inline-img img{width:100%; height:auto; display:block;}
  .member-inline-img span{display:block; padding:0.5rem 0.7rem; font-size:0.75rem; color:var(--ink-dim); font-style:italic;}
  @media (max-width:700px){ .member-inline-img{float:none; max-width:100%; margin-left:0;} }
  .member-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.8rem; margin:1.2rem 0 0.8rem; clear:both;}
  .member-gallery a{display:block; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:1; background:var(--bg-card);}
  .member-gallery img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform 0.2s;}
  .member-gallery a:hover img{transform:scale(1.06);}
  .photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem;}
  .photo-grid figure{margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-card);}
  .photo-grid img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top; display:block;}
  .photo-grid img[alt*="Flyer"]{object-fit:contain;}
  .photo-grid figcaption{padding:0.7rem 0.85rem; font-size:0.82rem; color:var(--ink-dim); font-style:italic;}

  /* Pinned to the viewport corner (plus the phone's safe area) rather than
     floating part-way up the page, where it landed on top of body copy. */
  .now-playing{position:fixed; left:1.1rem; bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index:500;}
  @media (max-width:1100px){
    /* Below 1100px the prose column runs edge to edge, so a pill floating in a
       corner sits on top of body copy at every scroll position and swallows
       taps meant for the links underneath it (on an article it landed on the
       hero credit). Dock it instead to its own opaque bar across the foot of
       the viewport, outside the column's bounding box, and reserve that height
       at the end of the document so the last rows stay reachable. */
    .now-playing{left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:flex-end; gap:0.5rem;
      padding:0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
      background:#0a0807; border-top:1px solid rgba(255,95,162,0.35);}
    body{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px));}
    /* The bar is a convenience, not furniture: let the reader put it away.
       (.np-dismiss is unhidden below, after its own base rule.) */
    body.np-dismissed .now-playing{display:none;}
    body.np-dismissed{padding-bottom:0;}
    /* Stowed until it is wanted: a fixed bar sitting on the page from the first
       paint covers the top of the article (it was landing on the hero credit).
       It slides up on any upward scroll, at the foot of the page, or when the
       panel is open, and goes away again as soon as the reader moves on down. */
    .now-playing{transition:transform 0.22s ease, opacity 0.22s ease; transform:translateY(100%); opacity:0; pointer-events:none;}
    body.np-shown .now-playing{transform:none; opacity:1; pointer-events:auto;}
  }
  @media (max-width:640px){
    /* Collapse the control to a 56px circle so the bar stays shallow and stops
       printing "Listen" twice in the same 100px next to a LISTEN button. */
    .now-playing .np-toggle{width:56px; min-width:56px; padding:0; border-radius:50%;}
    .now-playing .np-toggle span{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
    .now-playing .np-toggle svg{width:1.4rem; height:1.4rem;}
  }
  @media (prefers-reduced-motion:reduce){ .now-playing{transition:none;} }
  body.lightbox-open .now-playing, body.lightbox-open header.site{visibility:hidden;}
  /* min-height keeps the pill at the 44px minimum tap target on a phone. */
  .np-toggle{display:flex; align-items:center; justify-content:center; gap:0.5rem; min-height:44px; background:var(--red); color:#170a10; border:none; border-radius:30px; padding:0.7rem 1.15rem; font-family:var(--font-head); font-weight:700; letter-spacing:0.05em; text-transform:uppercase; font-size:0.78rem; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.55);}
  .np-toggle:hover{background:#e8488f;}
  .np-toggle svg{width:0.95rem; height:0.95rem; flex:none;}
  .np-dismiss{display:none; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:0; background:transparent; border:1px solid rgba(255,95,162,0.35); border-radius:50%; color:var(--ink); font-size:1.25rem; line-height:1; cursor:pointer;}
  .np-dismiss:hover{border-color:var(--red); color:var(--red);}
  .np-panel{position:absolute; left:0; bottom:calc(100% + 0.7rem); background:var(--bg-card); border:1px solid rgba(255,95,162,0.3); border-radius:var(--r); padding:0.7rem; box-shadow:0 14px 34px rgba(0,0,0,0.6), 0 0 40px rgba(255,95,162,0.12); width:340px; max-width:85vw;}
  .np-panel[hidden]{display:none;}
  .np-panel iframe{display:block; border:none; border-radius:var(--r-sm); width:100%; height:400px; background:#1c1712;}
  @media (max-width:1100px){
    .np-panel{left:auto; right:0.9rem; bottom:calc(100% + 0.4rem); width:min(340px, calc(100vw - 1.8rem)); max-width:none;}
    .np-dismiss{display:flex;}
  }

  footer{border-top:1px solid rgba(255,95,162,0.25); padding:2.5rem 0; text-align:center;}

  section.finale{background:linear-gradient(180deg, rgba(23,19,15,0.55), rgba(13,11,9,0.3));}
  .finale-grid{display:grid; grid-template-columns:2fr 1fr; gap:1.2rem;}
  .finale-hero{position:relative; aspect-ratio:4/3; max-height:480px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);}
  .finale-hero picture:first-child img, .finale-hero > img:first-child{width:100%; height:100%; object-fit:cover;}
  .finale-overlay{position:absolute; width:34%; height:auto; bottom:-8%; left:-5%; border-radius:var(--r-sm); border:3px solid var(--bg); box-shadow:0 10px 24px rgba(0,0,0,0.55); transform:rotate(-7deg);}
  .finale-side{display:grid; grid-template-rows:repeat(3, 1fr); gap:1.2rem;}
  .finale-side .g-item{aspect-ratio:auto; height:100%;}

  .stat-row{display:flex; gap:2.2rem; justify-content:center; margin:0 0 1.8rem; flex-wrap:wrap; position:relative; z-index:2;}
  .stat{text-align:center;}
  .stat .num{display:block; font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--yellow); letter-spacing:0.02em;}
  .stat .lbl{display:block; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:0.15rem;}

  .email-capture{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.8rem;}
  .email-capture h2{font-size:1.3rem; margin-bottom:0.3rem;}
  .email-capture p{color:var(--ink-dim); font-size:0.9rem; margin:0; max-width:40ch;}
  .email-capture .btn{white-space:nowrap;}

  .show-card-featured{position:relative; display:flex; gap:1.2rem; align-items:center; min-height:230px; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; margin-bottom:1rem; overflow:hidden; text-decoration:none; color:inherit; transition:border-color 0.2s, transform 0.15s;}
  .show-card-featured:hover, .show-card-featured:focus-visible{border-color:var(--red); transform:translateY(-1px); color:inherit;}
  .show-card-photo{position:absolute; inset:0; z-index:0;}
  .show-card-photo picture{display:block; width:100%; height:100%;}
  .show-card-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  @media (max-width:600px){ .show-card-featured{min-height:280px;} }
  .show-card-featured::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(13,11,9,0.94) 0%, rgba(13,11,9,0.86) 38%, rgba(13,11,9,0.4) 75%, rgba(13,11,9,0.15) 100%);}
  .show-card-date{position:relative; z-index:2; flex:none; text-align:center; background:var(--red-deep); border-radius:var(--r); padding:0.6rem 1.1rem;}
  .show-card-date .d{display:block; font-family:var(--font-head); font-weight:800; font-size:1.9rem; color:var(--yellow); line-height:1;}
  .show-card-date .m{display:block; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.1em; color:var(--ink);}
  .show-card-date .y{display:block; font-size:0.7rem; color:var(--ink-dim);}
  .show-card-body{position:relative; z-index:2;}
  .show-card-body h3{font-size:1.15rem; text-transform:none; letter-spacing:0; color:var(--ink); margin-bottom:0.2rem;}
  .show-card-loc{color:var(--yellow); font-family:var(--font-head); font-size:0.85rem; margin:0 0 0.3rem; letter-spacing:0.03em;}
  .show-card-bill{color:var(--ink-dim); font-size:0.9rem; margin:0 0 0.7rem;}
  .show-card-more{display:inline-block; margin-top:0.4rem; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.06em; color:var(--yellow); text-transform:uppercase;}
  @media (max-width:600px){ .show-card-featured::before{background:linear-gradient(180deg, rgba(13,11,9,0.55) 0%, rgba(13,11,9,0.92) 55%, rgba(13,11,9,0.98) 100%);} }
  .show-austin-note{color:var(--ink-dim); font-size:0.9rem; font-style:italic; margin:0;}

  .mini-timeline-wrap{position:relative;}

  .mini-timeline{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.1rem; padding-bottom:0.6rem;}
  .mini-tl-item{ background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r); padding:1rem;}
  .mini-tl-item .yr{display:block; font-family:var(--font-head); font-weight:800; color:var(--yellow); font-size:1.25rem; margin-bottom:0.35rem;}
  .mini-tl-item .ev{color:var(--ink-dim); font-size:0.85rem; line-height:1.4;}

  .press-badges{display:flex; flex-wrap:wrap; gap:0.9rem;}
  .press-badge{display:flex; flex-direction:column; gap:0.2rem; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:0.9rem 1.1rem; flex:1; min-width:220px; transition:border-color 0.2s ease;}
  .press-badge:hover{border-color:var(--yellow);}
  .press-badge .pub{font-family:var(--font-head); font-weight:700; letter-spacing:0.03em; color:var(--ink);}
  .press-badge .desc{color:var(--ink-dim); font-size:0.85rem;}

  /* NEW: Press Grid Card Layout */
  .press-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem;}
  .press-feature{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:1.2rem; align-items:start;}
  .press-feature figure{margin:0; border-radius:var(--r); overflow:hidden; background:var(--bg-card); border:1px solid var(--line);}
  .press-feature img{width:100%; height:auto; display:block;}
  .press-feature figcaption{padding:0.7rem 0.9rem; font-size:0.85rem; color:var(--ink-dim); font-style:italic;}
  @media (max-width:720px){ .press-feature{grid-template-columns:1fr;} }
  .press-card{display:flex; flex-direction:column; background:var(--bg-card); border:none; border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; transition:transform 0.2s, box-shadow 0.2s;}
  .press-card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.4);}
  .press-thumb{width:100%; height:140px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:0.9rem; text-align:center; padding:1rem; overflow:hidden; position:relative;}
  .press-thumb img{width:100%; height:100%; object-fit:cover; object-position:center;}
  .press-thumb > div{width:100%; height:100%;}
  .press-body{padding:1.2rem;}
  .press-type{display:inline-block; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--yellow); margin-bottom:0.6rem; width:fit-content; font-weight:700;}
  .press-pub{display:block; font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:0.02em; color:var(--ink); margin-bottom:0.3rem;}
  .press-title{display:block; font-size:0.95rem; line-height:1.3; color:var(--ink); margin-bottom:0.6rem; flex:1;}
  .press-date{display:block; font-size:0.75rem; color:var(--ink-dim); margin-top:auto;}

  /* NEW: Album Section */
  .album-section{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:3rem; align-items:center;}
  .album-cover{width:100%; max-width:500px;}
  .album-cover img{width:100%; height:auto; border-radius:var(--r-sm); box-shadow:0 20px 50px rgba(0,0,0,0.65);}
  .album-info{display:flex; flex-direction:column;}
  .album-tag{font-family:var(--font-head); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--yellow); margin-bottom:0.8rem; font-weight:700;}
  .album-title{font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; font-size:2.5rem; line-height:1.1; color:var(--ink); margin:0 0 0.8rem;}
  .album-desc{color:var(--ink-dim); font-size:1.05rem; line-height:1.6; margin-bottom:1.5rem;}
  .album-credits{font-size:0.85rem; color:var(--ink-dim); margin-top:1rem;}
  @media (max-width:860px){
    .album-section{grid-template-columns:1fr; gap:2rem;}
    .album-cover{max-width:none; width:70%; margin:0 auto;}
  }


  /* NEW: Finale Timeline */
  .finale-section{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:2rem; align-items:center;}
  .finale-gallery{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.8rem;}
  .finale-img{aspect-ratio:4/3; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:0.85rem;}
  .finale-timeline{display:flex; flex-direction:column; gap:1.5rem;}
  .timeline-item{text-align:left;}
  .timeline-year{font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; font-size:2.2rem; line-height:1; color:var(--yellow); margin-bottom:0.4rem; font-weight:800;}
  /* every drip-font heading gets the neon-sign treatment from the hero */
  .hero h1, .page-head h1, .release-banner h2, .merch-panel h2, .ig-banner h2, .member-masthead h1, .album-title, .timeline-year{color:#fff0f7; text-shadow:0 0 0.02em #fff, 0 0 0.05em #ffc2dd, 0 0 0.11em rgba(255,122,184,0.55), 0 0 0.2em rgba(255,95,162,0.35), 0 0 0.34em rgba(255,61,146,0.22);}
  .timeline-label{font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); font-weight:700;}
  .timeline-desc{font-size:0.95rem; color:var(--ink); margin-top:0.3rem;}
  @media (max-width:860px){
    .finale-section{grid-template-columns:1fr;}
    .finale-gallery{grid-template-columns:repeat(3, minmax(0, 1fr));}
  }

  .video-wall{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.9rem;}

  /* ---- photo gallery ---- */
  .gal-filters{display:flex; flex-wrap:wrap; gap:0.5rem 0.6rem; margin-bottom:1.6rem;}
  .gal-filters button{
    font-family:var(--font-head); font-weight:600; letter-spacing:0.07em; text-transform:uppercase; font-size:0.78rem;
    padding:0.7rem 1rem; min-height:44px; display:inline-flex; align-items:center;
    border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim);
    border-radius:var(--r-sm); cursor:pointer; transition:color 0.15s, border-color 0.15s, background 0.15s;
  }
  .gal-filters button:hover{color:var(--ink); border-color:var(--ink-dim);}
  .gal-filters button[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#170a10;}
  .gal-grid{columns:4 220px; column-gap:0.9rem;}
  .gal-item{break-inside:avoid; margin:0 0 0.9rem; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-card); cursor:zoom-in; display:block; width:100%; padding:0; text-align:left; color:inherit; font:inherit;}
  .gal-item img{width:100%; height:auto; display:block;}
  .gal-item figcaption{padding:0.6rem 0.8rem; font-size:0.8rem; line-height:1.45; color:var(--ink-dim); font-style:italic;}
  .gal-item:hover{border-color:var(--yellow);}
  .jump-chip{font-family:var(--font-head); font-weight:600; letter-spacing:0.07em; text-transform:uppercase; font-size:0.78rem; padding:0.55rem 1.1rem; border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim); border-radius:var(--r-sm); min-height:44px; display:inline-flex; align-items:center;}
  .jump-chip:hover{color:var(--yellow); border-color:var(--yellow);}
  .gal-count{color:var(--ink-dim); font-size:0.85rem; font-style:italic; margin-bottom:1.2rem;}
  .lightbox{position:fixed; inset:0; z-index:3000; background:rgba(6,5,4,0.985); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:1.5rem;}
  .lightbox img{max-width:100%; max-height:78vh; width:auto; height:auto; border:1px solid var(--line);}
  .lb-inner{max-width:1100px; text-align:center;}
  .lb-cap{color:var(--ink-dim); font-size:0.9rem; font-style:italic; margin-top:0.9rem; line-height:1.5;}
  .lb-btn{position:absolute; background:none; border:none; color:var(--ink); font-size:2.4rem; line-height:1; cursor:pointer; padding:0.4rem 0.8rem;}
  .lb-btn:hover{color:var(--yellow);}
  .lb-close{top:0.6rem; right:0.8rem; font-size:2.6rem;}
  .lb-prev{left:0.4rem; top:50%; transform:translateY(-50%);}
  .lb-next{right:0.4rem; top:50%; transform:translateY(-50%);}

  /* ---- live audio player ---- */
  .track-list{display:grid; gap:0.9rem;}
  .track{background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r); padding:1rem 1.2rem;}
  .track h3{font-size:1.05rem; margin-bottom:0.15rem;}
  .track .track-note{color:var(--ink-dim); font-size:0.82rem; font-style:italic; margin:0 0 0.7rem;}
  .track audio{display:none;}
  .player{display:flex; align-items:center; gap:0.9rem; margin-top:0.7rem;}
  .player-btn{flex:none; width:48px; height:48px; border-radius:50%; border:2px solid var(--red); background:var(--red); color:#170a10; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s, color 0.15s, transform 0.1s; padding:0;}
  .player-btn:hover{background:transparent; color:var(--red-text); transform:scale(1.05);}
  .player-btn svg{width:18px; height:18px; fill:currentColor;}
  .player-btn svg[hidden]{display:none;}
  .player-bar{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:0.8rem;}
  .player-seek{flex:1 1 auto; min-width:0; appearance:none; -webkit-appearance:none; height:6px; border-radius:var(--r-sm); background:var(--line); cursor:pointer; outline:none;}
  .player-seek::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--yellow); border:none; cursor:pointer;}
  .player-seek::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--yellow); border:none; cursor:pointer;}
  .player-seek:focus-visible{outline:2px solid var(--yellow); outline-offset:3px;}
  .player-time{flex:none; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.05em; color:var(--ink-dim); min-width:5.6rem; text-align:right;}
  @media (max-width:520px){
    .player{flex-wrap:wrap;}
    .player-bar{width:100%; order:3;}
  }
  .setlist{list-style:none; padding:0; margin:0; display:grid; gap:0.45rem;}
  .setlist li{display:flex; gap:0.8rem; align-items:baseline; font-size:0.95rem; border-bottom:1px dotted var(--line); padding-bottom:0.45rem;}
  .setlist .num{font-family:var(--font-head); color:var(--yellow); font-size:0.85rem; min-width:1.6rem;}
  .setlist .who{color:var(--ink-dim); font-size:0.8rem; font-style:italic; margin-left:auto; text-align:right;}

  /* ---- lyrics ---- */
  /* ---- venues ---- */
  .venue-list{display:grid; gap:1.2rem;}
  .venue{display:grid; grid-template-columns:210px 1fr; gap:1.4rem; background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r); overflow:hidden;}
  .venue.no-art{grid-template-columns:1fr;}
  .venue-art{margin:0; background:#000; align-self:stretch; display:flex; flex-direction:column;}
  .venue-art img{width:100%; height:230px; object-fit:contain; background:#080706; display:block;}
  .venue-art figcaption{padding:0.5rem 0.7rem; font-size:0.72rem; line-height:1.4; color:var(--ink-dim); font-style:italic;}
  .venue-body{padding:1.2rem 1.4rem 1.3rem;}
  .venue.no-art .venue-body{padding-left:1.4rem;}
  .venue-body h3{font-size:1.2rem; margin:0 0 0.15rem;}
  .venue-meta{font-family:var(--font-head); font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--yellow); margin:0 0 0.7rem;}
  .venue-body p{margin:0; font-size:0.95rem; line-height:1.6;}
  @media (max-width:640px){
    .venue{grid-template-columns:1fr;}
    .venue-art img{height:260px;}
  }
  /* ---- lyrics: demos -> track list -> song ---- */
  .crumbs{font-family:var(--font-head); font-size:0.75rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:0.9rem;}
  .crumbs a{color:var(--ink-dim);}
  .crumbs a:hover{color:var(--yellow);}
  .crumbs span[aria-current]{color:var(--yellow);}
  .demo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem;}
  .demo-card{display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color 0.15s, transform 0.15s;}
  .demo-card:hover{border-color:var(--red); transform:translateY(-2px);}
  .demo-art{aspect-ratio:1; overflow:hidden; background:#000; border-bottom:1px solid var(--line);}
  .demo-art img{width:100%; height:100%; object-fit:cover;}
  .demo-art .gen-cover{height:100%;}
  .demo-body{padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; flex:1 1 auto;}
  .demo-body .yr{font-family:var(--font-head); font-weight:800; color:var(--yellow); font-size:1.15rem; letter-spacing:0.05em;}
  .demo-body h3{font-size:1.1rem; margin:0.15rem 0 0.5rem;}
  .demo-body p{font-size:0.88rem; color:var(--ink-dim); line-height:1.5; margin:0 0 0.9rem;}
  .demo-count{margin-top:auto; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.06em; color:var(--red-text);}

  .tracklist{list-style:none; padding:0; margin:0; counter-reset:none;}
  .tracklist li{border-bottom:1px solid var(--line);}
  .tracklist a{display:flex; align-items:center; gap:1rem; padding:0.95rem 0.4rem; text-decoration:none; color:var(--ink); transition:background 0.12s, padding 0.12s;}
  .tracklist a:hover{background:var(--bg-card); padding-left:0.9rem; color:var(--ink);}
  .tl-num{font-family:var(--font-head); font-weight:800; color:var(--yellow); font-size:0.9rem; flex:none; min-width:1.9rem;}
  .tl-name{font-family:var(--font-head); font-size:1.05rem; letter-spacing:0.02em; flex:1 1 auto; min-width:0;}
  .tl-also{font-size:0.76rem; color:var(--ink-dim); font-style:italic; flex:none;}
  .tl-go{font-family:var(--font-head); font-size:0.78rem; letter-spacing:0.06em; color:var(--red-text); flex:none;}

  .az-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 1.6rem;}
  .az-list li{border-bottom:1px solid var(--line);}
  .az-list li a{display:flex; align-items:baseline; justify-content:space-between; gap:0.7rem; padding:0.75rem 0.2rem; min-height:44px; font-family:var(--font-head); font-size:0.98rem; letter-spacing:0.02em;}
  .az-list li a:hover{color:var(--ink);}
  .az-on{font-size:0.75rem; color:var(--ink-dim); font-style:italic; flex:none;}

  .lyric-sheet{background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r); padding:1.6rem 1.8rem;}
  .lyric-sheet pre{font-family:var(--font-body); font-size:1.05rem; line-height:1.7; white-space:pre-wrap; margin:0; color:var(--ink);}
  .song-nav{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; font-family:var(--font-head); font-size:0.85rem; letter-spacing:0.04em;}
  .song-nav a{color:var(--red-text);}
  .song-nav a:hover{color:var(--yellow);}
  @media (max-width:560px){
    .tracklist a{flex-wrap:wrap; gap:0.5rem 0.8rem;}
    .tl-name{flex:1 1 100%; order:2;}
    .tl-go{margin-left:auto;}
    .lyric-sheet{padding:1.2rem 1.1rem;}
  }

  .lyric-set{margin:0 0 3rem;}
  .lyric-song{max-width:780px; margin-inline:auto; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.6rem; margin-bottom:1.2rem;}
  .lyric-song h3{font-size:1.25rem; color:var(--yellow); margin-bottom:0.9rem;}
  .lyric-song pre{font-family:var(--font-body); font-size:0.98rem; line-height:1.65; white-space:pre-wrap; margin:0; color:var(--ink);}
  .credits-box{max-width:780px; margin-inline:auto; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.3rem; margin-bottom:1.4rem; font-size:0.9rem;}
  .credits-box dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0.4rem 0.9rem;}
  .credits-box dt{font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.05em; font-size:0.75rem; color:var(--ink-dim); padding-top:0.15rem;}
  .credits-box dd{margin:0;}
  @media (max-width:640px){
    .gal-grid{columns:2 140px;}
    .lb-btn{font-size:2rem;}
  }

  .booking-form{display:flex; flex-direction:column; gap:1.1rem;}
  .booking-form label{display:flex; flex-direction:column; gap:0.4rem; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-dim);}
  .booking-form .opt{text-transform:none; letter-spacing:0; font-style:italic; opacity:0.7;}
  .booking-form input, .booking-form textarea{font:inherit; font-family:var(--font-body); font-size:1rem; text-transform:none; letter-spacing:0; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:0.7rem 0.9rem; color:var(--ink); resize:vertical;}
  .booking-form input:focus-visible, .booking-form textarea:focus-visible{outline:2px solid var(--yellow); outline-offset:2px; border-color:var(--yellow);}
  .booking-form button{align-self:flex-start; margin-top:0.5rem;}
  @media (max-width:700px){
    .finale-grid{grid-template-columns:1fr;}
    .finale-hero{aspect-ratio:16/10;}
    .finale-overlay{width:24%;}
    .finale-side{grid-template-rows:none; grid-template-columns:repeat(3, 1fr);}
  }
  .social-row{display:flex; gap:1.3rem; justify-content:center; margin-bottom:1rem; font-family:var(--font-head); letter-spacing:0.06em; font-size:0.85rem;}
  footer .fine{color:var(--ink-dim); font-size:0.82rem;}
  footer .footer-links a, .social-row a{display:inline-block; padding:0.4rem 0.2rem;}

  .nav-toggle{display:none; align-items:center; gap:0.45rem; background:none; border:1px solid rgba(238,229,211,0.18); border-radius:var(--r-pill); color:var(--ink); font-family:var(--font-head); font-weight:700; letter-spacing:0.07em; text-transform:uppercase; font-size:0.75rem; padding:0.6rem 0.8rem; cursor:pointer; min-height:44px;}
  .nav-toggle:hover{border-color:var(--red); color:var(--ink);}
  .nav-toggle svg{width:1rem; height:1rem;}
  @media (max-width:1100px){
    /* Tracked-out links need ~1100px in one row; below that they collapse behind the toggle. */
    .nav-row{flex-wrap:wrap; gap:0.5rem 1rem; padding:0.7rem clamp(1rem, 4vw, 2rem);}
    .wordmark{flex:1 1 auto;}
    .nav-actions{gap:0.6rem;}
    .nav-actions .btn{min-height:44px; display:inline-flex; align-items:center;}
    .nav-toggle{display:inline-flex; min-height:44px;}
    .ig-link{width:2.75rem; height:2.75rem;}
    .nav-row{flex-wrap:nowrap; position:relative;}
    /* Fully opaque, not 0.97: the hero H1 and dek read visibly through the open
       panel, which looks like a rendering fault rather than a design choice. */
    nav.links{position:absolute; left:0; right:0; top:100%; gap:0; flex-direction:column; background:#0a0807; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0.3rem clamp(1rem, 4vw, 2rem) 0.8rem; box-shadow:0 18px 40px rgba(0,0,0,0.65);}
    nav.links[hidden]{display:none;}
    /* Dim the page under the open panel so the menu reads as a layer on top. */
    body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,0.62); z-index:90; pointer-events:none;}
    nav.links a{padding:0.85rem 0.2rem; font-size:0.9rem; width:100%; border-bottom:1px solid var(--line);}
    nav.links a::after{display:none;}
    nav.links a:last-child{border-bottom:none;}
  }
  @media (max-width:640px){
    .show-tag{margin-left:0;}
    .nav-row{padding:0.6rem 1rem; gap:0.4rem 0.6rem;}
    .wordmark{flex:1 1 auto; min-width:0; font-size:0.82rem;}
    .nav-actions{gap:0.45rem;}
    /* 0.68rem renders at 10.88px, small enough to read as a caption rather than
       a button. Tighter tracking pays for the larger type, so the header row is
       no wider than before, and the target gets back to the 44px minimum. */
    .nav-actions .btn{padding:0.55rem 0.8rem; font-size:0.78rem; letter-spacing:0.08em; min-height:44px;}
    /* 44px, not 40: these two are the only header controls at this width and
       they sat under the minimum tap target. The icons keep their size; only
       the box around them grows. */
    .nav-toggle{font-size:0; gap:0; padding:0 0.7rem; min-height:44px; min-width:44px;}
    .nav-toggle svg{width:1.1rem; height:1.1rem;}
    .ig-link{width:2.75rem; height:2.75rem;}
  }
  /* ARTICLES (long-form pieces from content-machine/) */
  .article-head .kicker a{color:inherit;}
  .page-head.article-head h1{font-family:var(--font-head); font-weight:800; font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.05; letter-spacing:0.01em; white-space:normal; overflow-wrap:break-word; max-width:980px; margin-left:auto; margin-right:auto;}
  .article-dek{max-width:720px; margin:0.9rem auto 0; color:var(--ink-dim); font-size:1.15rem; line-height:1.5;}
  .article-byline{margin:1rem 0 0; font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--yellow);}
  .article-hero{margin:2rem auto 0; text-align:center;}
  /* Heroes run from portrait flyers to wide landscape shots, so the frame hugs
     the photo instead of the column: a full-width letterbox left dead black bars
     inside the border on anything that hit the 560px height cap, and cropping to
     a fixed ratio would cut the text off a flyer. The wrapper shrink-wraps, the
     image keeps its own shape, and the caption centres under it. */
  .article-hero picture{display:inline-block; max-width:100%; line-height:0;}
  .article-hero img{display:block; width:auto; max-width:100%; height:auto; max-height:560px; margin:0 auto; background:#100d0b; border:1px solid var(--line); border-radius:var(--r);}
  .article-hero figcaption, .article-fig figcaption{font-size:0.875rem; color:var(--ink-dim); font-style:italic; margin-top:0.5rem;}
  /* Bottom padding keeps the last lines clear of the fixed LISTEN pill. */
  .article-wrap{max-width:760px; overflow-wrap:break-word; padding-bottom:96px;}
  .article-wrap h2{font-size:1.65rem; color:var(--ink); margin:2.8rem 0 1rem;}
  .article-wrap h3{font-size:1.15rem; color:var(--yellow); text-transform:none; letter-spacing:0.01em; margin:1.8rem 0 0.6rem;}
  .hear-rc{margin:3rem 0 2.5rem; padding:1.6rem 1.8rem; border-radius:var(--r); border:1px solid rgba(255,95,162,0.35); background:rgba(23,19,15,0.85); box-shadow:0 0 0 1px rgba(255,95,162,0.12), 0 0 48px rgba(255,95,162,0.16);}
  .hear-rc .kicker{margin-bottom:0.5rem;}
  .hear-rc h2, .hear-rc h3{font-family:var(--font-head); font-weight:800; font-size:1.6rem; margin:0 0 0.6rem; letter-spacing:-0.01em;}
  .hear-rc p{margin:0 0 1rem;}
  .hear-rc .links{display:flex; gap:0.7rem; flex-wrap:wrap;}
  .hear-rc .links a{text-decoration:none;}
  /* Inline prose links stay inline text: inline-flex + min-height made every
     link an unbreakable 44px box and shoved its line out of the paragraph. */
  .article-wrap p a, .article-wrap li a{text-decoration:underline; text-decoration-color:rgba(255,95,162,0.45); text-underline-offset:3px; padding:0.2em 0;}
  .article-wrap ul, .article-wrap ol{padding-left:1.3rem; margin:0 0 1.2rem;}
  .article-wrap li{margin-bottom:0.4rem;}
  .key-facts{background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r); padding:1.2rem 1.4rem; margin:1.8rem 0 2rem;}
  .key-facts h2{font-size:1rem; letter-spacing:0.1em; color:var(--yellow); margin:0 0 0.7rem;}
  .key-facts ul{margin:0;}
  .toc{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1rem 0; margin:0 0 2rem;}
  /* This labels the page's main navigation, so it does not get to be smaller than
     the body copy underneath it. Sized above the prose and letterspaced as a label. */
  .toc h2{font-size:1.15rem; letter-spacing:0.08em; color:var(--ink-dim); margin:0 0 0.6rem;}
  .toc ol{margin:0;}
  .toc a{display:inline-flex; align-items:center; min-height:44px; padding:0.3rem 0.3rem;}
  .article-fig{margin:2rem 0;}
  /* Never upscale, and never shift. Small originals exist and cannot be replaced:
     fair-use album cover thumbnails are 316px, some archive flyer scans are 300px,
     and stretched to the 600px column they read as soft, low-effort grabs.
     The cap lives on the <picture> wrapper, not the img: enhance_images() writes
     max-width:<intrinsic>px there for anything narrower than the column. The img
     itself stays width:100% so it resolves against a definite box, which is what
     lets the width/height attributes' aspect ratio compute a height and reserve
     the space before a lazy image loads. width:auto here resolved to 0 on an
     unloaded image and dropped ~2,300px of shift into long articles. */
  .article-fig img{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:var(--r);}
  .venue-card{display:grid; grid-template-columns:220px 1fr; gap:1.2rem; align-items:start; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:1rem; margin:1.8rem 0;}
  .venue-card img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm);}
  /* Closed venues are illustrated with portrait archive flyers. A 4/3 cover crop
     sliced through their own titles, which read as a rendering error, so they get
     a taller box and sit whole on a dark letterbox. */
  .venue-card.closed img{aspect-ratio:3/4; object-fit:contain; background:#100d0b;}
  .venue-card h3, .band-card h3{margin:0 0 0.3rem; color:var(--ink);}
  .venue-card p, .band-card p{margin:0 0 0.5rem; font-size:0.95rem;}
  /* Venue copy carries several inline show links in one paragraph. At phone width
     they stack into adjacent rows, so the lines need room or they mis-tap. */
  .venue-card p{line-height:1.7;}
  .venue-card .venue-meta{font-size:0.85rem; color:var(--ink-dim);}
  /* The bottom margin matters: the credit is followed by another card paragraph
     whose margin-top is 0, so at margin-bottom:0 the italic credit butted flush
     against the body copy and the two read as one run-on sentence.
     0.875rem (14px) to match the figure captions, not 0.72rem (11.52px): this
     is the line carrying photo attribution and, on substitute images, the
     explanation of what the reader is actually looking at. It was the smallest
     text on the page. */
  .venue-card .credit{font-size:0.875rem; color:var(--ink-dim); font-style:italic; margin:0.35rem 0 0.75rem;}
  .venue-status{display:inline-block; font-family:var(--font-head); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--line); border-radius:var(--r-sm); padding:0.05rem 0.4rem; margin-left:0.4rem; color:var(--yellow); vertical-align:middle;}
  .venue-card.closed .venue-status{color:var(--red-text);}
  .band-card{background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--yellow); border-radius:var(--r); padding:1rem 1.2rem; margin:1.6rem 0;}
  .card-links{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.7rem;}
  .article-wrap .card-links a{display:inline-flex; align-items:center; min-height:44px; padding:0 0.85rem; border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--font-head); font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; color:var(--yellow);}
  .article-wrap .card-links a:hover{border-color:var(--yellow); color:var(--ink);}
  @media (max-width:640px){ .venue-card{grid-template-columns:1fr;} }
  .faq details{border-bottom:1px solid var(--line); padding:0.9rem 0;}
  .faq summary{font-family:var(--font-head); font-size:1.05rem; letter-spacing:0.02em; cursor:pointer; min-height:44px; display:flex; align-items:center; list-style:none;}
  .faq summary::-webkit-details-marker{display:none;}
  /* display:flex kills the ::marker triangle, so the rows read as empty boxes. */
  .faq summary::after{content:"+"; margin-left:auto; padding-left:1rem; color:var(--yellow); font-size:1.5rem; line-height:1; transition:transform 0.15s;}
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq details p{margin:0.6rem 0 0; color:var(--ink-dim);}
  .sources{font-size:1rem; color:var(--ink-dim);}
  /* Stacked citation links: 44px rows so a mis-tap can't open the wrong external site (WCAG 2.5.8). */
  .sources li{margin:0;}
  /* vertical-align:top keeps the list marker beside the FIRST line of a wrapped
     citation; the inline-block default aligns the li baseline to the last line. */
  .sources a{overflow-wrap:anywhere; display:inline-block; vertical-align:top; min-height:44px; line-height:1.6; padding:10px 0;}
  .article-cta{text-align:center; max-width:640px; margin:0 auto 3rem;}
  .article-cta p{color:var(--ink-dim);}
  .article-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.4rem;}
  .article-list.solo{grid-template-columns:1fr;}
  .article-list.solo .article-card{flex-direction:row; align-items:stretch;}
  .article-list.solo .article-card img{width:46%; flex:none; height:auto; min-height:300px; aspect-ratio:auto; object-fit:cover;}
  .article-list.solo .article-card-body{padding:2rem 2.2rem; display:flex; flex-direction:column; justify-content:center;}
  .article-list.solo .article-card h3{font-size:1.6rem;}
  .article-list.solo .article-card p{font-size:1.05rem;}
  @media (max-width:720px){ .article-list.solo .article-card{flex-direction:column;} .article-list.solo .article-card img{width:100%; min-height:0; aspect-ratio:16/9;} .article-list.solo .article-card-body{padding:1.2rem;} }
  .article-card{display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; color:var(--ink); text-decoration:none; transition:border-color 0.15s, transform 0.15s;}
  .article-card:hover{border-color:var(--red); transform:translateY(-2px); color:var(--ink);}
  .article-card img{width:100%; aspect-ratio:16/9; object-fit:cover;}
  .article-card-body{padding:1rem 1.2rem 1.3rem;}
  .article-card h3{font-size:1.15rem; text-transform:none; letter-spacing:0.01em; margin:0 0 0.4rem;}
  .article-card p{margin:0; font-size:0.92rem; color:var(--ink-dim); line-height:1.45;}
  .article-card .article-card-meta{color:var(--yellow); font-family:var(--font-head); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.4rem;}
  /* HOMEPAGE LIVE HERO: band footage behind the original hero */
  .hero-live{min-height:min(86svh,820px); display:flex; flex-direction:column; justify-content:center; background:#000; padding-bottom:4.5rem;}
  .hero-live h1{animation:none; color:#fff0f7; background:none; -webkit-background-clip:initial; background-clip:initial; text-shadow:0 0 0.02em #fff, 0 0 0.05em #ffc2dd, 0 0 0.11em rgba(255,122,184,0.55), 0 0 0.2em rgba(255,95,162,0.35), 0 0 0.34em rgba(255,61,146,0.22);}
  .hero-glow{position:absolute; left:50%; top:46%; width:min(1100px, 110vw); height:46%; transform:translate(-50%,-50%); z-index:1; pointer-events:none; background:radial-gradient(ellipse at center, rgba(255,120,180,0.34) 0%, rgba(255,95,162,0.18) 32%, rgba(255,95,162,0.05) 55%, rgba(255,95,162,0) 72%);}
  .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .hero-shade{position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 45%, rgba(13,11,9,0.18) 0%, rgba(13,11,9,0.48) 75%), linear-gradient(180deg, rgba(13,11,9,0.12) 0%, rgba(13,11,9,0.04) 40%, rgba(13,11,9,0.86) 100%);}
  .hero-live .tagline{color:var(--ink); text-shadow:0 1px 14px rgba(0,0,0,0.8);}
  .hero-live .stat .lbl, .hero-live .hero-note{color:#cdbfa9;}
  /* on phones the site's floating Listen pill owns the bottom-right corner */

  /* THE TAPES: clips that roll on hover (desktop) or when scrolled into view (touch) */
  .tapes-intro{color:var(--ink-dim); max-width:62ch; margin:-1.2rem 0 1.6rem;}
  .tapes-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:clamp(110px,11vw,160px); gap:0.5rem; grid-auto-flow:dense;}
  .tapes-grid .tape{position:relative; display:block; overflow:hidden; background:#000; border:0; border-radius:var(--r-sm); padding:0; margin:0; width:100%; height:100%; aspect-ratio:auto; cursor:pointer; color:var(--ink);}
  .tapes-grid .tape video, .tapes-grid .tape img, .tapes-grid .tape picture{position:absolute; inset:0; width:100%; height:100%;}
  .tapes-grid .tape img{object-fit:cover; object-position:center; transition:transform 0.7s ease, filter 0.4s ease; width:100%; height:100%;}
  .tapes-grid .tape video{object-fit:cover; object-position:center; transition:transform 0.7s ease, filter 0.4s ease;}
  .tapes-grid .tape video{filter:saturate(0.65) brightness(0.78);}
  .tapes-grid .g-item img{filter:brightness(0.85);}
  .tapes-grid .g-item:hover img, .tapes-grid .g-item:focus-visible img{filter:none; transform:scale(1.04);}
  .tapes-grid .tape::after{content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.8)); pointer-events:none;}
  .tape-label{position:absolute; left:0.9rem; right:0.9rem; bottom:0.75rem; z-index:2; text-align:left; display:block;}
  .tape-year{display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(1.5rem,3vw,2.6rem); line-height:1; color:var(--yellow);}
  .tape-place{display:block; font-family:var(--font-head); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); margin-top:0.2rem;}
  .tape-cap{display:block; font-family:var(--font-head); font-size:0.9rem; letter-spacing:0.03em; color:var(--ink);}
  /* Show-detail preview thumbnails: real screenshots, click-through same tab, tape-grid look */
  .show-preview-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1.5rem;}
  .show-preview{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#0a0908; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); transition:transform 0.2s, border-color 0.2s;}
  .show-preview:hover, .show-preview:focus-visible{transform:translateY(-3px); border-color:var(--red); color:var(--ink);}
  .show-preview picture, .show-preview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease, filter 0.3s ease;}
  .show-preview img{filter:brightness(0.82);}
  .show-preview:hover img, .show-preview:focus-visible img{filter:brightness(1); transform:scale(1.05);}
  .show-preview::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85)); pointer-events:none;}
  .show-preview-label{position:absolute; left:0.9rem; right:0.9rem; bottom:0.75rem; z-index:2; text-align:left;}
  .show-preview-title{display:block; font-family:var(--font-head); font-weight:800; letter-spacing:0.03em; text-transform:uppercase; font-size:1rem; color:var(--ink);}
  .show-preview-sub{display:block; font-size:0.8rem; color:var(--yellow); margin-top:0.15rem;}
  .tapes-grid .t-lg{grid-column:span 4; grid-row:span 3;}
  .tapes-grid .t-md{grid-column:span 2; grid-row:span 2;}
  .tapes-grid .t-sm{grid-column:span 2; grid-row:span 1;}
  @media (max-width:860px){
    .tapes-grid{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:118px;}
    .tapes-grid .t-lg{grid-column:span 2; grid-row:span 2;}
    .tapes-grid .t-md{grid-column:span 1; grid-row:span 2;}
    .tapes-grid .t-sm{grid-column:span 1; grid-row:span 1;}
    .tapes-grid > :last-child{grid-column:span 2;}
  }
  /* THE MERCH TABLE: featured red LP (disc slides out on hover) + apparel with hover photo swap */
  .merch-table{background:linear-gradient(180deg, var(--bg) 0%, #1c0d14 55%, var(--bg) 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .mt-layout{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center;}
  .mt-feature, .mt-item{display:block; color:var(--ink); text-decoration:none;}
  .mt-feature:hover, .mt-item:hover{color:var(--ink);}
  .mt-sleeve{position:relative; display:block; width:74%; aspect-ratio:1;}
  .mt-sleeve img{position:relative; z-index:2; width:100%; height:100%; object-fit:cover; border-radius:var(--r-sm); box-shadow:0 24px 50px rgba(0,0,0,0.65);}
  .mt-disc{position:absolute; z-index:1; top:3%; left:3%; width:94%; height:94%; border-radius:50%; box-shadow:0 18px 40px rgba(0,0,0,0.6);
    background:radial-gradient(circle, #0d0b09 0 2.4%, #1a1410 2.5% 15%, #d9a91f 15.2% 15.8%, #1a1410 16% 17.5%, transparent 17.7%), repeating-radial-gradient(circle, #e8488f 0 2px, #ff7ab8 2px 4px);
    transform:translateX(22%) rotate(0deg); transition:transform 2.4s cubic-bezier(.2,.7,.2,1);}
  .mt-feature:hover .mt-disc, .mt-feature:focus-visible .mt-disc, .mt-feature.rolled .mt-disc{transform:translateX(34%) rotate(200deg);}
  .mt-info{display:block; margin-top:1.6rem;}
  .mt-kind{display:block; font-family:var(--font-head); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--yellow);}
  .mt-name{display:block; font-family:var(--font-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.05; margin:0.3rem 0 0.5rem;}
  .mt-blurb{display:block; color:var(--ink-dim); font-size:0.98rem; max-width:40ch;}
  .mt-buyrow{display:flex; align-items:center; gap:1rem; margin-top:1rem; flex-wrap:wrap;}
  .mt-price{font-family:var(--font-head); font-weight:800; font-size:1.8rem; color:var(--ink);}
  .mt-cta{display:inline-flex; align-items:center; min-height:48px; padding:0 1.3rem; background:var(--red); color:#170a10; font-family:var(--font-head); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:0.9rem; border-radius:var(--r-sm); transition:background .15s;}
  .mt-feature:hover .mt-cta{background:#ff5fa2;}
  .mt-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;}
  .mt-shot{position:relative; display:block; aspect-ratio:1; overflow:hidden; background:#0a0908; border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s;}
  .mt-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease, transform .6s ease;}
  .mt-shot .mt-alt{opacity:0;}
  .mt-item:hover .mt-shot, .mt-item:focus-visible .mt-shot, .mt-item.flipped .mt-shot{border-color:var(--red);}
  .mt-item:hover .mt-alt, .mt-item:focus-visible .mt-alt, .mt-item.flipped .mt-alt{opacity:1;}
  .mt-item:hover .mt-shot img, .mt-item.flipped .mt-shot img{transform:scale(1.04);}
  .mt-tag{position:absolute; z-index:2; top:0.55rem; left:0.55rem; background:var(--yellow); color:#140f0a; font-family:var(--font-head); font-weight:800; font-size:0.85rem; letter-spacing:0.02em; padding:0.2rem 0.5rem; transform:rotate(-4deg); box-shadow:0 2px 6px rgba(0,0,0,0.5);}
  .mt-iname{display:block; font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:0.02em; margin-top:0.55rem; line-height:1.2; min-height:2.4em;}
  .mt-desc{display:block; font-size:0.85rem; color:var(--ink-dim); margin-top:0.4rem; line-height:1.4;}
  .mt-ikind{display:block; font-size:0.85rem; color:var(--ink-dim); margin-top:0.3rem;}
  @media (max-width:860px){
    .mt-layout{grid-template-columns:minmax(0,1fr);}
    .mt-sleeve{width:70%;}
    .mt-disc{transform:translateX(26%);}
    .mt-feature:hover .mt-disc, .mt-feature.rolled .mt-disc{transform:translateX(30%) rotate(200deg);}
    .mt-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (prefers-reduced-motion: reduce){ .mt-disc, .mt-shot img{transition:none;} }
  /* glow is reserved for the hero objects and primary buttons; cards get a hairline + hover lift */
  picture{display:inline-block; max-width:100%; border-radius:var(--r-sm);}
  /* The default inline-block wrapper shrink-wraps to the img, which gives
     `.article-fig img{width:100%}` nothing definite to resolve against. Article
     figures get a block wrapper the full column wide instead, so the img's box is
     reserved before load. enhance_images() narrows this max-width per figure when
     the original is smaller than the column, which is where the never-upscale rule
     now lives. */
  .article-fig picture{display:block; width:100%; max-width:600px; margin:0 auto;}
  .mt-sleeve, .album-cover, .member-hero, .article-hero img, .btn:not(.ghost), .np-toggle{box-shadow:0 0 0 1px rgba(255,95,162,0.22), 0 8px 26px rgba(255,95,162,0.28), 0 0 56px rgba(255,95,162,0.2);}
  /* The pill floats over body copy, so it keeps the glow but gains a dark ring
     that stops it ever reading as part of the paragraph behind it. */
  .now-playing .np-toggle{box-shadow:0 0 0 4px rgba(10,8,7,0.94), 0 0 0 5px rgba(255,95,162,0.3), 0 8px 26px rgba(0,0,0,0.6), 0 0 40px rgba(255,95,162,0.22);}
  .tapes-grid .tape, .video-row, .photo-grid figure, .article-card, .mt-shot, .member-photo, .press-card, .gal-item, .gallery-grid figure, .g-item, .track, .finale-img, .timeline-item, .press-thumb, .fact-card, .former-member-card, .tape, .show-row, .demo-art, .gen-cover, .product, .xlink-card, .buy-link, input:not([type=range]), textarea, select, .article-fig, iframe, .cmp, .setlist, .faq details{box-shadow:0 0 0 1px rgba(238,229,211,0.10), 0 10px 30px rgba(0,0,0,0.45);}
  .tapes-grid .tape:hover, .video-row:hover, .photo-grid figure:hover, .article-card:hover, .mt-item:hover .mt-shot, .press-card:hover, .g-item:hover, .product:hover, .xlink-card:hover, .show-row:hover, .former-member-card:hover, .timeline-item:hover, .finale-img:hover{box-shadow:0 0 0 1px rgba(255,95,162,0.35), 0 30px 60px rgba(0,0,0,0.55), 0 0 40px rgba(255,95,162,0.18);}