/* ============================================================
   DAVID ALAN GRAHAM - Beach Country
   Gulf Coast sunset palette, editorial serif, analog grain,
   with a glassmorphism chrome layer and a drifting sunset mesh.

   THE LAW OF THIS FILE:

     Glass is for chrome and containers. Never for a reading surface.

     Nav, filter bars, toolbars, chips, badges, popovers, sticky
     controls, card FRAMES  ->  glass.
     Chord charts, lyrics, prose, form fields  ->  --paper, opaque,
     sitting inside the glass frame.

   Two problems die with that one rule. Frosted glass needs variation
   behind it to frost - over flat cream, backdrop-filter is a no-op that
   reads as cheap. And translucent surfaces are where WCAG contrast goes
   to die, because the effective background is unknowable. Chrome gets
   the glass; text gets a known substrate.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- BRAND: carried over from the original site, byte for byte ---- */
  --sand:#f4e8d6; --sand-warm:#ecd9b8; --sand-deep:#d9bd8c;
  --sunset:#f76c3a; --sunset-hot:#ef4b2e; --coral:#ff8c6a;
  --peach:#ffc59b; --gold:#f4b44a;
  --sea:#2a5d6e; --sea-deep:#163847; --night:#0f2430;
  --ink:#1b1208; --cream:#fbf5e9;

  /* ---- ACCESSIBLE INK VARIANTS ----
     --sunset on cream is about 3.0:1 and fails AA for body text, which is
     a live defect on the current site. Use --sunset for fills, borders and
     decoration; use --sunset-ink whenever the colour carries text. */
  --sunset-ink:#c2451c;
  --sea-ink:#1f4c5c;
  --gold-ink:#8a5a10;

  /* ---- SEMANTIC SURFACES ---- */
  --bg:#fbf5e9;
  --paper:#fffdf8;
  --paper-sunk:#f7efe1;
  --text:#1b1208;
  --text-muted:#6b5844;      /* 6.7:1 on --paper */
  --text-faint:#79654c;      /* 5.0:1 on --paper - meta text only */
  --line:rgba(27,18,8,.10);
  --line-strong:rgba(27,18,8,.20);

  /* ---- GLASS ---- */
  --glass-bg:rgba(255,253,248,.58);
  --glass-bg-2:rgba(255,253,248,.80);
  --glass-bg-deep:rgba(22,56,71,.62);
  --glass-brd:rgba(255,255,255,.55);
  --glass-brd-warm:rgba(247,108,58,.18);
  --glass-blur:16px;
  --glass-blur-sm:10px;
  --glass-sat:1.45;
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.70);

  /* ---- ELEVATION: warm-tinted, never neutral grey ---- */
  --e0:0 1px 0 rgba(22,56,71,.05);
  --e1:0 1px 2px rgba(22,56,71,.06), 0 2px 8px -2px rgba(22,56,71,.09);
  --e2:0 2px 4px rgba(22,56,71,.06), 0 10px 26px -6px rgba(22,56,71,.13);
  --e3:0 4px 8px rgba(22,56,71,.07), 0 20px 44px -12px rgba(22,56,71,.17);
  --e4:0 10px 20px rgba(22,56,71,.08), 0 36px 72px -18px rgba(22,56,71,.24);
  --e-sun:0 12px 40px -12px rgba(247,108,58,.45);

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ---- MOTION: --e-out is the original site's curve; keep it ---- */
  --d-1:120ms; --d-2:220ms; --d-3:380ms; --d-4:620ms;
  --e-out:cubic-bezier(.2,.8,.2,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --max:1280px; --max-read:68ch; --max-chart:52rem;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --nav-h:64px;

  /* ---- CHART RUNTIME: app.js writes these from the toolbar ---- */
  --chart-fs:1.05rem;
  --chart-lead:2.7;
  --chord-ink:var(--sunset-ink);
  --chord-fs:.8em;
}

