:root {
  --night-0: #061015;
  --night-1: #0a1820;
  --night-2: #10232a;
  --amp-cloth: #23201c;
  --amp-edge: #4b3a2c;
  --lacquer: #ee7a2f;
  --algae: #a8d96c;
  --brass: #c9a35a;
  --ivory: #eee2c4;
  --cyan: #5fc9cb;
  --magenta: #c65078;
  --text-2: #b9ad92;
  --text-3: #807764;
  --text-4: #514c42;
  --line-soft: rgba(238, 226, 196, .13);
  --line: rgba(238, 226, 196, .24);
  --display: "Arial Narrow", "Avenir Next Condensed", Impact, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ivory);
  background:
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(255,255,255,.018) 90px),
    var(--night-0);
  font-family: var(--mono);
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; }

.site-header {
  height: 72px;
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  padding: 0 clamp(18px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(6, 16, 21, .88);
  backdrop-filter: blur(14px);
}
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 700 14px/1 var(--display); letter-spacing: .12em; }
.wordmark strong { color: var(--lacquer); }
.record-mark { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lacquer); box-shadow: inset 0 0 0 5px var(--night-1); }
.record-mark::before, .record-mark::after { content:""; position:absolute; inset:5px; border:1px solid rgba(238,122,47,.55); border-radius:50%; }
.record-mark::after { inset:11px; background:var(--brass); border:0; }
.record-mark i { position:absolute; z-index:2; width:18px; height:2px; background:var(--ivory); right:-8px; top:6px; transform:rotate(22deg); transform-origin:right; }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.site-header nav a { color:var(--text-2); text-decoration:none; }
.site-header nav a:hover { color:var(--lacquer); }
.showtime { display:flex; align-items:center; gap:8px; color:var(--algae); }
.showtime i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:blink 1.6s infinite; }

