/* BAST — "Grunge": xerox fanzine, gig flyers stapled to a wall, cassettes and dusty vinyl. */
:root {
  --paper: #e8e1cf;
  --paper-2: #d7ceb6;
  --ink: #121110;
  --ink-2: #1c1a18;
  --wall: #24211d;
  --orange: #ff5a1a;
  --orange-ink: #c23a00;
  --mute: #5a544a;
  --mute-d: #a59d8f;
  --line: rgb(232 225 207 / .22);
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --hand: 'Sedgwick Ave', 'Marker Felt', 'Comic Sans MS', cursive;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --pad: clamp(16px, 5vw, 88px);
  --nav-h: 64px;
  --tear: clamp(14px, 2.2vw, 30px);
  --intro: 1.25s;
  --mp-h: 0px;
  --tape-clip: polygon(3% 0, 97% 5%, 100% 22%, 96% 42%, 100% 64%, 97% 100%, 2% 95%, 0 72%, 4% 50%, 0 26%);
  --masking: rgb(238 229 200 / .78);
  --tear-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V18L6 35L19 19L30 14L43 21L51 14L67 19L87 10L106 10L121 12L133 8L156 15L179 23L193 36L214 33L237 20L258 18L272 25L279 11L291 20L299 17L315 10L335 20L353 19L363 27L372 13L383 25L398 19L418 26L430 28L437 20L449 22L468 13L479 15L493 15L501 21L517 14L525 20L540 27L561 25L572 14L591 20L605 8L611 24L617 25L628 13L652 24L668 21L675 18L683 20L698 17L716 12L733 6L754 24L773 8L786 16L793 19L809 27L831 19L852 31L876 22L882 32L899 19L909 2L922 27L944 15L955 27L971 21L979 9L986 19L1009 12L1030 5L1047 23L1060 27L1075 19L1088 6L1107 20L1121 27L1136 19L1150 23L1158 16L1169 34L1182 35L1200 18V40Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='4 0 0 0 -2 4 0 0 0 -2 4 0 0 0 -2 0 0 0 3.2 -1.65'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .12 0 0 0 1.3 -.6'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .18 0 0 0 1.2 -.52'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23b)' opacity='.4'/%3E%3Crect width='100%' height='100%' filter='url(%23a)' opacity='.55'/%3E%3C/svg%3E");
  --stamp-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4.2 3.3'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23s)'/%3E%3C/svg%3E");
  --dust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23efe7d2' opacity='.5'%3E%3Ccircle cx='33.6' cy='63.2' r='0.29'/%3E%3Ccircle cx='29.6' cy='45.2' r='0.43'/%3E%3Ccircle cx='45.1' cy='81.2' r='0.41'/%3E%3Ccircle cx='73.0' cy='19.0' r='0.30'/%3E%3Ccircle cx='59.5' cy='3.2' r='0.45'/%3E%3Ccircle cx='67.3' cy='66.6' r='0.16'/%3E%3Ccircle cx='67.3' cy='58.5' r='0.19'/%3E%3Ccircle cx='85.7' cy='33.9' r='0.44'/%3E%3Ccircle cx='42.0' cy='87.2' r='0.16'/%3E%3Ccircle cx='76.2' cy='48.0' r='0.46'/%3E%3Ccircle cx='57.0' cy='8.0' r='0.47'/%3E%3Ccircle cx='27.5' cy='65.0' r='0.51'/%3E%3Ccircle cx='37.8' cy='32.6' r='0.27'/%3E%3Ccircle cx='65.1' cy='36.3' r='0.33'/%3E%3Ccircle cx='81.0' cy='20.5' r='0.52'/%3E%3Ccircle cx='30.7' cy='33.5' r='0.47'/%3E%3Ccircle cx='79.0' cy='63.6' r='0.43'/%3E%3Ccircle cx='45.5' cy='1.7' r='0.26'/%3E%3Ccircle cx='31.5' cy='68.7' r='0.51'/%3E%3Ccircle cx='50.1' cy='93.1' r='0.52'/%3E%3Ccircle cx='91.8' cy='74.1' r='0.19'/%3E%3Ccircle cx='20.0' cy='40.9' r='0.19'/%3E%3Ccircle cx='75.7' cy='81.8' r='0.36'/%3E%3Ccircle cx='16.6' cy='66.4' r='0.46'/%3E%3Ccircle cx='53.9' cy='2.3' r='0.26'/%3E%3Ccircle cx='25.0' cy='40.7' r='0.16'/%3E%3Ccircle cx='41.3' cy='4.5' r='0.41'/%3E%3Ccircle cx='64.7' cy='69.1' r='0.41'/%3E%3Ccircle cx='29.2' cy='76.6' r='0.41'/%3E%3Ccircle cx='19.9' cy='17.0' r='0.54'/%3E%3Ccircle cx='81.3' cy='53.6' r='0.28'/%3E%3Ccircle cx='67.5' cy='75.1' r='0.29'/%3E%3Ccircle cx='72.9' cy='74.0' r='0.51'/%3E%3Ccircle cx='27.2' cy='68.5' r='0.43'/%3E%3Ccircle cx='90.5' cy='69.4' r='0.45'/%3E%3Ccircle cx='37.6' cy='22.1' r='0.18'/%3E%3Ccircle cx='3.2' cy='51.7' r='0.24'/%3E%3Ccircle cx='40.8' cy='6.5' r='0.46'/%3E%3Ccircle cx='26.6' cy='8.9' r='0.50'/%3E%3Ccircle cx='39.0' cy='22.1' r='0.41'/%3E%3Ccircle cx='95.2' cy='41.5' r='0.28'/%3E%3Ccircle cx='44.3' cy='77.6' r='0.25'/%3E%3Ccircle cx='70.9' cy='52.2' r='0.52'/%3E%3Ccircle cx='15.4' cy='27.1' r='0.51'/%3E%3Ccircle cx='28.8' cy='41.4' r='0.23'/%3E%3C/g%3E%3Cpath d='M31.7 72.2A28.8 28.8 0 0 1 21.2 51.3M74.5 28.1A32.9 32.9 0 0 1 82.6 45.5M42.7 97.1A47.7 47.7 0 0 1 9.1 74.6M24.6 56.5A26.3 26.3 0 0 1 25.8 39.8M27.8 68.2A28.7 28.7 0 0 1 21.3 51.1M24.0 68.9A32.2 32.2 0 0 1 17.9 48.2M66.0 89.4A42.5 42.5 0 0 1 51.1 92.5M81.0 68.6A36.1 36.1 0 0 1 64.2 83.2M60.0 72.4A24.6 24.6 0 0 1 37.7 71.3M51.3 22.6A27.5 27.5 0 0 1 68.1 29.3M22 30L70 78M60 12L84 44' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='.22'/%3E%3C/svg%3E");
}
.no-intro { --intro: .1s; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; overflow-x: hidden; background: var(--ink); scroll-padding-top: var(--nav-h); } /* on html too: iOS Safari ignores body-only clipping and lets the tilted marquee bands nudge the page sideways, wiggling the fixed nav + player */
html.ready { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--ink); color: var(--paper); font: 400 1.02rem/1.65 var(--mono); -webkit-font-smoothing: antialiased; }
body { --mp-h: 84px; padding-bottom: calc(var(--mp-h) + env(safe-area-inset-bottom)); }
html.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin: 0; font-weight: 400; }
em { font-style: normal; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px dashed var(--orange); outline-offset: 4px; }
.contact :focus-visible { outline-color: var(--ink); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .6rem 1rem; background: var(--orange); color: var(--ink); font-weight: 700; }
.skip:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.paper { background: var(--paper) var(--paper-tex); color: var(--ink); }
.scrawl { font-family: var(--hand); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
/* Slam: falls onto the page like a rubber stamp, overshoots, settles. */
@keyframes stamp-in {
  0% { opacity: 0; scale: 2.3; animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  55% { opacity: 1; scale: .94; animation-timing-function: ease-out; }
  75% { scale: 1.035; }
  100% { opacity: 1; scale: 1; }
}

/* ---------- Torn paper between chapters: a jagged strip of the section's own background ---------- */
.tear { position: relative; }
.tear::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); z-index: 3; height: var(--tear); background: inherit; pointer-events: none; -webkit-mask: var(--tear-mask) var(--tx, 0px) 100% / 1200px 100% repeat-x; mask: var(--tear-mask) var(--tx, 0px) 100% / 1200px 100% repeat-x; }

/* ---------- Grain (rough photocopy specks) + cursor ---------- */
.grain { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.grain::before { content: ''; position: absolute; inset: -50%; opacity: .32; background: var(--grain); animation: grain .7s steps(5) infinite; } /* opacity here, not on .grain: saves Chrome an extra offscreen pass every frame */
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); }
}