/* ---- DARK / STAGE MODE ----
   Musicians read charts on a phone in a dim room, so this is not a
   nice-to-have. The mesh dims rather than disappears so glass still frosts. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0d1a22;
  --paper:#14242e;
  --paper-sunk:#0f1d26;
  --text:#f2e7d5;
  --text-muted:#a8bcc4;
  --text-faint:#7e949e;
  --line:rgba(242,231,213,.12);
  --line-strong:rgba(242,231,213,.24);
  --sunset-ink:#ff9166;
  --sea-ink:#8fc4d6;
  --gold-ink:#f0c069;
  --glass-bg:rgba(20,36,46,.62);
  --glass-bg-2:rgba(20,36,46,.82);
  --glass-brd:rgba(255,255,255,.12);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.10);
  --e1:0 1px 2px rgba(0,0,0,.34), 0 2px 8px -2px rgba(0,0,0,.42);
  --e2:0 2px 4px rgba(0,0,0,.34), 0 10px 26px -6px rgba(0,0,0,.48);
  --e3:0 4px 8px rgba(0,0,0,.36), 0 20px 44px -12px rgba(0,0,0,.55);
  --e4:0 10px 20px rgba(0,0,0,.40), 0 36px 72px -18px rgba(0,0,0,.62);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0d1a22; --paper:#14242e; --paper-sunk:#0f1d26;
    --text:#f2e7d5; --text-muted:#a8bcc4; --text-faint:#7e949e;
    --line:rgba(242,231,213,.12); --line-strong:rgba(242,231,213,.24);
    --sunset-ink:#ff9166; --sea-ink:#8fc4d6; --gold-ink:#f0c069;
    --glass-bg:rgba(20,36,46,.62); --glass-bg-2:rgba(20,36,46,.82);
    --glass-brd:rgba(255,255,255,.12);
    --glass-hi:inset 0 1px 0 rgba(255,255,255,.10);
    --e1:0 1px 2px rgba(0,0,0,.34), 0 2px 8px -2px rgba(0,0,0,.42);
    --e2:0 2px 4px rgba(0,0,0,.34), 0 10px 26px -6px rgba(0,0,0,.48);
    --e3:0 4px 8px rgba(0,0,0,.36), 0 20px 44px -12px rgba(0,0,0,.55);
    --e4:0 10px 20px rgba(0,0,0,.40), 0 36px 72px -18px rgba(0,0,0,.62);
  }
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

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

body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

a { color:inherit; text-decoration:none; }
img,svg { max-width:100%; display:block; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
h1,h2,h3,h4 { text-wrap:balance; }
p { text-wrap:pretty; }

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

.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;
}
.hidden { display:none !important; }
.hide-mobile { display:none; }
@media (min-width:720px) { .hide-mobile { display:inline; } }

.skip-link {
  position:absolute; left:var(--s-4); top:-100px; z-index:200;
  background:var(--paper); color:var(--text);
  padding:var(--s-3) var(--s-5); border-radius:var(--r-sm);
  box-shadow:var(--e3); font-weight:600;
  transition:top var(--d-2) var(--e-out);
}
.skip-link:focus { top:var(--s-4); }

/* ============================================================
   BACKDROP: "Sunset Mesh"
   Four slow-drifting warm radial blobs over cream, with --sea anchoring
   the bottom so it reads as coast at golden hour rather than generic
   dark-SaaS aurora.

   Deliberately NO filter:blur(). Softness lives in the gradient colour
   stops instead, because blur(70px) on a 900px element is a per-frame GPU
   repaint and stacking backdrop-filter on top of that janks on an iPad.
   Radial-gradient stops are free.
   ============================================================ */
.mesh {
  position:fixed; inset:0; z-index:-2;
  background:var(--bg);
  overflow:hidden;
  contain:strict;
  pointer-events:none;
}
.mesh__blob {
  position:absolute;
  width:70vmax; aspect-ratio:1;
  border-radius:50%;
  will-change:transform;
  animation:drift var(--dur) var(--e-soft) infinite alternate;
}
.mesh__blob--sun {
  top:-22vmax; left:-12vmax; --dur:58s;
  background:radial-gradient(circle at 50% 50%,
    rgba(244,180,74,.42) 0%, rgba(244,180,74,.22) 34%,
    rgba(244,180,74,.06) 58%, transparent 72%);
}
.mesh__blob--coral {
  top:18vmax; right:-20vmax; --dur:71s; animation-delay:-14s;
  background:radial-gradient(circle at 50% 50%,
    rgba(247,108,58,.34) 0%, rgba(255,140,106,.16) 38%, transparent 70%);
}
.mesh__blob--peach {
  bottom:6vmax; left:22vmax; --dur:84s; animation-delay:-31s;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,197,155,.40) 0%, rgba(255,197,155,.14) 44%, transparent 72%);
}
.mesh__blob--sea {
  bottom:-30vmax; right:4vmax; --dur:96s; animation-delay:-47s;
  background:radial-gradient(circle at 50% 50%,
    rgba(42,93,110,.24) 0%, rgba(42,93,110,.09) 40%, transparent 68%);
}
@keyframes drift {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(6vmax,-4vmax,0) scale(1.14); }
}
[data-theme="dark"] .mesh__blob { opacity:.55; }

/* Analog film grain - carried over verbatim. This is a large share of the
   site's character, and it dithers gradient banding for free. */
.grain {
  position:fixed; inset:0;
  pointer-events:none;
  z-index:100;
  opacity:.08;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0.4 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
[data-theme="dark"] .grain { mix-blend-mode:overlay; opacity:.10; }

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.glass {
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  box-shadow:var(--e2), var(--glass-hi);
}
.glass--sm { --glass-blur:var(--glass-blur-sm); border-radius:var(--r-md); }
.glass--solid { background:var(--glass-bg-2); }

/* Where glass is unsupported, fall back to a more opaque surface so text
   contrast never depends on the blur. */
@supports not (backdrop-filter:blur(1px)) {
  .glass { background:var(--glass-bg-2); }
}

.paper {
  background:var(--paper);
  border-radius:var(--r-md);
  border:1px solid var(--line);
}
.paper--sunk { background:var(--paper-sunk); }

.chip {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:.35rem .8rem;
  border-radius:var(--r-pill);
  background:var(--glass-bg-2);
  backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-brd);
  font-size:.8rem; font-weight:600;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}
