[hidden] { display: none !important; }
:root {
  --black: #0a0a0a;
  --white: #efece6;
  --grey: #8d8a84;
  --line: rgba(239, 236, 230, 0.14);
  --rec: #ff3b24;
  --banner-h: 34px;
  --tile: #e4e1da;
  --display: 'Anton', Impact, sans-serif;
  --osd: 'VT323', ui-monospace, monospace;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --wrap: min(1240px, 100% - 48px);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.label { font: 400 20px/1 var(--osd); color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Header */

.banner {
  position: fixed; inset: 0 0 auto; z-index: 25; height: var(--banner-h); overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--white); color: var(--black); font: 400 19px/1 var(--osd); text-transform: uppercase; letter-spacing: 0.04em;
}
.banner strong { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.banner button { position: absolute; right: clamp(12px, 3vw, 40px); font-size: 22px; line-height: 1; padding: 4px 8px; }
.top {
  position: fixed; inset: var(--banner-h) 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 48px);
  mix-blend-mode: difference;
}
.top { transition: background-color .25s, padding .25s; }
.top.solid { background: #0a0a0a; mix-blend-mode: normal; padding-top: 14px; padding-bottom: 14px; }
.wordmark { font: 400 30px/1 var(--display); letter-spacing: 0.08em; }
.nav { display: flex; gap: clamp(16px, 3vw, 36px); font: 400 22px/1 var(--osd); text-transform: uppercase; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Hero: the KESTE line field, plus a small player */

.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.player {
  position: absolute; z-index: 2; left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px); bottom: clamp(24px, 5vh, 48px);
  display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
}
.player .now { display: grid; gap: 10px; }

.player .timeline { order: 3; flex-basis: 100%; }
.timeline {
  display: flex; align-items: center; gap: 14px;
  font: 400 20px/1 var(--osd); color: var(--grey); font-variant-numeric: tabular-nums;
}
.timeline input { flex: 1; appearance: none; height: 18px; background: transparent; cursor: pointer; --fill: 0%; }
.timeline input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--white) var(--fill), #444 var(--fill)); }
.timeline input::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--white) var(--fill), #444 var(--fill)); }
.timeline input::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -5px; background: var(--white); border: 0; }
.timeline input::-moz-range-thumb { width: 12px; height: 12px; background: var(--white); border: 0; border-radius: 0; }
.player .now strong { font: 400 clamp(26px, 2.6vw, 36px)/1 var(--display); text-transform: uppercase; }

.key {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px 12px; border: 1px solid var(--white); background: var(--black);
  font: 400 24px/1 var(--osd); text-transform: uppercase; letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
}
.key.primary { background: var(--white); color: var(--black); }
@media (hover: hover) {
  .key:hover { background: var(--white); color: var(--black); }
  .key.primary:hover { background: var(--black); color: var(--white); }
}
.deck { display: flex; gap: 12px; flex-wrap: wrap; }
.when-playing, [data-playing="true"] .when-paused { display: none; }
[data-playing="true"] .when-playing { display: inline; }
.key.mute { display: none; }
.key.mute .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
[data-playing="true"] .key.mute, [data-muted="true"] .key.mute { display: inline-flex; }
[data-muted="true"] .key.mute { background: var(--white); color: var(--black); }
.key.icon { padding: 0; width: 50px; justify-content: center; align-self: stretch; }
.key.icon svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 420px) {
  .deck { gap: 8px; flex-wrap: nowrap; }
  .deck .key { padding-left: 14px; padding-right: 14px; }
  .deck .key.icon { width: 44px; flex: 0 0 44px; padding: 0; }
}

/* Docked player, shown once the hero player scrolls out of view */

