/* ============================================================
   Something Blue
   ------------------------------------------------------------
   Direction: THE WATERLINE.

   The name means three things at once — the color, the ocean,
   and blues the music. One mark carries all three: a single
   drawn line that is simultaneously an ocean swell and an
   audio waveform. They are the same shape. It is the page's
   only signature and its only motion.

   Rules, learned the hard way:

   1. THE SCENE IS DRAWN, NOT NAMED. The previous build called
      things .harbor and .lamps and rendered a gradient with a
      line through it. Class names are not design. If the water
      is meant to be there, it has to be on the canvas.

   2. NO ASSET DEPENDENCIES. The previous build outsourced all
      its warmth to live photos that don't exist, so it shipped
      cold and empty. This page must look finished with zero
      images. Photos improve it; nothing waits on them.

   3. WARM LIGHT IS A LIGHT SOURCE, NEVER INTERFACE. The sun
      and its reflection are warm because a setting sun is warm.
      No amber buttons, no amber borders. Classic rock and blues
      want analog warmth — it comes from the sun, not the UI.

   4. --sea and --sun are ATMOSPHERE. Contrast is checked below,
      not eyeballed. A tonal palette is the whole point of this
      direction and also exactly where contrast quietly breaks.
   ============================================================ */

:root {
  /* ── THE DESCENT ── grounds, never text ───────────────────
     One body of water, surface to floor. The canvas paints the
     hero and hands off at --depth-0; .depths picks the ramp up
     from exactly there and carries it to the floor. script.js
     reads --surface and --depth-0 from here so the handoff can
     never drift out of sync — edit them in one place only.

     --depth-0 is not a taste decision, it is a ceiling. The sun's
     glitter is additive warm light, so it only reads warm while
     the water's own blue stays low enough: over #10293A it lands
     at R-B +13 (warm), over #163A4F at -2 (dead grey). Any
     brighter here and rule 3 breaks — the sun goes colorless and
     the page loses the only warm thing on it. Don't raise it. */
  --surface: #1B3F56;  /* the water at the waterline */
  --depth-0: #10293A;  /* hero bottom = page top. the warmth ceiling. */
  --depth-1: #0C1F2C;
  --depth-2: #091620;
  --deep:    #060F16;  /* the floor */

  --water:  #0B1A24;  /* frames (photos), not ground */
  --swell:  #143247;  /* mid water */
  --sea:    #2E5F7D;  /* ATMOSPHERE ONLY — fails AA as text */

  /* ── text ──────────────────────────────────────────────────
     Ratios are vs --surface (#1B3F56) — the LIGHTEST ground any
     of these ever sits on, not --deep. Measuring against the
     floor is what hid the last bug: --label read 6.3:1 against
     --deep while actually sitting on the water at 3.6:1, and
     shipped failing. The floor is the friendliest ground on the
     page and therefore the most useless one to check. Now that
     the ground is a ramp, check the top of it. */
  --foam:   #E9F0F3;  /* primary text — 9.6:1 */
  --haze:   #ADC2CE;  /* secondary text — 6.0:1 */
  --label:  #93A9B7;  /* the quietest text allowed — 4.6:1 */
  --sun:    #E2894A;  /* the one warm light. atmosphere only. */

  --hairline: rgba(157, 180, 194, .15);
  --hairline-lit: rgba(157, 180, 194, .34);

  /* the nav is a pane of deep water, not a black bar. It has to
     stay a real scrim — the wordmark passes under it at full size
     and would eat the links otherwise — so it can't just go
     translucent. --depth-1 tint keeps it in the sea: 5.8:1 for
     links at its worst, which is over the wordmark itself. */
  --nav-glass: rgba(16, 41, 58, .88);        /* --depth-1 */
  --nav-glass-solid: rgba(16, 41, 58, .96);  /* the mobile panel */

  /* Fraunces: an old-style with soft, slightly wonky bones —
     a 70s record sleeve, not a software brand. Used with
     restraint: the wordmark and section titles, nothing else.
     Karla does all the work. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1080px;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--deep);
  color: var(--foam);
  font-family: var(--body);
  font-optical-sizing: auto;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--swell); color: var(--foam); }

:focus-visible {
  outline: 2px solid var(--haze);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: -100px; left: var(--pad);
  z-index: 60;
  background: var(--foam);
  color: var(--deep);
  font-size: .8rem;
  font-weight: 600;
  padding: .7rem 1rem;
  transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ── TK scaffolding ─────────────────────────────────────────
   Nothing here is real content. "TK" is a newsroom mark for
   "to come". It's loud on purpose: unfinished content cannot
   ship by accident. Delete these as you fill them in.
   The sodium-is-atmosphere rule doesn't apply to scaffolding,
   because scaffolding gets removed.
   ───────────────────────────────────────────────────────── */
.tk {
  font-family: var(--body);
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2A1707;
  background: var(--sun);
  padding: .25em .5em;
  border-radius: 2px;
  margin-right: .55em;
  white-space: nowrap;
  vertical-align: .12em;
}
.tk-block {
  border: 1px dashed rgba(226, 137, 74, .38);
  border-radius: 3px;
  background: rgba(226, 137, 74, .04);
  padding: 1.1rem 1.2rem;
}

/* ── NAV ────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--pad);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
/* The tint here is only the no-JS fallback — script.js samples the
   depth ramp on scroll and overrides backgroundColor inline, so the
   bar wears the exact colour of the water it is floating on. No
   hairline: a rule under a bar that matches its ground is just a
   line drawn across the gradient. */
.nav.scrolled {
  background: var(--nav-glass);
  backdrop-filter: blur(12px);
  border-bottom-color: transparent;
}
.brand {
  font-family: var(--display);
  font-variation-settings: 'opsz' 14, 'wght' 600, 'SOFT' 40, 'WONK' 1;
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: var(--foam);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--haze);
  transition: color .2s;
}
.nav-links a:hover { color: var(--foam); }
.nav-cta {
  border: 1px solid var(--hairline-lit);
  border-radius: 2px;
  padding: .5rem .9rem;
  color: var(--foam);
  transition: background .25s, border-color .25s;
}
.nav-cta:hover { background: rgba(157, 180, 194, .1); border-color: var(--haze); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 1.5px;
  background: var(--foam);
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══ THE HERO ════════════════════════════════════════════════
   sky (wordmark) above the waterline, water (notices) below.
   The canvas draws the whole scene: sky, sun, swell, glitter.
   script.js reads .hero-water's offset to place the waterline,
   so the drawn line lands exactly where the layout turns over.
   ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 6rem var(--pad) clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
}