.chip--sunset { color:var(--sunset-ink); border-color:var(--glass-brd-warm); }
.chip--sea { color:var(--sea-ink); }
.chip strong { color:var(--text); font-weight:700; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-3) var(--pad);
  min-height:var(--nav-h);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid var(--line);
  transition:background var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.nav.is-scrolled { background:var(--glass-bg-2); box-shadow:var(--e2); }

.nav__brand {
  display:flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-display); font-weight:900;
  font-size:1.1rem; letter-spacing:.05em;
  color:var(--text);
}
.nav__brand-mark {
  border:1.5px solid currentColor;
  padding:.3rem .6rem; border-radius:3px;
  font-size:.8rem; letter-spacing:.2em;
}
.nav__brand-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--sunset); box-shadow:0 0 12px var(--sunset);
}

.nav__links {
  display:none; gap:var(--s-6);
  font-weight:500; font-size:.92rem; letter-spacing:.03em;
}
@media (min-width:900px) { .nav__links { display:flex; } }
.nav__links a { position:relative; padding-bottom:4px; color:var(--text-muted); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color:var(--text); }
.nav__links a::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--sunset); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-2) var(--e-out);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform:scaleX(1); }

.nav__actions { display:flex; align-items:center; gap:var(--s-2); }

.nav__toggle {
  display:flex; flex-direction:column; gap:5px;
  padding:var(--s-2); border-radius:var(--r-sm);
}
@media (min-width:900px) { .nav__toggle { display:none; } }
.nav__toggle span {
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--text); transition:transform var(--d-2) var(--e-out),
    opacity var(--d-1) linear;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav__mobile {
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:49;
  display:none; flex-direction:column; gap:var(--s-1);
  padding:var(--s-4) var(--pad) var(--s-6);
  background:var(--glass-bg-2);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid var(--line);
  box-shadow:var(--e3);
}
.nav__mobile.is-open { display:flex; }
.nav__mobile a {
  padding:var(--s-3) var(--s-2); border-radius:var(--r-sm);
  font-weight:600; font-size:1.05rem;
}
.nav__mobile a:hover { background:var(--paper-sunk); }

.theme-toggle {
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:var(--r-pill);
  border:1px solid var(--glass-brd);
  background:var(--glass-bg-2);
  backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  transition:transform var(--d-2) var(--e-spring);
}
.theme-toggle:hover { transform:scale(1.08) rotate(-12deg); }
.theme-toggle svg { width:18px; height:18px; }
.theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-moon { display:block; }

/* ============================================================
   HERO - carried over from the original site
   ============================================================ */