.dock {
  position: fixed; inset: auto 0 0; z-index: 30; background: var(--black); border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform 0.3s ease;
}
.dock.on { transform: none; }
.dock-inner { display: flex; align-items: center; gap: 12px 18px; padding: 12px clamp(20px, 4vw, 48px); }
.dock .now { min-width: 0; width: clamp(160px, 20vw, 280px); display: grid; gap: 6px; }
.dock .now .label { font-size: 16px; }
.dock .now strong { font: 400 20px/1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .key { padding: 10px 16px 8px; font-size: 20px; }
.dock .key.icon { padding: 0; width: 42px; }
.dock .timeline { flex: 1; font-size: 18px; }
.dock .steps { display: flex; gap: 8px; align-self: stretch; }

/* Sections */

section { padding: clamp(80px, 11vw, 150px) 0; }
.big { font: 400 clamp(56px, 9vw, 150px)/0.88 var(--display); text-transform: uppercase; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.head .label { margin-bottom: 16px; }

/* Music */

.latest { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.latest img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.latest h3 { font: 400 clamp(48px, 6.5vw, 104px)/0.9 var(--display); text-transform: uppercase; margin: 14px 0 32px; }

.songs { list-style: none; padding: 0; margin-top: clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); }
.song { display: grid; grid-template-columns: 56px 64px 1fr auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.song .n { font: 400 20px/1 var(--osd); color: var(--grey); }
.song img { width: 64px; height: 64px; object-fit: cover; }
.song strong { display: block; font: 400 clamp(24px, 2.4vw, 32px)/1 var(--display); text-transform: uppercase; }
.song small { font: 400 18px/1 var(--osd); color: var(--grey); text-transform: uppercase; }
.song .acts { display: flex; gap: 10px; align-items: center; }
.song .listen { font: 400 20px/1 var(--osd); text-transform: uppercase; color: var(--grey); padding: 8px; }
.song .listen:hover { color: var(--white); }
.toggle { width: 48px; height: 48px; border: 1px solid var(--white); display: grid; place-items: center; font-size: 15px; transition: 0.15s; }
.toggle:hover, .toggle[aria-pressed="true"] { background: var(--white); color: var(--black); }
.toggle .pause, .toggle[aria-pressed="true"] .play { display: none; }
.toggle[aria-pressed="true"] .pause { display: inline; }
.song:has(.toggle[aria-pressed="true"]) strong { color: var(--white); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

.tv { position: relative; display: block; margin-top: clamp(64px, 8vw, 110px); overflow: hidden; }
.tv img { width: 100%; aspect-ratio: 2.35 / 1; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(0.8); transition: filter 0.4s; }
.tv:hover img { filter: grayscale(0.2) contrast(1.1) brightness(0.85); }
.tv::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); }
.tv.playing { aspect-ratio: 16 / 9; background: #000; }
.tv.playing::after { content: none; }
.tv.playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv span { position: absolute; z-index: 2; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
.tv .a { top: 20px; left: 24px; font: 400 clamp(22px, 2.6vw, 34px)/1 var(--osd); text-transform: uppercase; }
.tv .b { bottom: 20px; left: 24px; font: 400 clamp(34px, 5vw, 72px)/0.9 var(--display); text-transform: uppercase; }

/* Store: the page flips to light here */

.store { background: var(--white); color: var(--black); }
.store .label { color: #6c6962; }
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--black); border: 2px solid var(--black); }
.products .product { background: var(--white); padding: 18px; display: grid; gap: 14px; }
.products .product .tile { position: relative; background: var(--tile); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.products .product .tile img { width: 94%; transition: transform 0.4s; }
.products .product:hover .tile img { transform: scale(1.05) rotate(-1deg); }
.products .product .new { position: absolute; top: 10px; left: 10px; font: 400 18px/1 var(--osd); background: var(--rec); color: var(--white); padding: 5px 8px 3px; }
.products .product .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.products .product h3 { font: 400 24px/1 var(--display); text-transform: uppercase; }
.products .product .price { font: 400 24px/1 var(--osd); }
.products .product p { font-size: 13px; color: #6c6962; }
.all { display: inline-block; font: 400 24px/1 var(--osd); text-transform: uppercase; border: 1px solid currentColor; padding: 14px 20px 12px; transition: 0.15s; }
.all:hover { background: var(--black); color: var(--white); }

/* Shows */

.shows .big { -webkit-text-stroke: 1.5px var(--white); color: transparent; }
.dates { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.date { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.date time { font: 400 26px/1 var(--osd); text-transform: uppercase; }
.date .venue { font: 400 26px/1.05 var(--display); text-transform: uppercase; }
.date .city { color: #c9c5bd; }
.no-dates { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 5vw, 64px); align-items: end; }
.no-dates p, .list-row p { color: #c9c5bd; max-width: 44ch; }
.list { border-top: 1px solid var(--line); }
.list-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: end; }
.list-row .big { margin-top: 14px; }
.list-row p { margin-bottom: 22px; }

/* EmailOctopus renders its own form; these rules restyle it to match. */

#list .eo-slot .inline-container, #list .eo-slot .eo-form-wrapper, #list .eo-slot .form-container { background: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
#list .eo-slot [eo-block="powered-by"] { margin-top: 10px; opacity: .45; filter: grayscale(1) invert(1); }
#list .eo-slot [eo-block="powered-by"] * { font-size: 11px !important; }
#list .eo-slot .text-center { text-align: left !important; }
#list .eo-slot .emailoctopus-form-wrapper { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#list .eo-slot [eo-block="heading"], #list .eo-slot [eo-block="text"], #list .eo-slot .text-block, #list .eo-slot .master-branding, #list .eo-slot .emailoctopus-form-copy-wrapper { display: none !important; }
#list .eo-slot [data-form] { --background-color: transparent; --border-color: transparent; }
#list .eo-slot .main-form { display: flex; flex-wrap: nowrap !important; align-items: stretch !important; border: 1px solid var(--white); }
#list .eo-slot [eo-form-fields-container] { flex: 1; min-width: 0; }
#list .eo-slot .emailoctopus-form-row { margin: 0 !important; min-width: 0 !important; }
#list .eo-slot input[type="email"] { width: 100%; height: 100%; background: none !important; border: 0 !important; border-radius: 0 !important; color: var(--white) !important; font: 400 22px/1 var(--osd) !important; padding: 16px !important; text-transform: uppercase; box-shadow: none !important; }
#list .eo-slot input[type="email"]::placeholder { color: var(--grey); }
#list .eo-slot input[type="submit"] { flex: 0 0 auto; width: auto !important; white-space: nowrap; margin: 0 !important; background: var(--white) !important; color: var(--black) !important; border: 0 !important; border-radius: 0 !important; font: 400 22px/1 var(--osd) !important; padding: 0 22px !important; text-transform: uppercase; cursor: pointer; }
#list .eo-slot .emailoctopus-success-message, #list .eo-slot .emailoctopus-error-message { font: 400 20px/1.2 var(--osd); text-transform: uppercase; margin-top: 12px; color: var(--white); }
.booking { margin-top: 22px; font: 400 22px/1.2 var(--osd); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.booking a { text-decoration: underline; text-underline-offset: 4px; }
.signup { display: flex; border: 1px solid var(--white); }
.signup input { flex: 1; min-width: 0; background: none; border: 0; color: var(--white); font: 400 22px/1 var(--osd); padding: 16px; text-transform: uppercase; }
.signup input::placeholder { color: var(--grey); }
.signup input:focus { outline: none; }
.signup button { background: var(--white); color: var(--black); font: 400 22px/1 var(--osd); padding: 0 22px; text-transform: uppercase; }

/* About */

.about { position: relative; padding: 0; }
.about img { width: 100%; height: min(92vh, 900px); object-fit: cover; object-position: center 25%; filter: grayscale(1) contrast(1.2) brightness(0.62); }
.about .over { position: absolute; inset: auto 0 0; padding: clamp(28px, 5vw, 64px) 0; background: linear-gradient(0deg, rgba(10, 10, 10, 0.92), transparent); }
.about .cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: end; }
.about p { color: #d8d4cc; max-width: 46ch; }
.members { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 6px; }
.members li { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; font: 400 22px/1.1 var(--osd); text-transform: uppercase; }
.members span { color: var(--grey); }

footer { padding: 40px 0 calc(40px + var(--dock-h, 0px)); border-top: 1px solid var(--line); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font: 400 20px/1 var(--osd); text-transform: uppercase; color: var(--grey); }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a:hover { color: var(--white); }

@media (max-width: 900px) {
  .nav a:not(.cart) { display: none; }
  .latest, .list-row, .no-dates, .about .cols { grid-template-columns: 1fr; }
  .date { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .date time { grid-column: 1 / -1; font-size: 22px; }
  .date .venue, .date .city { grid-column: 1; }
  .date .key { grid-column: 2; grid-row: 2 / 4; }
  .banner { font-size: 16px; justify-content: flex-start; padding-left: 20px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .song { grid-template-columns: 52px 1fr auto; }
  .song .n, .song .listen { display: none; }
  .tv img { aspect-ratio: 4 / 3; }
  .about img { height: 110vh; }
  .dock-inner { flex-wrap: wrap; }
  .dock .now { flex: 1; width: auto; }
  .dock .timeline { order: 5; flex: 1 1 200px; }
  .dock .key.mute { order: 6; padding: 7px 10px 5px; font-size: 16px; gap: 8px; }
}