:root {
  --acid: #e8ff00;
  --olive: #1e1e00;
  --olive-2: #2a2a06;
  --mid: #505014;
  --paper: #eaeaea;
  --ink: #141414;
  --line: rgba(232, 255, 0, 0.22);
  --display: "Oswald", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--display);
  background: var(--olive);
  color: var(--paper);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.01em;
}
::selection { background: var(--acid); color: var(--ink); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
.wrap { width: min(1200px, calc(100% - 36px)); margin: 0 auto; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--acid); color: var(--ink);
  padding: 8px 12px; font: 600 12px/1 var(--display);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.skip:focus { top: 12px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--olive);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: min(1200px, calc(100% - 24px));
  margin: 0 auto;
  min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 20px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acid);
}
.mark {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1.5px solid var(--acid);
  transform: rotate(45deg);
}
.mark span {
  transform: rotate(-45deg);
  font-size: 10px; font-weight: 700; letter-spacing: 0;
}
.nav-links { display: none; gap: 20px; }
.nav-links a {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(234, 234, 234, 0.62);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--acid); }
.nav-end { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  display: flex; gap: 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.lang-switch a { color: rgba(234, 234, 234, 0.5); }
.lang-switch a[aria-current="true"] { color: var(--acid); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 0;
  font: 600 12px/1 var(--display); letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
}
.btn-acid { background: var(--acid); color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--acid);
  border: 1px solid var(--acid);
}
.btn-ghost:hover { background: var(--acid); color: var(--ink); }
.btn-ink, .btn-gold { background: var(--acid); color: var(--ink); }
.btn-line { background: transparent; color: inherit; border: 1px solid currentColor; }

.menu-toggle {
  width: 44px; height: 44px; background: none; border: 0; color: var(--acid);
}
.menu-toggle span,
.menu-toggle span:before,
.menu-toggle span:after {
  display: block; width: 18px; height: 1.5px; background: currentColor; position: relative;
}
.menu-toggle span:before,
.menu-toggle span:after { content: ""; position: absolute; left: 0; }
.menu-toggle span:before { top: -6px; }
.menu-toggle span:after { top: 6px; }
.mobile {
  display: none; flex-direction: column; gap: 8px;
  position: fixed; inset: 65px 0 0 0;
  background: var(--olive); padding: 28px; z-index: 40;
}
.mobile.is-open { display: flex; }
.mobile a {
  font-size: 40px; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1;
}

.hero {
  position: relative;
  min-height: calc(100svh - 64px);
  display: grid; align-items: end;
  overflow: hidden;
  background: var(--ink);
}
.hero-media,
.hero img,
.hero video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.15);
}
.hero video[hidden] { display: none; }
.hero:after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(30, 30, 0, 0.15), rgba(30, 30, 0, 0.78)),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.12) 3px);
  pointer-events: none;
}
.hero-copy {
  position: relative; z-index: 1;
  padding: 48px 0 56px;
}
.hero-copy .kicker {
  margin: 0 0 8px;
  color: var(--acid);
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  font-size: clamp(64px, 16vw, 168px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--acid);
}
.hero h1 span { display: block; }