.hero {
  position:relative;
  min-height:clamp(520px,78vh,780px);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:var(--cream);
  margin-top:calc(var(--nav-h) * -1);
  padding-top:var(--nav-h);
}
.hero__sky {
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    #1a2a3a 0%, #3d3650 18%, #7b3a4c 38%, #c8503f 58%,
    #f76c3a 75%, #f4b44a 88%, #ffe0a8 100%);
}
.hero__sky::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 14%, #fff 50%, transparent),
    radial-gradient(1px 1px at 28% 22%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 55% 8%, #fff 50%, transparent),
    radial-gradient(1px 1px at 78% 18%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 12%, #fff 50%, transparent),
    radial-gradient(1px 1px at 40% 28%, #fff 50%, transparent);
  opacity:.6;
}
.hero__sun {
  position:absolute; left:50%; bottom:24%;
  width:220px; height:220px; transform:translateX(-50%);
  background:radial-gradient(circle,
    #fff5d1 0%, #ffd98a 35%, #f4b44a 55%, transparent 72%);
  border-radius:50%; filter:blur(2px);
  animation:sunGlow 8s ease-in-out infinite;
}
@media (min-width:720px) {
  .hero__sun { width:320px; height:320px; bottom:28%; }
}
@keyframes sunGlow {
  0%,100% { opacity:.85; transform:translateX(-50%) scale(1); }
  50%     { opacity:1;   transform:translateX(-50%) scale(1.04); }
}
.hero__water {
  position:absolute; left:0; right:0; bottom:0; height:28%;
  background:linear-gradient(180deg,
    rgba(124,58,76,.4) 0%, rgba(42,93,110,.85) 40%, var(--sea-deep) 100%);
  overflow:hidden;
}
.wave {
  position:absolute; left:0; width:200%; height:100%;
  background-repeat:repeat-x; background-position:0 bottom;
  background-size:50% auto;
}
.wave--1 {
  bottom:0; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'><path d='M0,60 C150,100 350,0 600,50 C850,100 1050,20 1200,60 L1200,120 L0,120 Z' fill='%232a5d6e'/></svg>");
  animation:waveMove 20s linear infinite;
}
.wave--2 {
  bottom:0; opacity:.4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'><path d='M0,70 C200,30 400,90 600,60 C800,30 1000,90 1200,50 L1200,120 L0,120 Z' fill='%23163847'/></svg>");
  animation:waveMove 14s linear infinite reverse;
}
.wave--3 {
  bottom:0; opacity:.6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'><path d='M0,80 C250,40 450,100 700,70 C900,45 1050,95 1200,75 L1200,120 L0,120 Z' fill='%230f2430'/></svg>");
  animation:waveMove 28s linear infinite;
}
@keyframes waveMove { to { transform:translateX(-50%); } }

.hero__palms { position:absolute; inset:0; pointer-events:none; }
.palm { position:absolute; bottom:0; width:min(38vw,320px); opacity:.9; }
.palm--left { left:-4%; }
.palm--right { right:-4%; transform:scaleX(-1); }

.hero__content { position:relative; z-index:2; padding:0 var(--pad); }
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:var(--s-3);
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:.9rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--peach); margin-bottom:var(--s-4);
  animation:fadeInUp .8s var(--e-out) both;
}
.hero__eyebrow-line { width:44px; height:1px; background:currentColor; }
.hero__title {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(3rem,10vw,7rem); line-height:.92;
  letter-spacing:-.03em;
  text-shadow:0 4px 30px rgba(0,0,0,.28);
}
.hero__title-line { display:block; animation:fadeInUp .9s var(--e-out) both; }
.hero__title-line--1 { animation-delay:.15s; }
.hero__title-line--2 { animation-delay:.3s; }
.hero__tagline {
  margin:var(--s-5) auto 0; max-width:44ch;
  font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.6;
  color:rgba(251,245,233,.92);
  animation:fadeInUp .9s var(--e-out) .45s both;
}
.hero__cta {
  display:flex; flex-wrap:wrap; gap:var(--s-3);
  justify-content:center; margin-top:var(--s-6);
  animation:fadeInUp .9s var(--e-out) .6s both;
}
.hero__streaming {
  display:flex; flex-wrap:wrap; gap:var(--s-2); justify-content:center;
  margin-top:var(--s-5);
  animation:fadeInUp .9s var(--e-out) .75s both;
}
.hero__streaming a {
  padding:.4rem .9rem; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600;
  color:var(--cream);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid rgba(255,255,255,.22);
  transition:background var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.hero__streaming a:hover { background:rgba(255,255,255,.24); transform:translateY(-2px); }

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}

/* ============================================================
   MARQUEE - carried over
   ============================================================ */
.marquee {
  background:var(--ink); color:var(--sand);
  overflow:hidden; padding:1.1rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.marquee__track {
  display:flex; gap:2.5rem; align-items:center;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.35rem,4vw,2rem);
  white-space:nowrap;
  animation:marquee 30s linear infinite;
  padding-left:2.5rem; width:max-content;
}
.marquee__star { color:var(--sunset); font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ============================================================
   SECTIONS - carried over
   ============================================================ */
.section {
  max-width:var(--max); margin:0 auto;
  padding:clamp(3.5rem,9vw,7rem) var(--pad);
}
.section--tight { padding-block:clamp(2.5rem,6vw,4.5rem); }
.section__header { max-width:700px; margin-bottom:var(--s-7); }
.section__header--center { margin-inline:auto; text-align:center; }
.section__num {
  display:inline-block;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:.9rem; letter-spacing:.1em;
  color:var(--sunset-ink); margin-bottom:var(--s-3);
}
.section__title {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem,5.5vw,4rem); line-height:1.02;
  letter-spacing:-.025em; color:var(--text);
  margin-bottom:var(--s-4);
}
.section__lede {
  font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.6;
  color:var(--text-muted); max-width:62ch;
}
.section__header--center .section__lede { margin-inline:auto; }

/* ============================================================
   BUTTONS - carried over, plus glass variants
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.6rem; border-radius:var(--r-pill);
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  transition:transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out),
    background var(--d-2) var(--e-out);
  white-space:nowrap;
}
.btn svg { width:18px; height:18px; flex:none; }
.btn--primary { background:var(--cream); color:var(--ink); box-shadow:0 8px 30px rgba(0,0,0,.15); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.25); background:#fff; }
.btn--ghost { background:transparent; color:var(--cream); border:1.5px solid rgba(251,245,233,.5); }
.btn--ghost:hover { background:rgba(251,245,233,.12); border-color:var(--cream); }
.btn--sunset {
  background:linear-gradient(135deg,var(--sunset) 0%,var(--sunset-hot) 100%);
  color:#fff; box-shadow:var(--e-sun);
}
.btn--sunset:hover { transform:translateY(-2px); box-shadow:0 16px 44px -10px rgba(247,108,58,.6); }
.btn--glass {
  background:var(--glass-bg-2); color:var(--text);
  backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-brd); box-shadow:var(--e1);
}
.btn--glass:hover { transform:translateY(-2px); box-shadow:var(--e2); }
.btn--sm { padding:.5rem 1rem; font-size:.85rem; }
.btn--full { width:100%; }
.btn__meta { opacity:.65; font-weight:500; font-size:.85em; }

/* ============================================================
   ALBUM FEATURE - the lead block on the home page
   ============================================================ */
.album-feature {
  display:grid; gap:var(--s-5);
  grid-template-columns:1fr;
  padding:var(--s-5);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-brd);
  border-radius:var(--r-xl);
  box-shadow:var(--e3), var(--glass-hi);
}
@media (min-width:900px) {
  .album-feature { grid-template-columns:300px 1.05fr .95fr; gap:var(--s-6);
                   padding:var(--s-6); align-items:start; }
}
.album-feature__cover img {
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--e4);
  transform:rotate(-1.5deg);
  transition:transform var(--d-3) var(--e-out);
}
.album-feature__cover img:hover { transform:rotate(0deg) scale(1.02); }

