/* ══════════════════════════════════════════════════════════════════════════
   AyoSantiWTF — ACID POSTER
   Theme spec: docs/design-guide.md → "CURRENT THEME — Acid Poster (2026-09-28)"
   Reference graphic: inbox/todo-42/01-beat-prices.png

   A pricing sheet / gig poster, not a "music website". True black, one acid
   lime used hard and often, oversized condensed uppercase display type,
   monospace meta labels as the connective tissue, hairline rules instead of
   card shadows, barcode + waveform as inventory motifs.

   Written MOBILE-FIRST: everything below the first @media block is the phone
   layout. Larger screens only add columns. (Most of this audience arrives
   from Instagram on a phone — the reference is itself a 4:5 IG crop.)

   Replaces the 2026-09-26 chrome/glass theme wholesale. No --chrome, no
   backdrop-filter, no glass shadow anywhere in this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Anton — the display face (SELF-HOSTED) ────────────────────────────────
   Anton is OFL-1.1 (Google Fonts / Vernon Adams), so redistributing the font
   file from our own origin is allowed — no build step, no @import, no
   render-blocking round trip to fonts.googleapis.com before the font file is
   even requested.

   The src list is tried in order and the browser moves to the next entry on
   ANY failure (missing file, bad bytes), so this block is safe whatever is
   actually sitting in site/fonts/ right now:
     1. site/fonts/Anton-Regular.woff2  ← the one we want (39 KB)
     2. site/fonts/Anton-Regular.ttf    ← if only Google's .ttf zip got saved
     3. Google's own CDN copy           ← temporary safety net; DELETE line
                                           once site/fonts/ is populated, see
                                           site/fonts/README.md
   Single weight — never ask for 700 (see the display-type block below).
   font-display:swap paints headlines instantly in the condensed fallback
   (Impact/Haettenschweiler) and swaps Anton in when it arrives. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Anton-Regular.woff2") format("woff2"),
       url("fonts/Anton-Regular.ttf") format("truetype"),
       url("https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3K9-C8.woff2") format("woff2");
}

:root {
  --bg: #0a0a0a;
  --bg-raised: #111112;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.28);
  --text: #f5f5f0;
  --text-dim: #8c8c93;
  --accent: #d6ff3b;
  --accent-ink: #0a0a0a;
  --danger-dot: #ff3b3b;

  /* Impact/Haettenschweiler are the pre-installed condensed heavies, so the
     poster reads right even with zero webfont. */
  --display: "Anton", "Haettenschweiler", "Impact", "Franklin Gothic Medium Cond", "Arial Narrow", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --wrap: 1100px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 1px 5px;
  word-break: break-all;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Display type ─────────────────────────────────────────────────────────
   Anton is a single-weight face; never ask for 700 or the fallback goes
   faux-bold and loses the condensed proportions. */
h1, h2, h3,
.row-title, .row-price, .cta-band-title, .cta-band-price, .foot-handle {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
  margin: 0;
}

/* ── Mono meta labels — the most repeated texture in the reference ─────── */
.eyebrow, .tag, .status, .pill, .row-n, .cta-band-n, .shelf-status,
.step-n, .phase, .breadcrumb, .copyright, .spec-label,
.filter-field label, .filter-summary, .linkish, .tag-chip,
.kit-head, .soon, .shelf-go, .barcode-cap,
.pack-n, .band-range, .pack-deliver-head, .bpm, nav a {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Mono, but NOT uppercased — these carry literal values (a URL slug, a
   source's own title) where forced caps would misrepresent the content. */
.beat-slug {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.eyebrow {
  display: block;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 12px;
}

.tag {
  display: block;
  font-size: 10.5px;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ══ HEADER ═══════════════════════════════════════════════════════════════ */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 10, 10, 0.94);
  border-bottom: 1px solid var(--border);
}
header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
}

/* Wordmark: black "AYOSANTI" + the tilted lime "WTF" tag from the reference. */
.logo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.logo-wtf,
/* Compatibility: the store pages still carry the retired theme's
   .chrome-text span on the wordmark. They're rebuilt in a separate queued
   task; until then this keeps the brand mark identical everywhere. */
.logo .chrome-text {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 1px 5px 0;
  transform: rotate(-3deg);
  display: inline-block;
}

nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
nav::-webkit-scrollbar { display: none; }
nav a {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-left: 14px;
  white-space: nowrap;
  padding: 4px 0;
}
nav a:first-child { margin-left: 0; }
nav a:hover { color: var(--accent); text-decoration: none; }
nav a[aria-current="page"] { color: var(--accent); }

/* ══ STATUS BAR ═══════════════════════════════════════════════════════════
   Slim mono strip at the top of a page's hero: live label · page/number ·
   context tags. Reusable header pattern, per the design guide. */

.status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 20px;
}
.status-live {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.status-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger-dot);
  flex-shrink: 0;
}
.status-page { color: var(--text-dim); }
.status-page b { color: var(--accent); font-weight: 400; }
.status-tags { color: var(--text-dim); }
/* On a phone the three cells stack naturally; from tablet up they spread
   across the full rule like the reference. */

