/* Palette sampled from the artwork: void black, bone white, dungeon indigo,
   spirit-flame violet, ember red (the eyes) and brazier gold. */
:root {
  --void: #050507;
  --panel: #0b0b12;
  --line: #262544;
  --line-2: #3a3870;
  --bone: #ecebe6;
  --ash: #9896a8;
  --indigo: #2d2b63;
  --violet: #8a86f0;
  --ember: #e0362c;
  --gold: #c9a43a;
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --gap: clamp(10px, 1.1vw, 16px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--void); color: var(--bone); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- Viewport lock (desktop) ----------
   .app is exactly one dynamic viewport tall and clips; the document never scrolls.
   minmax(0, …) tracks let panels shrink below their content, and long content
   scrolls inside its own .scroll region instead of growing the page. */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "stage side" "bar bar";
  gap: var(--gap);
  padding: var(--gap);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.top { grid-area: top; }
.stage { grid-area: stage; }
.side { grid-area: side; }
.bar { grid-area: bar; }
.scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); }

/* ---------- Type ---------- */
.eyebrow { margin: 0; font: 600 .7rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.title {
  margin: 0;
  /* Sized to the details column (container query units) so the longest word fits whole. */
  font: italic 500 clamp(1.5rem, 12.5cqi, 3.6rem)/.95 var(--serif);
  text-transform: uppercase; letter-spacing: .02em; text-wrap: balance;
  text-shadow: 0 2px 30px rgb(5 5 7 / .8);
}
.muted { color: var(--ash); }
.lede { font: italic 500 1.2rem/1.35 var(--serif); color: var(--bone); margin: 0 0 .8em; }
em { font-family: var(--serif); font-size: 1.08em; }

/* ---------- Header ---------- */
.top {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: 6px 4px 10px; border-bottom: 1px solid var(--line);
}
.brand img { height: clamp(44px, 7vh, 72px); width: auto; mix-blend-mode: screen; }
.tagline { margin: 0; font: italic 600 1rem var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.tagline i { color: var(--ember); font-style: normal; padding: 0 .3em; }
.links { margin-left: auto; display: flex; gap: 4px; }
.links a {
  text-decoration: none; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 10px 12px; border: 1px solid transparent; color: var(--ash);
}
.links a:hover, .links a:focus-visible { color: var(--bone); border-color: var(--line-2); }

/* ---------- Stage ---------- */
.stage {
  position: relative; isolation: isolate; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); align-items: center;
  gap: clamp(16px, 2.6vw, 44px); padding: clamp(16px, 2.4vw, 40px);
  border: 1px solid var(--line);
}
.backdrop {
  position: absolute; inset: -40px; z-index: -1;
  background-size: cover; background-position: center;
  filter: blur(42px) saturate(1.2) brightness(.42);
  transform: scale(1.1); transition: background-image .4s;
}
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(5 5 7 / .15), rgb(5 5 7 / .75) 70%);
}
.cover { margin: 0; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cover img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; aspect-ratio: 1; object-fit: cover;
  box-shadow: 0 30px 80px rgb(0 0 0 / .65), 0 0 0 1px rgb(236 235 230 / .12);
}
.feature { container-type: inline-size; min-width: 0; min-height: 0; max-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.tracks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); flex: 0 1 auto; }
.tracks li { border-bottom: 1px solid rgb(58 56 112 / .5); }
.track {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 2.4ch 1fr auto; gap: 12px; align-items: baseline;
  padding: 8px 6px; font-size: .95rem; transition: background .15s;
}
.track:hover, .track:focus-visible { background: rgb(236 235 230 / .05); }
.track:focus-visible { outline: 1px solid var(--violet); outline-offset: -1px; }
.track:disabled { cursor: default; background: none; }
.track .num { color: var(--ember); font: 700 .72rem ui-monospace, monospace; }
.track time { color: var(--ash); font: .8rem ui-monospace, monospace; }
.track .eq { display: none; }
.is-active .track { background: rgb(224 54 44 / .1); }
.is-active .track .name { color: #fff; }
/* Animated bars replace the number on the playing track. */
.is-active .track .num { display: none; }
.is-active .track .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .8em; }
.track .eq i { width: 3px; height: 30%; background: var(--ember); }
.is-playing .track .eq i { animation: eq .9s ease-in-out infinite; }
.is-playing .track .eq i:nth-child(2) { animation-delay: -.3s; }
.is-playing .track .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .is-playing .track .eq i { animation: none; height: 70%; } }
.meta-row { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; flex: none; }
.runtime { margin: 0 auto 0 0; color: var(--ash); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 8px; }
.shelf button {
  all: unset; cursor: pointer; display: grid; gap: 6px; min-width: 0;
  opacity: .6; transition: opacity .2s, transform .2s;
}
.shelf button:hover, .shelf button:focus-visible { opacity: 1; transform: translateY(-2px); }
.shelf button[aria-current="true"] { opacity: 1; }
.shelf img { width: 100%; aspect-ratio: 1; object-fit: cover; outline: 1px solid var(--line-2); max-height: 15vh; }
.shelf button[aria-current="true"] img { outline: 2px solid var(--gold); }
.shelf strong { font: italic 600 .9rem/1.1 var(--serif); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf small { color: var(--ash); font-size: .7rem; letter-spacing: .1em; }

/* ---------- Bandcamp fallback embed (releases without hosted audio) ---------- */
.player { flex: none; }
.player[hidden] { display: none; }
.player-frame { height: 42px; border: 1px solid var(--line-2); background: var(--panel); overflow: hidden; }
.player-frame iframe { display: block; width: 100%; border: 0; }
.link-btn {
  all: unset; cursor: pointer; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 4px;
}
.link-btn.muted { color: var(--ash); text-decoration-color: var(--line-2); }
.link-btn:hover, .link-btn:focus-visible { color: #fff; }

/* ---------- Floating dock ----------
   Fixed to the viewport, outside the grid. While open, .app reserves its height
   (padding-bottom) so the dock never covers content and the page still never scrolls. */
:root { --dock-h: 72px; }
.dock {
  position: fixed; z-index: 50; left: 50%; bottom: var(--gap);
  width: min(980px, calc(100vw - 2 * var(--gap)));
  transform: translate(-50%, calc(100% + 2 * var(--gap)));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  background: rgb(11 11 18 / .78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line-2); box-shadow: 0 18px 50px rgb(0 0 0 / .6), inset 0 1px 0 rgb(236 235 230 / .06);
}
.dock[hidden] { display: block; visibility: hidden; }
body.dock-open .dock { transform: translate(-50%, 0); visibility: visible; }
body.dock-open .app { padding-bottom: calc(var(--dock-h) + 2 * var(--gap)); transition: padding .35s; }
@media (prefers-reduced-motion: reduce) { .dock, body.dock-open .app { transition: none; } }

.dock-inner {
  height: var(--dock-h); padding: 0 14px; display: grid; align-items: center; gap: 16px;
  grid-template-columns: auto minmax(120px, 1fr) auto minmax(180px, 2fr) auto;
}
.dock-art { width: 48px; height: 48px; object-fit: cover; outline: 1px solid var(--line-2); }
.dock-meta { min-width: 0; display: grid; }
.dock-title { font: italic 600 1.05rem/1.1 var(--serif); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-sub { font-size: .7rem; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock.is-error .dock-sub { color: var(--ember); }
.dock-transport { display: flex; align-items: center; gap: 4px; }
.dock-btn {
  all: unset; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; color: var(--bone);
  border-radius: 50%; transition: color .15s, background .15s;
}
.dock-btn:hover, .dock-btn:focus-visible { background: rgb(236 235 230 / .08); }
.dock-btn:focus-visible { outline: 1px solid var(--violet); }
.dock-btn:disabled { opacity: .3; cursor: default; background: none; }
.dock-play { width: 44px; height: 44px; background: var(--ember); color: #fff; }
.dock-play:hover, .dock-play:focus-visible { background: #ff4b3f; }
.dock.is-loading .dock-play { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.dock-scrub { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.dock-scrub time { font: .72rem ui-monospace, monospace; color: var(--ash); min-width: 4.5ch; text-align: center; }
.dock-volume { display: flex; align-items: center; gap: 4px; }
.dock-vol { width: 90px; }

/* Range inputs: thin rail, ember fill up to the thumb (--fill set from JS). */
.dock input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 4px; margin: 0; padding: 0; border: 0; cursor: pointer; background:
    linear-gradient(var(--ember), var(--ember)) 0 / var(--fill, 0%) 100% no-repeat, var(--line-2);
}
.dock input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bone); }
.dock input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--bone); }
.dock input[type="range"]:focus-visible { outline: 1px solid var(--violet); outline-offset: 6px; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions:empty { display: none; }
.actions.stack { flex-direction: column; align-items: stretch; }
.btn {
  font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 0 18px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bone); background: transparent; color: var(--bone); cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover, .btn:focus-visible { background: var(--bone); color: var(--void); }
.btn.primary { background: var(--ember); border-color: var(--ember); color: #fff; }
.btn.primary:hover, .btn.primary:focus-visible { background: #ff4b3f; border-color: #ff4b3f; color: #fff; }
.btn.small { min-height: 32px; padding: 0 12px; font-size: .64rem; }

/* ---------- Side (tabs) ---------- */
.side { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line); background: var(--panel); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tabs button {
  all: unset; cursor: pointer; text-align: center; padding: 14px 0;
  font: 600 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ash);
  border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--ember); }
.tabs button:hover, .tabs button:focus-visible { color: var(--bone); }
.tabpanel { padding: clamp(14px, 1.4vw, 20px); }
.tabpanel p { margin: 0 0 .9em; color: #cfcdd8; }
.tabpanel .eyebrow { margin: 1.4em 0 .7em; }
.lineup { list-style: none; margin: 0; padding: 0; }
.lineup li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.lineup small { color: var(--ash); }
.facts { margin: 1.2em 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts div { background: var(--panel); padding: 10px; }
.facts dt { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.facts dd { margin: 4px 0 0; font-size: .82rem; }
.press-logo { margin-top: 24px; width: 100%; opacity: .25; mix-blend-mode: screen; }

.list { display: grid; gap: 10px; }
.show { display: grid; grid-template-columns: 3rem 1fr; gap: 6px 14px; padding: 12px; border: 1px solid var(--line); background: rgb(5 5 7 / .6); }
.show .date { grid-row: span 2; text-align: center; font: italic 600 1.7rem/1 var(--serif); }
.show .date small { display: block; font: 700 .6rem var(--sans); letter-spacing: .16em; color: var(--ember); margin-bottom: 2px; }
.show .where strong { display: block; }
.show .where span { color: var(--ash); font-size: .8rem; }
.show .actions { grid-column: 2; gap: 6px; }
.badge { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border: 1px solid var(--line-2); color: var(--ash); }
.badge.selling_fast { color: var(--gold); border-color: var(--gold); }
.badge.sold_out, .badge.cancelled { text-decoration: line-through; }
.empty { display: grid; gap: 14px; padding: 18px; border: 1px dashed var(--line-2); text-align: center; }
.empty strong { font: italic 600 1.5rem/1.1 var(--serif); text-transform: uppercase; }
.empty p { margin: 0; }

/* ---------- Footer ---------- */
.bar { display: flex; justify-content: space-between; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); padding: 0 4px; }

/* ---------- Dialog ---------- */
dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 22px; border: 1px solid var(--line-2); background: var(--panel); color: var(--bone);
}
dialog::backdrop { background: rgb(5 5 7 / .8); backdrop-filter: blur(4px); }
form { display: grid; gap: 14px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 6px; font: 600 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
input, select, textarea { font: 14px var(--sans); color: var(--bone); background: var(--void); border: 1px solid var(--line-2); padding: 10px 11px; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--violet); border-color: var(--violet); }
.icon { all: unset; cursor: pointer; font-size: 1.7rem; line-height: 1; padding: 0 6px; }
.hp { position: absolute; left: -9999px; }
#form-status { margin: 0; flex: 1; }

/* Short desktop screens: smaller shelf so the tracklist keeps room. */
@media (min-width: 901px) and (max-height: 800px) {
  .shelf img { max-height: 10vh; width: auto; }
  .shelf strong { font-size: .8rem; }
  .feature { gap: 10px; }
}

/* Belt and braces: on desktop the body itself never scrolls, even mid font-swap. */
@media (min-width: 901px) and (min-height: 561px) { body { overflow: hidden; } }

/* ---------- Medium: drop tagline, tighten ---------- */
@media (max-width: 1180px) { .tagline { display: none; } }

/* ---------- Narrow / short: release the lock and stack ---------- */
@media (max-width: 900px), (max-height: 560px) {
  .app {
    height: auto; overflow: visible;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "top" "stage" "side" "bar";
  }
  .top { flex-wrap: wrap; }
  .links { order: 3; width: 100%; margin: 0; justify-content: space-between; }
  .top .btn { margin-left: auto; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .cover img { width: 100%; }
  .side .tabpanel { max-height: 70vh; }
  .grid2 { grid-template-columns: 1fr; }
  :root { --dock-h: 112px; }
  .dock-inner {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
    row-gap: 6px; padding: 10px 12px; height: auto;
  }
  .dock-art { width: 40px; height: 40px; }
  .dock-scrub { grid-column: 1 / -1; grid-row: 2; }
  .dock-volume { display: none; }
}