.album-badge {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:.35rem .85rem; margin-bottom:var(--s-3);
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(247,108,58,.16),rgba(244,180,74,.14));
  border:1px solid var(--glass-brd-warm);
  font-size:.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sunset-ink);
}
.album-badge__dot {
  width:7px; height:7px; border-radius:50%; background:var(--sunset);
  animation:liveDot 2s ease-in-out infinite;
}
@keyframes liveDot {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(247,108,58,.6); }
  50%     { opacity:.75; box-shadow:0 0 0 6px rgba(247,108,58,0); }
}
.album-feature__title {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.04;
  letter-spacing:-.025em; margin-bottom:var(--s-3);
}
.album-feature__blurb {
  font-family:var(--font-display); font-style:italic;
  font-size:1.05rem; line-height:1.6; color:var(--text-muted);
  margin-bottom:var(--s-5);
}
.album-feature__cta { display:flex; flex-wrap:wrap; gap:var(--s-2); }

.tracklist { list-style:none; counter-reset:none; }
.tracklist li {
  display:flex; align-items:baseline; gap:var(--s-3);
  padding:.5rem 0;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.tracklist li:last-child { border-bottom:none; }
.tracklist__num {
  font-family:var(--font-display); font-style:italic;
  font-size:.8rem; color:var(--sunset-ink); min-width:1.8rem;
}
.tracklist__title a:hover { color:var(--sunset-ink); }

/* ---- Album row ---- */
.album-row {
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
}
.album-card {
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-3);
  border-radius:var(--r-lg);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-brd);
  box-shadow:var(--e1), var(--glass-hi);
  transition:transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.album-card:hover { transform:translateY(-4px); box-shadow:var(--e3), var(--glass-hi); }
.album-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-md); }
.album-card__title {
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  line-height:1.25;
}
.album-card__meta { font-size:.78rem; color:var(--text-muted); }

/* ---- About split ---- */
.about-split {
  display:grid; gap:var(--s-6);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:820px) { .about-split { grid-template-columns:5fr 6fr; } }
.about-split__photo {
  width:100%; max-width:440px; border-radius:var(--r-lg);
  box-shadow:var(--e3); transform:rotate(-2deg);
}

/* ---- Feature cards (chords hub) ---- */
.feature-row {
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.feature-card {
  padding:var(--s-5);
  border-radius:var(--r-lg);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-brd);
  box-shadow:var(--e1), var(--glass-hi);
}
.feature-card h3 {
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  margin-bottom:var(--s-2); color:var(--sunset-ink);
}
.feature-card p { font-size:.92rem; line-height:1.65; color:var(--text-muted); }

.chip-row { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chip-row .chip { transition:transform var(--d-2) var(--e-out); }
.chip-row .chip:hover { transform:translateY(-2px); }

/* ---- Blog ---- */
.post-list { display:flex; flex-direction:column; gap:var(--s-4); max-width:760px; }
.post-card {
  padding:var(--s-5);
  border-radius:var(--r-lg);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-brd);
  box-shadow:var(--e1), var(--glass-hi);
  transition:transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.post-card:hover { transform:translateY(-3px); box-shadow:var(--e2), var(--glass-hi); }
.post-card__title {
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  line-height:1.2; margin:var(--s-3) 0 var(--s-1);
}
.post-card__title a:hover { color:var(--sunset-ink); }
.post-card__date {
  font-family:var(--font-display); font-style:italic;
  font-size:.85rem; color:var(--text-faint); margin-bottom:var(--s-3);
}
.post-card__excerpt { color:var(--text-muted); line-height:1.65; font-size:.95rem; }

/* ============================================================
   CATALOG
   ============================================================ */
.catalog__controls {
  position:sticky; top:var(--nav-h); z-index:20;
  display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-6);
  background:var(--glass-bg-2);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  box-shadow:var(--e2), var(--glass-hi);
}
.catalog__search {
  flex:1 1 240px; min-width:0;
  display:flex; align-items:center; gap:var(--s-2);
  padding:.6rem .9rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.catalog__search svg { width:17px; height:17px; color:var(--text-faint); flex:none; }
.catalog__search input {
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-size:.95rem;
}
.catalog__filters { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.catalog__filters select {
  padding:.55rem .8rem; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--line);
  font-size:.85rem; font-weight:600; color:var(--text-muted);
  cursor:pointer;
}
.catalog__count {
  font-size:.85rem; color:var(--text-muted); font-weight:600;
  margin-left:auto; white-space:nowrap;
}

.song-grid {
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}

.song-card {
  container-type:inline-size;
  position:relative;
  display:flex; flex-direction:column;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-sat));
  border:1px solid var(--glass-brd);
  box-shadow:var(--e1), var(--glass-hi);
  transition:transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}