/* ══ WAVEFORM RULE ════════════════════════════════════════════════════════
   The decorative bar under hero headlines. Drawn entirely in CSS — four
   layered repeating gradients (tall + offset short bars, lime for the
   "played" portion, grey for the rest) so no page carries 90 <rect>s and no
   image file is needed. */

.wave {
  height: 34px;
  margin: 22px 0 26px;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, #4a4a50 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, #4a4a50 0 2px, transparent 2px 7px);
  background-size: 62% 100%, 62% 44%, 38% 66%, 38% 34%;
  background-position: 0 50%, 3.5px 50%, 100% 50%, calc(100% - 3.5px) 50%;
}
.wave-sm { height: 22px; margin: 16px 0 20px; }

/* ══ HERO ═════════════════════════════════════════════════════════════════
   The reference's header texture: a faint square grid and a lime glow
   bleeding in from the top-right corner. Background layers only — no extra
   markup, nothing to load. */

.hero, .article-hero {
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 100% at 100% 0%, rgba(214, 255, 59, 0.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 44px);
}

.hero {
  padding: 32px 0 36px;
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-size: clamp(44px, 13vw, 120px);
  margin: 0;
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero .lede,
.hero p.lede {
  font-size: 15.5px;
  color: var(--text-dim);
  max-width: 58ch;
  margin: 0 0 26px;
}
.hero-sub { padding: 28px 0 32px; }
.hero-sub h1 { font-size: clamp(38px, 11vw, 88px); }

/* Article hero — same system, one step down. */
.article-hero {
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--border);
}
.article-hero h1 { font-size: clamp(32px, 9vw, 64px); }
.article-hero .lede {
  font-size: 15.5px;
  color: var(--text-dim);
  max-width: 58ch;
  margin: 0;
}