.hero {
  min-height: min(940px, 100vh);
  padding: 140px clamp(22px, 6vw, 96px) 80px;
  display:flex;
  align-items:center;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(90deg, rgba(5,14,19,.96), rgba(5,14,19,.72) 37%, rgba(5,14,19,.08) 73%),
    linear-gradient(0deg, var(--night-0), transparent 24%),
    url("../assets/images/backbeat-stage.png") 67% center / cover no-repeat;
}
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 76% 42%, rgba(238,122,47,.08), transparent 26%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.08) 4px); }
.hero-copy { max-width:650px; }
.kicker { margin:0; color:var(--brass); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
h1, h2, h3 { margin:0; font-family:var(--display); text-transform:uppercase; }
h1 { margin:18px 0 25px; font-size:clamp(74px, 10vw, 148px); line-height:.76; letter-spacing:-.045em; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:2px var(--lacquer); text-shadow:0 0 28px rgba(238,122,47,.18); }
.hero-copy > p:not(.kicker) { max-width:570px; color:#d3c7aa; font-size:clamp(13px,1.25vw,16px); line-height:1.8; }
.ticket { margin-top:28px; display:inline-flex; align-items:center; gap:46px; padding:16px 18px; border:1px solid rgba(238,122,47,.65); color:var(--lacquer); background:rgba(238,122,47,.06); text-decoration:none; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ticket:hover { color:var(--night-0); background:var(--lacquer); }
.hero-catalog { position:absolute; right:4vw; bottom:60px; width:116px; aspect-ratio:1; display:grid; place-content:center; text-align:center; border:1px solid rgba(238,226,196,.45); border-radius:50%; color:rgba(238,226,196,.76); transform:rotate(8deg); }
.hero-catalog span, .hero-catalog small { font-size:8px; letter-spacing:.18em; }
.hero-catalog strong { font:46px/.8 var(--display); }

.session-section { max-width:1460px; margin:auto; padding:110px clamp(10px,4vw,60px); }
.section-heading { max-width:1280px; margin:0 auto 38px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }
.section-heading h2, .liner h2 { margin-top:10px; font-size:clamp(44px,6vw,82px); line-height:.86; }
.section-heading > p { max-width:580px; color:var(--text-2); font-size:11px; line-height:1.8; }

.amp {
  position:relative;
  max-width:1280px;
  margin:auto;
  padding:18px;
  border:2px solid #4c3b2d;
  border-radius:14px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    var(--amp-cloth);
  box-shadow:inset 0 0 0 4px #151411, inset 0 0 0 6px #5d4936, 0 35px 80px rgba(0,0,0,.5);
}
.amp-top { min-height:72px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; padding:8px 14px 20px; }
.amp-brand span { display:block; color:var(--lacquer); font:700 12px var(--display); letter-spacing:.15em; }
.amp-brand strong { display:block; color:var(--text-3); font:700 9px var(--mono); letter-spacing:.12em; }
.set-progress { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; color:var(--text-3); font-size:8px; letter-spacing:.12em; }
.set-progress > div { height:7px; border:1px solid #4f493d; background:#111411; }
.set-progress i { display:block; width:0; height:100%; background:var(--lacquer); box-shadow:0 0 7px rgba(238,122,47,.6); }
.power-switch { width:90px; height:38px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid #0a0a09; border-radius:4px; color:var(--text-2); background:#2e2922; box-shadow:inset 0 0 0 2px #494036, 0 3px #0c0b0a; cursor:pointer; font-size:8px; letter-spacing:.12em; }
.power-switch i { width:9px; height:9px; border-radius:50%; background:#53261c; box-shadow:inset 1px 1px 2px #170b08; }
.amp.is-live .power-switch i { background:var(--lacquer); box-shadow:0 0 10px var(--lacquer); }
.power-switch:active { transform:translateY(2px); box-shadow:inset 0 0 5px #000; }

.amp-face { display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; }
.telemetry { padding:18px; border-radius:7px; color:#222019; background:linear-gradient(140deg,#d4c59f,#9f926f); box-shadow:inset 0 0 0 2px #e6d8b2, inset 0 0 20px rgba(55,39,20,.25); }
.score-block { padding-bottom:16px; border-bottom:1px solid rgba(36,32,25,.28); }
.score-block span, .score-block small { display:block; font-size:8px; letter-spacing:.14em; }
.score-block strong { display:block; margin:5px 0; font:44px/.9 var(--display); letter-spacing:.02em; }
.score-block small b { font-weight:700; }
.vu-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.vu > span { display:block; margin-bottom:5px; text-align:center; font-size:7px; letter-spacing:.14em; }
.vu-face { height:82px; position:relative; overflow:hidden; border:2px solid #27251d; border-radius:60px 60px 5px 5px; background:radial-gradient(circle at 50% 115%, #fff2c9, #b9ab82 68%, #6c644f); box-shadow:inset 0 4px 12px rgba(0,0,0,.3); }
.vu-face::before { content:""; position:absolute; width:85%; height:64px; left:7.5%; top:18px; border-top:1px solid #3e392c; border-radius:50%; }
.vu-face b { position:absolute; bottom:7px; font-size:7px; }
.vu-face b:nth-of-type(1){left:13%}.vu-face b:nth-of-type(2){left:48%}.vu-face b:nth-of-type(3){right:10%;color:#9b3025}
.vu-needle { position:absolute; z-index:2; width:2px; height:62px; left:50%; bottom:-8px; background:#b72e25; transform:rotate(-48deg); transform-origin:bottom center; transition:transform .12s ease-out; }
.combo-reel { margin-top:18px; padding:14px 0; border-block:1px solid rgba(36,32,25,.27); display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 12px; }
.combo-reel > span { font-size:8px; letter-spacing:.12em; }
.combo-reel strong { text-align:right; font:48px/.9 var(--display); }
.combo-reel small { grid-column:1/-1; margin-top:7px; min-height:12px; color:#6e3d26; font-size:8px; letter-spacing:.12em; text-align:right; }
.fish-eq { margin-top:17px; }
.fish-eq svg { width:100%; display:block; filter:drop-shadow(0 2px rgba(255,255,255,.22)); }
.fish-outline { fill:none; stroke:#2d2a21; stroke-width:2; }
.eq-bars rect { fill:var(--eq-color, #615947); opacity:.24; transition:opacity .2s, fill .2s; }
.fish-eq > span { display:block; text-align:center; font-size:7px; letter-spacing:.14em; }

.playfield-wrap { min-width:0; }
.canvas-shell { position:relative; overflow:hidden; border:9px solid #11100e; border-radius:7px; background:#071016; box-shadow:inset 0 0 30px #000, 0 0 0 1px #5d4936; }
#gameCanvas { display:block; width:100%; height:auto; max-height:690px; background:#071016; touch-action:none; }
.screen-glass { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.022) 4px); box-shadow:inset 0 0 48px #000; }
.string-labels { position:absolute; z-index:2; inset:auto 0 16px; display:grid; grid-template-columns:repeat(4,1fr); text-align:center; color:rgba(238,226,196,.32); font:700 13px var(--mono); pointer-events:none; }
.game-overlay { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:18px; background:rgba(5,13,17,.75); backdrop-filter:blur(7px); opacity:0; visibility:hidden; transition:.28s; }
.game-overlay.is-visible { opacity:1; visibility:visible; }
.sleeve { width:min(100%,520px); padding:clamp(24px,4vw,48px); border:1px solid rgba(238,226,196,.28); background:
  radial-gradient(circle at 100% 0,rgba(198,80,120,.18),transparent 34%),
  #12252b;
  box-shadow:10px 10px 0 rgba(0,0,0,.28);
  text-align:center;
}
.catalog { margin:0; color:var(--brass); font-size:8px; letter-spacing:.2em; text-transform:uppercase; }
.sleeve h3 { margin:12px 0 18px; color:var(--ivory); font-size:clamp(36px,5vw,60px); line-height:.86; }
.sleeve > p:not(.catalog) { color:var(--text-2); font-size:10px; line-height:1.75; }
.sleeve button { margin:10px 0 8px; padding:15px 21px; border:1px solid var(--lacquer); color:var(--night-0); background:var(--lacquer); cursor:pointer; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.sleeve button:hover { color:var(--lacquer); background:transparent; }
.sleeve small { display:block; color:var(--text-4); font-size:7px; }

.touch-board { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.touch-board button { min-height:68px; border:1px solid #4d4032; border-radius:5px; color:var(--ivory); background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),
  #2a231d;
  box-shadow:inset 0 0 0 2px #171411,0 3px #080706;
  cursor:pointer;
  touch-action:none;
}
.touch-board button span { display:block; color:var(--brass); font:30px/.9 var(--display); }
.touch-board button small { font-size:7px; letter-spacing:.12em; color:var(--text-3); }
.touch-board button:hover { border-color:var(--brass); }
.touch-board button.is-hit { transform:translateY(2px); color:var(--night-0); background:var(--lacquer); box-shadow:0 1px #080706; }
.touch-board button.is-hit span,.touch-board button.is-hit small { color:var(--night-0); }
.amp-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:17px 12px 2px; color:var(--text-4); font-size:7px; letter-spacing:.13em; }
.amp-footer p { margin:0; color:var(--text-2); font-size:8px; letter-spacing:.05em; text-align:center; }
.corner-screws { position:absolute; inset:8px; pointer-events:none; }
.corner-screws i { position:absolute; width:7px;height:7px;border-radius:50%;background:#0d0c0a;box-shadow:inset 1px 1px #76614a; }
.corner-screws i:nth-child(1){left:0;top:0}.corner-screws i:nth-child(2){right:0;top:0}.corner-screws i:nth-child(3){left:0;bottom:0}.corner-screws i:nth-child(4){right:0;bottom:0}

.liner { max-width:1240px; margin:auto; padding:60px clamp(22px,5vw,70px) 130px; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(50px,8vw,120px); }
.liner ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.liner li { display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:start; padding:24px 0; border-bottom:1px solid var(--line-soft); }
.liner li > span { color:var(--lacquer); font-size:9px; }
.liner h3 { font-size:24px; letter-spacing:.02em; }
.liner li p { margin:8px 0 0; color:var(--text-3); font-size:9px; line-height:1.7; }
.liner li > b { color:var(--brass); font-size:8px; white-space:nowrap; }
.quote { max-width:1100px; margin:0 auto 130px; padding:54px clamp(28px,6vw,76px); position:relative; overflow:hidden; border:1px solid rgba(238,122,47,.32); background:#111c1f; }
.quote-disc { position:absolute; right:-90px; top:-120px; width:330px; height:330px; border:1px solid rgba(238,122,47,.1); border-radius:50%; box-shadow:inset 0 0 0 45px #111c1f,inset 0 0 0 47px rgba(238,122,47,.08),inset 0 0 0 88px #111c1f,inset 0 0 0 90px rgba(238,122,47,.08); }
.quote blockquote { position:relative; z-index:1; max-width:770px; margin:0; font:clamp(28px,4vw,48px)/1.1 var(--display); text-transform:uppercase; }
.quote p { position:relative; z-index:1; margin:24px 0 0; color:var(--brass); font-size:8px; }

footer { padding:38px clamp(20px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; border-top:1px solid var(--line-soft); }
footer > p { color:var(--text-4); font-size:7px; text-align:center; }
footer nav { justify-self:end; display:flex; gap:18px; }
footer nav a { color:var(--text-3); font-size:8px; text-decoration:none; text-transform:uppercase; }

.legal-main { min-height:calc(100vh - 72px); padding:150px 22px 90px; }
.legal-copy { max-width:760px; margin:auto; }
.legal-copy h1 { font-size:clamp(56px,8vw,98px); }
.legal-copy h2 { margin-top:38px; font-size:28px; }
.legal-copy p,.legal-copy li { color:var(--text-2); font-size:11px; line-height:1.8; }
.back-link { display:inline-block; margin-bottom:34px; color:var(--lacquer); font-size:9px; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }

@keyframes blink { 50%{opacity:.32} }
@media (max-width:900px) {
  .site-header nav a { display:none; }
  .hero { min-height:790px; background-position:60% center; }
  .section-heading,.liner { grid-template-columns:1fr; }
  .amp-face { grid-template-columns:1fr; }
  .telemetry { display:grid; grid-template-columns:1fr 210px; gap:0 20px; }
  .vu-pair { grid-column:2; grid-row:1 / span 2; margin:0; }
  .combo-reel,.fish-eq { grid-column:1/-1; }
  .fish-eq { max-width:360px; margin-inline:auto; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer nav { justify-self:center; }
}
@media (max-width:560px) {
  .site-header { height:62px; padding-inline:15px; }
  .site-header .showtime { font-size:0; }
  .hero { min-height:700px; padding:116px 20px 60px; background-position:64% center; }
  .hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,14,19,.82),rgba(5,14,19,.15)); }
  h1 { font-size:70px; }
  .hero-catalog { display:none; }
  .session-section { padding:76px 7px; }
  .section-heading { padding-inline:13px; }
  .amp { width:100%; padding:12px; border-radius:10px; }
  .amp-top { grid-template-columns:1fr auto; gap:12px; padding-inline:5px; }
  .set-progress { grid-column:1/-1; grid-row:2; }
  .telemetry { grid-template-columns:1fr 148px; padding:12px; }
  .score-block strong { font-size:36px; }
  .vu-face { height:70px; }
  .combo-reel strong { font-size:40px; }
  .canvas-shell { border-width:6px; }
  #gameCanvas { max-height:none; }
  .game-overlay { padding:10px; }
  .sleeve { width:calc(100vw - 52px); padding:27px 16px; }
  .sleeve h3 { font-size:34px; }
  .touch-board { gap:5px; }
  .touch-board button { min-height:62px; }
  .touch-board button span { font-size:26px; }
  .amp-footer span { display:none; }
  .amp-footer { justify-content:center; }
  .liner { padding-bottom:90px; }
  .liner li { grid-template-columns:36px 1fr; }
  .liner li > b { grid-column:2; }
  .quote { margin:0 14px 90px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }
}