.song-card:hover, .song-card:focus-within {
  transform:translateY(-4px);
  box-shadow:var(--e3), var(--glass-hi);
}
.song-card__art {
  aspect-ratio:1; width:100%; object-fit:cover;
  background:var(--paper-sunk);
}
.song-card__body { padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2); flex:1; }
.song-card__title {
  font-family:var(--font-display); font-weight:700;
  font-size:1.15rem; line-height:1.2; letter-spacing:-.01em;
}
.song-card__title a::after { content:''; position:absolute; inset:0; }
.song-card__meta {
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  font-size:.78rem; color:var(--text-muted); font-weight:600;
}
.song-card__chords {
  font-family:var(--font-mono); font-size:.82rem; font-weight:600;
  color:var(--sunset-ink); letter-spacing:.04em;
  margin-top:auto;
}
.song-card__capo { font-size:.76rem; color:var(--sea-ink); font-weight:600; }
.song-card__badge {
  position:absolute; top:var(--s-3); right:var(--s-3);
  padding:.25rem .6rem; border-radius:var(--r-pill);
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(255,255,255,.85); color:var(--sea-ink);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
[data-theme="dark"] .song-card__badge { background:rgba(20,36,46,.85); }

.catalog__empty {
  padding:var(--s-9) var(--s-4); text-align:center;
  color:var(--text-muted);
}

/* ============================================================
   SONG PAGE
   ============================================================ */
.song-hero {
  display:grid; gap:var(--s-5);
  grid-template-columns:1fr;
  align-items:start;
  padding:var(--s-6) var(--pad) var(--s-5);
  max-width:var(--max); margin-inline:auto;
}
@media (min-width:760px) {
  .song-hero { grid-template-columns:190px 1fr; gap:var(--s-6); }
}
.song-hero__art {
  width:100%; max-width:190px; aspect-ratio:1;
  border-radius:var(--r-lg); object-fit:cover;
  box-shadow:var(--e3);
  transform:rotate(-1.5deg);
}
.song-hero__title {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2rem,5.5vw,3.4rem); line-height:1.02;
  letter-spacing:-.03em; margin-bottom:var(--s-3);
}
.song-hero__blurb {
  font-family:var(--font-display); font-style:italic;
  font-size:1.05rem; color:var(--text-muted);
  max-width:56ch; margin-bottom:var(--s-4);
}
.song-hero__facts { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }
.song-hero__actions { display:flex; flex-wrap:wrap; gap:var(--s-2); }

.capo-callout {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-4);
  border-radius:var(--r-md);
  background:linear-gradient(135deg,
    rgba(244,180,74,.16) 0%, rgba(247,108,58,.10) 100%);
  border:1px solid var(--glass-brd-warm);
  font-size:.92rem;
}
.capo-callout strong { color:var(--sunset-ink); }
.capo-callout svg { width:20px; height:20px; color:var(--sunset); flex:none; }

/* ---- Panel tabs ---- */
.panels { max-width:var(--max); margin:0 auto var(--s-8); padding:0 var(--pad); }
.panel-tabs {
  display:flex; gap:var(--s-1); overflow-x:auto;
  padding:var(--s-2); margin-bottom:var(--s-5);
  background:var(--glass-bg-2);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-brd);
  border-radius:var(--r-pill);
  box-shadow:var(--e1), var(--glass-hi);
  scrollbar-width:none;
}
.panel-tabs::-webkit-scrollbar { display:none; }
.panel-tabs a {
  padding:.55rem 1.1rem; border-radius:var(--r-pill);
  font-size:.9rem; font-weight:600; white-space:nowrap;
  color:var(--text-muted);
  transition:background var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.panel-tabs a:hover { background:var(--paper-sunk); color:var(--text); }
.panel-tabs a[aria-selected="true"] {
  background:linear-gradient(135deg,var(--sunset) 0%,var(--sunset-hot) 100%);
  color:#fff; box-shadow:var(--e-sun);
}
.panel { display:none; }
.panel.is-active { display:block; animation:panelIn var(--d-3) var(--e-out); }
@keyframes panelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- Chart toolbar ---- */
.chart-toolbar {
  position:sticky; top:calc(var(--nav-h) + var(--s-2)); z-index:15;
  display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  padding:var(--s-3) var(--s-4); margin-bottom:var(--s-4);
  background:var(--glass-bg-2);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  box-shadow:var(--e2), var(--glass-hi);
}
.tool {
  display:flex; align-items:center; gap:var(--s-2);
  font-size:.8rem; font-weight:600; color:var(--text-muted);
}
.tool__label { text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; }
.tool__group {
  display:flex; align-items:center; gap:2px;
  padding:2px; border-radius:var(--r-pill);
  background:var(--paper-sunk); border:1px solid var(--line);
}
.tool__btn {
  min-width:30px; height:28px; padding:0 .5rem;
  border-radius:var(--r-pill);
  font-size:.85rem; font-weight:700; color:var(--text-muted);
  display:grid; place-items:center;
  transition:background var(--d-1) linear, color var(--d-1) linear;
}
.tool__btn:hover { background:var(--paper); color:var(--text); }
.tool__btn.is-on {
  background:var(--sunset); color:#fff;
}
.tool__value {
  min-width:3.2rem; text-align:center;
  font-family:var(--font-mono); font-size:.82rem; color:var(--text);
}
.tool select {
  padding:.35rem .6rem; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--line);
  font-size:.82rem; font-weight:600;
}
.chart-toolbar__spacer { flex:1; }

