:root {
  --bg: #090909;
  --bg-2: #121010;
  --bg-3: #1c1613;
  --neon: #ff3c00;
  --neon-2: #ff7a33;
  --ink: #140600;
  --text: #f3ebe6;
  --muted: #9a8c84;
  --line: rgba(255, 60, 0, 0.32);
  --font-display: "Archivo Black", Impact, sans-serif;
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-punk: "Rubik Glitch", "Rubik Dirt", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    repeating-linear-gradient(122deg, transparent 0 17px, rgba(255,60,0,.035) 17px 18px),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--neon); text-decoration: none; }
a:hover { color: var(--neon-2); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--neon); color: var(--ink); padding: 8px; }

.grain,
.scratch {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
}
.grain {
  opacity: .12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scratch {
  opacity: .07;
  background:
    linear-gradient(108deg, transparent 40%, rgba(255,60,0,.25) 40.3%, transparent 40.6%),
    linear-gradient(18deg, transparent 72%, rgba(255,255,255,.08) 72.2%, transparent 72.5%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #080808;
  border-bottom: 3px solid var(--neon);
}
.brandbar {
  background: var(--neon);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}
.navwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
}
.logo {
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo:hover { color: var(--neon); text-decoration: none; }
.logo__badge {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: var(--neon);
  transform: rotate(-9deg);
}
.logo__lock { display: flex; flex-direction: column; line-height: .86; }
.logo__this {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--neon);
}
.logo__word {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .03em;
  text-shadow: 2px 0 0 rgba(255,60,0,.45);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav a { color: var(--text); }
.nav a:hover, .nav a.is-active { color: var(--neon); }
.nav a.ext { color: var(--neon); }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; margin: 6px 8px; background: var(--neon); }

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 70vh;
  border-bottom: 3px solid var(--neon);
}
.hero__stack {
  padding: 44px 22px 36px 28px;
  background: linear-gradient(180deg, #160800 0%, #090909 100%);
  position: relative;
}
.hero__stack::after {
  content: "";
  position: absolute;
  left: -4%;
  top: 58%;
  width: 70%;
  height: 7px;
  background: var(--neon);
  transform: rotate(-7deg);
  opacity: .85;
  mix-blend-mode: screen;
}
.hero__kicker {
  font-family: var(--font-mono);
  letter-spacing: .22em;
  color: var(--neon);
  font-size: 12px;
  margin: 0 0 16px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 118px);
  line-height: .8;
  letter-spacing: -.02em;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 3px 0 0 rgba(255,60,0,.35), -2px 1px 0 #000;
}
.hero h1 span { display: block; }
.hero h1 em { font-style: normal; color: var(--neon); }
.hero__panel {
  padding: 48px 32px;
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__panel p { color: var(--muted); max-width: 460px; }
.hero__panel strong { color: var(--text); }

.dual { display: grid; grid-template-columns: 1fr 1fr; }
.dual article { padding: 28px 24px; border-bottom: 1px solid var(--line); }
.dual article:first-child { border-right: 1px solid var(--line); background: #110c0a; }
.dual h2, .block h2, .page-wrap h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 10px;
  line-height: .95;
}
.kicker {
  font-family: var(--font-mono);
  color: var(--neon);
  letter-spacing: .18em;
  font-size: 11px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.block { padding: 48px 22px; max-width: 1120px; margin: 0 auto; }
.dates { display: grid; border: 2px solid var(--neon); }
.date-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px dashed var(--line);
  background: var(--bg-2);
}
.date-row:nth-child(even) { background: #160f0c; }
.date-row:last-child { border-bottom: 0; }
.date-row__when { font-family: var(--font-mono); color: var(--neon); letter-spacing: .08em; font-size: 13px; }
.date-row h3 { margin: 0 0 4px; font-size: 20px; font-family: var(--font-display); text-transform: uppercase; }
.date-row p { margin: 0; color: var(--muted); font-size: 14px; }

.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 22px 18px;
  min-height: 140px;
  position: relative;
}
.tile:nth-child(2) { transform: rotate(-.6deg); }
.tile:nth-child(3) { transform: rotate(.5deg); }
.tile::before { content: "×"; position: absolute; top: 8px; right: 12px; color: var(--neon); font-size: 18px; }
.tile h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 8px; font-size: 24px; }
.tile p { margin: 0; color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--neon);
  color: var(--neon);
  background: transparent;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn:hover { background: var(--neon); color: var(--ink); text-decoration: none; }
