/* ==========================================================================
   Peraoke — UX/UI pass on the existing design.
   Palette, type and components are taken from peraoke.com as-is:
   black + teal, Libre Franklin, the teal-bar artist card, the zigzag footer.
   Everything here is a usability change, not a restyle.
   ========================================================================== */

:root {
  /* Sampled from the live site */
  --black:      #000000;   /* header, hero band */
  --ink:        #141519;   /* footer top */
  --panel:      #25282B;   /* footer links band */
  --bar:        #1D1D1D;   /* bottom bar */
  --slate:      #4B4B4B;   /* "Recent Uploads" band */
  --mist:       #E9E9E9;   /* "Popular Artists" band */
  --text:       #222222;
  --muted:      #69727D;
  --teal:       #1ED1CF;   /* links, active nav */
  --logo-teal:  #3EA9A4;   /* the logo's teal */
  --mint:       #7BE8C0;   /* the mint used across the video artwork */

  /* Added for contrast only — #1ED1CF on white is 1.9:1 and fails WCAG.
     Same hue, dark enough to read as body/link text on light backgrounds. */
  --teal-ink:   #0B7C7B;

  /* The artist photos are square PNGs with transparent corners — the artwork
     inside is already a circle. This is what shows through those corners on
     light sections; black made every card look like a hole in the page. */
  --tile:       #E3E5E8;

  --font: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut: clamp(1rem, 4vw, 2.5rem);
  --max: 1360px;
  --header-h: 84px;
  --radius: 12px;
  --shadow: 0 14px 34px -14px rgba(0,0,0,.5);
  --focus: 0 0 0 3px rgba(30,209,207,.55);
}