.sea {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-sky,
.hero-water { position: relative; z-index: 2; }

.hero-sky {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* the wordmark: a quiet, tracked "Something" over a heavy
   "Blue" that sits on the water, backlit by the sun */
.wordmark { display: grid; gap: clamp(.5rem, 1.2vw, 1rem); }
.wm-something {
  font-family: var(--body);
  font-size: clamp(.7rem, 1.7vw, 1.1rem);
  font-weight: 500;
  letter-spacing: .48em;
  text-indent: .48em;
  text-transform: uppercase;
  color: var(--haze);
}
.wm-blue {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'wght' 900, 'SOFT' 60, 'WONK' 1;
  font-size: clamp(4.5rem, 21vw, 15rem);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--foam);
}
.wm-blue .char { display: inline-block; will-change: transform, opacity; }

/* ── THE WATER ── the notice board sits just under the line ── */
.hero-water {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

/* ── NOW ── the signpost at the waterline ────────────────────
   A count and an arrow, pointing at the gallery. It carries no
   news on purpose: the gallery owns every notice and its photo,
   and repeating the headline here is exactly the redundancy this
   replaced. Sized to hold the water strip at the height the hero
   was composed around — see the note in index.html. */
.now-heading {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: .9rem;
}
.now-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: .8rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.signpost {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .98rem;
  color: var(--foam);
  transition: gap .25s ease;
}
.signpost:hover { gap: .95rem; }
.signpost-count {
  border-bottom: 1px solid var(--hairline-lit);
  padding-bottom: 1px;
  transition: border-color .2s;
}
.signpost:hover .signpost-count { border-color: var(--foam); }
.signpost-arrow { color: var(--haze); }

.notice-empty {
  padding: .8rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--haze);
  font-size: .92rem;
}
.notice-empty a {
  font-weight: 600;
  color: var(--haze);
  border-bottom: 1px solid var(--hairline-lit);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.notice-empty a:hover { color: var(--foam); border-color: var(--foam); }

/* ══ THE DESCENT ═════════════════════════════════════════════
   Below the waterline the page keeps sinking. The light falls
   off as you go down, exactly as it does on the canvas above —
   the hero and the page are one body of water, and this is the
   half that used to be missing. The sections used to be flat
   --deep with a rule between each, which is the stacked-box
   reading this direction exists to avoid.

   One gradient on one container, not a background per section.
   Sections stay transparent, so nothing can seam at a boundary,
   and Live can appear or vanish without breaking the ramp. The
   gradient deliberately does NOT align to section edges: the
   water doesn't know where the boxes are.

   Depth is the separator. That is why there are no rules here.
   ══════════════════════════════════════════════════════════ */
.depths {
  background: linear-gradient(
    180deg,
    var(--depth-0) 0%,
    var(--depth-1) 38%,
    var(--depth-2) 72%,
    var(--deep) 100%
  );
}

.band-section {
  position: relative;
  padding: clamp(4.5rem, 11vw, 8.5rem) var(--pad);
  background: transparent;
}

.inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }

.head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: .7rem;
}
.title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72, 'wght' 700, 'SOFT' 50, 'WONK' 1;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--foam);
}
.lead {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--foam);
}
.body-text { color: var(--haze); }