/* ---- Chords over lyrics ----
   Block-inside-inline-block pairs. Each chord is bound to its own word, so
   the pair box is as wide as max(chord, word) and wrapping only ever happens
   BETWEEN pairs. That reproduces the visual behaviour of a monospace chart -
   a long chord pushes the next word right - while staying fully fluid.

   Monospace column alignment cannot survive transpose (glyph widths change),
   the font-size control, or a 360px phone, which is why every site that uses
   it has a horizontal scrollbar on mobile. */
.chart {
  font-size:var(--chart-fs);
  line-height:var(--chart-lead);
  max-width:var(--max-chart);
  padding:var(--s-6) var(--s-5);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--e1);
  font-variant-ligatures:none;
}
.chart__section {
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sunset-ink);
  margin:var(--s-6) 0 var(--s-3);
  display:flex; align-items:center; gap:var(--s-3);
  line-height:1.4;
}
.chart__section:first-child { margin-top:0; }
.chart__section::after {
  content:''; flex:1; height:1px; background:var(--line);
}
.chartline { margin:0; min-height:calc(var(--chart-lead) * 1em); }

.cw { display:inline-block; vertical-align:bottom; }
.cw__word { display:block; white-space:pre; }
.cw__chord {
  display:block;
  font-family:var(--font-body); font-weight:700;
  font-size:var(--chord-fs); line-height:1;
  color:var(--chord-ink);
  letter-spacing:.01em; white-space:nowrap;
  padding-right:.6em;
  min-width:2.2em;          /* 1-2 char chords never resize the pair box */
  margin-bottom:.14em;
  transform:translateY(-.15em);
  font-variant-numeric:tabular-nums;
  cursor:help;
}
.cw__chord:hover { color:var(--sunset-hot); }
/* Lines with no chords still reserve the chord row, so verses do not
   jitter vertically when a transpose widens a chord name. */
.chartline--nochord .cw:first-child .cw__word::before {
  content:''; display:block; height:calc(var(--chord-fs) + .14em);
}
.chart__instrumental {
  font-family:var(--font-mono); font-size:.9rem;
  color:var(--sunset-ink); font-weight:700;
  letter-spacing:.08em;
  padding:var(--s-2) 0;
}

@media (max-width:520px) {
  .chart { --chart-fs:.98rem; --chord-fs:.84em; padding:var(--s-4) var(--s-3); }
}

/* ---- Section jump chips ---- */
.chart-jump { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }
.chart-jump a {
  padding:.3rem .75rem; border-radius:var(--r-pill);
  font-size:.75rem; font-weight:600;
  background:var(--paper-sunk); border:1px solid var(--line);
  color:var(--text-muted);
}
.chart-jump a:hover { background:var(--paper); color:var(--sunset-ink); }

/* ---- Progression grid ---- */
.progression {
  display:grid; gap:var(--s-2);
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  max-width:var(--max-chart);
  margin-bottom:var(--s-5);
}
.progression__bar {
  padding:var(--s-3) var(--s-2); text-align:center;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-family:var(--font-mono); font-weight:700; font-size:.95rem;
  color:var(--text);
}
.progression__bar--repeat { color:var(--text-faint); font-weight:500; }

/* ---- Chord diagrams ---- */
.chord-dict {
  display:flex; flex-wrap:wrap; gap:var(--s-4);
  padding:var(--s-5); margin-bottom:var(--s-5);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.chord-dia { text-align:center; }
.chord-dia__name {
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  color:var(--sunset-ink); margin-bottom:var(--s-2);
}
.chord-dia__shape { font-size:.72rem; color:var(--text-faint); margin-top:var(--s-1); }
.chord-dia svg { margin-inline:auto; }
.chord-dia .fret-dot { fill:var(--sunset); }
.chord-dia .fret-line, .chord-dia .string-line { stroke:var(--line-strong); }
.chord-dia .nut { stroke:var(--text); }
.chord-dia .mute { stroke:var(--text-faint); }
.chord-dia .open { stroke:var(--text-muted); fill:none; }
.chord-dia .barre { fill:var(--sunset); }

/* ---- Score ---- */
.score-wrap {
  padding:var(--s-4);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow-x:auto;
  box-shadow:var(--e1);
}
.score-wrap svg { width:100%; height:auto; }
[data-theme="dark"] .score-wrap { background:#f4efe4; }

/* ---- Preformatted artifacts ---- */
.pre-wrap {
  padding:var(--s-4);
  background:var(--paper-sunk);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow-x:auto;
  scrollbar-gutter:stable;
}
.pre-wrap pre {
  font-family:var(--font-mono); font-size:.78rem; line-height:1.5;
  font-variant-ligatures:none; tab-size:1;
  white-space:pre;
}

details.experimental {
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4); background:var(--paper-sunk);
}
details.experimental summary {
  cursor:pointer; font-weight:700; font-size:.9rem; color:var(--text-muted);
}
details.experimental p { font-size:.85rem; color:var(--text-muted); margin:var(--s-3) 0; }

/* ---- Honesty notice ---- */
.notice {
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) var(--s-4); margin-bottom:var(--s-4);
  border-radius:var(--r-md);
  background:var(--paper-sunk);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  font-size:.86rem; line-height:1.5; color:var(--text-muted);
}
.notice svg { width:18px; height:18px; color:var(--gold-ink); flex:none; margin-top:2px; }
.notice strong { color:var(--text); }
.notice--human { border-left-color:var(--sea); }
.notice--human svg { color:var(--sea-ink); }