.cursor, .cursor-dot { display: none; }
.has-cursor:not(:has(dialog[open])), .has-cursor:not(:has(dialog[open])) * { cursor: none; }
.has-cursor .cursor, .has-cursor .cursor-dot { display: grid; position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.has-cursor .cursor { place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 2px solid var(--paper); box-shadow: 0 0 0 1px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(0 0 0 / .45); transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s, border-radius .35s, rotate .35s var(--ease); }
.has-cursor .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--paper); box-shadow: 0 0 0 1px rgb(0 0 0 / .5); } /* no mix-blend-mode: it made Chrome re-blend the whole page every frame */
.cursor.on, .cursor-dot.on { opacity: 1; }
.cursor.hover { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.cursor.label { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 4px; background: var(--orange); border-color: var(--ink); box-shadow: none; rotate: -8deg; }
.cursor.label ~ .cursor-dot { opacity: 0; }
.cursor span { font: 400 1.05rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: 0; scale: .4; transition: opacity .25s, scale .35s var(--ease); }
.cursor.label span { opacity: 1; scale: 1; }

/* ---------- Preloader: letters stamped, then a copier light sweeps the sheet ---------- */
.loader { position: fixed; inset: 0; z-index: 120; display: grid; place-content: center; justify-items: center; gap: 1.2rem; overflow: hidden; background: var(--ink); pointer-events: none; animation: loader-out .45s 1.05s forwards; }
.no-intro .loader { display: none; }
.loader::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30vh; background: linear-gradient(transparent, rgb(225 238 255 / .08) 35%, rgb(235 245 255 / .55) 50%, rgb(225 238 255 / .08) 65%, transparent); translate: 0 -100%; animation: scan .8s var(--ease-io) .45s forwards; }
.loader-word { display: flex; gap: .06em; font: 400 clamp(4.5rem, 16vw, 12rem)/.95 var(--display); }
.loader-word span { display: block; padding: .03em .08em 0; background: var(--paper); color: var(--ink); rotate: var(--r); opacity: 0; animation: stamp-in .32s forwards; animation-delay: calc(.05s + var(--i) * .09s); }
.loader-word span:nth-child(2) { background: var(--orange); }
.loader-word span:nth-child(4) { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 .035em var(--paper); }
.loader-meta { font: .85rem/1 var(--type); letter-spacing: .24em; text-transform: uppercase; color: var(--mute-d); }
@keyframes loader-out { 0% { opacity: 1; } 30% { opacity: .3; } 55% { opacity: .85; } 100% { opacity: 0; } } /* no steps()/visibility here: WebKit froze that mid-fade */
@keyframes scan { to { translate: 0 420%; } }

/* ---------- Nav: black strip with a torn bottom edge ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 var(--pad); background: var(--ink); } /* solid, not transparent: iOS 26 Safari tints its top bar from the fixed header's background and falls back to white */
.nav::before, .nav::after { content: ''; position: absolute; left: 0; right: 0; z-index: -1; background: var(--ink); }
.nav::before { top: 0; bottom: 0; }
.nav::after { top: calc(100% - 1px); height: 12px; -webkit-mask: var(--tear-mask) -200px 100% / 1200px 100% repeat-x; mask: var(--tear-mask) -200px 100% / 1200px 100% repeat-x; transform: scaleY(-1); }
.nav-logo { position: relative; z-index: 2; }
.nav-logo img { height: 24px; width: auto; }
.menu ol { display: flex; gap: clamp(.9rem, 2vw, 2.2rem); margin: 0; padding: 0; list-style: none; }
.menu a { position: relative; display: flex; align-items: baseline; gap: .4em; padding: .45rem .1rem; font: 700 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(var(--orange), var(--orange)) 0 80% / 0 .55em no-repeat; transition: background-size .3s var(--ease); }
.menu a i { font: 400 1rem/1 var(--hand); letter-spacing: 0; color: var(--orange); font-style: normal; }
.menu a:hover { background-size: 100% .55em; }
.menu a:hover i { color: var(--paper); }
.nav-toggle { display: none; }
@media (max-width: 960px) {
  .nav-toggle { position: relative; z-index: 2; display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border: 0; background: none; font: 700 .8rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
  .nav-toggle i, .nav-toggle i::before { display: block; width: 26px; height: 3px; background: currentColor; transition: transform .4s var(--ease), translate .4s var(--ease); }
  .nav-toggle i { position: relative; translate: 0 -4px; }
  .nav-toggle i::before { content: ''; position: absolute; top: 8px; }
  .nav.open .nav-toggle i { translate: 0 0; transform: rotate(45deg); }
  .nav.open .nav-toggle i::before { top: 0; transform: rotate(-90deg); }
  .menu { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--nav-h) + 2rem) var(--pad) 3rem; background: var(--ink); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s var(--ease-io), visibility 0s .55s; }
  .menu::after { content: 'Gotika ✦ Punk ✦ Grunge'; margin-top: 2.2rem; padding-top: 1rem; border-top: 2px dashed var(--line); font: .8rem/1 var(--type); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-d); }
  .nav.open .menu { clip-path: inset(0); visibility: visible; transition: clip-path .55s var(--ease-io); }
  .menu ol { flex-direction: column; gap: 0; }
  .menu li { overflow: hidden; }
  .menu a { gap: .8rem; padding: .1rem 0; font: 400 clamp(2.6rem, 12.5vw, 5.2rem)/1.08 var(--display); letter-spacing: .01em; background: none; translate: 0 105%; rotate: 5deg; transform-origin: left bottom; transition: translate .6s var(--ease), rotate .6s var(--ease); }
  .menu a i { font-size: 1.15rem; }
  .nav.open .menu a { translate: 0 0; rotate: 0deg; transition-delay: calc(.18s + var(--i) * .05s); }
}

/* ---------- Section heads: label-maker number, perforation rule, slammed title + marker underline ---------- */
.sec-head { position: relative; margin-bottom: clamp(2.6rem, 7vh, 5rem); }
.sec-line { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.sec-num { display: inline-block; padding: .32em .5em .24em; background: var(--ink); color: var(--paper); font: 400 1.1rem/1 var(--display); letter-spacing: .08em; rotate: -3deg; box-shadow: 3px 3px 0 var(--orange); }
.concert .sec-num, .clips .sec-num, .gallery .sec-num, .more .sec-num { background: var(--paper); color: var(--ink); }
.contact .sec-num { background: var(--ink); color: var(--orange); box-shadow: 3px 3px 0 var(--paper); }
.sec-rule { flex: 1; border-top: 2px dashed currentColor; opacity: .45; transform-origin: left; }
.sec-kicker { font: .85rem/1.2 var(--type); letter-spacing: .14em; text-transform: uppercase; }
.sec-title { position: relative; display: inline-block; padding-top: .1em; font: 400 clamp(3.1rem, 12.5vw, 11.5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.sec-title > span { display: inline-block; rotate: -1deg; }
.sec-head-sm .sec-title { font-size: clamp(2.8rem, 6.5vw, 6.5rem); }
.scrib, .circle { position: absolute; overflow: visible; fill: none; stroke: var(--orange); stroke-linecap: round; pointer-events: none; }
.scrib { left: -2%; bottom: -.14em; width: 104%; height: .24em; stroke-width: 6; }
.contact .scrib { stroke: var(--ink); }

/* Reveal states: only hidden when JS runs and motion is allowed; JS adds .in via IntersectionObserver. */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { transition: opacity .8s var(--ease), translate .8s var(--ease); }
  .js .rv:not(.in) { opacity: 0; translate: 0 40px; }
  .js .rv.slam { transition: none; translate: none; }
  .js .rv.slam:not(.in) { opacity: 0; }
  .js .rv.slam.in { animation: stamp-in .5s both; }
  .js .sec-line.rv { opacity: 1; translate: none; }
  .js .sec-line.rv .sec-rule { transform: scaleX(0); transition: transform 1.1s var(--ease-io) .15s; }
  .js .sec-line.rv.in .sec-rule { transform: scaleX(1); }
  .js .sec-line.rv .sec-num { opacity: 0; scale: 1.9; transition: opacity .15s, scale .4s cubic-bezier(.3, 1.7, .5, 1); }
  .js .sec-line.rv .sec-kicker { opacity: 0; transition: opacity .5s .45s; }
  .js .sec-line.rv.in .sec-num, .js .sec-line.rv.in .sec-kicker { opacity: 1; scale: 1; }
  .js :is(.scrib, .circle) path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.6, 0, .3, 1) .5s; }
  .js .scrib path + path { transition-duration: .45s; transition-delay: 1.05s; }
  .js .in :is(.scrib, .circle) path { stroke-dashoffset: 0; }
}