*, *::before, *::after { box-sizing: border-box; }
/* The browser hides [hidden] with display:none, but any rule of ours that
   sets display — grid, flex, block — quietly outranks it, and the element
   stays on screen while the code believes it is gone. That is how the play
   overlay ended up sitting on top of a video that was playing perfectly well
   underneath it. One rule, so it can never happen again. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

.wrap { width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: 1rem; z-index: 200;
  background: var(--teal); color: #05201F; padding: .6rem 1rem;
  border-radius: 0 0 8px 8px; font-weight: 700; transition: top .18s;
}
.skip-link:focus { top: 0; }
.fa { font-family: "Vazirmatn", Tahoma, sans-serif; unicode-bidi: isolate; }

/* ---------- Bands (the site's existing section colours) ---------- */
.band { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--black { background: var(--black); color: #fff; }
.band--mist  { background: var(--mist); }
.band--slate { background: var(--slate); color: #fff; }
.band--white { background: #fff; }
.band--slate .lede, .band--black .lede { color: rgba(255,255,255,.88); }

/* ---------- Type ---------- */
.h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.h3 { font-size: 1.05rem; font-weight: 700; }
.lede { font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--muted); max-width: 58ch; }
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal);
}
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sec-head .h2 { margin-top: .3rem; }
.link-more { font-weight: 700; font-size: .9rem; color: var(--teal-ink); border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.band--slate .link-more, .band--black .link-more { color: var(--teal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: .95rem; cursor: pointer; background: none;
  transition: background-color .18s, color .18s, border-color .18s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn--teal { background: var(--teal); color: #05201F; }
.btn--teal:hover { background: var(--mint); }
.btn--outline { border-color: currentColor; color: var(--text); }        /* the site's "All Artists" pill */
.btn--outline:hover { background: var(--text); color: #fff; }
.btn--outline-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--text); }
.btn--sm { padding: .5rem 1.05rem; font-size: .82rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--black); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }
.brand { flex: none; display: block; }
.brand img { height: 50px; width: auto; max-width: 200px; object-fit: contain; }
.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a {
  padding: .55rem .85rem; border-radius: 8px; font-size: .95rem; font-weight: 600;
  color: rgba(255,255,255,.86); transition: color .16s, background-color .16s;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] { color: var(--teal); }
.header-tools { display: flex; align-items: center; gap: .5rem; flex: none; }

.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.22); color: #fff;
  background: none; cursor: pointer; transition: border-color .18s, background-color .18s;
}
.icon-btn:hover { border-color: var(--teal); background: rgba(30,209,207,.12); }
.nav-toggle, .search-toggle { display: none; }
.nav__search, .nav__donate { display: none; }

@media (max-width: 1040px) {
  /* ---------- Phone header ----------
     Shorter, because a sticky bar costs the same screen on every page, and a
     phone hasn't got it to spare. Three things, in the order they're wanted:
     find something, give something, everything else. */
  :root { --header-h: 68px; }
  /* iOS puts the address bar at the bottom now, so the top of the page sits
     directly under the clock and battery. Without this the header slides
     underneath them and the logo loses its top edge. env() is zero on
     everything that doesn't have a notch, so it costs nothing elsewhere. */
  .site-header { padding-top: env(safe-area-inset-top); }
  .site-header .wrap { gap: .6rem; padding-block: .3rem; }
  /* Bigger, because on a phone the logo is the only thing telling you whose
     site this is — the wordmark was smaller than the Donate button. */
  .brand img { height: 48px; max-width: 175px; }
  .nav-toggle, .search-toggle { display: grid; }
  .header-tools > .search { display: none; }
  /* Room to tell them apart, and to hit the one you meant. On a phone the
     nav is a fixed drawer, so it no longer pushes anything — without this the
     buttons huddle against the logo with a third of the bar empty to their
     right. */
  .header-tools { gap: .6rem; margin-left: auto; }
  .icon-btn { width: 40px; height: 40px; border-radius: 11px; }
  .donate-pill { padding: .5rem 1rem; font-size: .82rem; }
  /* Phone order, left to right: logo, menu, search, Donate. Donate sits
     furthest right, under the thumb, where it is hardest to miss. */
  .nav-toggle { order: 1; }
  .search-toggle { order: 2; }
  .donate-pill { order: 3; }

  /* The menu drops from under the header as a panel, with the page dimmed
     behind it so it reads as "on top of" rather than "part of". */
  /* Below the header, not above it. The panel slides out from behind the bar
     and tucks back behind it — which also means a few pixels of overshoot are
     hidden rather than sitting on top of the logo, which is exactly what was
     showing as a stray line across the top of the header. */
  .nav {
    position: fixed; left: 0; right: 0; z-index: 70;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #0A0B0C; border-bottom: 1px solid rgba(255,255,255,.12);
    padding: .35rem 0 .5rem;
    box-shadow: 0 22px 40px -18px rgba(0,0,0,.9);
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    overflow-y: auto;
    /* Exactly its own height: any more and it reappears above the header on a
       short menu, any less and it hangs below. Hidden as well as moved, so a
       closed menu can't be reached by tabbing. */
    transform: translateY(-100%); visibility: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
  }
  .nav[data-open="true"] {
    transform: translateY(0); visibility: visible;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* Rows sized for a thumb — 52px, not the 85px they were, so the whole menu
     fits on the screen without scrolling. */
  .nav a {
    display: flex; align-items: center; min-height: 52px;
    padding: 0 var(--gut); border-radius: 0; font-size: 1.02rem; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a:hover, .nav a:active { background: rgba(255,255,255,.05); }
  /* The current page gets a teal edge, which survives being glanced at. */
  .nav a[aria-current="page"] {
    color: var(--teal); background: rgba(30,209,207,.08);
    box-shadow: inset 3px 0 0 var(--teal);
  }

  .nav-scrim {
    position: fixed; z-index: 60;
    inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0;
    /* No backdrop-filter: on a phone it forces the whole panel onto a
       composited layer and the text renders soft. */
    background: rgba(0,0,0,.6);
    opacity: 0; transition: opacity .25s;
  }
  .nav-scrim[data-open="true"] { opacity: 1; }

  /* Search gets its own drawer. Tapping the magnifier should hand you a
     keyboard, not a list of links. */
  .header-search {
    position: fixed; left: 0; right: 0; z-index: 70;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    background: #0A0B0C; border-bottom: 1px solid rgba(255,255,255,.12);
    padding: .6rem var(--gut) .75rem;
    box-shadow: 0 18px 34px -20px rgba(0,0,0,.9);
  }
  .header-search .search { max-width: none; flex: 1 1 auto; }
}

/* Desktop keeps the search in the bar; the drawer is a phone thing. */
@media (min-width: 1041px) {
  .header-search { display: none !important; }
  .nav-scrim { display: none !important; }
}

/* ---------- Search (one search, everywhere) ---------- */
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search__field {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: .5rem .9rem;
  transition: border-color .18s, background-color .18s;
}
.search__field:focus-within { border-color: var(--teal); background: rgba(255,255,255,.14); }
.search__field svg { flex: none; opacity: .7; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: .92rem; }
.search input::placeholder { color: rgba(255,255,255,.6); }
.search kbd {
  font: inherit; font-size: .7rem; padding: .1rem .35rem; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7);
}
/* Light variant for use on white/mist bands */
.search--light .search__field { background: #fff; border-color: rgba(0,0,0,.16); }
.search--light .search__field:focus-within { border-color: var(--teal-ink); }
.search--light input::placeholder { color: var(--muted); }
.search--light kbd { border-color: rgba(0,0,0,.2); color: var(--muted); }

.results {
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 90;
  background: #fff; color: var(--text); border-radius: 12px; overflow: hidden auto;
  box-shadow: 0 22px 48px -12px rgba(0,0,0,.55); max-height: 420px;
  border: 1px solid rgba(0,0,0,.08);
}
/* (the global [hidden] rule at the top covers this now) */
.results__group { padding: .5rem .85rem .25rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.results a { display: flex; align-items: center; gap: .7rem; padding: .5rem .85rem; }
.results a:hover, .results a.is-active { background: rgba(30,209,207,.14); }
.results img { width: 44px; height: 30px; object-fit: cover; border-radius: 5px; flex: none; }
.results .r-main { min-width: 0; flex: 1; }
.results .r-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .r-sub { font-size: .76rem; color: var(--muted); }
.results .r-fa { font-size: .82rem; color: var(--muted); }
.results__empty { padding: 1.25rem .9rem; text-align: center; font-size: .88rem; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--black); color: #fff; overflow: hidden; }
.hero__collage { position: absolute; inset: 0; display: flex; opacity: .5; }
.hero__collage span { flex: 1; background-size: cover; background-position: center top; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.35) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero__inner { max-width: 620px; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; margin-block: .75rem .9rem; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero p { color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero__search { margin-top: 1.5rem; max-width: 460px; }
.hero__stats { display: flex; gap: 2.25rem; margin-top: 2rem; flex-wrap: wrap; }
.hero__stats b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--teal); line-height: 1.2; }
.hero__stats span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.66); }

/* ---------- Artist card (the site's card, made consistent everywhere) ---------- */
/* The artist photos are square and carry their own name badge, so the picture
   is never cropped and the name sits under it rather than on top of it. */
.artist-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: 14px 14px 10px 10px;
  overflow: hidden; background: var(--tile);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.artist-card:hover, .artist-card:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); }