/* ══ THE NOTICE GALLERY ═══════════════════════════════════════
   A scroll-snap track, not a transform carousel: the browser
   already does momentum, swipe, snapping and keyboard scrolling
   properly, and doing it by hand only means doing it worse. The
   arrows and dots drive scrollLeft; native swipe drives the same
   state back. One source of truth, and it degrades to a plain
   horizontally scrollable list with no JS at all.
   ══════════════════════════════════════════════════════════ */
.notices-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.gallery-nav { display: flex; gap: .5rem; }
.gallery-btn {
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--hairline-lit);
  border-radius: 2px;
  color: var(--foam);
  font-family: var(--body);
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s, border-color .25s, opacity .25s;
}
.gallery-btn:hover:not(:disabled) { background: rgba(157, 180, 194, .1); border-color: var(--haze); }
.gallery-btn:disabled { opacity: .3; cursor: default; }

.gallery {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* the track is the only thing on the page allowed to scroll
     sideways; the page itself never does */
  overscroll-behavior-x: contain;
}
.gallery::-webkit-scrollbar { display: none; }

.gallery-track {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: clamp(1rem, 3vw, 2rem);
}

.notice-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
}
/* a card with no picture is not a card with a hole in it */
.notice-card.no-image { grid-template-columns: minmax(0, 1fr); }

.notice-figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 2px;
  background: var(--water);
  border: 1px solid var(--hairline);
}
.notice-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.notice-body { display: grid; gap: .9rem; justify-items: start; }
.notice-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.notice-card .notice-date {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.notice-card .notice-kind {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--haze);
}
.notice-headline {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'wght' 600, 'SOFT' 50, 'WONK' 1;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--foam);
  text-wrap: balance;
}
.notice-card .notice-cta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--haze);
  border-bottom: 1px solid var(--hairline-lit);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.notice-card .notice-cta:hover { color: var(--foam); border-color: var(--foam); }

.gallery-dots {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
/* The mark is a 2px rule, but the button is not: a 2px-tall hit
   target is unusable with a finger and misses WCAG 2.5.8's 24px
   minimum. The bar is drawn by ::after so the control can be big
   while the design stays thin. */
.gallery-dot {
  width: 2.25rem;
  height: 24px;
  display: grid;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.gallery-dot::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--hairline-lit);
  transition: background .3s;
}
.gallery-dot[aria-current="true"]::after { background: var(--foam); }
.gallery-dot:hover::after { background: var(--haze); }

@media (max-width: 720px) {
  .notice-card { grid-template-columns: minmax(0, 1fr); }
}

/* ── live strip ── only rendered when real photos exist ───── */
.live-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(.5rem, 1.2vw, 1rem);
}
.live-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--water);
  border: 1px solid var(--hairline);
}
.live-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem .7rem .55rem;
  background: linear-gradient(180deg, transparent, rgba(6, 15, 22, .85));
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--foam);
}