/* ---------- Hero: gig flyer over a xeroxed VHS loop ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--ink); }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.7) brightness(.42); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 2s; filter: grayscale(1) contrast(1.8) brightness(.5); }
.hero-video.on { opacity: 1; }
.hero-poster, .hero-video { animation: vhs-jump 7s steps(1) infinite; }
@keyframes vhs-jump { 0%, 91%, 94%, 97%, 100% { transform: none; } 92% { transform: translateX(-9px) skewX(3deg); } 93% { transform: translateX(6px); } 96% { transform: translateY(-4px); } }
.hero-media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .32) 0 1px, transparent 1px 3px), radial-gradient(circle, rgb(0 0 0 / .45) 0 1px, transparent 1.6px) 0 0 / 5px 5px; }
.hero-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 45%, transparent 30%, rgb(18 17 16 / .85)), linear-gradient(180deg, rgb(18 17 16 / .65), transparent 22% 58%, var(--ink)); }
.vhs-band { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 14vh; background: linear-gradient(transparent, rgb(255 255 255 / .05) 35%, rgb(255 255 255 / .14) 50%, rgb(255 255 255 / .03) 65%, transparent); animation: vhs-band 6.5s linear infinite; }
@keyframes vhs-band { from { translate: 0 -100%; } to { translate: 0 800%; } }
.vhs-osd { position: absolute; right: var(--pad); top: calc(var(--nav-h) + 3.6rem); z-index: 3; padding: .4rem 0; border: 0; background: none; cursor: pointer; font: 700 1.05rem/1 var(--mono); letter-spacing: .12em; color: var(--paper); text-shadow: 2px 0 rgb(255 40 80 / .75), -2px 0 rgb(40 220 255 / .75); animation: blink 1.4s steps(1) infinite; }
.vhs-osd::before { content: 'PLAY ▶'; }
.vhs-osd.on::before { content: 'STOP ■'; }
.vhs-osd:hover, .vhs-osd:focus-visible { color: var(--orange); animation: none; }
.hero.off :is(.vhs-band, .vhs-osd, .hero-poster, .hero-video, .hero-title span) { animation-play-state: paused; }

.hero-inner { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: calc(var(--nav-h) + 1.2vh) var(--pad) calc(var(--mp-h) + 1.2rem); }
.hero-top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid rgb(232 225 207 / .45); font: .85rem/1.2 var(--type); letter-spacing: .16em; text-transform: uppercase; opacity: 0; animation: fade .5s calc(var(--intro) + .5s) forwards; }
.hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem 4vw; animation: shake .3s linear calc(var(--intro) + 1.05s); }
@keyframes shake { 25% { translate: -5px 3px; } 50% { translate: 4px -2px; } 75% { translate: -2px 1px; } }
.hero-title { display: flex; gap: .05em; font: 400 clamp(5rem, 19.5vw, 20rem)/.95 var(--display); }
.hero-title span { display: block; padding: .05em .08em 0; background: var(--paper) var(--paper-tex); color: var(--ink); rotate: var(--r); translate: 0 var(--y); clip-path: polygon(0 2%, 97% 0, 100% 97%, 3% 100%); opacity: 0; animation: stamp-in .4s forwards; animation-delay: calc(var(--intro) + var(--i) * .13s); }
/* Burst toggled every few seconds from JS: an idle infinite text-shadow loop would restyle + repaint the hero every frame. */
.hero-title.glitch span { animation: stamp-in .4s forwards, glitch .42s steps(1); animation-delay: calc(var(--intro) + var(--i) * .13s), calc(var(--i) * .06s); }
.hero-title span:nth-child(2) { background: var(--orange); clip-path: polygon(3% 0, 100% 3%, 97% 100%, 0 96%); }
.hero-title span:nth-child(3) { clip-path: polygon(0 0, 100% 4%, 98% 100%, 2% 97%); }
.hero-title span:nth-child(4) { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 .035em var(--paper); clip-path: none; }
@keyframes glitch { 0%, 100% { text-shadow: none; translate: 0 var(--y); } 14% { text-shadow: .03em 0 #ff2a55, -.03em 0 #2ae0ff; translate: .025em var(--y); } 43% { text-shadow: -.02em 0 #ff2a55, .02em 0 #2ae0ff; translate: -.02em var(--y); } }

.hero-gig { position: relative; justify-self: end; width: clamp(16.5rem, 24vw, 22rem); rotate: -5deg; opacity: 0; animation: stamp-in .42s forwards calc(var(--intro) + .7s); }
.hero-gig[hidden] { display: none; }
.stamp { position: relative; padding: 1.1rem 1.3rem 1.2rem; border: 5px solid; color: var(--orange); background: rgb(18 17 16 / .55); font-family: var(--display); line-height: 1; text-transform: uppercase; -webkit-mask: var(--stamp-tex); mask: var(--stamp-tex); }
.stamp::before { content: ''; position: absolute; inset: 5px; border: 2px solid; pointer-events: none; }
.hg-k { padding-bottom: .55rem; border-bottom: 3px solid; font-size: 1.05rem; letter-spacing: .2em; }
.hg-album { padding-top: .55rem; font: 400 clamp(1.5rem, 2.1vw, 1.9rem)/1.05 var(--hand); text-transform: none; }
.hg-venue small { display: block; margin-top: .35rem; font: 700 .85rem/1 var(--mono); letter-spacing: .14em; }
.hg-date { display: flex; align-items: center; gap: .6rem; padding: .55rem 0 .4rem; }
.hg-day { font-size: clamp(5rem, 7.2vw, 7.2rem); line-height: .84; letter-spacing: -.02em; }
.hg-my { display: flex; flex-direction: column; gap: .2rem; font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height: .92; }
.hg-venue { padding-top: .5rem; border-top: 3px solid; font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: .98; }
.hg-count { position: absolute; right: -1rem; top: -1.1rem; padding: .45rem .7rem .38rem; background: var(--paper) var(--paper-tex); color: var(--ink); font: 400 1.1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; rotate: 9deg; box-shadow: 2px 3px 0 rgb(0 0 0 / .45); }
.hg-count:empty { display: none; }
.hg-link { display: inline-flex; gap: .5rem; margin-top: 1.3rem; padding: .62rem .9rem .52rem; background: var(--orange); color: var(--ink); font: 700 .82rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; rotate: 4deg; box-shadow: 3px 3px 0 var(--paper); transition: rotate .25s var(--ease), translate .25s var(--ease); }
.hg-link:hover { rotate: 0deg; translate: 0 -3px; }

.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; opacity: 0; animation: fade .6s calc(var(--intro) + 1.05s) forwards; }
.hero-quote { max-width: 25rem; rotate: -1.5deg; }
.hero-quote span { padding: .28rem .55rem; background: var(--paper) var(--paper-tex); color: var(--ink); font: 1.05rem/2 var(--type); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-play { display: grid; place-items: center; flex: none; width: 72px; height: 72px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: var(--orange); color: var(--ink); cursor: pointer; rotate: -6deg; box-shadow: 4px 4px 0 var(--paper); transition: translate .15s, box-shadow .15s, background .2s; }
.hero-play:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--paper); }
.hero-play:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--paper); }
.hero-play svg { width: 30px; height: 30px; fill: currentColor; }
.hero-play .i-stop, .hero-play.on .i-play { display: none; }
.hero-play.on .i-stop { display: block; }
@media (max-width: 1100px) {
  .hero-main { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 2.2rem; }
  .hero-gig { margin-right: 1rem; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 28vw; }
  .hero-top span + span { display: none; }
  .vhs-osd { top: calc(var(--nav-h) + 1.2vh - .45rem); font-size: .9rem; }
  .hero-gig { justify-self: center; width: min(100% - 2rem, 19rem); margin: 0; }
  .hg-day { font-size: 5rem; }
  .hero-quote span { font-size: .88rem; line-height: 1.95; }
}
@media (max-height: 720px) and (min-width: 641px) { .hero-title { font-size: min(19.5vw, 30vh); } }