.breadcrumb {
  display: inline-block;
  font-size: 10.5px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.breadcrumb:hover { color: var(--accent); text-decoration: none; }

/* ══ SECTIONS ═════════════════════════════════════════════════════════════ */

section {
  padding: 44px 0;
  border-bottom: 1px solid var(--border);
}
section:last-of-type { border-bottom: none; }

h2 { font-size: clamp(30px, 8vw, 52px); margin: 0 0 14px; }

.section-lede {
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 0 30px;
  font-size: 15.5px;
}
.sub-h {
  font-size: clamp(22px, 6vw, 32px);
  margin: 44px 0 12px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}

/* ══ BUTTONS ══════════════════════════════════════════════════════════════ */

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 20px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: #e4ff6e; border-color: #e4ff6e; text-decoration: none; }
.btn-outline {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-sm { font-size: 10px; padding: 10px 13px; white-space: nowrap; }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* ══ CTA BAND ═════════════════════════════════════════════════════════════
   One per screen, never more. Solid lime, black text — the reference's
   "EXCLUSIVE RIGHTS / NEGOTIABLE" row. */

.cta-band {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas:
    "n    title"
    ".    note"
    ".    price";
  column-gap: 10px;
  row-gap: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 20px 16px 22px;
  margin: 4px 0 0;
}
.cta-band:hover { text-decoration: none; background: #e4ff6e; }
/* The band is a <button> when it prefills an enquiry form (js/pricing.js) —
   strip the UA chrome so it renders identically to the <a> version. */
button.cta-band {
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cta-band-n {
  grid-area: n;
  font-size: 10px;
  color: rgba(10, 10, 10, 0.6);
  padding-top: 5px;
}
.cta-band-title {
  grid-area: title;
  font-size: clamp(26px, 8vw, 44px);
  color: var(--accent-ink);
}
.cta-band-note {
  grid-area: note;
  margin: 0;
  font-size: 14.5px;
  color: rgba(10, 10, 10, 0.78);
  max-width: 54ch;
}
.cta-band-price {
  grid-area: price;
  font-size: clamp(22px, 6vw, 34px);
  color: var(--accent-ink);
}
/* Band with no supporting line — title and value only. */
.cta-band-compact { grid-template-areas: "n title" ". price"; }
.cta-band-sub {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.6);
  margin-top: 4px;
}

/* ══ NUMBERED ROW ═════════════════════════════════════════════════════════
   The site's pattern for every ruled list: 01/02/03 in small lime mono, a
   huge display title, a grey one-liner, pills, and a big lime value at the
   right. Beat tiers, store shelves, guide lists, roadmap phases. */

.rows { border-top: 1px solid var(--border); }

.row {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas:
    "n    title"
    ".    desc"
    ".    pills"
    ".    price";
  column-gap: 10px;
  row-gap: 8px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
a.row:hover { text-decoration: none; background: var(--bg-raised); }
a.row:hover .row-title { color: var(--accent); }
/* A row is a <button> when it prefills an enquiry form directly (the
   mixing/mastering price rows have no separate card grid to click) —
   strip the UA chrome so it renders identically to the <a> version. */
button.row {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button.row:hover { background: var(--bg-raised); }
button.row:hover .row-title { color: var(--accent); }
.row-price-unit {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.row-n {
  grid-area: n;
  font-size: 10px;
  color: var(--accent);
  padding-top: 4px;
}
.row-title {
  grid-area: title;
  font-size: clamp(26px, 7.5vw, 40px);
  color: var(--text);
}
.row-desc {
  grid-area: desc;
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 58ch;
}
.row-price {
  grid-area: price;
  font-size: clamp(30px, 9vw, 52px);
  color: var(--accent);
  line-height: 1;
}
.row-price-sm { font-size: clamp(18px, 5vw, 26px); }
/* A row that's just a destination — title and value, no description or
   pills. Keeps the empty template rows from padding it out. */
.row-compact { grid-template-areas: "n title" ". price"; }
.row-note {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 5px;
}

/* Pills — lime = included/live, outline = not included, bordered-dark = an
   add-on ("+ CONTRACT" in the reference). */
.pills {
  grid-area: pills;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pill {
  font-size: 9.5px;
  padding: 4px 8px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  line-height: 1;
}
.pill.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.pill.is-add {
  background: var(--bg);
  border-color: var(--text);
  color: var(--text);
}

/* ══ CARD-ISH BLOCKS (hairline, never shadowed) ═══════════════════════════ */

.gap-grid, .tips-grid, .shelf-grid, .how-grid, .tier-grid, .band-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
/* The grids above use a 1px gap over a border-coloured backdrop so every
   divider is a true hairline with no doubled edges. Children fill it. */
.gap-card, .tip-card, .shelf-card, .how-step, .tier-card, .band-card {
  background: var(--bg);
  padding: 22px 18px;
  min-width: 0;
}

.gap-card h3, .tip-card h3, .shelf-card h3, .how-step h3,
.tier-card h3, .band-card h3 {
  font-size: 21px;
  margin: 0 0 8px;
  color: var(--text);
}
.gap-card p, .tip-card p, .shelf-card p, .how-step p,
.tier-card p, .band-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
}

.tip-card-link { display: block; color: var(--text); }
.tip-card-link:hover { text-decoration: none; background: var(--bg-raised); }
.tip-card-link:hover h3 { color: var(--accent); }
.soon, .shelf-go {
  display: block;
  margin-top: 14px;
  font-size: 10px;
  color: var(--accent);
}

.shelf-card { color: var(--text); }
.shelf-card:hover { text-decoration: none; background: var(--bg-raised); }
.shelf-card:hover h3 { color: var(--accent); }
.shelf-status {
  display: inline-block;
  font-size: 9.5px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 3px 8px;
  margin-bottom: 12px;
}
.shelf-card.is-live .shelf-status {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.how-step .step-n, .timeline-item .phase {
  display: block;
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 10px;
}

/* Roadmap timeline — same ruled-row logic as .row, kept on its own classes
   because the homepage copy lives in it. */
.timeline { border-top: 1px solid var(--border); }
.timeline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.timeline-item h3 { font-size: clamp(24px, 7vw, 34px); margin: 0 0 8px; }
.timeline-item p { margin: 0; color: var(--text-dim); font-size: 14.5px; max-width: 58ch; }
.timeline-item .status {
  display: inline-block;
  font-size: 9.5px;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 4px 8px;
  margin-top: 14px;
  line-height: 1;
}

/* ══ ARTICLE BODY ═════════════════════════════════════════════════════════ */

.article-body { padding: 40px 0; }
.article-body .wrap { max-width: 760px; }
.article-body h2 {
  font-size: clamp(24px, 6.5vw, 34px);
  margin: 40px 0 14px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
/* Only the article's own opening h2 loses the divider. Scoped to a direct
   child of .wrap on purpose: the licence page injects sections as
   <div id="licence-files"><h2>…, and those h2s ARE first children of their
   div — an unscoped :first-child would strip their section rule. */
.article-body > .wrap > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.article-body h3 { font-size: 20px; }
.article-body p { color: var(--text); margin: 0 0 16px; font-size: 16px; }
.article-body p.lede { color: var(--text-dim); }
.article-body ul { margin: 0 0 16px; padding-left: 18px; color: var(--text); }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--text); font-weight: 600; }

.callout {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 18px 20px;
  margin: 26px 0 30px;
}
.callout p { margin: 0; }
.callout ul { margin: 0; padding-left: 18px; }
.callout li { color: var(--text-dim); }

.notice {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  margin: 0 0 28px;
  max-width: 64ch;
  font-size: 14.5px;
  color: var(--text-dim);
}
.notice strong { color: var(--text); }
.notice em { color: var(--accent); font-style: normal; }

/* ══ RELATED / NEXT-UP LIST ═══════════════════════════════════════════════ */

.related { padding: 44px 0; }
.related-grid { border-top: 1px solid var(--border); }
.related-card {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15.5px;
}
.related-card:hover { color: var(--accent); text-decoration: none; }

.fineprint {
  font-size: 12.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 34px;
}

/* ══ FOLLOW BOX ═══════════════════════════════════════════════════════════ */

.follow-box {
  border: 1px solid var(--border);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.follow-box h3 { font-size: clamp(24px, 7vw, 34px); margin: 0 0 8px; }
.follow-box p { margin: 0; color: var(--text-dim); font-size: 14.5px; }

/* ══ FORMS ════════════════════════════════════════════════════════════════
   One pattern, one block — see site/js/capture.js. Every form here keeps its
   data-capture / data-status markup untouched. */

.capture-form,
.notify-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  flex-wrap: wrap;
}
.capture-form input[type="email"],
.capture-form input[type="text"],
.capture-form textarea,
.notify-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  border-radius: 0;
}
.capture-form input:focus,
.capture-form textarea:focus,
.notify-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.capture-form input::placeholder,
.capture-form textarea::placeholder { color: var(--text-dim); }
.capture-form button[disabled] { opacity: 0.6; cursor: default; }

/* Honeypot — must stay in the DOM and stay invisible to humans. */
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.capture-form-stacked {
  flex-direction: column;
  align-items: stretch;
  max-width: 640px;
}
.capture-form-stacked .field-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.capture-form-stacked textarea { width: 100%; resize: vertical; }
.capture-form-stacked .btn { align-self: flex-start; }

/* Injected by capture.js into every form: role / genre / handle / consent. */
.capture-extras { display: flex; flex-direction: column; gap: 10px; flex-basis: 100%; width: 100%; }
.capture-extras .field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.capture-extras select,
.capture-extras input[type="text"] {
  flex: 1; min-width: 160px;
  background: var(--bg-raised); border: 1px solid var(--border); color: var(--text);
  padding: 12px 12px; font: 15px/1.4 var(--sans); border-radius: 0;
}
.capture-extras select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.capture-extras select:focus,
.capture-extras input:focus { outline: none; border-color: var(--accent); }
.capture-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-dim); cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.capture-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }

.notify-note {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 12px;
  max-width: 60ch;
}
.notify-note.is-ok { color: var(--accent); }
.notify-note.is-error { color: #ff7a6b; }

/* ══════════════════════════════════════════════════════════════════════════
   STORE — beats catalogue, product pages, tiers, discography.
   Rendered by js/store.js, js/loops.js, js/discography.js;
   these class names are emitted by that JS and must not be renamed.
   ══════════════════════════════════════════════════════════════════════════ */

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.filter-search { grid-column: 1 / -1; }
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field label { font-size: 9.5px; color: var(--text-dim); }
.filter-field input,
.filter-field select {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  width: 100%;
  min-width: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.filter-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
.filter-field input:focus,
.filter-field select:focus { outline: none; border-color: var(--accent); }

.filter-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-dim);
}
.linkish {
  background: none;
  border: none;
  padding: 0;
  font-size: 10px;
  color: var(--accent);
  cursor: pointer;
}
.linkish:hover { text-decoration: underline; }

/* Beat / loop rows — the numbered-row logic applied to a playable list. */
.beat-grid { display: flex; flex-direction: column; }
.beat-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
}
.beat-card:hover, .beat-card.is-playing { background: var(--bg-raised); }
.beat-card.is-playing .play {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.play {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0;
}
.play:hover { border-color: var(--accent); color: var(--accent); }
.play[disabled] { cursor: default; opacity: 0.35; border-color: var(--border); color: var(--text-dim); }

.beat-meta { min-width: 0; }
.beat-meta h3 { margin: 0 0 6px; font-size: 19px; }
.beat-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.beat-tags .bpm { font-size: 10px; color: var(--accent); }
.tag-chip {
  font-size: 9.5px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 2px 6px;
  line-height: 1.4;
}
.tag-chip.is-flag {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.beat-slug { display: inline-block; margin-top: 8px; font-size: 9.5px; color: var(--text-dim); }
.beat-buy {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* The file-type model puts up to three buy buttons on a card (MP3 / MP3+WAV
   / stems) — they sit in a wrapping row so a linked card doesn't tower over
   an unlinked one. */
.buy-set { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.exclusive-ask { font-size: 9px; opacity: 0.75; }
.exclusive-ask:hover { opacity: 1; }

/* Free 5-loop pack rows. */
.pack-n { font-size: 11px; color: var(--accent); text-align: center; }
.pack-note { margin: 8px 0 0; font-size: 13.5px; color: var(--text-dim); max-width: 54ch; }
.pack-deliver { margin-top: 24px; }
.pack-deliver[hidden] { display: none; }
.pack-deliver .pack-deliver-head {
  font-size: 10px;
  color: var(--accent);
  margin: 0 0 8px;
}
.pack-deliver p { margin: 0 0 10px; color: var(--text-dim); font-size: 14.5px; }
.pack-deliver .btn { margin-top: 4px; }

.grid-note { font-size: 13px; color: var(--text-dim); margin: 18px 0 0; max-width: 62ch; }
.empty-state { color: var(--text-dim); font-size: 15px; padding: 36px 0; max-width: 58ch; margin: 0; }

/* Pricing tiers — the reference's price treatment: mono label, huge lime
   numeral. */
.tier-card.is-flag, .band-card.is-flag, .row.is-best { background: var(--bg-raised); }
.tier-price {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 9vw, 52px);
  line-height: 1;
  color: var(--accent);
  display: block;
}
.tier-card h3 {
  margin: 8px 0 10px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.band-range { display: block; font-size: 11px; color: var(--accent); }
.band-count {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  margin: 8px 0 10px;
}

/* Spec strip */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 26px;
}
.spec { background: var(--bg); padding: 16px 18px; }
.spec-label { display: block; font-size: 9.5px; color: var(--accent); margin-bottom: 6px; }
.spec-value { font-size: 14.5px; color: var(--text); }

/* Drum kit contents table */
.kit-table { border: 1px solid var(--border); }
.kit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  align-items: baseline;
}
.kit-row:first-child { border-top: none; }
.kit-row span:nth-child(2) { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.kit-row span:nth-child(3) { grid-column: 1 / -1; color: var(--text-dim); font-size: 13.5px; }
.kit-head {
  background: var(--bg-raised);
  font-size: 9.5px;
  color: var(--text-dim);
}
.kit-head span:nth-child(2) { font-size: 9.5px; color: var(--text-dim); }
.kit-head span:nth-child(3) { display: none; }
.kit-row.is-tie span:first-child { color: var(--accent); }

/* Discography — releases render as ruled rows (see .row), role is the big
   lime right-hand value. A row can't be one wrapping <a> like .shelf-card:
   a release may carry several outbound platform links, so the row itself is
   a plain container and each platform pill is its own anchor. */
.pill[href] { text-decoration: none; }
.pill[href]:hover { color: var(--accent); border-color: var(--accent); }

.empty-release {
  background: var(--bg);
  padding: 28px 20px;
  border-bottom: 1px solid var(--border);
}
.empty-release h2 { margin: 6px 0 14px; font-size: clamp(26px, 7vw, 38px); }
.empty-release p { color: var(--text-dim); margin: 0 0 14px; }
.empty-release p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   WATCH (/watch) — long-form video. Rendered from the `videos` array in
   js/catalogue.js by js/watch.js, same "data drives the DOM" pattern as
   discography's rows.
   ══════════════════════════════════════════════════════════════════════════ */

.video-grid { display: flex; flex-direction: column; gap: 28px; }
.video-card {
  border: 1px solid var(--border);
  background: var(--bg);
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-raised);
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* No YouTube ID yet — a typographic placeholder, same "honest empty state"
   the store uses for an unset Payment Link, not a broken embed. */
.video-frame.is-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(135deg, #111112 0 10px, #0a0a0a 10px 20px);
}
.video-pending-mark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}
.video-pending-mark strong { display: block; color: var(--accent); font-size: 12px; margin-bottom: 6px; }
.video-meta { padding: 20px 18px 22px; }
.video-meta h3 { margin: 0 0 8px; font-size: clamp(24px, 6.5vw, 32px); }
.video-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.video-desc { margin: 0 0 14px; color: var(--text-dim); font-size: 14.5px; max-width: 68ch; }
.video-links { display: flex; flex-wrap: wrap; gap: 14px; }
.video-links a { font-size: 11px; }
.video-chapters { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.video-chapters summary { cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.video-chapters summary:hover { color: var(--accent); }
.video-chapter-list { list-style: none; margin: 12px 0 0; padding: 0; }
.video-chapter-list li { display: flex; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--text-dim); }
.video-chapter-list .video-chapter-t { font-family: var(--mono); color: var(--accent); flex: 0 0 auto; }

.empty-video {
  border: 1px solid var(--border);
  padding: 28px 20px;
}
.empty-video h2 { margin: 6px 0 14px; font-size: clamp(26px, 7vw, 38px); }
.empty-video p { color: var(--text-dim); margin: 0 0 14px; }
.empty-video p:last-child { margin-bottom: 0; }

/* ══ FOOTER ═══════════════════════════════════════════════════════════════
   The reference's footer, verbatim in structure: white "IG" + lime handle on
   the left, barcode mark on the right, lime rule above it all. */

footer {
  border-top: 2px solid var(--accent);
  padding: 26px 0 36px;
}
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.foot-handle {
  display: block;
  font-size: clamp(28px, 9vw, 44px);
  color: var(--text);
  margin-bottom: 14px;
}
.foot-handle:hover { text-decoration: none; }
.foot-handle b { color: var(--accent); font-weight: 400; }

.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.foot-links a:hover { color: var(--accent); }

/* Barcode mark — light bars on black, as in the reference. Irregular bar
   widths inside one 14px period so it reads as a real barcode, not a
   uniform hatch. */
.foot-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}
.barcode {
  width: 118px;
  height: 36px;
  background-image: repeating-linear-gradient(90deg,
    var(--text) 0 1px, transparent 1px 3px,
    var(--text) 3px 5px, transparent 5px 6px,
    var(--text) 6px 7px, transparent 7px 10px,
    var(--text) 10px 13px, transparent 13px 14px);
}
.barcode-cap {
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1.7;
  text-align: right;
}

.copyright {
  display: block;
  font-size: 9.5px;
  color: var(--text-dim);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════
   LARGER SCREENS — the phone layout above is the baseline; these only add
   columns and air.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
  :root { --gutter: 32px; }

  header .wrap { min-height: 64px; }
  .logo { font-size: 23px; }
  nav a { font-size: 11px; margin-left: 22px; }

  .status-bar {
    flex-wrap: nowrap;
    justify-content: space-between;
    font-size: 11px;
    padding-bottom: 24px;
  }
  .status-tags { text-align: right; }

  .hero { padding: 48px 0 52px; }
  .hero-sub { padding: 40px 0 44px; }
  .article-hero { padding: 36px 0 40px; }
  .hero .lede, .hero p.lede, .article-hero .lede { font-size: 17px; }
  .wave { height: 44px; margin: 26px 0 30px; }

  section { padding: 64px 0; }
  .section-lede { font-size: 16.5px; }
  .article-body { padding: 56px 0; }

  /* Numbered rows go to the reference's three-column shape: number, body,
     big lime value pinned right. */
  .row {
    grid-template-columns: 46px 1fr auto;
    grid-template-areas:
      "n    title price"
      ".    desc  price"
      ".    pills price";
    column-gap: 20px;
    padding: 30px 0;
  }
  .row-compact { grid-template-areas: "n title price"; }
  .row-n { font-size: 11px; padding-top: 10px; }
  .row-price { align-self: center; justify-self: end; text-align: right; }

  .cta-band {
    grid-template-columns: 46px 1fr auto;
    grid-template-areas:
      "n title price"
      ". note  price";
    column-gap: 20px;
    padding: 26px 24px 28px;
  }
  .cta-band-compact { grid-template-areas: "n title price"; }
  .cta-band-n { font-size: 11px; padding-top: 10px; }
  .cta-band-price { align-self: center; justify-self: end; text-align: right; }

  .gap-grid, .tips-grid, .shelf-grid,
  .tier-grid, .band-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .gap-card, .tip-card, .shelf-card, .how-step, .tier-card, .band-card { padding: 26px 24px; }

  .timeline-item {
    grid-template-columns: 110px 1fr;
    column-gap: 24px;
    padding: 28px 0;
  }
  .timeline-item .phase { padding-top: 10px; margin-bottom: 0; }

  .follow-box { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 28px; }

  /* Beats has 5 filters, loops (.filters-4) has 4 — at tablet width both run
     three-up with the search field still spanning the row. */
  .filters { grid-template-columns: repeat(3, 1fr); }

  .beat-card { grid-template-columns: 40px 1fr auto; gap: 18px; padding: 16px 4px; }
  .play { width: 40px; height: 40px; }

  .spec-grid { grid-template-columns: repeat(4, 1fr); }

  .kit-row { grid-template-columns: 1.1fr 0.5fr 2fr; gap: 16px; padding: 13px 20px; }
  .kit-row span:nth-child(3) { grid-column: auto; }
  .kit-head span:nth-child(3) { display: block; }

  .empty-release { padding: 40px 32px; }
  .foot-handle { margin-bottom: 16px; }
}

@media (min-width: 1000px) {
  .hero { padding: 64px 0 64px; }
  .tips-grid, .how-grid { grid-template-columns: repeat(3, 1fr); }
  /* Inside the narrow article column (about page) three-up is too tight. */
  .article-body .how-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: repeat(3, 1fr); }
  .tier-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 660px; }
  .band-grid { grid-template-columns: repeat(4, 1fr); }
  .filters { grid-template-columns: 2fr repeat(4, 1fr); }
  .filters-4 { grid-template-columns: 2fr repeat(3, 1fr); }
  .filter-search { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ══ CHECKOUT DIALOG (site/js/checkout.js) ════════════════════════════════
   Only exists when STORE_API is set. A native <dialog>: focus trap, Esc to
   close and the backdrop come from the browser. Phone-first: full-width
   sheet pinned to the bottom, a centred panel from 600px up. */

dialog.checkout {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  background: var(--bg-raised);
  color: var(--text);
  overflow-y: auto;
}
dialog.checkout::backdrop { background: rgba(0, 0, 0, 0.72); }
@media (min-width: 600px) {
  dialog.checkout { margin: auto; border-bottom: 1px solid var(--border-strong); }
}
.co-form { padding: 22px var(--gutter) 20px; position: relative; }
.co-form h2 { margin: 6px 0 4px; padding-right: 36px; }
.co-close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--border); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.co-close:hover { border-color: var(--accent); color: var(--accent); }
.co-price { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--accent); margin: 4px 0 10px; }
.co-price span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-left: 8px; }
.co-what { margin: 0 0 8px; }
.co-when { margin: 0 0 14px; font-size: 14px; color: var(--text-dim); }
.co-when .pills { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.co-form label {
  display: block; margin: 14px 0 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.co-form label small { text-transform: none; letter-spacing: 0; opacity: 0.8; margin-left: 4px; }
.co-form input[type="text"], .co-form input[type="email"] {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font: 16px/1.3 var(--sans); padding: 12px;
}
.co-form input:focus { outline: none; border-color: var(--accent); }
.co-form .co-agree {
  display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 14px;
  font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text);
}
.co-agree input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.co-error { color: #ff7a70; font-size: 14px; margin: 0 0 12px; }
.co-go { width: 100%; text-align: center; }
.co-small { font-size: 12px; color: var(--text-dim); margin: 12px 0 0; }

/* ══ PLAYER BAR (site/js/player.js) ═══════════════════════════════════════
   Fixed to the bottom of the beats and loops pages, hidden until the first
   play. Acid Poster rules: true black, hairline rules, one lime accent, mono
   meta. The scrubber sits on the bar's top edge like a progress rule, and has
   a tall invisible hit area so it's draggable with a thumb. Phone layout
   first: title row, then controls; desktop puts all three zones on one row. */

.beat-card.is-current:not(.is-playing) .play { border-color: var(--accent); color: var(--accent); }

body.has-player { padding-bottom: 132px; }

.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(10, 10, 10, 0.96);
  border-top: 1px solid var(--border-strong);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.player[hidden] { display: none; }

.player-scrub { position: absolute; left: 0; right: 0; top: -9px; height: 18px; }
.player-seek {
  --pct: 0%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; display: block;
}
.player-seek::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--accent) var(--pct), var(--border-strong) var(--pct));
}
.player-seek::-moz-range-track { height: 3px; background: var(--border-strong); }
.player-seek::-moz-range-progress { height: 3px; background: var(--accent); }
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px;
  background: var(--accent); border: 0; border-radius: 0;
  opacity: 0; transition: opacity .15s;
}
.player-seek::-moz-range-thumb { width: 12px; height: 12px; background: var(--accent); border: 0; border-radius: 0; }
.player:hover .player-seek::-webkit-slider-thumb,
.player-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.player-seek:focus-visible { outline: none; }