/* ── shows ───────────────────────────────────────────────── */
.show-list { list-style: none; }
.show {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--hairline);
}
.show:last-child { border-bottom: 1px solid var(--hairline); }
.show-date {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--haze);
  font-variant-numeric: tabular-nums;
}
.show-where { display: grid; gap: .15rem; }
.show-city {
  font-family: var(--display);
  font-variation-settings: 'opsz' 24, 'wght' 600, 'SOFT' 50, 'WONK' 0;
  font-size: 1.25rem;
  color: var(--foam);
}
.show-venue { font-size: .85rem; color: var(--label); }
.show-cta {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--foam);
  border: 1px solid var(--hairline-lit);
  border-radius: 2px;
  padding: .55rem 1rem;
  transition: background .25s, border-color .25s;
}
.show-cta:hover { background: rgba(157, 180, 194, .1); border-color: var(--haze); }
.show-status {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
}
.shows-empty { display: grid; gap: 1rem; justify-items: start; }
.shows-empty p { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--foam); }
.shows-empty a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--haze);
  border-bottom: 1px solid var(--hairline-lit);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.shows-empty a:hover { color: var(--foam); border-color: var(--foam); }

/* ── the record ──────────────────────────────────────────── */
.record-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.record-detail { display: grid; gap: 1.75rem; }
.record-facts { display: grid; gap: 0; }
.fact {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .8rem 0;
  border-top: 1px solid var(--hairline);
}
.fact:last-child { border-bottom: 1px solid var(--hairline); }
.fact dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.fact dd { color: var(--foam); }
.record-cta { font-size: .95rem; color: var(--haze); }
.record-cta a {
  color: var(--foam);
  border-bottom: 1px solid var(--hairline-lit);
  transition: border-color .2s;
}
.record-cta a:hover { border-color: var(--foam); }

/* ── the band ────────────────────────────────────────────── */
.band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.members {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.member { display: grid; gap: .9rem; }
.member-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: var(--water);
  border: 1px solid var(--hairline);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-photo-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.member-name {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 24, 'wght' 600, 'SOFT' 50, 'WONK' 0;
  font-size: 1.1rem;
  color: var(--foam);
}
.member-role {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
}

/* ── stay close ──────────────────────────────────────────── */
.stay-inner { display: grid; gap: 1.1rem; justify-items: start; }
.stay-title { font-size: clamp(2.4rem, 7vw, 4.5rem); }
.stay-sub { color: var(--haze); max-width: 34ch; }
.signup[hidden] { display: none; }
.signup {
  display: flex;
  gap: .6rem;
  width: 100%;
  max-width: 30rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}
.signup input {
  flex: 1 1 14rem;
  background: rgba(157, 180, 194, .06);
  border: 1px solid var(--hairline-lit);
  border-radius: 2px;
  padding: .85rem 1rem;
  color: var(--foam);
  font-family: var(--body);
  font-size: .95rem;
}
.signup input::placeholder { color: var(--label); }
.signup input:focus { border-color: var(--haze); outline: none; }
.signup input:focus-visible { outline: 2px solid var(--haze); outline-offset: 2px; }
.btn {
  background: var(--foam);
  color: var(--deep);
  border: 1px solid var(--foam);
  border-radius: 2px;
  padding: .85rem 1.5rem;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn:hover { background: var(--haze); border-color: var(--haze); }
.form-msg { font-size: .88rem; color: var(--haze); min-height: 1.3em; }
.form-msg.error { color: #F2A6A6; }
.form-note {
  font-size: .82rem;
  color: var(--haze);
  max-width: 46ch;
  border: 1px dashed rgba(226, 137, 74, .38);
  border-radius: 3px;
  background: rgba(226, 137, 74, .04);
  padding: .8rem .9rem;
}
.list-note {
  font-size: 1rem;
  color: var(--haze);
  max-width: 34ch;
}

/* ── footer ──────────────────────────────────────────────── */
/* the floor. the ramp above ends on exactly this color, so there
   is no rule here either — you simply run out of water. */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2.5rem var(--pad);
  background: var(--deep);
}
.footer-brand {
  font-family: var(--display);
  font-variation-settings: 'opsz' 14, 'wght' 600, 'SOFT' 40, 'WONK' 1;
  font-size: 1rem;
  color: var(--foam);
}
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--haze);
  transition: color .2s;
}
.footer-links a:hover { color: var(--foam); }
.footer small { font-size: .75rem; color: var(--label); }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.footer-credit { opacity: .7; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .record-grid,
  .band-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 5.5rem var(--pad) 2rem;
    background: var(--nav-glass-solid);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { font-size: 1rem; }

  .show {
    grid-template-columns: 1fr auto;
    gap: .5rem 1rem;
  }
  .show-date { grid-column: 1 / -1; }
  .members { grid-template-columns: repeat(2, 1fr); }
  .footer { flex-direction: column; align-items: flex-start; }
  .footer-meta { align-items: flex-start; }
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}