.artist-card__art { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tile); flex: none; }
/* Clipped to a circle. The photos are already circular artwork on a square
   canvas, so this only ever removes corner — and it means a file whose corners
   are filled rather than transparent can't put a black box on a light page. */
.artist-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.artist-card__bar {
  display: block;
  background: var(--logo-teal); color: #fff;
  padding: .45rem .7rem .5rem;
  text-align: right; line-height: 1.25; flex: 1 1 auto; }
.artist-card__fa { font-size: .88rem; font-weight: 600; }
.artist-card__en { font-size: .82rem; font-weight: 700; }
.artist-card__count {
  position: absolute; top: .55rem; right: .55rem;
  background: rgba(0,0,0,.68); color: #fff; border-radius: 999px;
  padding: .15rem .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
.artist-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s;
}
.artist-card:hover .artist-card__play, .artist-card:focus-visible .artist-card__play { opacity: 1; }
.artist-card__play svg { width: 52px; height: 52px; }

.grid-artists {
  display: grid; gap: clamp(.7rem, 1.4vw, 1.15rem);
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

/* Horizontal rail with arrow controls (was: a plain overflow row) */
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.15rem);
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding-bottom: .5rem; scrollbar-width: thin;
}
.rail__track > * { scroll-snap-align: start; }
.rail__track::-webkit-scrollbar { height: 6px; }
.rail__track::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 99px; }
.band--black .rail__track::-webkit-scrollbar-thumb, .band--slate .rail__track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }
.rail__btn {
  position: absolute; top: calc(50% - 22px); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--text); box-shadow: 0 6px 20px rgba(0,0,0,.35);
  display: grid; place-items: center; transition: transform .16s, opacity .16s;
}
.rail__btn:hover { transform: scale(1.08); }
.rail__btn[disabled] { opacity: 0; pointer-events: none; }
.rail__btn--prev { left: -18px; }
.rail__btn--next { right: -18px; }
@media (max-width: 760px) { .rail__btn { display: none; } }

/* ---------- Filters / A–Z index (new) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  border: 1px solid rgba(0,0,0,.18); color: var(--text); background: #fff; cursor: pointer;
  transition: all .16s;
}
.chip:hover { border-color: var(--teal-ink); color: var(--teal-ink); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.alpha { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.75rem; }
.alpha button {
  min-width: 32px; height: 32px; padding: 0 .3rem; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; background: rgba(0,0,0,.05); color: var(--text);
  font-size: .85rem; font-weight: 700; transition: all .14s;
}
.alpha button:hover { background: rgba(0,0,0,.12); }
.alpha button[aria-pressed="true"] { background: var(--teal); color: #05201F; }
.alpha button[disabled] { opacity: .3; cursor: default; }
.count-note { font-size: .85rem; color: var(--muted); }
.letter-head {
  grid-column: 1 / -1; font-size: 1.5rem; font-weight: 800; color: var(--muted);
  border-bottom: 2px solid rgba(0,0,0,.1); padding-bottom: .3rem; margin-top: .75rem;
}
.empty-state { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: .35rem; }

/* ---------- Artist page ---------- */
.crumb { font-size: .85rem; color: rgba(255,255,255,.7); padding-top: 1.25rem; }
.crumb a { color: var(--teal); font-weight: 600; }
.crumb span { opacity: .55; padding: 0 .4rem; }