.vinyl-band {
  background: var(--acid);
  color: var(--ink);
  overflow: hidden;
}
.vinyl-inner {
  display: grid; gap: 24px; align-items: center;
  padding: 36px 0;
}
.vinyl {
  width: min(280px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f4f4f4 0 14%, #1e1e00 15% 17%, #141414 18% 100%);
  box-shadow: inset 0 0 0 18px #111, 0 0 0 1px #111;
  position: relative;
  animation: spin 14s linear infinite;
}
.vinyl:before {
  content: "";
  position: absolute; inset: 22%;
  border-radius: 50%;
  border: 1px dashed rgba(232, 255, 0, 0.35);
}
.vinyl-band h2 {
  margin: 0 0 8px;
  font-size: clamp(36px, 7vw, 72px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.vinyl-band p { margin: 0; max-width: 36rem; font-size: 18px; }

section { padding: 72px 0; }
.page-head { padding-top: 48px; }
.section-label {
  margin: 0 0 6px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--acid);
}
.display {
  margin: 0 0 28px;
  font-size: clamp(48px, 10vw, 108px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--acid);
}

.tracklist { display: grid; }
.track {
  display: grid;
  grid-template-columns: 28px 42px 1fr auto;
  gap: 12px; align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: var(--paper);
}
.track:last-child { border-bottom: 1px solid var(--line); }
.track:hover { color: var(--acid); }
.play {
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}
.track-no { font-size: 13px; letter-spacing: 0.12em; color: var(--mid); }
.track h3 { margin: 0; font-size: 22px; font-weight: 500; text-transform: uppercase; }
.track p { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); }
.track > div { grid-column: 3 / -1; }
.track > div p { margin-top: 4px; text-transform: none; letter-spacing: 0.02em; }
.track:hover p { color: var(--acid); }

.epk {
  display: grid; gap: 36px;
  position: relative;
}
.speakers {
  display: none;
}
.speaker {
  width: 100%;
  max-width: 220px;
  opacity: 0.85;
}
.highlights { display: grid; gap: 8px; margin: 0 0 22px; }
.highlights a,
.highlights span {
  font-size: 15px; letter-spacing: 0.04em;
  color: rgba(234, 234, 234, 0.55);
}
.highlights .on { color: var(--acid); }
.lede { max-width: 38rem; color: rgba(234, 234, 234, 0.78); font-size: 17px; }
.arrow {
  display: inline-block;
  margin: 18px 0;
  font-size: 42px; line-height: 1; color: var(--paper);
}
.knobs { display: flex; gap: 12px; margin-top: 22px; }
.knob {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--paper);
  position: relative;
}
.knob:after {
  content: "";
  position: absolute; left: 50%; top: 8px;
  width: 2px; height: 16px; background: var(--ink);
  transform-origin: bottom center;
}
.knob:nth-child(1):after { transform: rotate(-20deg); }
.knob:nth-child(2):after { transform: rotate(35deg); }
.knob:nth-child(3):after { transform: rotate(-55deg); }
.knob:nth-child(4):after { transform: rotate(80deg); }
.press { display: grid; gap: 18px; font-size: 13px; letter-spacing: 0.03em; }
.press h3 {
  margin: 0 0 6px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acid);
}
.press p, .press li { margin: 0; color: rgba(234, 234, 234, 0.7); }
.press ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.posters {
  display: grid; gap: 14px;
}
.poster {
  position: relative; min-height: 420px;
  overflow: hidden; background: #111;
  color: var(--acid);
}
.poster img {
  width: 100%; height: 100%; min-height: 420px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
}
.poster:after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(20,20,0,.72));
}
.poster-copy {
  position: absolute; inset: auto 16px 18px 16px; z-index: 1;
}
.poster h3 {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 0.88;
  text-transform: uppercase;
}
.poster p { margin: 8px 0 0; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; }

.card-split {
  display: grid;
}
.card-dark, .card-acid {
  padding: 36px 28px;
  min-height: 260px;
}
.card-dark { background: var(--olive-2); }
.card-acid { background: var(--acid); color: var(--ink); }
.card-acid .btn-ghost { border-color: var(--ink); color: var(--ink); }
.card-acid .btn-ghost:hover { background: var(--ink); color: var(--acid); }
.card-acid h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 0.95;
  text-transform: uppercase;
}
.card-acid p { margin: 0 0 10px; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.form input,
.form select,
.form textarea {
  width: 100%; border: 1px solid var(--line);
  background: transparent; color: inherit;
  border-radius: 0; padding: 12px 12px;
  font: inherit; font-size: 16px;
}
.card-acid .form input,
.card-acid .form select,
.card-acid .form textarea {
  border-color: rgba(20, 20, 0, 0.28);
  color: var(--ink);
}
.form textarea { min-height: 120px; }
.form input:focus,
.form select:focus,
.form textarea:focus { outline: 1px solid currentColor; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 20px;
  color: rgba(234, 234, 234, 0.55);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.footer-top { display: grid; gap: 14px; }
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  background: var(--olive-2); border: 1px solid var(--line);
  padding: 16px 18px;
}
.cookie-bar-inner {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
}
.cookie-bar p { margin: 0; font-size: 14px; max-width: 40rem; letter-spacing: 0; text-transform: none; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ok { color: var(--acid); }
.err { color: #ff8a80; }

.reveal { opacity: 1; transform: none; }
html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 800px) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .vinyl-inner { grid-template-columns: 280px 1fr; }
  .epk { grid-template-columns: 1fr 0.85fr; align-items: start; }
  .speakers { display: block; position: absolute; left: -8%; top: 12%; width: 22%; pointer-events: none; }
  .speakers.right { left: auto; right: -6%; top: auto; bottom: 0; }
  .posters { grid-template-columns: repeat(3, 1fr); }
  .card-split { grid-template-columns: 1fr 1.1fr; }
  .footer-top { grid-template-columns: 1.2fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vinyl { animation: none; }
  html.js .reveal:not(.is-in),
  html.js .reveal.is-in { opacity: 1; transform: none; }
}