.status-badge {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:.3rem .7rem; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase;
}
.status-badge--human { background:rgba(42,93,110,.14); color:var(--sea-ink); }
.status-badge--high { background:rgba(244,180,74,.18); color:var(--gold-ink); }
.status-badge--medium { background:rgba(247,108,58,.14); color:var(--sunset-ink); }

/* ---- Downloads ---- */
.downloads { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); }

/* ---- Video ---- */
.video-frame {
  position:relative; aspect-ratio:16/9;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--night); box-shadow:var(--e2);
}
.video-frame iframe, .video-frame img { width:100%; height:100%; border:0; object-fit:cover; }
.video-facade { cursor:pointer; }
.video-facade__play {
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(15,36,48,.32);
  transition:background var(--d-2) var(--e-out);
}
.video-facade:hover .video-facade__play { background:rgba(15,36,48,.15); }
.video-facade__play svg {
  width:64px; height:64px; color:#fff;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.4));
  transition:transform var(--d-2) var(--e-spring);
}
.video-facade:hover .video-facade__play svg { transform:scale(1.12); }

.video-grid {
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.video-card__title {
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  margin-top:var(--s-3);
}

/* ============================================================
   PROSE + FORMS
   ============================================================ */
.prose { max-width:var(--max-read); }
.prose p { margin-bottom:var(--s-4); font-size:1.05rem; line-height:1.75; }
.prose h2 {
  font-family:var(--font-display); font-weight:800;
  font-size:1.6rem; margin:var(--s-7) 0 var(--s-3);
}
.prose h3 {
  font-family:var(--font-display); font-weight:700;
  font-size:1.2rem; margin:var(--s-5) 0 var(--s-2);
}
.prose ul { margin:0 0 var(--s-4) var(--s-5); }
.prose li { margin-bottom:var(--s-2); }
.prose a { color:var(--sunset-ink); text-decoration:underline; text-underline-offset:3px; }

.form { display:flex; flex-direction:column; gap:var(--s-3); max-width:520px; }
.form input, .form textarea {
  padding:.8rem 1rem; border-radius:var(--r-md);
  background:var(--paper); border:1px solid var(--line-strong);
  font-size:.95rem; outline:none;
  transition:border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.form input:focus, .form textarea:focus {
  border-color:var(--sunset); box-shadow:0 0 0 3px rgba(247,108,58,.16);
}
.form textarea { min-height:130px; resize:vertical; }
.form__success { color:var(--sea-ink); font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background:var(--night); color:var(--sand);
  padding:var(--s-8) var(--pad) var(--s-6);
  margin-top:var(--s-9);
}
.footer__inner {
  max-width:var(--max); margin-inline:auto;
  display:grid; gap:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
}
.footer h4 {
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  margin-bottom:var(--s-3); color:var(--peach);
}
.footer a { color:rgba(244,232,214,.78); font-size:.9rem; line-height:2; }
.footer a:hover { color:var(--cream); }
.footer__bottom {
  max-width:var(--max); margin:var(--s-7) auto 0;
  padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.10);
  font-size:.8rem; color:rgba(244,232,214,.55);
  display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:space-between;
}

/* ============================================================
   SCROLL REVEAL
   Scroll-driven animations where supported, IntersectionObserver
   (app.js adds .is-visible) everywhere else.
   ============================================================ */
.reveal { opacity:0; transform:translateY(28px); }
.reveal.is-visible {
  opacity:1; transform:none;
  transition:opacity var(--d-4) var(--e-out), transform var(--d-4) var(--e-out);
}
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    .reveal {
      opacity:1; transform:none;
      animation:revealIn linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
    }
  }
}
@keyframes revealIn {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:none; }
}

/* ============================================================
   REDUCED MOTION
   The mesh goes static rather than vanishing, so glass still has
   something to frost.
   ============================================================ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .mesh__blob { animation:none; }
  .reveal { opacity:1; transform:none; }
}

/* ============================================================
   PRINT - musicians print these charts
   ============================================================ */
@media print {
  :root { --chart-fs:10.5pt; --chart-lead:2.4; --chord-fs:.78em; }
  .mesh, .grain, .nav, .nav__mobile, .footer, .panel-tabs,
  .chart-toolbar, .chart-jump, .song-hero__actions, .downloads,
  .video-frame, .notice, .skip-link, details.experimental { display:none !important; }
  body { background:#fff; color:#000; }
  .panel { display:block !important; }
  .chart, .paper, .progression__bar, .chord-dict {
    background:#fff; border:none; box-shadow:none; padding:0;
  }
  .chart__section { color:#000; break-after:avoid; }
  .chartline { break-inside:avoid; }
  .cw__chord { color:#000; }
  .song-hero { display:block; padding:0; }
  .song-hero__art { display:none; }
  .song-hero__title { font-size:20pt; }
  .chord-dict { break-inside:avoid; }
  a[href]::after { content:''; }
  @page { margin:1.6cm; }
}