.artist-head { background: var(--black); color: #fff; padding-bottom: 1.75rem; }
.artist-head__row { display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; padding-top: 1rem; }
.artist-head__art {
  width: 132px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; flex: none;
  background: #11161A; box-shadow: var(--shadow);
  border: 3px solid rgba(255,255,255,.14);
}
@media (max-width: 560px) { .artist-head__art { width: 104px; } }
.artist-head__meta { flex: 1 1 240px; }
.artist-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.artist-head__fa { font-size: 1.05rem; color: var(--teal); }
.artist-head__facts { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: .3rem; }
.artist-head__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Player + playlist, side by side — the core UX change */
.stage { background: var(--slate); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.stage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
@media (max-width: 1080px) { .stage__grid { grid-template-columns: 1fr; } }

.player { background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.player__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player__frame img { width: 100%; height: 100%; object-fit: cover; }
.player__big {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(0,0,0,.28); transition: background-color .2s;
}
.player__big:hover { background: rgba(0,0,0,.14); }
.player__big svg { width: 84px; height: 84px; filter: drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
.player__badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 3;
  background: rgba(0,0,0,.7); color: #fff; border-radius: 999px;
  padding: .25rem .75rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.player__badge b { color: var(--mint); }

.controls { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem 1rem; background: #0b0c0e; color: #fff; }
.controls button { border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; border-radius: 8px; padding: .3rem; transition: color .16s, background-color .16s; }
.controls button:hover { color: var(--teal); background: rgba(255,255,255,.08); }
.controls .play { width: 44px; height: 44px; background: var(--teal); color: #05201F; border-radius: 50%; flex: none; }
.controls .play:hover { background: var(--mint); color: #05201F; }
.time { font-size: .78rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); min-width: 3rem; text-align: center; flex: none; }
.scrub { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; min-width: 60px; }
.scrub__fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 99px; background: var(--teal); }
.scrub__knob { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.scrub:hover .scrub__knob, .scrub:focus-visible .scrub__knob { opacity: 1; }
.controls .spacer { flex: none; margin-left: auto; display: flex; gap: .2rem; }
@media (max-width: 560px) { .controls .time.total { display: none; } }

.now-title { padding: .9rem 1rem 1rem; background: #0b0c0e; color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.now-title h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.now-title .sub { font-size: .88rem; color: rgba(255,255,255,.66); }
.now-title .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.now-actions { display: flex; gap: .4rem; }
.ghost-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: #fff;
  background: none; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .16s;
}
.ghost-btn:hover { border-color: var(--teal); color: var(--teal); }
.ghost-btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #05201F; }

/* Playlist — song titles as readable text, which the carousel never gave you */
.playlist { background: #1b1d20; border-radius: var(--radius); overflow: hidden; color: #fff; box-shadow: var(--shadow); }
.playlist__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.playlist__head h2 { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.playlist__filter { padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.playlist__filter .search__field { padding: .4rem .75rem; }
.playlist__scroll { max-height: 520px; overflow-y: auto; scrollbar-width: thin; }
.playlist__scroll::-webkit-scrollbar { width: 8px; }
.playlist__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 99px; }

.track {
  display: grid; grid-template-columns: 62px minmax(0,1fr) auto; gap: .75rem; align-items: center;
  width: 100%; text-align: left; padding: .55rem .9rem; border: 0; background: none; color: inherit;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06); transition: background-color .15s;
}
.track:hover { background: rgba(255,255,255,.07); }
.track[aria-current="true"] { background: rgba(30,209,207,.16); }
.track[aria-current="true"] .track__t { color: var(--teal); }
.track__thumb { width: 62px; aspect-ratio: 16/9; border-radius: 5px; object-fit: cover; }
.track__t { font-size: .92rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__fa { font-size: .8rem; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__d { font-size: .78rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.eq { display: inline-flex; gap: 2px; height: 11px; align-items: flex-end; margin-right: .35rem; vertical-align: -1px; }
.eq i { width: 3px; background: var(--teal); animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .18s; } .eq i:nth-child(3) { animation-delay: .36s; }
@keyframes eq { 0%,100% { height: 3px; } 50% { height: 11px; } }

/* Song grid below the player — the old carousel, unrolled so nothing hides off-screen */
.grid-songs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* A column that fills its grid cell, so a card with a one-line title is the
   same height as one with three and the white body grows to meet the bottom.
   It used to be a plain block on a #111 background: the leftover space under
   short cards showed through as a black bar. */
.song-card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow); transition: transform .18s;
}
.song-card:hover, .song-card:focus-visible { transform: translateY(-3px); }
.song-card__art { position: relative; aspect-ratio: 16/9; flex: none; background: #111; }
.song-card__art img { width: 100%; height: 100%; object-fit: cover; }
.song-card__dur { position: absolute; right: .4rem; bottom: .4rem; background: rgba(0,0,0,.8); color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; }
.song-card__body { padding: .6rem .7rem .75rem; background: #fff; flex: 1 1 auto; }
/* The body is white wherever the card lands, so it has to say its own colour.
   On a dark band it was inheriting the band's white text onto a white card
   and the title simply wasn't there. */
.song-card__t { font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.song-card__fa { font-size: .82rem; color: var(--muted); }
.band--slate .song-card__body, .band--black .song-card__body { background: #fff; }

/* ---------- Prose / forms ---------- */
.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.05rem; color: #33383f; }
.prose h2 { font-size: 1.4rem; font-weight: 800; margin: 2rem 0 .6rem; }
.prose a { color: var(--teal-ink); font-weight: 600; border-bottom: 1px solid rgba(11,124,123,.35); }

.field { display: block; margin-bottom: 1.05rem; }
.field > span { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .7rem .9rem; border-radius: 9px; outline: none;
  border: 1px solid rgba(0,0,0,.2); background: #fff; transition: border-color .16s, box-shadow .16s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal-ink); box-shadow: var(--focus); }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: .78rem; color: var(--muted); font-weight: 400; }

/* ---------- Cards used on About / Calendar / Donations ---------- */
.cards { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card {
  border: 1px solid rgba(0,0,0,.1); border-radius: var(--radius); padding: 1.4rem 1.25rem;
  background: #fff; display: flex; flex-direction: column; gap: .55rem;
}
.card--dark { background: var(--panel); border-color: rgba(255,255,255,.1); color: #fff; }
.card--feature { border-color: var(--teal-ink); box-shadow: 0 0 0 1px var(--teal-ink); }
.card ul { display: grid; gap: .35rem; font-size: .9rem; color: var(--muted); }
.card li::before { content: "▸"; color: var(--teal-ink); margin-right: .45rem; }
.card .btn { margin-top: auto; }
.amount { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }

.event { display: grid; grid-template-columns: 82px 1fr auto; gap: 1.1rem; align-items: center; padding: 1rem .9rem; border: 1px solid rgba(0,0,0,.1); border-radius: var(--radius); background: #fff; transition: border-color .18s, box-shadow .18s; }
.event:hover { border-color: var(--teal-ink); box-shadow: var(--shadow); }
.event__date { text-align: center; border-right: 1px solid rgba(0,0,0,.12); padding-right: 1rem; }
.event__date b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.05; }
.event__date span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.event p { font-size: .88rem; color: var(--muted); }
@media (max-width: 620px) { .event { grid-template-columns: 70px 1fr; } .event .btn { grid-column: 1 / -1; } }

/* ---------- Footer (kept: logo, FOLLOW US ON, zigzag, four columns) ---------- */
.site-footer { background: var(--ink); color: #fff; }
.footer-top { text-align: center; padding: 3rem var(--gut) 3.25rem; }
.footer-top img { height: 96px; margin: 0 auto 1.25rem; }
.footer-top h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.socials { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1rem; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); transition: all .18s; }
.socials a:hover { border-color: var(--teal); color: var(--teal); background: rgba(30,209,207,.12); }

.zigzag-wrap { background: var(--panel); }
.zigzag {
  height: 18px; background: var(--ink);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100%;
}
.footer-links { background: var(--panel); padding: 2.5rem var(--gut) 2.75rem; }
.footer-links .cols { display: grid; gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin-inline: auto; }
@media (max-width: 720px) { .footer-links .cols { grid-template-columns: repeat(2, 1fr); } }
.footer-links h3 { font-size: 1rem; font-weight: 800; color: var(--teal); margin-bottom: .6rem; }
.footer-links a { display: block; padding: .18rem 0; font-size: .92rem; color: rgba(255,255,255,.88); transition: color .16s; }
.footer-links a:hover { color: var(--teal); }
.footer-bar { background: var(--bar); color: rgba(255,255,255,.6); font-size: .82rem; padding: 1rem var(--gut); }
.footer-bar .inner { max-width: var(--max); margin-inline: auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  background: #fff; color: var(--text); border-radius: 999px; padding: .65rem 1.2rem;
  font-size: .88rem; font-weight: 700; box-shadow: 0 16px 40px -10px rgba(0,0,0,.55);
  z-index: 120; transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.toast[data-show="true"] { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout fixes: span-based card internals need to be blocks ---------- */
.song-card__art, .song-card__body, .song-card__t, .song-card__fa,
.track__t, .track__fa,
.results .r-title, .results .r-sub { display: block; }
.hero__collage { opacity: .85; }
.hero__collage span { filter: saturate(1.15); }

/* Logo fallback if the hosted PNG is unreachable */
.brand-fallback { display: block; line-height: 1; }
.brand-fallback b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--logo-teal); letter-spacing: -.02em; }
.brand-fallback span { display: block; font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--logo-teal); }
.footer-top .brand-fallback b { font-size: 2.4rem; }
.footer-top .brand-fallback { margin-bottom: 1.25rem; }

/* ---------- Player: Vimeo mount, poster, notices ---------- */
.player__frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player__mount { position: absolute; inset: 0; }
.player__mount iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
/* Vimeo's SDK wraps the iframe in a div and sizes it with an inline
   "padding-top: 56.25%; position: relative" — the old way of holding a 16:9
   box open. Our frame already is 16:9, so we drop the padding. But the inline
   position:relative beats a plain stylesheet rule, so without !important the
   wrapper kept its own positioning, lost the padding that gave it height, and
   collapsed to zero — an iframe 798 pixels wide and 0 tall. The audio played.
   Nothing was visible. Every value here has to outrank an inline style. */
.player__mount > div {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; padding: 0 !important;
}
.player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.player__big { z-index: 3; }
.player__badge { z-index: 4; }

/* ---------- Full screen ----------
   The whole player goes full screen, not just the video, so the transport bar
   comes with it — otherwise you're stuck with no way to pause or skip without
   dropping out first. The video takes all the room it can and the bar floats
   over the bottom of it, fading away after three seconds of stillness. */
/* position:relative so the floating bar is placed against the player rather
   than falling through to the viewport. */
.player:fullscreen { position: relative; display: flex; flex-direction: column; border-radius: 0; background: #000; }
.player:fullscreen .player__frame {
  flex: 1 1 auto; aspect-ratio: auto; min-height: 0;
}
/* Room to breathe under the video, so the bar isn't sitting on the lyrics. */
.player:fullscreen .now-title,
.player:fullscreen .player__notice:not([hidden]) { display: none; }
.player:fullscreen .controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 1.1rem 1.6rem 1.3rem;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.55) 60%, transparent);
  transition: opacity .3s, transform .3s;
}
.player:fullscreen[data-idle="true"] .controls {
  opacity: 0; transform: translateY(12px); pointer-events: none;
}
.player:fullscreen[data-idle="true"] { cursor: none; }
/* Bigger targets on a screen you're watching from across the room. */
.player:fullscreen .controls .play { width: 56px; height: 56px; }
.player:fullscreen .controls button svg { width: 26px; height: 26px; }
.player:fullscreen .time { font-size: .95rem; min-width: 4rem; }

/* ---------- Full screen, done by hand ----------
   iPhone Safari has no element full-screen API — not prefixed, not anything —
   so on the device most people actually sing with, the button did nothing. We
   pin the player over the viewport instead. Same result, same controls, and it
   works in every browser including the ones that refuse the real thing.

   dvh rather than vh: on a phone, vh is the height with the browser chrome
   hidden, so the bottom of the player sits underneath the address bar. */
.player[data-faux="true"] {
  position: fixed; inset: 0; z-index: 999;
  width: 100vw;
  /* Order matters and I had it backwards. The later declaration wins, so
     this used to resolve to 100vh — which on iOS is the height of the page
     *including* the browser chrome. The player was taller than the screen
     and the transport bar sat below the bottom edge, which is why full
     screen on a phone had no controls. dvh is the visible height, and it
     tracks the address bar sliding in and out. vh stays first as the
     fallback for browsers that don't know dvh. */
  height: 100vh;
  height: 100dvh;
  border-radius: 0; background: #000;
  display: flex; flex-direction: column;
  /* Nothing on the page should scroll behind it or peek past the edges. */
  overflow: hidden; overscroll-behavior: contain;
}
.player[data-faux="true"] .player__frame {
  flex: 1 1 auto; aspect-ratio: auto; min-height: 0;
}
.player[data-faux="true"] .now-title,
.player[data-faux="true"] .player__notice { display: none; }
/* The page behind must not scroll while this is up — on iOS a fixed overlay
   still lets the document underneath move, which is most of the "glitchy". */
body:has(.player[data-faux="true"]) { overflow: hidden; }
.player[data-faux="true"] .controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.55) 60%, transparent);
  transition: opacity .3s;
}
.player[data-faux="true"][data-idle="true"] .controls { opacity: 0; pointer-events: none; }

/* Safari names the pseudo-class differently and won't parse the rule above. */
.player:-webkit-full-screen { position: relative; display: flex; flex-direction: column; border-radius: 0; background: #000; }
.player:-webkit-full-screen .player__frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.player:-webkit-full-screen .now-title { display: none; }
.player:-webkit-full-screen .controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 1.1rem 1.6rem 1.3rem;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.55) 60%, transparent);
  transition: opacity .3s;
}
.player:-webkit-full-screen[data-idle="true"] .controls { opacity: 0; pointer-events: none; }
.player__notice {
  margin: 0; padding: .6rem 1rem; font-size: .85rem; font-weight: 600;
  background: #0b0c0e; color: var(--mint); border-top: 1px solid rgba(255,255,255,.08);
}
.player__notice[data-kind="warn"]  { color: #F5D27A; }
.player__notice[data-kind="error"] { color: #FF9C8A; }
.controls .fullscreen { flex: none; }

/* Songs with no video attached yet */
.track__soon {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 0 .3rem;
  color: rgba(255,255,255,.6); vertical-align: 1px; margin-left: .3rem;
}

/* Very narrow phones */
@media (max-width: 560px) {
  /* Donate stays. It is how the site is paid for, and burying it in a menu
     on the device most people use is how it stops earning. It keeps a real
     tap target though — this is the button that pays for the site. */
  .donate-pill { padding: .45rem .85rem; font-size: .78rem; }
  /* There is room for it now that the group is pushed to the right edge. */
  .header-tools { gap: .55rem; }
  .icon-btn { width: 38px; height: 38px; }
  .brand img { height: 46px; max-width: 165px; }
}
/* Below 360px — an old SE — the wordmark, three buttons and their gaps no
   longer add up, so the logo gives way rather than pushing Donate off. */
@media (max-width: 359px) {
  .brand img { height: 34px; max-width: 116px; }
  .donate-pill { padding: .4rem .7rem; font-size: .74rem; }
  .icon-btn { width: 36px; height: 36px; }
  .brand-fallback b { font-size: 1.2rem; }
  .brand-fallback span { font-size: .5rem; letter-spacing: .22em; }
}

/* Artist bio, under the name on the artist page */
.artist-head__bio {
  margin-top: .55rem; max-width: 62ch;
  font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.82);
}
.artist-head__art img { width: 100%; height: 100%; object-fit: cover; }

/* Request form */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .row-2 { grid-template-columns: 1fr; } }
.form-note {
  margin-top: 1rem; font-size: .92rem; font-weight: 600;
  padding: .7rem .9rem; border-radius: 9px;
  background: rgba(30,209,207,.12); color: var(--teal-ink);
  border: 1px solid rgba(11,124,123,.25);
}
.form-note[data-kind="error"] {
  background: rgba(211,80,60,.1); color: #A93A28; border-color: rgba(211,80,60,.3);
}

/* ---------- Hero: a moving wall of artist faces ---------- */
.hero__faces {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: .6rem; overflow: hidden; opacity: .95;
}
.marquee {
  display: flex; gap: .6rem; width: max-content;
  animation: slide 70s linear infinite;
}
.marquee--rev { animation-direction: reverse; animation-duration: 90s; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Deliberately never pauses on hover — the movement is the point. */

/* Square, because the photos are square and already carry the artist's name —
   a label of our own on top of them would sit on the one already in the picture. */
.face {
  position: relative; flex: none; width: 132px; aspect-ratio: 1/1;
  border-radius: 10px; overflow: hidden; background: #11161A;
}
.face img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* On a phone the faces move from "texture behind the words" to a band of their
   own along the bottom, at full strength, with the copy sitting clear above it. */
@media (max-width: 880px) {
  /* The band is pinned to the bottom of the hero and given exactly the height
     of two rows plus the gap between them. It used to be the full height of
     the hero with the rows pushed to the end, which meant that whenever the
     copy above ran long the second row was pushed past the bottom edge and
     clipped — half a row of faces, apparently frozen, then gone. Measured on
     the live site: the faces box ended 99px below the fold. */
  :root { --face: 104px; --face-gap: .5rem; }
  .hero__faces {
    top: auto; bottom: 0; height: calc(var(--face) * 2 + var(--face-gap));
    justify-content: flex-start; gap: var(--face-gap); opacity: 1;
  }
  /* Room for the band, plus a breath between it and the last line of copy. */
  .hero .wrap { padding-bottom: calc(var(--face) * 2 + var(--face-gap) + 1.75rem); }
  .face { width: var(--face); }
  /* Twice the speed on a phone. The desktop timing crosses a narrow screen at
     about 32 pixels a second — roughly one face every three seconds, which
     reads as a still photograph rather than a moving wall. */
  .marquee { gap: var(--face-gap); flex: none; animation-duration: 34s; }
  .marquee--rev { animation-duration: 44s; }
}
@media (max-width: 560px) {
  :root { --face: 92px; --face-gap: .4rem; }
  .face { border-radius: 8px; }
}

/* The scrim has to work over photographs, not a flat panel */
.hero::after {
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.93) 34%, rgba(0,0,0,.6) 58%, rgba(0,0,0,.34) 100%);
}
@media (max-width: 880px) {
  /* Dark where the words are, then lets go so the faces below actually read. */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.93) 40%,
      rgba(0,0,0,.6) 66%, rgba(0,0,0,.26) 82%, rgba(0,0,0,.18) 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ---------- Artist beside the player ---------- */
.now-title__who { display: flex; gap: .85rem; align-items: flex-start; min-width: 0; }
.now-face {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(255,255,255,.22); background: #11161A;
}
.now-bio {
  font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.62);
  max-width: 54ch; margin-top: .25rem;
}
@media (max-width: 560px) { .now-face { width: 42px; height: 42px; } .now-bio { display: none; } }

/* ---------- Calendar of birthdays and anniversaries ---------- */
.cal-month {
  font-size: 1.15rem; font-weight: 800; margin: 2rem 0 .75rem;
  padding-bottom: .35rem; border-bottom: 2px solid rgba(0,0,0,.1);
}
.cal-month:first-child { margin-top: 0; }
.cal-list { display: grid; gap: .5rem; }
.cal-row {
  display: grid; grid-template-columns: 56px 52px 1fr auto; gap: 1rem; align-items: center;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: .6rem .9rem;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.cal-row:hover { border-color: var(--teal-ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.cal-row__date { text-align: center; }
.cal-row__date b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.05; }
.cal-row__date span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cal-row__pic { position: relative; display: block; width: 52px; height: 52px; }
.cal-row__face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--tile); }
.cal-row__mark {
  position: absolute; right: -5px; bottom: -3px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
.cal-row__mark svg { width: 14px; height: 14px; }
.cal-row--died .cal-row__mark { color: #0C0D0F; }
.cal-row--born .cal-row__mark { color: var(--teal-ink); }

/* A quiet edge so the two kinds separate before you read a word of it. */
.cal-row--died { border-left: 4px solid #0C0D0F; }
.cal-row--born { border-left: 4px solid var(--logo-teal); }
.cal-row--died .cal-row__name { color: #0C0D0F; }
.cal-row__name { display: block; font-weight: 700; }
.cal-row__kind { display: block; font-size: .82rem; color: var(--muted); }
.cal-row__away { font-size: .82rem; font-weight: 700; color: var(--teal-ink); white-space: nowrap; }
@media (max-width: 620px) {
  .cal-row { grid-template-columns: 46px 44px 1fr; gap: .7rem; padding: .55rem .7rem; }
  .cal-row__pic, .cal-row__face { width: 44px; height: 44px; }
  .cal-row__mark { width: 21px; height: 21px; }
  .cal-row__mark svg { width: 12px; height: 12px; }
  .cal-row__away { display: none; }
}

/* ---------- Donations ---------- */
.cards--two { max-width: 760px; margin-inline: auto; }
.hint-line {
  margin-top: 1.25rem; font-size: .85rem; color: var(--muted); text-align: center;
}

/* ---------- Shop ---------- */
.grid-prod {
  display: grid; gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: 1.5rem;
}
.prod {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 14px;
  overflow: hidden; box-shadow: 0 8px 22px -16px rgba(0,0,0,.4);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.prod:hover, .prod:focus-visible {
  transform: translateY(-4px); border-color: var(--teal-ink);
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.45);
}
.prod__art { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--tile); overflow: hidden; }
.prod__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A product with no photo yet gets the mark rather than a white hole. */
.prod__blank { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink); }
.prod__blank svg { width: 54px; height: 54px; opacity: .5; }
.prod__tag {
  position: absolute; left: .55rem; top: .55rem;
  background: var(--teal); color: #05201F; border-radius: 999px;
  padding: .18rem .6rem; font-size: .7rem; font-weight: 800; letter-spacing: .02em;
}
.prod__sold {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.78); color: var(--text);
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem;
}
.prod--out { opacity: .85; }
.prod--out:hover { transform: none; border-color: rgba(0,0,0,.1); }
.prod__body { display: flex; flex-direction: column; flex: 1; padding: .85rem .95rem 1rem; gap: .15rem; }
.prod__t { display: block; font-weight: 700; line-height: 1.3; }
.prod__fa { display: block; font-size: .88rem; color: var(--muted); }
.prod__blurb { display: block; font-size: .85rem; color: var(--muted); line-height: 1.5; margin-top: .3rem; }
.prod__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .8rem; }
.prod__price { font-weight: 800; font-size: 1.05rem; }
.prod__price s { font-weight: 500; font-size: .82rem; color: var(--muted); margin-left: .15rem; }
.prod__buy {
  font-size: .82rem; font-weight: 800; color: var(--teal-ink);
  border: 2px solid currentColor; border-radius: 999px; padding: .25rem .8rem;
  transition: background-color .16s, color .16s;
}
.prod:hover .prod__buy { background: var(--teal-ink); color: #fff; }
.prod--out .prod__buy { color: var(--muted); }
.prod--out:hover .prod__buy { background: none; color: var(--muted); }

/* ---------- Explainer sheet ----------
   Used for the "watch on your TV" instructions, which are three sentences too
   long for a toast and worth reading properly. */
.sheet { border: 0; padding: 0; background: none; max-width: min(460px, 92vw); }
.sheet::backdrop { background: rgba(0,0,0,.55); }
.sheet__panel { background: #fff; border-radius: 14px; padding: 1.5rem 1.5rem 1.25rem; }
.sheet__panel h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .6rem; }
.sheet__body { font-size: .95rem; line-height: 1.6; color: #333840; }
.sheet__body b { color: var(--teal-ink); }
.sheet__ok { margin-top: 1.1rem; width: 100%; }

/* The TV button sits next to full screen and reads as an action, not a state. */
.controls .tv svg { width: 22px; height: 22px; }

/* ---------- iOS zoom ----------
   Safari on iPhone zooms the whole page in whenever you focus a field whose
   text is under 16px — which was every search box, filter and form on the
   site. The page then stays zoomed, and you're left pinching your way back.
   Sixteen pixels exactly is the threshold, so that is what touch devices get.
   Nothing changes on a desktop, where the smaller type is fine. */
@media (pointer: coarse), (max-width: 1040px) {
  input, select, textarea, .search input { font-size: 16px; }
}

/* ---------- The video that outlives the page ----------
   #vhost is a child of <body>, so soft navigation never touches it and the
   embed inside is never rebuilt. It is drawn over the space the artist page
   leaves for it, rather than placed inside that space — putting it inside
   would mean moving the iframe, and moving an iframe reloads it.

   z-index 1 so the poster (2), the play button (3) and the badge (4) still
   sit on top of it; 1001 when the player is in full screen, which pins itself
   above everything at 999. */
#vhost { position: fixed; z-index: 1; overflow: hidden; background: #000; }
#vhost .player__mount { position: absolute; inset: 0; }
/* Nothing here is ever clicked — our own bar drives playback — and letting it
   swallow taps is how it ended up blocking the controls underneath it. */
#vhost { pointer-events: none; }
/* Except in cast mode, where Vimeo's own bar is showing and its AirPlay and
   Chromecast buttons are the entire point. */
#vhost[data-cast="true"] { pointer-events: auto; }

/* In full screen the player pins itself above everything at 999, and its
   control bar is a child of that — so a video drawn above 999 would hide the
   controls completely. Instead the video goes just underneath at 998, on its
   own black backdrop, and the player above it turns transparent so the video
   shows through with the controls still on top. */
body[data-vfs="true"] .player[data-faux="true"],
body[data-vfs="true"] .player[data-faux="true"] .player__frame,
body[data-vfs="true"] .player:fullscreen,
body[data-vfs="true"] .player:fullscreen .player__frame { background: transparent; }
#vhost[data-top="true"] { z-index: 998; }
body[data-vfs="true"]::before {
  content: ''; position: fixed; inset: 0; background: #000; z-index: 997;
}