@font-face { font-family: "Bungee"; font-weight: 400; font-display: swap; src: url("/static/fonts/bungee-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Permanent Marker"; font-weight: 400; font-display: swap; src: url("/static/fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("/static/fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("/static/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-display: swap; src: url("/static/fonts/courier-prime-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-display: swap; src: url("/static/fonts/courier-prime-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #14100c;
  --paper: #efe5cc;
  --paper-2: #e4d6b2;
  --ink: #17120d;
  --cream: #f6eeda;
  --muted: #b5a88d;
  --yellow: #f5c518;
  --red: #d7301f;
  --teal: #2a9d8f;
  --display: "Bungee", Impact, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --type: "Courier Prime", Courier, monospace;
  --sans: "Archivo", system-ui, sans-serif;
  --mx: 0;
  --my: 0;
  --beat: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--cream); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
body.over-platter { cursor: grab; }
body.scratching, body.scratching * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 30; padding: .5rem 1rem; background: var(--yellow); color: var(--ink); font-family: var(--type); }
.skip:focus { top: 1rem; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: radial-gradient(ellipse at 65% 40%, #3a2416 0%, var(--bg) 70%); }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%),
    radial-gradient(rgba(255, 240, 200, .05) 1px, transparent 1.4px) 0 0 / 4px 4px; }

/* Fixed chrome */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: .9rem clamp(1.25rem, 3vw, 2.5rem); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { font: 400 1.25rem var(--marker); text-decoration: none; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); }
.deckstate { font: 700 .8rem var(--type); color: var(--cream); padding: .1rem .5rem; background: rgba(20, 16, 12, .75); }
.deckstate.live { color: var(--ink); background: var(--yellow); }

.tracklist { position: fixed; right: clamp(.6rem, 1.6vw, 1.5rem); top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: .35rem; font: 400 .78rem var(--type); }
.tracklist a { display: flex; flex-direction: row-reverse; align-items: center; gap: .5rem; text-decoration: none; }
.tracklist b { display: block; width: 2.1rem; padding: .12rem 0; text-align: center; background: rgba(20, 16, 12, .8); border: 1px solid rgba(246, 238, 218, .35); }
.tracklist span { padding: .05rem .4rem; background: rgba(20, 16, 12, .85); opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; white-space: nowrap; }
.tracklist a:hover span, .tracklist a:focus-visible span, .tracklist a.active span { opacity: 1; transform: none; }
.tracklist a.active b { background: var(--red); border-color: var(--red); color: var(--cream); }

main { position: relative; z-index: 2; }
.station { min-height: 100vh; min-height: 100svh; padding: clamp(4.5rem, 10vh, 7rem) clamp(1.25rem, 6vw, 6rem); padding-right: clamp(3.5rem, 8vw, 8rem); display: flex; flex-direction: column; justify-content: center; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; }

.side { font: 700 .85rem var(--type); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); margin-bottom: .6rem; padding: .05rem .5rem; width: max-content; max-width: 100%; background: rgba(20, 16, 12, .85); }
h2 { font: 400 clamp(2.6rem, 7.4vw, 6rem)/1 var(--display); color: var(--cream); text-shadow: 3px 3px 0 var(--red), 6px 6px 0 var(--ink); margin-bottom: 1.25rem; }
.h-small { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; text-shadow: 2px 2px 0 var(--red), 4px 4px 0 var(--ink); }
.lede { max-width: 62ch; margin-bottom: 2rem; font-size: 1.12rem; padding: .85rem 1rem; background: rgba(20, 16, 12, .78); }

/* Mouse parallax for DOM layers */
.depth-1, .depth-2, .depth-3, .ink { transform: translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px), 0); will-change: transform; }
.depth-1 { --d: -6; }
.depth-2 { --d: -13; }
.depth-3 { --d: -21; }

/* Hero */
.hero { justify-content: flex-end; padding-bottom: clamp(3rem, 9vh, 6rem); }
.scrawl { font: 400 clamp(3rem, 8vw, 7rem)/.8 var(--marker); color: var(--yellow); margin-left: .1em; rotate: -6deg; width: max-content; text-shadow: 3px 3px 0 var(--ink); }
.title { position: relative; font: 400 clamp(3.1rem, 11.2vw, 11.5rem)/1 var(--display); margin: 0 0 1.5rem; white-space: nowrap; scale: calc(1 + var(--beat) * .025); transform-origin: left bottom; }
.ink { display: block; }
.ink-red, .ink-black { position: absolute; inset: 0; }
.ink-red { --d: -38; color: var(--red); }
.ink-black { --d: -30; color: var(--ink); }
.ink-top { --d: -18; position: relative; color: var(--yellow); }
.hero-copy { max-width: 620px; }
.stamp { width: max-content; max-width: 100%; padding: .2rem .6rem; margin-bottom: .75rem; background: var(--paper); color: var(--ink); font: 700 .92rem var(--type); rotate: -1deg; }
.motto { font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.25; font-weight: 600; margin-bottom: 1.25rem; text-shadow: 0 2px 10px var(--bg), 0 0 2px var(--bg); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .6rem; }
.fineprint { font: 400 .8rem var(--type); color: var(--cream); text-shadow: 0 1px 6px var(--bg); }