.btn--fill { background: var(--neon); color: var(--ink); }
.btn--fill:hover { filter: brightness(1.08); color: var(--ink); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.page-wrap { max-width: 820px; margin: 0 auto; padding: 48px 22px 80px; }
.page-wrap h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(36px, 7vw, 64px);
  line-height: .92;
  margin: 0 0 18px;
  text-shadow: 2px 0 0 rgba(255,60,0,.35);
}
.page-wrap h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; margin: 28px 0 8px; }
.page-wrap p, .page-wrap li { color: #d8cdc6; }
.placeholder-note {
  border: 1px dashed var(--line);
  padding: 14px 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 22px;
}

.site-footer {
  border-top: 3px solid var(--neon);
  padding: 18px 22px;
  background: #080808;
}
.footer__row {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__legal { display: flex; gap: 16px; }
.footer__legal a { color: var(--muted); }
.footer__legal a:hover { color: var(--neon); }

body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

@media (max-width: 980px) {
  .hero, .dual, .roster, .date-row { grid-template-columns: 1fr; }
  .dual article:first-child { border-right: 0; }
  .hero__panel { border-left: 0; border-top: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 22px 22px;
    background: #080808;
    border-bottom: 3px solid var(--neon);
  }
  .nav.is-open { display: flex; }
}

/* === wild wordmark / slice glitch (not jelll Rubik) === */
.cut {
  position: relative;
  display: block;
  font-family: var(--font-display);
  letter-spacing: .06em;
  color: var(--text);
  line-height: .8;
}
.logo__lock .cut { font-size: 15px; }
.cut--xl { font-size: clamp(52px, 10vw, 120px); }
.cut::before,
.cut::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.cut::before {
  color: #ff7a33;
  clip-path: inset(0 0 58% 0);
  animation: slice-a 3.2s steps(2, end) infinite;
  mix-blend-mode: screen;
}
.cut::after {
  color: var(--neon);
  clip-path: inset(52% 0 0 0);
  animation: slice-b 2.4s steps(2, end) infinite;
  mix-blend-mode: screen;
}
@keyframes slice-a {
  0%, 86%, 100% { transform: translate(0,0); }
  88% { transform: translate(-6px, -1px); }
  92% { transform: translate(8px, 0); }
}
@keyframes slice-b {
  0%, 80%, 100% { transform: translate(0,0); }
  82% { transform: translate(7px, 1px); }
  90% { transform: translate(-9px, 0); }
}

.logo__punk,
.wild__punk {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-punk);
  color: #ff3c00;
  line-height: .72;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.logo__punk { font-size: 28px; letter-spacing: .02em; }
.wild__punk { font-size: clamp(72px, 16vw, 168px); letter-spacing: .01em; }
.logo__punk i,
.wild__punk i {
  font-style: normal;
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #ff3c00;
  z-index: 1;
  text-shadow:
    3px 3px 0 #000,
    2px 0 #7ad7ff,
    -2px 0 #fff3a0;
  animation: grit-glow 4s linear infinite;
}
.logo__punk i::before,
.logo__punk i::after,
.wild__punk i::before,
.wild__punk i::after {
  content: attr(data-ch);
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  pointer-events: none;
  text-shadow: none;
}
.logo__punk i::before,
.wild__punk i::before {
  color: #7ad7ff;
  clip-path: inset(0 0 52% 0);
  animation: slice-hi 2.8s linear infinite;
}
.logo__punk i::after,
.wild__punk i::after {
  color: #fff3a0;
  clip-path: inset(48% 0 0 0);
  animation: slice-lo 2.2s linear infinite;
}
.kick { animation: kick-p 15s linear infinite; }
.kick--n { animation: kick-n 15s linear infinite; }

@keyframes grit-glow {
  0%, 100% { text-shadow: 3px 3px 0 #000, 2px 0 #7ad7ff, -2px 0 #fff3a0; }
  12% { text-shadow: 3px 3px 0 #000, -6px 0 #7ad7ff, 7px 0 #fff3a0; }
  16% { text-shadow: 3px 3px 0 #000, 2px 0 #7ad7ff, -2px 0 #fff3a0; }
  48% { text-shadow: 3px 3px 0 #000, 7px 1px #7ad7ff, -8px 0 #fff3a0; }
  52% { text-shadow: 3px 3px 0 #000, 2px 0 #7ad7ff, -2px 0 #fff3a0; }
  78% { text-shadow: 3px 3px 0 #000, -5px 2px #7ad7ff, 6px -1px #fff3a0; }
  82% { text-shadow: 3px 3px 0 #000, 2px 0 #7ad7ff, -2px 0 #fff3a0; }
}
@keyframes slice-hi {
  0%, 100% { transform: translate(-3px, 0); opacity: .7; }
  18% { transform: translate(-11px, -2px); opacity: 1; }
  24% { transform: translate(8px, 0); opacity: .75; }
  30% { transform: translate(-3px, 0); opacity: .65; }
  62% { transform: translate(10px, -1px); opacity: 1; }
  70% { transform: translate(-3px, 0); opacity: .65; }
}
@keyframes slice-lo {
  0%, 100% { transform: translate(3px, 0); opacity: .65; }
  14% { transform: translate(12px, 2px); opacity: 1; }
  20% { transform: translate(-8px, 0); opacity: .7; }
  28% { transform: translate(3px, 0); opacity: .6; }
  58% { transform: translate(-10px, 2px); opacity: 1; }
  66% { transform: translate(3px, 0); opacity: .6; }
}
@keyframes kick-p {
  0% { transform: translate(0,0) rotate(0deg); }
  4% { transform: translate(-12px, 6px) rotate(-10deg); }
  10% { transform: translate(10px, -5px) rotate(7deg); }
  18% { transform: translate(-6px, 4px) rotate(-5deg); }
  26% { transform: translate(4px, -2px) rotate(2deg); }
  33.333%, 100% { transform: translate(0,0) rotate(0deg); }
}
@keyframes kick-n {
  0% { transform: translate(0,0) rotate(0deg); }
  3% { transform: translate(11px, -7px) rotate(9deg); }
  9% { transform: translate(-13px, 5px) rotate(-8deg); }
  16% { transform: translate(7px, 3px) rotate(4deg); }
  25% { transform: translate(-4px, -3px) rotate(-2deg); }
  33.333%, 100% { transform: translate(0,0) rotate(0deg); }
}


.wild {
  margin: 0;
  text-transform: uppercase;
  text-shadow: none;
}
.wild__pre {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: .42em;
  color: var(--neon);
  margin-bottom: 10px;
}
.wild__punk {
  font-size: clamp(72px, 16vw, 168px);
  letter-spacing: .01em;
}

.site-header { overflow: hidden; }
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--neon);
  opacity: .9;
  animation: tear 4.5s steps(3, end) infinite;
  pointer-events: none;
}
@keyframes tear {
  0%, 78%, 100% { top: -8px; transform: translateX(0); }
  80% { top: 38%; transform: translateX(-12px); }
  88% { top: 62%; transform: translateX(18px); }
  94% { top: 18%; transform: translateX(-6px); }
}

.brandbar__flick { animation: flicker 3.8s step-end infinite; }
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .15; }
  95% { opacity: 1; }
  96% { opacity: .2; }
}

.logo:hover .cut::before { animation-duration: .35s; }
.logo:hover .cut::after { animation-duration: .28s; }
.logo:hover .logo__punk { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cut::before, .cut::after, .logo__punk i::before, .logo__punk i::after,
  .wild__punk i::before, .wild__punk i::after, .kick,
  .site-header::after, .brandbar__flick { animation: none; }
}