:root {
  --ink: #050505;
  --ink-2: #0e0e0e;
  --bone: #e9e6df;
  --dim: #8a8780;
  --line: #2a2a2a;
  --red: #d3262a;
  --chrome: linear-gradient(180deg, #fff 0%, #d9d9d9 22%, #6f6f6f 48%, #f4f4f4 52%, #9a9a9a 72%, #ffffff 100%);
  --gothic: "Pirata One", "UnifrakturMaguntia", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  overflow-x: hidden;
  cursor: none;
}
body.locked { overflow: hidden; }
a { color: inherit; }
a, button { cursor: none; }
::selection { background: var(--red); color: #000; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.gothic { font-family: var(--gothic); font-weight: 400; letter-spacing: .01em; }
.chrome {
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 18px rgba(255,255,255,.08));
}

/* ---------- overlays ---------- */
#grain {
  position: fixed; inset: -100px; pointer-events: none; z-index: 90;
  opacity: .07; mix-blend-mode: screen;
  background-size: 180px 180px;
  animation: grain .6s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-37px, 21px); }
  40% { transform: translate(52px, -44px); } 60% { transform: translate(-18px, 63px); }
  80% { transform: translate(71px, 12px); } 100% { transform: translate(0, 0); }
}
.scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 91;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
}
#cursor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  font-size: 22px; line-height: 1; color: var(--bone);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: font-size .15s, color .15s;
}
#cursor.hot { font-size: 34px; color: var(--red); mix-blend-mode: normal; }
@media (hover: none) { body, a, button { cursor: auto; } #cursor { display: none; } }

/* ---------- gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 150;
  background: #000;
  display: grid; place-items: center; align-content: center; gap: 28px;
  transition: opacity .6s ease, visibility .6s;
}
#gate.gone { opacity: 0; visibility: hidden; }
.gate-glitch { position: relative; width: min(420px, 70vw); animation: flicker 3.2s infinite steps(1); }
.gate-mark { width: 100%; animation: jolt 2.4s infinite steps(1); }
.gl { position: absolute; inset: 0; width: 100%; mix-blend-mode: screen; pointer-events: none; opacity: .9; }
.gl-r { filter: brightness(0) invert(17%) sepia(95%) saturate(6000%) hue-rotate(352deg) brightness(.95); animation: slice-a 1.7s infinite steps(1); }
.gl-c { animation: slice-b 2.1s infinite steps(1); } /* white slices */
@keyframes jolt {
  0%, 100% { transform: none; filter: none; }
  8% { transform: translateX(-6px) skewX(-8deg); }
  9% { transform: translateX(7px) skewX(6deg); filter: contrast(2) brightness(1.5); }
  10% { transform: none; filter: none; }
  47% { transform: translateY(3px) scaleY(.96); filter: invert(1); }
  48% { transform: none; filter: none; }
  83% { transform: translateX(5px); }
  85% { transform: translateX(-4px) skewX(10deg); }
  86% { transform: none; }
}
@keyframes slice-a {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  6% { clip-path: inset(12% 0 68% 0); transform: translateX(-14px); }
  12% { clip-path: inset(55% 0 20% 0); transform: translateX(10px); }
  18% { clip-path: inset(0 0 100% 0); }
  52% { clip-path: inset(30% 0 40% 0); transform: translateX(-18px); }
  58% { clip-path: inset(80% 0 4% 0); transform: translateX(12px); }
  64% { clip-path: inset(0 0 100% 0); }
  90% { clip-path: inset(5% 0 85% 0); transform: translateX(16px); }
  95% { clip-path: inset(0 0 100% 0); }
}
@keyframes slice-b {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  10% { clip-path: inset(40% 0 45% 0); transform: translateX(14px); }
  16% { clip-path: inset(0 0 100% 0); }
  38% { clip-path: inset(70% 0 10% 0); transform: translateX(-12px); }
  44% { clip-path: inset(18% 0 62% 0); transform: translateX(18px); }
  50% { clip-path: inset(0 0 100% 0); }
  76% { clip-path: inset(48% 0 30% 0); transform: translateX(-16px); }
  82% { clip-path: inset(0 0 100% 0); }
}
#enter {
  background: none; border: 0; color: var(--bone);
  font: 600 13px/1 var(--mono); letter-spacing: .4em;
  padding: 12px 18px;
}
#enter:hover, #enter:focus-visible { color: #000; background: var(--bone); outline: none; }
.gate-fine { font-size: 10px; letter-spacing: .3em; color: #444; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: .2; } 42% { opacity: 1; }
  77% { opacity: .5; transform: translateX(2px); } 78% { opacity: 1; transform: none; }
}

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
  mix-blend-mode: difference;
}
.bar-mark img { height: 26px; width: auto; }
.bar nav { display: flex; gap: clamp(12px, 3vw, 36px); }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: line-through; }
.rec { color: var(--red); animation: blink 1.2s infinite steps(1); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  padding: 80px 16px 120px;
}
.hero-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; opacity: .5;
  filter: contrast(1.15) saturate(1.1);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(5,5,5,.25) 0%, rgba(5,5,5,.85) 85%),
              linear-gradient(180deg, transparent 70%, var(--ink) 100%);
}
.snd {
  top: 64px; left: 50%; transform: translateX(-50%);
  background: none; border: 1px solid var(--dim); padding: 6px 10px;
  font-family: var(--mono);
}
.snd:hover, .snd.on { color: #000; background: var(--bone); border-color: var(--bone); }
.globe {
  width: min(1000px, 92vw);
  filter: drop-shadow(0 0 40px rgba(211,38,42,.18));
  animation: drift 9s ease-in-out infinite;
  position: relative; z-index: 2;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-10px) rotate(.6deg); }
}
.cutout {
  position: absolute; z-index: 3;
  right: clamp(8px, 6vw, 120px); bottom: clamp(70px, 14vh, 160px);
  width: clamp(130px, 18vw, 250px);
  transform: rotate(4deg);
  filter: drop-shadow(6px 10px 0 rgba(0,0,0,.6));
}
.cutout figcaption {
  margin-top: 6px; font: italic 15px var(--serif); color: var(--dim);
  transform: rotate(-3deg);
}
.tape {
  position: absolute; z-index: 2; width: 70px; height: 22px;
  background: rgba(235,230,215,.55);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.t1 { top: -8px; left: -14px; transform: rotate(-32deg); }
.t2 { top: -6px; right: -18px; transform: rotate(28deg); }
.hero-meta {
  position: absolute; z-index: 4;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.tl { top: 64px; left: 20px; } .tr { top: 64px; right: 20px; text-align: right; }
.bl { bottom: 24px; left: 20px; } .br { bottom: 24px; right: 20px; }

.strip {
  position: absolute; left: -10%; right: -10%; z-index: 1;
  pointer-events: none;
  background: var(--bone); color: #000;
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid #000; border-bottom: 1px solid #000;
}
.s1 { top: 22%; transform: rotate(-7deg); }
.s2 { bottom: 20%; transform: rotate(5deg); background: var(--red); }
.strip-track {
  display: inline-block; padding: 4px 0;
  font: 400 26px/1.1 var(--gothic);
  animation: marquee 40s linear infinite;
}
.s2 .strip-track { animation-direction: reverse; animation-duration: 55s; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- blocks ---------- */
.block {
  position: relative;
  padding: clamp(80px, 12vw, 160px) clamp(16px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.block-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px;
  margin-bottom: 48px;
}
.block-head h2 { font-size: clamp(64px, 12vw, 180px); line-height: .85; }
.block-head .mono { font-size: 12px; }

/* sets */
.sets { list-style: none; border-top: 1px solid var(--line); }
.sets li {
  display: grid; grid-template-columns: 56px 1.4fr 1fr 90px 44px; align-items: center; gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid var(--line);
  transition: background .15s, padding .2s;
}
.sets li:hover { background: var(--bone); color: #000; padding-left: 16px; }
.sets li:hover .m { color: #333; }
.sets .n { color: var(--red); font-weight: 600; }
.sets .t { font: italic 26px/1.1 var(--serif); }
.sets .m { color: var(--dim); font-size: 12px; }
.sets .d { text-align: right; font-size: 12px; }
.play {
  width: 36px; height: 36px; border: 1px solid currentColor; background: none; color: inherit;
  font-size: 12px; border-radius: 50%;
}
.sets li.on { background: var(--red); color: #000; }
.sets li.on .n, .sets li.on .m { color: #000; }
.deck {
  margin-top: 28px; display: grid; gap: 10px;
  border: 1px solid var(--line); padding: 14px; background: var(--ink-2);
}
.deck-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.deck-label b { color: var(--bone); font-weight: 600; }
#scope { width: 100%; height: 80px; display: block; }

/* dates */
.dates { width: 100%; border-collapse: collapse; }
.dates td { padding: 20px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dates td:first-child { width: 120px; color: var(--red); }
.dates .city { font-size: clamp(34px, 6vw, 72px); line-height: 1; }
.dates td:last-child { text-align: right; width: 120px; }
.tix {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--bone);
  text-decoration: none; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
a.tix:hover { background: var(--bone); color: #000; }
.dates tr:hover .city { color: var(--red); }
.gone .city, .gone .mono { text-decoration: line-through; text-decoration-color: var(--red); opacity: .45; }
.gone .tix { border-color: var(--red); color: var(--red); }

/* archive desktop */
.desk {
  position: relative; height: clamp(680px, 85vh, 800px);
  border: 1px dashed var(--line);
  background:
    radial-gradient(circle at 1px 1px, #1d1d1d 1px, transparent 0) 0 0 / 22px 22px;
}
.win {
  position: absolute; background: #000;
  border: 1px solid #bdbdbd;
  box-shadow: 6px 6px 0 rgba(255,255,255,.06);
  touch-action: none;
}
.win.closed { display: none; }
.win-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; font-size: 11px; letter-spacing: .08em;
  background: var(--chrome); color: #000; user-select: none;
}
.win-bar i { font-style: normal; padding: 0 4px; }
.win-bar i:hover { background: var(--red); color: #fff; }
.win-body { padding: 14px; font-size: 13px; }
.win-body p + p { margin-top: 10px; }
.win-body.img { padding: 10px; background: #d7d5cf; }
.win-body.img.dark { background: #000; }
.win-body img { pointer-events: none; user-select: none; }
.win-body.vid { padding: 0; background: #000; }
.win-body.vid video { display: block; width: 100%; height: auto; background: #000; }
.desk-reset {
  position: absolute; right: 10px; bottom: 10px;
  background: none; border: 1px solid var(--line); color: var(--dim);
  font: 11px var(--mono); padding: 6px 10px;
}

/* contact */
.contact { text-align: center; }
.contact .huge { font-size: clamp(80px, 18vw, 280px); line-height: .85; margin-bottom: 32px; }
.contact p { font-size: 15px; }
.contact a { text-decoration-color: var(--red); text-underline-offset: 4px; }
.links { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.links a {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--line);
  text-decoration: none; text-transform: uppercase; letter-spacing: .2em; font-size: 11px;
}
.links a:hover { border-color: var(--bone); background: var(--bone); color: #000; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 40px 0 24px; text-align: center; overflow: hidden; }
.foot-marks {
  height: 70px; margin-bottom: 20px; opacity: .14;
  background: url(assets/mark.png) repeat-x center / auto 60px;
}
footer p { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }

/* merch */
.merch-intro { font: italic 28px/1.2 var(--serif); max-width: 22em; margin-bottom: 40px; }
.merch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.item { min-width: 0; }
.shot {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line); background: #121212;
}
.shot.light { background: #efeeeb; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.shot .b { opacity: 0; }
.shot:hover .b, .shot:focus-visible .b, .shot.flipped .b { opacity: 1; }
.shot:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.tag {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: var(--red); color: #000; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px;
}
.flip {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: #efeeeb; color: #111; padding: 3px 7px; border: 1px solid #111;
}
.item-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; margin-top: 14px; }
.item-row .n { color: var(--red); font-weight: 600; font-size: 12px; }
.item-row .t { font: italic 26px/1.1 var(--serif); font-weight: 400; min-width: 0; }
.item-row .price { font-size: 15px; }
.spec { font-size: 12px; margin-top: 8px; }
.merch-foot { margin-top: 48px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.merch-foot a { text-decoration-color: var(--red); text-underline-offset: 4px; }
@media (max-width: 1000px) { .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .merch-grid { gap: 32px 14px; }
  .merch-intro { font-size: 22px; }
  .item-row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .item-row .n { grid-column: 1 / -1; }
  .item-row .t { font-size: 20px; }
  .spec { font-size: 11px; }
  .flip { top: auto; bottom: 8px; }
}

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .bar { padding: 10px 16px; font-size: 9px; letter-spacing: .06em; gap: 8px; }
  .bar nav { gap: 9px; }
  .bar nav a { white-space: nowrap; }
  .bar-mark img { height: 22px; }
  .bar-right { display: none; }
  .sets li { grid-template-columns: 40px 1fr 40px; }
  .sets .m, .sets .d { display: none; }
  .sets .t { font-size: 21px; }
  .sets li.soon .m { display: block; grid-column: 2; grid-row: 2; margin-top: -10px; }
  .sets li.soon .n, .sets li.soon .play { grid-row: 1 / span 2; }
  .sets li.soon .t { grid-row: 1; }
  .dates td:nth-child(3) { display: none; }
  .dates td:first-child { width: auto; font-size: 11px; }
  .dates td:last-child { width: auto; }
  .cutout { bottom: 90px; }
  .desk { height: 1800px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}