.btn { display: inline-block; padding: .7rem 1.2rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 400 .88rem var(--display); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .1s, box-shadow .1s; touch-action: manipulation; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active, .btn.pressed { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-hot { background: var(--yellow); }
.btn-ink.playing { background: var(--red); color: var(--cream); }

/* The decks */
.decks { justify-content: space-between; padding-top: 3.75rem; padding-bottom: 1.25rem; padding-right: clamp(1.25rem, 6vw, 6rem); }
.deck-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.deck-stage { flex: 1; min-height: 40vh; position: relative; touch-action: pan-y; }
.grab-hint { position: absolute; left: 50%; top: .25rem; translate: -50% 0; font: 400 1.35rem var(--marker); color: var(--yellow); white-space: nowrap; text-shadow: 2px 2px 0 var(--ink); pointer-events: none; transition: opacity .4s; }
.grab-hint.gone { opacity: 0; }
.console { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.5rem; padding: .85rem 1.25rem; background: rgba(20, 16, 12, .88); border: 2px solid var(--ink); outline: 1px solid rgba(246, 238, 218, .25); }
.console .btn { box-shadow: 3px 3px 0 #000; }
.fader { flex: 1 1 260px; max-width: 420px; display: grid; gap: .1rem; font: 700 .72rem var(--type); text-transform: uppercase; letter-spacing: .08em; }
.fader-ends { display: flex; justify-content: space-between; color: var(--muted); font-weight: 400; }
.fader-ends i { font-style: normal; }
.fader input { width: 100%; height: 26px; margin: 0; appearance: none; -webkit-appearance: none; background: none; cursor: ew-resize; }
.fader input::-webkit-slider-runnable-track { height: 6px; background: #000; border: 1px solid #55493a; }
.fader input::-moz-range-track { height: 6px; background: #000; border: 1px solid #55493a; }
.fader input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 24px; margin-top: -10px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; }
.fader input::-moz-range-thumb { width: 12px; height: 20px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; }
.keys { font: 400 .8rem var(--type); color: var(--muted); }
kbd { padding: 0 .35rem; border: 1px solid var(--muted); border-bottom-width: 2px; color: var(--cream); font: inherit; }

/* Flyers: photocopied paper, taped to the scene */
.flyer { position: relative; padding: 1.25rem 1.35rem; background-color: var(--paper); color: var(--ink);
  background-image: radial-gradient(rgba(23, 18, 13, .1) 1px, transparent 1.3px); background-size: 5px 5px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.flyer::before { content: ""; position: absolute; left: 50%; top: -.55rem; width: 4.5rem; height: 1.1rem; translate: -50% 0; rotate: var(--tape, -2deg); background: rgba(245, 197, 24, .75); }
.flyer > * + * { margin-top: .6rem; }
.flyer h3 { font: 400 1.5rem/1.1 var(--display); }
.flyer p { font-size: .98rem; line-height: 1.5; }
.tilt { --lean: 0deg; transform: perspective(900px) rotate(var(--lean)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.tilt.tilting { transition: none; }
.tilt:nth-child(3n + 1) { --lean: -.7deg; --tape: 3deg; }
.tilt:nth-child(3n + 2) { --lean: .6deg; }
.tilt:nth-child(3n) { --lean: -.25deg; --tape: -5deg; }

.cut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem 1.25rem; }
.cut { display: flex; flex-direction: column; align-items: flex-start; }
.cut p { flex: 1; }
.ttm { display: block; width: 100%; height: auto; background: var(--paper-2); border: 1px solid var(--ink); }
.ttm .grid { stroke: rgba(23, 18, 13, .2); stroke-width: 1; }
.ttm .closed { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .5; }
.ttm .opened { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ttm .head { stroke: var(--ink); stroke-width: 1.5; }

.roots { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem 1.25rem; }
.year { font: 400 2.3rem/1 var(--marker); color: var(--red); }
.flyer .year { font-size: 2.3rem; }
.root h3 { font-size: 1.2rem; }

/* The selector */
.about { max-width: 720px; margin-bottom: 1.5rem; }
.about p { font-size: 1.08rem; }
.crate { max-width: 720px; margin-bottom: 1.5rem; padding: 1rem 1.25rem; background: rgba(20, 16, 12, .85); border: 2px solid var(--yellow); }
.crate h3 { font: 400 1.25rem var(--display); color: var(--yellow); margin-bottom: .5rem; }
.crate li + li { margin-top: .35rem; }
.holler { display: flex; flex-wrap: wrap; gap: 1rem; }
.sticker { display: block; padding: .7rem 1.1rem; background: var(--yellow); color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--ink); }
.sticker span { display: block; font: 700 .72rem var(--type); text-transform: uppercase; letter-spacing: .08em; }
.sticker b { display: block; font: 400 clamp(.95rem, 1.8vw, 1.2rem) var(--display); overflow-wrap: anywhere; }
.foot { margin-top: 2.25rem; padding: .5rem .75rem; max-width: 720px; background: rgba(20, 16, 12, .78); font: 400 .78rem/1.5 var(--type); color: var(--muted); }

.noscript { position: fixed; bottom: 1rem; left: 1rem; z-index: 20; padding: .5rem .75rem; background: var(--paper); color: var(--ink); font: 700 .8rem var(--type); }
.no-webgl .decks { min-height: 0; gap: 1rem; }
.no-webgl .deck-stage { min-height: 0; flex: none; }
.no-webgl .grab-hint { position: static; translate: none; white-space: normal; text-align: center; }

/* Scroll reveals only apply once JS has confirmed it can undo them. */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.seen { opacity: 1; translate: 0 0; }

@media (max-width: 720px) {
  .station { padding-inline: 1.25rem; }
  .tracklist, .keys { display: none; }
  .title { font-size: 13.2vw; }
  .decks { padding-right: 1.25rem; }
  .cut-grid, .roots { grid-template-columns: 1fr; }
  .tilt { --lean: 0deg !important; }
  .grab-hint { font-size: 1.05rem; }
  .console { padding: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; translate: none; }
  .title { scale: none; }
}