.player-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px var(--gutter) 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "now side" "ctrls ctrls";
  align-items: center; gap: 6px 12px;
}
.player-now { grid-area: now; min-width: 0; display: flex; flex-direction: column; }
.player-title {
  font-family: var(--display); font-size: 20px; line-height: 1.05; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-meta, .player-time {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
.player-ctrls { grid-area: ctrls; display: flex; justify-content: center; align-items: center; gap: 6px; }
.player-side { grid-area: side; display: flex; align-items: center; gap: 8px; }

.pl-btn {
  width: 42px; height: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--text);
  cursor: pointer; border-radius: 0;
}
.pl-btn svg { width: 22px; height: 22px; fill: currentColor; }
.pl-btn:hover { color: var(--accent); }
.pl-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.pl-skip svg { width: 24px; height: 24px; }
.pl-skip text { fill: currentColor; }
.pl-main { width: 50px; height: 50px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pl-main:hover { background: #e4ff6e; color: var(--accent-ink); }
.pl-main svg { width: 24px; height: 24px; }
.pl-small { width: 34px; height: 34px; color: var(--text-dim); }
.pl-small svg { width: 18px; height: 18px; }

.player-vol { display: none; align-items: center; gap: 2px; }
.player-volume {
  --pct: 85%;
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 20px; background: transparent; cursor: pointer; margin: 0;
}
.player-volume::-webkit-slider-runnable-track {
  height: 3px; background: linear-gradient(to right, var(--text) var(--pct), var(--border-strong) var(--pct));
}
.player-volume::-moz-range-track { height: 3px; background: var(--border-strong); }
.player-volume::-moz-range-progress { height: 3px; background: var(--text); }
.player-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; background: var(--text); border: 0; border-radius: 0;
}
.player-volume::-moz-range-thumb { width: 10px; height: 10px; background: var(--text); border: 0; border-radius: 0; }
.player-volume:hover::-webkit-slider-thumb { background: var(--accent); }
.player-volume:focus-visible { outline: none; }

@media (min-width: 760px) {
  body.has-player { padding-bottom: 92px; }
  .player-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "now ctrls side";
    padding: 14px var(--gutter);
  }
  .player-side { justify-content: flex-end; }
  .player-vol { display: inline-flex; }
}