/* ---------- Caution tape (marquee) ---------- */
.bands { position: relative; overflow: clip; padding: 3rem 0 calc(4rem + var(--tear)); background: var(--ink); }
.band { width: 120vw; margin-left: -10vw; overflow: hidden; white-space: nowrap; }
.band-a { position: relative; padding: 1.15rem 0 1rem; background: repeating-linear-gradient(-45deg, var(--ink) 0 11px, transparent 11px 22px) 0 0 / 100% 8px no-repeat, repeating-linear-gradient(-45deg, var(--ink) 0 11px, transparent 11px 22px) 0 100% / 100% 8px no-repeat, var(--orange); color: var(--ink); font: 400 clamp(1.1rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: .08em; rotate: -3deg; box-shadow: 0 14px 30px -8px #000; }
.band-b { margin-bottom: -2.4rem; padding: .85rem 0 .75rem; background: var(--paper) var(--paper-tex); color: var(--ink); rotate: 2.5deg; font: 1rem/1 var(--type); letter-spacing: .2em; }
.band-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.band-b .band-track { animation-direction: reverse; animation-duration: 58s; }
.band-track span { padding-right: .4em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 01 About: fanzine page ---------- */
.about { padding: 12vh var(--pad) 16vh; --tx: -120px; }
.about .sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.about .sec-line { flex-basis: 100%; }
.since { display: flex; flex-direction: column; align-items: center; margin: 0 4vw .6rem 0; padding: .55rem 1.1rem .45rem; border: 4px solid; color: var(--orange-ink); font-family: var(--display); line-height: 1; text-transform: uppercase; rotate: 8deg; -webkit-mask: var(--stamp-tex); mask: var(--stamp-tex); }
.since span { font-size: 1rem; letter-spacing: .32em; padding-left: .32em; }
.since b { font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.4rem); }
.about-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem 2rem; align-items: start; }
.lead { grid-column: 1 / span 8; font: 400 clamp(1.35rem, 2.45vw, 2.4rem)/1.34 var(--type); }
.lead::first-letter { float: left; margin: .04em .12em 0 0; padding: .06em .12em 0; background: var(--ink); color: var(--paper); font: 400 3.3em/.92 var(--display); }
.words .w { transition: opacity .4s, background-size .5s var(--ease); }
.words .w:not(.on) { opacity: .15; }
.lead em .w, .lead em:not(:has(.w)) { background: linear-gradient(rgb(255 90 26 / .55), rgb(255 90 26 / .55)) 0 88% / 100% .5em no-repeat; }
.lead em .w:not(.on) { background-size: 0 .5em; }

.tape { grid-column: 9 / -1; justify-self: center; width: min(100%, 330px); margin-top: .6rem; rotate: 4deg; }
.tape-shell { position: relative; aspect-ratio: 1.58; padding: 7% 6% 0; border-radius: 10px; background: #1b1a18; box-shadow: 0 22px 30px -14px rgb(0 0 0 / .55), inset 0 0 0 2px #2e2b28; }
.tape-shell::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 0; height: 17%; background: #262422; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.tape-label { display: flex; justify-content: space-between; align-items: center; height: 27%; padding: 0 .7rem; background: var(--paper) var(--paper-tex); color: var(--ink); border-top: 6px solid var(--orange); font: 1rem/1 var(--hand); }
.tape-label b { font-weight: 400; }
.tape-label span { font: 1.3rem/1 var(--display); }
.tape-window { display: flex; align-items: center; height: 30%; margin: 5% 12% 0; padding: 0 7%; border-radius: 40px; background: rgb(232 225 207 / .1); box-shadow: inset 0 0 0 2px rgb(232 225 207 / .2); }
.reel { height: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #1b1a18 0 24%, transparent 25%), repeating-conic-gradient(var(--paper) 0 12deg, transparent 12deg 60deg), radial-gradient(circle, transparent 0 40%, #d9d1bd 41% 47%, #3d352c 48%); animation: spin 2.2s linear infinite paused; }
.tape-mid { flex: 1; height: 44%; margin: 0 6%; border-radius: 2px; background: #4c3527; }
.mp-on .reel, .tape:hover .reel { animation-play-state: running; }
.tape-card { margin: -3px 6% 0; padding: .9rem 1rem .8rem; background: var(--paper-2) var(--paper-tex); color: var(--ink); font: 1rem/1.4 var(--hand); rotate: -2deg; box-shadow: 0 10px 18px -10px rgb(0 0 0 / .45); }
.tape-card p + p { margin-top: .45rem; }
.tape-card b { margin-right: .35rem; padding: .08rem .35rem 0; background: var(--ink); color: var(--paper); font: 400 .9rem/1 var(--display); }

.note { grid-column: 4 / span 7; position: relative; padding: 2.2rem 2.2rem 2rem; background: #f3eee2 repeating-linear-gradient(transparent 0 calc(1.7em - 1px), rgb(60 100 170 / .22) calc(1.7em - 1px) 1.7em) 0 2.1rem; font-size: clamp(1.02rem, 1.25vw, 1.18rem); rotate: -1deg; box-shadow: 0 18px 30px -16px rgb(0 0 0 / .45); }
.note::before, .gal-item::before, .m-float::before, .sleeve::after, .alb-sleeve::before { content: ''; position: absolute; z-index: 2; width: 96px; height: 26px; background: var(--masking); clip-path: var(--tape-clip); box-shadow: 0 1px 2px rgb(0 0 0 / .2); pointer-events: none; }
.note::before { left: 50%; top: -12px; margin-left: -48px; rotate: -3deg; }
.second { font: 400 1em/1.7 var(--mono); color: var(--ink); }
@media (max-width: 900px) {
  .lead, .note { grid-column: 1 / -1; }
  .tape { grid-column: 1 / -1; }
  .note { padding: 2rem 1.3rem 1.6rem; }
}

.members-k { margin: 14vh 0 .5rem; font-size: 1.6rem; color: var(--orange-ink); rotate: -3deg; transform-origin: left; }
.members { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.member { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); grid-template-areas: 'img num' 'img name' 'img role'; column-gap: 1.2rem; align-items: center; padding: 1rem 0; border-bottom: 2px dashed rgb(18 17 16 / .35); transition: opacity .4s; }
.member img { grid-area: img; width: 4.6rem; aspect-ratio: 1; object-fit: cover; padding: 4px 4px 12px; background: #f7f3ea; box-shadow: 0 6px 12px -6px rgb(0 0 0 / .5); filter: grayscale(1) contrast(1.3); rotate: -3deg; }
.member:nth-child(even) img { rotate: 3deg; }
.m-num { grid-area: num; font: 1.3rem/1 var(--hand); color: var(--orange-ink); }
.m-name { grid-area: name; justify-self: start; font: 400 clamp(1.9rem, 6.4vw, 6.4rem)/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; background: linear-gradient(var(--orange), var(--orange)) 0 72% / 0 .32em no-repeat; transition: translate .5s var(--ease), background-size .4s var(--ease); }
.m-role { grid-area: role; font: .85rem/1.4 var(--type); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
@media (min-width: 700px) {
  .member { grid-template-columns: 4rem minmax(0, 1fr) auto; grid-template-areas: 'num name role'; padding: 1rem 0; }
  .member img { display: none; }
  .m-num { align-self: start; padding-top: 1em; }
  .m-role { text-align: right; }
}
@media (min-width: 700px) and (hover: none), (min-width: 700px) and (pointer: coarse) {
  .member { grid-template-columns: 6rem 3rem minmax(0, 1fr) auto; grid-template-areas: 'img num name role'; }
  .member img { display: block; width: 6rem; }
}
@media (hover: hover) and (pointer: fine) {
  .members:hover .member { opacity: .3; }
  .members .member:hover { opacity: 1; }
  .member:hover .m-name { translate: 2rem 0; background-size: 100% .32em; }
}
.m-float { position: fixed; left: 0; top: 0; z-index: 40; display: none; width: clamp(200px, 18vw, 270px); padding: 12px 12px 0; background: #f7f3ea; color: var(--ink); box-shadow: 0 25px 40px -15px rgb(0 0 0 / .6); pointer-events: none; opacity: 0; scale: .7; transition: opacity .3s, scale .5s var(--ease); }
.has-hover .m-float { display: block; }
.m-float.on { opacity: 1; scale: 1; }
.m-float::before { left: 50%; top: -12px; margin-left: -48px; rotate: 4deg; }
.m-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #222; }
.m-photo::after, .gal-ph::after { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle, rgb(0 0 0 / .4) 0 .8px, transparent 1.4px) 0 0 / 4px 4px; pointer-events: none; transition: opacity .5s; }
.m-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.4) brightness(1.05); clip-path: inset(100% 0 0 0); transition: clip-path .55s var(--ease-io); }
.m-photo img.on { z-index: 1; clip-path: inset(0); }
.m-cap { display: block; min-height: 3rem; padding: .55rem .2rem .7rem; font: 1.3rem/1.1 var(--hand); text-align: center; }

/* ---------- 02 Concert: the flyer + photocopied map ---------- */
.concert { padding: 13vh var(--pad) 16vh; background: var(--ink); color: var(--paper); --tx: -340px; }
.gig { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.gig-flyer { position: relative; padding: clamp(1.5rem, 3.5vw, 3.2rem); background: var(--paper) var(--paper-tex); color: var(--ink); rotate: -1.5deg; box-shadow: 0 30px 50px -20px #000; }
.gig-flyer::before, .gig-flyer::after { content: ''; position: absolute; top: 14px; width: 26px; height: 5px; border-radius: 2px; background: linear-gradient(#ececec, #8a8a8a); box-shadow: 0 1px 1px rgb(0 0 0 / .5); }
.gig-flyer::before { left: 18px; rotate: -10deg; }
.gig-flyer::after { right: 18px; rotate: 7deg; }
.gig-live { margin-bottom: 1.4rem; padding-bottom: .6rem; border-bottom: 3px solid; font: .9rem/1 var(--type); letter-spacing: .3em; text-transform: uppercase; }
.gig-date { display: flex; align-items: center; gap: .15em; }
.gig-day { position: relative; padding: 0 .1em; font: 400 clamp(8rem, 19vw, 18rem)/.84 var(--display); letter-spacing: -.02em; }
.circle { left: -16%; top: -17%; width: 134%; height: 134%; stroke-width: 5; }
.gig-my { display: flex; flex-direction: column; gap: .12em; font: 400 clamp(2.2rem, 5vw, 4.6rem)/.92 var(--display); text-transform: uppercase; }
.gig-my span:last-child { align-self: flex-start; padding: .04em .12em 0; background: var(--ink); color: var(--paper); rotate: -2deg; }
.gig-venue { margin-top: 1.5rem; font: 400 clamp(2.4rem, 5.8vw, 5.8rem)/.95 var(--display); text-transform: uppercase; }
.gig-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 2rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 2px dashed; font: 700 .92rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gig-count { padding: .42rem .7rem .32rem; background: var(--orange); color: var(--ink); font: 400 1.25rem/1 var(--display); letter-spacing: .06em; rotate: 2deg; }
.gig-count:empty { display: none; }
.map-frame { position: relative; aspect-ratio: 4 / 5; padding: 10px; background: var(--paper); rotate: 2deg; box-shadow: 0 30px 50px -20px #000; }
.map-frame::before, .map-frame::after { content: ''; position: absolute; z-index: 1; top: -8px; width: 110px; height: 30px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .1) 0 2px, transparent 2px 5px), linear-gradient(#b8b6ae, #8b8982); clip-path: var(--tape-clip); box-shadow: 0 2px 3px rgb(0 0 0 / .3); }
.map-frame::before { left: -30px; rotate: -32deg; }
.map-frame::after { right: -30px; rotate: 32deg; }
.map { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.3); }
@media (max-width: 800px) {
  .gig { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .map-frame { aspect-ratio: 1; }
  .map-frame::before { left: -12px; } .map-frame::after { right: -12px; }
}

/* ---------- 03 Discography: the records as a journey through time ---------- */
.disco { padding: 13vh var(--pad) 18vh; --tx: -610px; }
.journey { position: relative; display: grid; gap: 17vh; margin: 0; padding: 10vh 0 2vh; list-style: none; }
.journey::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: repeating-linear-gradient(var(--ink) 0 16px, transparent 16px 26px); transform-origin: top; }
.record { --dir: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10vw; align-items: center; }
.record:nth-child(even) { --dir: -1; }
.record::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 4px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background .3s; }
.record.is-on::after, .record:hover::after { background: var(--orange); }
.rec-gap { pointer-events: none; position: absolute; left: 50%; top: -8.5vh; z-index: 1; translate: -50% -50%; padding: .2rem .7rem; background: var(--paper) var(--paper-tex); color: var(--orange-ink); font: 1.7rem/1.1 var(--hand); white-space: nowrap; rotate: -4deg; }
.rec-year { pointer-events: none; justify-self: end; font: 400 clamp(5rem, 13vw, 12.5rem)/.8 var(--display); color: transparent; -webkit-text-stroke: 2px var(--ink); letter-spacing: .01em; transition: color .4s; }
.record.is-on .rec-year { color: var(--orange); }
.rec-body { width: min(100%, 470px); }
.record:nth-child(even) .rec-year { order: 2; justify-self: start; }
.record:nth-child(even) .rec-body { order: 1; justify-self: end; }
.record:nth-child(even) .sleeve-wrap { margin-left: auto; }
.sleeve-wrap { position: relative; width: 76%; }
.sleeve { position: relative; display: block; aspect-ratio: 1; }
.sleeve img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 50px -24px rgb(0 0 0 / .75), 0 0 0 1px rgb(0 0 0 / .15); transition: translate .9s var(--ease), rotate .9s var(--ease); }
.sleeve::after { left: -26px; top: 8px; rotate: -38deg; width: 84px; }
.vinyl { position: absolute; inset: 2.5%; border-radius: 50%; translate: calc(var(--dir) * 16%) 0; rotate: 0deg; transition: translate 1s var(--ease), rotate 2.2s var(--ease); animation: spin 1.8s linear infinite paused; background:
  var(--dust) center / 100% 100%,
  radial-gradient(circle, transparent 0 17%, rgb(255 255 255 / .06) 17.4%, transparent 18.5%),
  repeating-radial-gradient(circle, #151412 0 1px, #2c2a26 1.5px 3px),
  #121110; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .12); }
.vinyl::before { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: radial-gradient(circle, var(--paper) 0 5%, transparent 6%), var(--label) center / cover; box-shadow: 0 0 0 2px #0a0a0a; filter: sepia(.25) contrast(1.05); }
.vinyl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .1) 13%, transparent 20% 50%, rgb(255 255 255 / .08) 63%, transparent 70%); }
.record:hover .vinyl, .sleeve:focus-visible .vinyl, .more-item:hover .vinyl, .more-item:focus-visible .vinyl { translate: calc(var(--dir) * 40%) 0; rotate: 200deg; }
.record.is-on .vinyl { translate: calc(var(--dir) * 52%) 0; animation-play-state: running; }
.record:hover .sleeve img, .more-item:hover .sleeve img { translate: calc(var(--dir) * -3%) 0; rotate: calc(var(--dir) * -2deg); }
.rec-play { position: absolute; z-index: 3; left: -16px; bottom: -16px; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: var(--orange); color: var(--ink); cursor: pointer; rotate: -6deg; box-shadow: 4px 4px 0 var(--ink); transition: translate .15s, box-shadow .15s, background .2s; }
.record:nth-child(even) .rec-play { left: auto; right: -16px; }
.rec-play:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.rec-play:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.rec-play svg { width: 26px; height: 26px; fill: currentColor; }
.rec-play .i-pause, .rec-play.on .i-play { display: none; }
.rec-play.on .i-pause { display: block; }
.rec-play.on { background: var(--paper); }
.record-meta { margin-top: 2rem; }
.record:nth-child(even) .record-meta { width: 76%; margin-left: auto; }
.record-year { font: .85rem/1.2 var(--type); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.record-title { margin: .4rem 0 .9rem; font: 400 clamp(2.2rem, 3.8vw, 4rem)/.95 var(--display); text-transform: uppercase; }
.record-links { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; font: 700 .8rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.record-links a { padding: .55rem 0; background: linear-gradient(var(--orange), var(--orange)) 0 72% / 0 .55em no-repeat; transition: background-size .3s var(--ease); }
.record-links a:hover { background-size: 100% .55em; }
@media (max-width: 800px) {
  .journey { gap: 8rem; padding-top: 5rem; }
  .journey::before { left: 12px; }
  .record, .record:nth-child(even) { --dir: 1; grid-template-columns: minmax(0, 1fr); padding-left: 2.6rem; }
  .record::after { left: 12px; top: 2.2rem; }
  .rec-gap { left: 0; top: -4rem; translate: 0 -50%; font-size: 1.45rem; }
  .rec-year, .record:nth-child(even) .rec-year { order: 0; justify-self: start; margin-bottom: 1.4rem; font-size: clamp(4rem, 20vw, 6rem); }
  .rec-body, .record:nth-child(even) .rec-body { order: 1; justify-self: start; }
  .sleeve-wrap, .record:nth-child(even) .sleeve-wrap { width: 70%; margin-left: 0; }
  .record:nth-child(even) .rec-play { left: -16px; right: auto; }
  .record:nth-child(even) .record-meta { width: auto; margin-left: 0; }
}

/* ---------- Stickers: peel a corner on hover ---------- */
@property --peel { syntax: '<length>'; inherits: true; initial-value: 0px; }
.sticker { --peel: 0px; position: relative; display: inline-flex; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%); transition: --peel .3s var(--ease), translate .3s var(--ease); }
.sticker::after { content: ''; position: absolute; right: 0; bottom: 0; width: var(--peel); height: var(--peel); background: linear-gradient(135deg, #fffdf6 0%, #ddd6c6 40%, #9b9482 49%, transparent 50%); pointer-events: none; }
.sticker:hover, .sticker:focus-visible, .sleeve-wrap:hover .sticker { --peel: 20px; translate: 0 -2px; }
.badge { position: absolute; z-index: 3; right: -18px; top: -16px; padding: .55rem .8rem .45rem; background: var(--orange); color: var(--ink); font: 400 1.15rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; rotate: 10deg; }

/* ---------- 04 Clips: VHS tapes ---------- */
.clips { padding: 13vh var(--pad) 16vh; background: var(--ink); --tx: -150px; }
.clip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6vh 3.2vw; }
.clip { position: relative; display: block; rotate: var(--r, 0deg); transition: rotate .4s var(--ease), translate .4s var(--ease); }
.clip:nth-child(3n + 1) { --r: -1.5deg; }
.clip:nth-child(3n + 2) { --r: 1deg; margin-top: 4vh; }
.clip:nth-child(3n) { --r: -.5deg; margin-top: 1.5vh; }
.clip:hover, .clip:focus-visible { rotate: 0deg; translate: 0 -6px; }
.clip figure { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border: 6px solid #0a0a09; box-shadow: 0 0 0 1px rgb(232 225 207 / .16), 0 20px 40px -20px #000; }
.clip img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; filter: grayscale(.9) contrast(1.4) brightness(.78); transition: filter .5s; }
.clip:hover img, .clip:focus-visible img { filter: grayscale(0) contrast(1.15) saturate(1.2); }
.clip:hover figure, .clip:focus-visible figure { animation: vhs-glitch .55s steps(1); }
@keyframes vhs-glitch {
  15% { transform: translateX(-7px); clip-path: inset(8% 0 55% 0); }
  30% { transform: translateX(6px); clip-path: inset(45% 0 18% 0); }
  45% { transform: translate(-3px, 2px); clip-path: none; filter: hue-rotate(80deg) contrast(1.5); }
  60% { transform: translateX(2px); filter: none; }
  75% { transform: none; }
}
.clip figure::before { content: ''; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px); pointer-events: none; }
.clip figure::after { content: 'PLAY ▶'; position: absolute; left: .8rem; top: .7rem; z-index: 2; font: 700 .95rem/1 var(--mono); letter-spacing: .12em; color: var(--paper); text-shadow: 2px 0 rgb(255 40 80 / .8), -2px 0 rgb(40 220 255 / .8); opacity: 0; transition: opacity .2s; }
.clip:hover figure::after, .clip:focus-visible figure::after { opacity: 1; }
.clip-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.clip-meta > span:first-child { padding: .4rem .75rem .3rem; background: var(--paper) var(--paper-tex); color: var(--ink); font: 1.25rem/1 var(--hand); rotate: -2deg; }
.clip-play { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--paper); border-radius: 50%; font-size: .8rem; transition: background .25s, color .25s, border-color .25s; }
.clip:hover .clip-play { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@media (max-width: 900px) { .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .clip-grid { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
  .clip:nth-child(n) { margin-top: 0; }
}

/* ---------- 05 Gallery: prints taped to a wall; pinned horizontal strip (JS adds .hs), grid fallback ---------- */
.gallery { position: relative; background: radial-gradient(120% 80% at 50% 50%, transparent 40%, rgb(0 0 0 / .45)), var(--wall) var(--paper-tex); color: var(--paper); --tx: -820px; }
.gal-sticky { padding: 13vh var(--pad) 12vh; }
.gal-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
.gal-intro { grid-column: 1 / -1; }
.gal-hint { display: none; }
.gal-item { position: relative; display: block; padding: 7px 7px 28px; background: #f3eee3; box-shadow: 0 18px 30px -14px rgb(0 0 0 / .85); rotate: var(--r, 0deg); transition: rotate .4s var(--ease), scale .4s var(--ease); }
.gal-item.g0 { --r: -2deg; } .gal-item.g1 { --r: 1.8deg; } .gal-item.g2 { --r: -.8deg; }
.gal-item:hover, .gal-item:focus-visible { rotate: 0deg; scale: 1.03; z-index: 2; }
.gal-item::before { left: 50%; top: -12px; margin-left: -48px; rotate: calc(var(--r) * -2); }
.gal-item::after { content: attr(data-n); position: absolute; left: 10px; bottom: 5px; font: 1rem/1 var(--hand); color: var(--ink); }
.gal-ph { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #111; }
.gal-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.45) brightness(1.02); transition: filter .6s; }
.gal-item:hover img, .gal-item:focus-visible img { filter: none; }
.gal-item:hover .gal-ph::after, .gal-item:focus-visible .gal-ph::after { opacity: 0; }
.gal-ui { display: none; }
.gallery.hs .gal-sticky { position: sticky; top: 0; height: 100vh; padding: 0; overflow: clip; }
.gallery.hs .gal-track { display: flex; align-items: center; gap: 4vw; width: max-content; height: 100%; padding: var(--nav-h) 10vw calc(var(--mp-h) + 4rem) var(--pad); will-change: transform; }
.gallery.hs .gal-intro { flex: none; width: max-content; min-width: 34vw; margin: 0; }
.gallery.hs .gal-hint { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; font: 1.5rem/1 var(--hand); color: var(--paper); }
.gallery.hs .gal-hint span { color: var(--orange); animation: nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 50% { translate: .6rem 0; } }
.gallery.hs .gal-item { flex: none; }
.gallery.hs .gal-ph { height: 52vh; }
.gallery.hs .gal-item.g1 { align-self: flex-start; margin-top: 13vh; }
.gallery.hs .gal-item.g1 .gal-ph { height: 46vh; aspect-ratio: 4 / 5; }
.gallery.hs .gal-item.g2 { align-self: flex-end; margin-bottom: calc(var(--mp-h) + 9vh); }
.gallery.hs .gal-item.g2 .gal-ph { height: 36vh; aspect-ratio: 1; }
.gallery.hs .gal-ph img { scale: 1.25; }
.gallery.hs .gal-ui { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--mp-h) + 1.2rem); display: flex; align-items: center; gap: 1.2rem; font: .9rem/1 var(--type); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.gal-bar { flex: 1; height: 10px; background: rgb(232 225 207 / .12); }
.gal-bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, var(--orange) 6px 12px); transform: scaleX(0); transform-origin: left; }

/* ---------- Lightbox ---------- */
.lb { width: min(92vw, 1400px); max-width: none; max-height: none; padding: 0; border: 0; background: none; color: var(--paper); overflow: visible; }
.lb::backdrop { background: rgb(12 11 10 / .95); }
.lb[open] { animation: stamp-in .35s; }
.lb-body img { width: auto; max-height: 82vh; margin: auto; border: 8px solid #f3eee3; }
.lb-body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.lb button { position: absolute; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 400 1.8rem/1 var(--display); cursor: pointer; box-shadow: 3px 3px 0 var(--orange); transition: background .2s, translate .15s; }
.lb button:hover { background: var(--orange); }
.lb button:active { translate: 2px 2px; }
.lb-close { top: -3.8rem; right: 0; }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }
.lb-prev:active, .lb-next:active { translate: 2px calc(-50% + 2px); }
.lb-prev { left: .6rem; }
.lb-next { right: .6rem; }
.lb-count { position: absolute; top: -2.8rem; left: 0; font: .9rem/1 var(--type); letter-spacing: .2em; color: var(--mute-d); }

/* ---------- 06 Contact: safety-orange sheet ---------- */
.contact { padding: 13vh var(--pad) 13vh; background: var(--orange); color: var(--ink); --tx: -470px; }
.contact ::selection { background: var(--ink); color: var(--orange); }
.contact-list { display: grid; gap: 3rem; }
.contact dt { font: .95rem/1 var(--type); letter-spacing: .14em; text-transform: uppercase; }
.contact dd { margin-top: .5rem; font: 400 clamp(1.7rem, 6.2vw, 6.6rem)/1.08 var(--display); overflow-wrap: anywhere; }
.contact dd a { background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 .1em no-repeat; transition: background-size .45s var(--ease); }
.contact dd a:hover { background-size: 100% .1em; }

/* ---------- Footer ---------- */
.foot { padding: 12vh var(--pad) 1.6rem; background: var(--ink); overflow-x: clip; --tx: -90px; }
.foot-title { display: inline-block; margin-bottom: 2.2rem; font: 400 clamp(2.4rem, 5vw, 4.4rem)/1 var(--display); rotate: -1.5deg; }
.social { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.social li { rotate: var(--r); }
.social a { align-items: center; gap: .6rem; padding: .75rem 1.05rem .65rem; background: var(--paper) var(--paper-tex); color: var(--ink); font: 400 1.25rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.social li:nth-child(2) a { background: var(--orange); }
.social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.foot-mark { display: flex; justify-content: space-between; margin: 8vh -.02em 0; padding-bottom: .08em; pointer-events: none; font: 400 clamp(6rem, 30vw, 32rem)/.82 var(--display); color: transparent; -webkit-text-stroke: 2px rgb(232 225 207 / .24); user-select: none; }
.foot-mark span:nth-child(2) { -webkit-text-stroke-color: rgb(255 90 26 / .65); }
.foot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-top: 1.2rem; border-top: 2px dashed var(--line); font: .82rem/1 var(--type); letter-spacing: .14em; text-transform: uppercase; color: var(--mute-d); }
.foot-meta a:hover { color: var(--orange); }

/* ---------- Mini-player: a tape deck bolted to the bottom of the page ---------- */
.mp { position: fixed; z-index: 55; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 12px; width: min(780px, 100% - 20px); padding: 7px 14px 7px 7px; background: #0b0b0a; color: var(--paper); border: 2px solid rgb(232 225 207 / .85); box-shadow: 6px 6px 0 var(--orange); transition: translate .5s var(--ease), visibility .5s; }
html:not(.mp-shown) .mp { translate: -50% 170%; visibility: hidden; }
.mp-cover { flex: none; width: 54px; height: 54px; border: 2px solid var(--paper); rotate: -3deg; overflow: hidden; transition: rotate .3s var(--ease); }
.mp-cover:hover { rotate: 0deg; }
.mp-cover img { width: 100%; height: 100%; object-fit: cover; }
.mp-meta { flex: 1; min-width: 0; display: grid; }
.mp-line { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.mp-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 1.05rem/1.25 var(--display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.mp-time { flex: none; font: 700 .74rem/1 var(--mono); color: var(--mute-d); font-variant-numeric: tabular-nums; }
.mp-album { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: .74rem/1.35 var(--type); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-d); }
.mp-ctrl { flex: none; display: flex; align-items: center; gap: 6px; }
.mp-ctrl button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid transparent; background: none; color: var(--paper); cursor: pointer; transition: border-color .2s, translate .1s; }
.mp-ctrl button:hover { border-color: var(--paper); }
.mp-ctrl button:active { translate: 2px 2px; }
.mp-ctrl svg { width: 20px; height: 20px; fill: currentColor; }
.mp-ctrl .mp-play { width: 48px; height: 48px; border-color: var(--ink); background: var(--orange); color: var(--ink); box-shadow: 3px 3px 0 var(--paper); }
.mp-ctrl .mp-play:hover { border-color: var(--ink); background: var(--paper); }
.mp-play .i-pause, .mp.on .mp-play .i-play { display: none; }
.mp.on .mp-play .i-pause { display: block; }
.mp-viz { flex: none; width: 76px; height: 36px; }
@media (max-width: 560px) {
  .mp { gap: 8px; padding: 5px 8px 5px 5px; box-shadow: 4px 4px 0 var(--orange); }
  .mp-cover { width: 44px; height: 44px; }
  .mp-time { display: none; }
  .mp-ctrl { gap: 0; }
  .mp-ctrl button { width: 36px; height: 36px; }
  .mp-ctrl .mp-play { width: 44px; height: 44px; margin: 0 2px; }
  .mp-viz { width: 26px; height: 30px; }
}

/* ---------- Phones: compact bar (play + next, big targets) that opens a full-screen player sheet ---------- */
.mp-sheet { display: none; }
@media (max-width: 640px) {
  .mp { cursor: pointer; padding-right: 6px; }
  .mp .mp-prev, .mp .mp-time, .mp .mp-viz { display: none; }
  .mp-cover { width: 50px; height: 50px; }
  .mp-ctrl { gap: 4px; }
  .mp-ctrl button { width: 48px; height: 48px; }
  .mp-ctrl .mp-play { width: 52px; height: 52px; }
  .mp-ctrl svg { width: 24px; height: 24px; }
  .mp .mp-seek { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 3px; pointer-events: none; }
  .mp .mp-seek::-webkit-slider-runnable-track { height: 3px; }
  .mp .mp-seek::-moz-range-track { height: 3px; }
  .mp .mp-seek::-webkit-slider-thumb { width: 0; height: 0; margin: 0; border: 0; }
  .mp .mp-seek::-moz-range-thumb { width: 0; height: 0; border: 0; }

  .mp-sheet[open] { display: flex; }
  .mp-sheet { position: fixed; inset: 0; flex-direction: column; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; background: var(--ink) var(--paper-tex); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
  .mp-sheet[open] { animation: sheet-up .4s var(--ease); }
  .mp-sheet::backdrop { background: rgb(0 0 0 / .6); }
  html:has(.mp-sheet[open]) { overflow: hidden; }
  .ms-grip { position: sticky; top: 0; z-index: 1; display: grid; place-items: center; padding-top: env(safe-area-inset-top); }
  .ms-close { width: 72px; height: 44px; padding: 0; border: 0; background: none; color: var(--paper); cursor: pointer; }
  .ms-close svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .ms-body { display: grid; padding: 4px 24px 32px; }
  .ms-cover { justify-self: center; width: min(78vw, 40vh); margin: 6px 0 26px; padding: 8px 8px 26px; background: #f3eee3; rotate: -2deg; box-shadow: 0 24px 40px -18px #000; transition: scale .45s var(--ease); }
  .mp-sheet:not(.on) .ms-cover { scale: .88; }
  .ms-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .ms-title { margin: 0; font: 400 1.9rem/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; }
  .ms-album { margin: .35rem 0 1rem; font: .8rem/1.3 var(--type); letter-spacing: .12em; text-transform: uppercase; color: var(--mute-d); }
  .ms-seek { height: 30px; }
  .ms-times { display: flex; justify-content: space-between; margin: 0; font: 700 .78rem/1 var(--mono); color: var(--mute-d); font-variant-numeric: tabular-nums; }
  .ms-ctrl { display: flex; justify-content: center; align-items: center; gap: 26px; margin: 16px 0 28px; }
  .ms-ctrl button { display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; background: none; color: var(--paper); cursor: pointer; }
  .ms-ctrl svg { width: 34px; height: 34px; fill: currentColor; }
  .ms-ctrl .ms-play { width: 84px; height: 84px; border: 3px solid var(--ink); background: var(--orange); color: var(--ink); box-shadow: 5px 5px 0 var(--paper); }
  .ms-ctrl .ms-play:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--paper); }
  .ms-play .i-pause, .mp-sheet.on .ms-play .i-play { display: none; }
  .mp-sheet.on .ms-play .i-pause { display: block; }
  .ms-tracks { margin: 0 0 1.6rem; padding: 0; list-style: none; border-top: 2px dashed rgb(232 225 207 / .3); }
  .ms-tracks button { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-height: 50px; padding: .6rem 0; border: 0; border-bottom: 1px solid rgb(232 225 207 / .12); background: none; color: var(--paper); font: 1rem/1.3 var(--mono); text-align: left; cursor: pointer; }
  .ms-tracks button span:last-child { flex: none; font-size: .85rem; color: var(--mute-d); }
  .ms-tracks .current { color: var(--orange); font-weight: 700; }
  .ms-link { justify-self: start; padding: .8rem 1.1rem .7rem; background: var(--orange); color: var(--ink); font: 700 .85rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; rotate: -2deg; box-shadow: 3px 3px 0 var(--paper); }
}
@keyframes sheet-up { from { translate: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .mp-sheet[open] { animation: none; } }

/* Seek bars (album player + mini-player): tape counter look */
.pl-seek, .mp-seek { --p: 0%; width: 100%; height: 18px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pl-seek { flex: 1; width: auto; }
.pl-seek::-webkit-slider-runnable-track, .mp-seek::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(var(--orange), var(--orange)) 0 / var(--p) 100% no-repeat, repeating-linear-gradient(90deg, rgb(232 225 207 / .32) 0 4px, transparent 4px 7px); }
.pl-seek::-moz-range-track, .mp-seek::-moz-range-track { height: 6px; background: linear-gradient(var(--orange), var(--orange)) 0 / var(--p) 100% no-repeat, repeating-linear-gradient(90deg, rgb(232 225 207 / .32) 0 4px, transparent 4px 7px); }
.pl-seek::-webkit-slider-thumb, .mp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px; margin-top: -6px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); }
.pl-seek::-moz-range-thumb, .mp-seek::-moz-range-thumb { width: 8px; height: 16px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); }

/* ---------- Album page ---------- */
.alb { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: start; min-height: 100vh; padding: calc(var(--nav-h) + 8vh) var(--pad) 14vh; overflow-x: clip; isolation: isolate; background: var(--ink); }
.alb::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cover) center / cover; filter: grayscale(1) contrast(1.9) brightness(.6); opacity: .2; }
.alb::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgb(0 0 0 / .6) 0 1px, transparent 1.6px) 0 0 / 5px 5px, linear-gradient(180deg, rgb(18 17 16 / .4), var(--ink) 95%); }
.alb-art { --dir: 1; position: sticky; top: calc(var(--nav-h) + 6vh); width: 74%; }
.alb-sleeve { position: relative; z-index: 1; }
.alb-sleeve::before { left: -30px; top: 6px; rotate: -38deg; }
.alb-cover { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 40px 70px -30px #000, 0 0 0 1px rgb(255 255 255 / .06); }
.disc { position: absolute; inset: 3%; translate: 14% 0; transition: translate 1.3s var(--ease); }
.is-playing .disc { translate: 40% 0; }
.disc-spin { position: absolute; inset: 0; border-radius: 50%; background:
  var(--dust) center / 100% 100%,
  radial-gradient(circle, transparent 0 16.5%, rgb(255 255 255 / .07) 17%, transparent 18%),
  repeating-radial-gradient(circle, #141312 0 1px, #2b2926 1.5px 3px), #111; box-shadow: 0 30px 60px -15px #000, inset 0 0 0 1px rgb(255 255 255 / .12); }
.disc-spin::before { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 5%, transparent 6%), var(--label) center / cover; box-shadow: 0 0 0 3px #0a0a0a; filter: sepia(.25) contrast(1.05); }
.disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .1) 13%, transparent 20% 50%, rgb(255 255 255 / .08) 63%, transparent 70%); pointer-events: none; }
.alb-kicker { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; font: .88rem/1.2 var(--type); letter-spacing: .12em; text-transform: uppercase; color: var(--mute-d); }
.alb-kicker a:hover { color: var(--orange); }
.alb-kicker span { color: var(--orange); }
.alb-title { margin: 1.2rem 0 .7rem; font: 400 clamp(3.2rem, 7vw, 7.6rem)/.9 var(--display); text-transform: uppercase; overflow-wrap: anywhere; animation: stamp-in .45s .15s both; }
.alb-meta { display: inline-block; font: 1.6rem/1 var(--hand); color: var(--orange); rotate: -2deg; }
.alb-links { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.6rem 0 2.4rem; }
.alb-links .sticker { padding: .78rem 1rem .66rem; background: var(--paper) var(--paper-tex); color: var(--ink); font: 400 1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; rotate: var(--r); }

.player { padding: 1.3rem 1.3rem 1.6rem; background: #0b0b0a; border: 2px solid rgb(232 225 207 / .25); box-shadow: 8px 8px 0 var(--orange); }
.pl-head { display: flex; align-items: center; gap: .7rem; }
.pl-btn { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; padding: 0; border: 2px solid rgb(232 225 207 / .4); background: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, translate .1s; }
.pl-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.pl-btn:hover { border-color: var(--orange); color: var(--orange); }
.pl-btn:active { translate: 2px 2px; }
.pl-play { width: 4.2rem; height: 4.2rem; border-color: var(--ink); background: var(--orange); color: var(--ink); box-shadow: 4px 4px 0 var(--paper); }
.pl-play:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.pl-play svg { width: 1.6rem; height: 1.6rem; }
.pl-play .i-pause, .playing .pl-play .i-play { display: none; }
.playing .pl-play .i-pause { display: block; }
.pl-now { flex: 1; min-width: 0; padding: 0 .4rem; }
.pl-label { display: block; font: .75rem/1 var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--mute-d); }
.pl-title { display: block; margin-top: .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 1.7rem/1.15 var(--display); text-transform: uppercase; }
.pl-title:hover { color: var(--orange); }
.pl-seek-row { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 1.8rem; font: 700 .8rem/1 var(--mono); color: var(--mute-d); font-variant-numeric: tabular-nums; }
/* Setlist: marker on paper, taped to the stage floor */
.setlist { position: relative; padding: 1.7rem 1.4rem 1.2rem 2.2rem; background: var(--paper) var(--paper-tex); color: var(--ink); rotate: -.8deg; box-shadow: 0 20px 30px -16px rgb(0 0 0 / .8); }
.setlist::before, .setlist::after { content: ''; position: absolute; top: -10px; width: 90px; height: 26px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .1) 0 2px, transparent 2px 5px), linear-gradient(#b8b6ae, #8b8982); clip-path: var(--tape-clip); }
.setlist::before { left: 12%; rotate: -4deg; }
.setlist::after { right: 10%; rotate: 5deg; }
.setlist-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .5rem; padding-bottom: .6rem; border-bottom: 3px solid var(--ink); font: 400 1rem/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tracks { margin: 0; padding: 0; list-style: none; }
.tracks button { position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; padding: .42rem .2rem; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.tracks button::before { content: '→'; position: absolute; left: -1.5rem; font: 1.3rem/1 var(--hand); color: var(--orange-ink); opacity: 0; translate: -.4rem 0; transition: opacity .25s, translate .3s var(--ease); }
.tracks button.current::before { opacity: 1; translate: 0 0; }
.t-num { width: 1.6rem; font: 700 .8rem/1 var(--mono); color: var(--mute); }
.t-title { flex: 1; font: 1.4rem/1.2 var(--hand); text-decoration: underline wavy transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: translate .3s var(--ease), text-decoration-color .3s; }
.tracks button:hover .t-title { translate: .3rem 0; }
.tracks button.current .t-title { text-decoration-color: var(--orange-ink); }
.t-dur { font: 700 .78rem/1 var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.t-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; opacity: 0; transition: opacity .3s; }
.t-eq i { width: 3px; height: 100%; background: var(--ink); transform-origin: bottom; transform: scaleY(.3); }
.playing .current .t-eq { opacity: 1; }
.playing .current .t-eq i { animation: eq .9s ease-in-out infinite alternate; }
.playing .current .t-eq i:nth-child(2) { animation-duration: .6s; }
.playing .current .t-eq i:nth-child(3) { animation-duration: 1.1s; }
@keyframes eq { 0% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }
@media (max-width: 860px) {
  .alb { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: calc(var(--nav-h) + 2.5rem); }
  .alb-art { position: relative; top: 0; width: 70%; }
}
@media (max-width: 420px) {
  .player { padding: 1rem .9rem 1.3rem; box-shadow: 5px 5px 0 var(--orange); }
  .pl-btn { width: 2.5rem; height: 2.5rem; }
  .pl-play { width: 3.5rem; height: 3.5rem; }
  .pl-title { font-size: 1.35rem; }
  .setlist { padding-left: 1.9rem; padding-right: 1rem; }
  .t-title { font-size: 1.2rem; }
}

/* Lyrics: typewritten on paper; sticky index follows scroll */
.lyr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6vw; padding: 13vh var(--pad) 8vh; --tx: -300px; }
.lyr-side { position: sticky; top: calc(var(--nav-h) + 3vh); align-self: start; max-height: calc(100vh - var(--nav-h) - 6vh); overflow: auto; scrollbar-width: none; }
.lyr-side .sec-head { margin-bottom: 2rem; }
.lyr-nav ol { margin: 0; padding: 0; list-style: none; }
.lyr-nav a { display: flex; align-items: baseline; gap: .8rem; padding: .3rem 0; font: 400 1.2rem/1.2 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--mute); transition: color .3s, translate .4s var(--ease); }
.lyr-nav a i { font: 700 .72rem/1 var(--mono); font-style: normal; }
.lyr-nav a:hover { color: var(--ink); }
.lyr-nav a.active { color: var(--ink); translate: .6rem 0; }
.lyr-nav a.active i { color: var(--orange-ink); }
.lyr-nav a.playing::after { content: '♪'; color: var(--orange-ink); }
.song { padding-bottom: 16vh; }
.song-num { font: 1.5rem/1 var(--hand); color: var(--orange-ink); }
.song-num span { color: var(--mute); font-size: .8em; }
.song-title { margin: .4rem 0 1.3rem; font: 400 clamp(2.6rem, 5.6vw, 6rem)/.92 var(--display); text-transform: uppercase; }
.song-play { display: inline-flex; gap: .6rem; align-items: center; margin-bottom: 2.2rem; padding: .62rem .95rem .52rem; border: 2px solid var(--ink); background: none; font: 700 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: translate .12s, box-shadow .12s, background .2s; }
.song-play:hover { background: var(--orange); }
.song-play:active { translate: 3px 3px; box-shadow: none; }
.song-text { max-width: 34em; white-space: pre-line; font: 400 clamp(1.05rem, 1.3vw, 1.22rem)/1.7 var(--type); color: #26231f; }
@media (max-width: 860px) {
  .lyr { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lyr-side { display: contents; }
  .lyr-nav { position: sticky; top: var(--nav-h); z-index: 5; margin: 0 calc(var(--pad) * -1) 3rem; padding: 1rem var(--pad) .7rem; overflow-x: auto; background: var(--paper) var(--paper-tex); border-block: 2px solid var(--ink); scrollbar-width: none; }
  .lyr-nav ol { display: flex; gap: 1.4rem; width: max-content; }
  .lyr-nav a { font-size: 1.05rem; white-space: nowrap; }
  .lyr-nav a.active { translate: 0 0; }
  .song { padding-bottom: 12vh; }
}

.more { padding: 12vh var(--pad) 14vh; background: var(--ink); --tx: -700px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 3rem 3vw; }
.more-item { --dir: 1; display: block; }
.more-item .sleeve { width: 72%; margin-bottom: 1.3rem; }
.more-year { display: block; font: 1.3rem/1 var(--hand); color: var(--orange); }
.more-title { display: block; margin-top: .35rem; font: 400 1.9rem/1 var(--display); text-transform: uppercase; }

/* ---------- Scroll-driven extras (progressive; purely decorative) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-inner { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-out { to { translate: 0 18vh; opacity: .15; } }
    .plx img { animation: plx linear both; animation-timeline: view(); }
    @keyframes plx { from { translate: 0 -6%; } to { translate: 0 6%; } }
    .journey { view-timeline: --journey block; }
    .journey::before { animation: draw-y linear both; animation-timeline: --journey; animation-range: cover 45vh cover calc(100% - 45vh); }
    @keyframes draw-y { from { transform: scaleY(0); } }
    .foot-mark span { animation: mark-up linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .foot-mark span:nth-child(2) { animation-range: entry 10% entry 80%; }
    .foot-mark span:nth-child(3) { animation-range: entry 20% entry 90%; }
    .foot-mark span:nth-child(4) { animation-range: entry 30% entry 100%; }
    @keyframes mark-up { from { translate: 0 40%; rotate: -6deg; opacity: 0; } }
  }
}

/* ---------- Reduced motion: no non-essential motion, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ready { scroll-behavior: auto; }
  .loader { display: none; }
  .hero-title span, .hero-gig, .hero-top, .hero-foot, .hero-main, .alb-title, .mp { animation: none; opacity: 1; }
  .grain::before, .band-track, .vhs-band, .vhs-osd, .hero-poster, .hero-video, .gal-hint span, .reel, .vinyl, .clip figure { animation: none !important; }
  .hero-video, .vhs-band { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Track loading: the active play buttons swap their icon for a spinning ring ---------- */
.mp-play, .ms-play, .pl-play, .rec-play, .hero-play { position: relative; }
.mp-loading :is(.mp-play, .ms-play, .playing .pl-play, .rec-play.on, .hero-play.on) svg { opacity: 0; }
.mp-loading :is(.mp-play, .ms-play, .playing .pl-play, .rec-play.on, .hero-play.on)::after { content: ''; position: absolute; inset: 27%; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.mp-loading .mp .mp-title { animation: blink 1s steps(1) infinite; }