/* ==========================================================================
   Ané Wilder — site stylesheet
   --------------------------------------------------------------------------
   Hand-written. No framework, no utility classes, no build step.
   Every value comes off the scale in DESIGN.md; if you need a number that
   is not on the scale, the layout is wrong, not the scale.

   1.  Tokens
   2.  Reset & base
   3.  Type primitives
   4.  Layout primitives
   5.  Header & navigation
   6.  Hero
   7.  Sections & composition
   8.  Cards, ledger, grids
   9.  Tabs, filters, archive
   10. Buttons, links, labels
   11. Icons
   12. Forms & states
   13. Quiz
   14. Player
   15. Prose (reading surfaces)
   16. Footer
   17. Motion
   18. Responsive
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  /* -- colour: roles, not swatches ------------------------------------- */
  --cream: #F8F4EE;
  --cream-2: #F0E8DE;
  --parchment: #E8D8C8;
  --lav-card: #C2B4BF;
  --mauve: #B79AA6;
  --sage: #A5AA96;
  --plum: #776579;
  --plum-deep: #4B3445;
  --ink: #392F29;
  --ink-2: #6B5D54;          /* darkened from brief #76685F — see DESIGN.md */
  --ink-2-brand: #76685F;
  --line: #D8CABE;
  --error: #8E4B42;
  /* Error text on the deep plum grounds. --error is a cream-ground token and
     measures under 2:1 there. */
  --error-light: #F3C6BC;
  --white: #FFFFFF;

  /* -- type ------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Lato", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script: "Allura", "Segoe Script", cursive;

  --fs-hero: clamp(2.75rem, 4.4vw + 0.9rem, 5.25rem);
  --fs-display: clamp(2.125rem, 2.6vw + 0.9rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.5vw + 1.05rem, 2.625rem);
  --fs-h3: clamp(1.25rem, 0.5vw + 1.05rem, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.6875rem;

  --lh-display: 1.06;
  --lh-head: 1.16;
  --lh-body: 1.7;

  /* -- space: one scale, obeyed ---------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* -- shell ----------------------------------------------------------- */
  --shell: 1200px;
  --shell-wide: 1440px;
  --gutter: var(--s-6);
  --measure: 64ch;
  --measure-tight: 46ch;

  /* -- form ------------------------------------------------------------ */
  --r-xs: 2px;
  --r-sm: 3px;
  --r: 5px;

  --shadow-menu: 0 12px 32px rgba(57, 47, 41, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;

  /* Very fine paper tooth. Applied only to the plum grounds and the hero
     scrim, where a flat fill would otherwise read as a dead rectangle. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* 2. RESET & BASE ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection { background: var(--lav-card); color: var(--ink); }

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

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

.skip {
  position: absolute;
  left: var(--s-6);
  top: -100px;
  z-index: 100;
  background: var(--plum-deep);
  color: var(--cream);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--s-4); }

/* 3. TYPE PRIMITIVES ======================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); line-height: var(--lh-head); letter-spacing: -0.012em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: -0.008em; }
h3 { font-size: var(--fs-h3); line-height: 1.24; letter-spacing: -0.004em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; }

p { margin: 0 0 var(--s-6); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.hero-title {
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: -0.018em;
  font-weight: 500;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
}

.meta {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
}

em { font-style: italic; }

/* 4. LAYOUT PRIMITIVES ===================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-wide {
  width: 100%;
  max-width: var(--shell-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s-16); }
.section--tight { padding-block: var(--s-12); }
.section--roomy { padding-block: var(--s-24); }
.section--band { background: var(--cream-2); }
.section--parchment { background: var(--parchment); }

.section-head { margin-bottom: var(--s-12); }
.section-head h2 { max-width: 24ch; }

/* A heading that sits beside a control rather than above it — used where the
   section is a browse surface and the tab bar is part of the heading row. */
.section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}

.rule {
  border-top: 1px solid var(--line);
  margin-block: var(--s-12);
}
.rule--spaced { margin-block: var(--s-16); }

/* The brief's "quiet divider": fine rule, small botanical mark, a line of
   copy. Deliberately centred — one of the two places centring is correct. */
.quiet-divider {
  text-align: center;
  padding-block: var(--s-16);
}
.quiet-divider .sprig {
  color: var(--mauve);
  margin: 0 auto var(--s-6);
  width: 40px; height: 40px;
  stroke-width: 1.4;
}
.quiet-divider p {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--ink-2);
  max-width: 30ch;
  margin-inline: auto;
}
.quiet-divider::before,
.quiet-divider::after {
  content: "";
  display: block;
  width: 64px;
  border-top: 1px solid var(--line);
  margin: 0 auto var(--s-6);
}
.quiet-divider::after { margin: var(--s-6) auto 0; }

/* 5. HEADER & NAVIGATION =================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-head[data-scrolled="true"] {
  border-bottom-color: var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 76px;
}

.wordmark {
  font-family: var(--font-script);
  /* Allura is a single hairline weight with a small x-height, so it needs more
     size than a text face would to hold the top-left corner of the header. */
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
  padding-block: var(--s-2);
  white-space: nowrap;
  flex: 0 0 auto;
}
.wordmark:hover { color: var(--plum-deep); }

.nav { margin-left: auto; }

.nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav a {
  display: block;
  position: relative;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block: var(--s-3);
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  border-top: 1px solid var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  border-top-color: var(--ink);
}

.head-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.head-icon:hover { color: var(--plum-deep); background: var(--cream-2); }
.head-icon svg { width: 22px; height: 22px; }

.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Section-jump bar used on chapter and reading pages: the brief's "muted plum
   bar" listing Welcome, Songs, Letters, Journal, Reflection, Playlist. */
.jump {
  background: var(--plum-deep);
  color: var(--cream);
  position: sticky;
  top: 76px;
  z-index: 40;
}
.jump ul {
  display: flex;
  gap: var(--s-8);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-3);
}
.jump ul::-webkit-scrollbar { display: none; }
.jump a {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-2);
  white-space: nowrap;
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jump a:hover { color: var(--white); border-bottom-color: var(--mauve); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  margin-bottom: var(--s-6);
}
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--plum-deep); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb li::after { content: "/"; margin-left: var(--s-2); color: var(--line); }
.breadcrumb li:last-child::after { content: ""; }

/* A breadcrumb that sits on a photographic band or a plum panel needs light
   text — the default --ink-2 anchors measure 1.77:1 against that ground. */
.band-hero .breadcrumb,
.band-hero .breadcrumb a,
.panel-plum .breadcrumb,
.panel-plum .breadcrumb a,
.feature .breadcrumb,
.feature .breadcrumb a { color: rgba(255, 255, 255, 0.92); }
.band-hero .breadcrumb a:hover,
.feature .breadcrumb a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.band-hero .breadcrumb li::after,
.feature .breadcrumb li::after { color: rgba(255, 255, 255, 0.45); }

/* 6. HERO ================================================================== */

/* Full-bleed photographic hero. The scrim is a legibility device, not a
   decorative gradient: white text needs to clear 4.5:1 over the busiest
   pixel behind it, and a photograph cannot promise that on its own. */
.hero {
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: flex-end;
  background: var(--plum-deep);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% center;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(36, 25, 32, 0.80) 0%,
      rgba(36, 25, 32, 0.62) 34%,
      rgba(36, 25, 32, 0.20) 62%,
      rgba(36, 25, 32, 0.06) 100%),
    linear-gradient(0deg, rgba(36, 25, 32, 0.34) 0%, rgba(36, 25, 32, 0) 42%);
  /* A legibility scrim is decoration and must never be a click target. Without
     this it sits over the photograph and eats every pointer event aimed at it —
     which is also why the image could not be selected in the editor. */
  pointer-events: none;
}
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  padding-block: var(--s-24) var(--s-16);
  max-width: 46rem;
}

.hero__copy { color: var(--white); }
.hero__copy h1 { color: var(--white); }
.hero__copy p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-lead);
  max-width: 34ch;
  margin-top: var(--s-6);
}
.hero .eyebrow { color: rgba(255, 255, 255, 0.72); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-8);
}

/* Sub-page hero: a photographic band, shorter, with the title over it. Used on
   Explore surfaces as an orientation device, never with two buttons and a
   three-card row underneath. */
.band-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  background: var(--plum-deep);
  overflow: hidden;
  isolation: isolate;
}
.band-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.band-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.band-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(36, 25, 32, 0.74) 0%,
    rgba(36, 25, 32, 0.44) 46%,
    rgba(36, 25, 32, 0.18) 100%);
  pointer-events: none;
}
.band-hero__inner {
  position: relative;
  padding-block: var(--s-16) var(--s-12);
  color: var(--white);
  max-width: 44rem;
}
.band-hero h1 { color: var(--white); }
.band-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-lead);
  margin-top: var(--s-4);
  max-width: 40ch;
}

/* Split hero: text on cream at the left, photograph at the right. Used where
   the copy is long enough that an overlay would be cruel to read. */
.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--cream);
}
.split-hero__copy {
  padding: var(--s-24) var(--s-16) var(--s-24) max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-hero__copy > * { max-width: 30rem; }
.split-hero__media { position: relative; min-height: 560px; }
.split-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.split-hero .signature {
  font-family: var(--font-script);
  font-size: 1.75rem;
  color: var(--plum-deep);
  margin-top: var(--s-6);
}

/* 7. SECTIONS & COMPOSITION ================================================ */

/* Two-column split: copy left, media right (or reversed). The brief's
   "two columns: text left, warm image right". */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-16);
  align-items: center;
}
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--reverse > :first-child { order: 2; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
}
.split--tall .split__media img { aspect-ratio: 3 / 4; }

/* Wide feature: full-width image with the copy held hard left over a scrim.
   The brief's "wide golden-field image, woman from behind with brown hat;
   copy at left". */
.feature {
  position: relative;
  isolation: isolate;
  background: var(--plum-deep);
  overflow: hidden;
}
.feature__media { position: absolute; inset: 0; z-index: -1; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(36, 25, 32, 0.78) 0%,
    rgba(36, 25, 32, 0.50) 40%,
    rgba(36, 25, 32, 0.10) 72%,
    rgba(36, 25, 32, 0) 100%);
  pointer-events: none;
}
.feature__inner {
  position: relative;
  padding-block: var(--s-24);
  max-width: 34rem;
  color: var(--white);
}
.feature__inner h2 { color: var(--white); }
.feature__inner p { color: rgba(255, 255, 255, 0.88); margin-top: var(--s-6); }
.feature__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-8); }

/* Full-width community banner. Media first in the markup, so the 5/7 split
   gives the photograph enough width to actually show the scene while the copy
   still holds the wider column for a comfortable measure. */
.banner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  background: var(--cream-2);
  overflow: hidden;
}
.banner__copy {
  padding: var(--s-16) var(--s-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner__copy h2 { max-width: 16ch; }
.banner__copy p { margin-top: var(--s-6); color: var(--ink-2); }
.banner__media { position: relative; min-height: 400px; }
.banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The plum invitation panel — the site's one saturated ground, used for the
   Porchlight signup and nothing else in a page. */
.panel-plum {
  position: relative;
  background: var(--plum-deep);
  color: var(--cream);
  padding: var(--s-16);
  border-radius: var(--r);
  isolation: isolate;
  overflow: hidden;
}
.panel-plum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.06;
  mix-blend-mode: overlay;
}
.panel-plum h2, .panel-plum h3 { color: var(--white); }
.panel-plum p { color: var(--cream-2); }

/* 8. CARDS, LEDGER, GRIDS ================================================== */

/* Cards carry a hairline, never a shadow. Radii step by hierarchy. */
.card {
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover { border-color: var(--mauve); }
.card--lav { background: var(--lav-card); }
.card--cream { background: var(--cream-2); }
.card--flush { padding: 0; overflow: hidden; }
.card--quiet { background: transparent; border-color: var(--line); }
.card h3 { margin-bottom: var(--s-1); }
.card p { font-size: var(--fs-sm); color: var(--ink); max-width: none; }
.card--lav p { color: var(--ink); }
.card__icon { color: var(--plum-deep); margin-bottom: var(--s-4); }
/* Card icons carry the emotional register of a card, so they have to read at a
   glance rather than whisper. At 24px these drawings resolved as specks and the
   key was mistaken for a magnifier; at 40px with a proportionally lighter stroke
   they read as drawn marks. */
.card__icon .icon { width: 40px; height: 40px; stroke-width: 1.15; }
.value .card__icon .icon { width: 34px; height: 34px; stroke-width: 1.2; }

/* Heart / chapter card: icon, title, description and an outlined action. */
.heart-card {
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.heart-card:hover { border-color: var(--mauve); transform: translateY(-2px); }
.heart-card .card__icon { color: var(--plum-deep); }
.heart-card h3 { font-size: var(--fs-h3); }
.heart-card p { font-size: var(--fs-sm); color: var(--ink); }
.heart-card .card__action { margin-top: auto; padding-top: var(--s-4); }
.heart-card--lav { background: var(--lav-card); }
.heart-card--blush { background: #E6D2D2; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--gap-8 { gap: var(--s-8); }

/* A 3-across grid where the first item is given more room, so the row is not
   three identical boxes. */
.grid--emphasis { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.grid--feature-first {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.grid--feature-first > :first-child { grid-column: span 2; }

/* Copy block with a supporting image, used inside cards and reading pages. */
.two-up {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-16);
  align-items: start;
}

/* Song list panel: hairlines between rows, not six stacked boxes. */
.ledger {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--cream-2);
  overflow: hidden;
}
.ledger__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.ledger__row:first-child { border-top: 0; }
.ledger__row:hover { background: var(--cream); }
.ledger__row a { display: flex; align-items: center; gap: var(--s-4); flex: 1 1 auto; min-width: 0; }
.ledger__index {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  flex: 0 0 1.5rem;
}
.ledger__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--ink);
  min-width: 0;
}
.ledger__row:hover .ledger__title { color: var(--plum-deep); }
.ledger__status {
  margin-left: auto;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: 0 0 auto;
}
.ledger__play {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  color: var(--plum-deep);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ledger__play:hover { background: var(--parchment); border-color: var(--mauve); }
.ledger__play svg { width: 14px; height: 14px; }
.ledger__play[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: var(--cream); }

/* Cover grid. Square artwork, editable title beneath, four across on desktop,
   two on mobile where the caption stays legible. */
.covers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8) var(--s-6);
}
.cover { display: flex; flex-direction: column; gap: var(--s-3); }
.cover__art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--parchment);
  border: 1px solid var(--line);
}
.cover__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease);
}
.cover:hover .cover__art img { transform: scale(1.03); }
.cover__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.24;
  color: var(--ink);
}
.cover:hover .cover__title { color: var(--plum-deep); }
.cover__meta { font-size: var(--fs-xs); color: var(--ink-2); }
.cover__badge {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  background: var(--cream);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
}

/* Editorial card pair (Home): image above, label, title, action. */
.editorial {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.editorial__media { aspect-ratio: 16 / 10; overflow: hidden; }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial__body { padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); flex: 1 1 auto; }
.editorial__body h3 { font-size: var(--fs-h3); }
.editorial__body .card__action { margin-top: auto; padding-top: var(--s-4); }

/* Value list — The Porch's four commitments. Presented as rows with icons
   rather than four identical icon-topped boxes. */
.values { display: grid; gap: var(--s-6); }
.value {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.value:first-child { border-top: 0; padding-top: 0; }
.value .card__icon { color: var(--plum-deep); }
.value h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }

/* 9. TABS, FILTERS, ARCHIVE ================================================ */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-8);
}
.tab {
  position: relative;
  background: none;
  border: 0;
  padding: var(--s-3) 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  border-top: 2px solid var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab__count {
  font-size: 0.625rem;
  color: var(--ink-2);
  margin-left: var(--s-1);
  vertical-align: super;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-8);
}
.field-inline { display: flex; align-items: center; gap: var(--s-2); }

/* Archive: vertical list, small image left, title + date + excerpt right, per
   the brief. Rows, not cards. */
.archive { border-top: 1px solid var(--line); }
.archive__row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--s-8);
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--line);
}
.archive__row img {
  width: 128px; height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.archive__row h3 { font-size: var(--fs-h3); }
.archive__row a:hover h3 { color: var(--plum-deep); }
.archive__excerpt {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--s-2);
  max-width: 56ch;
}
.archive__meta { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--s-2); }

.empty-state {
  padding: var(--s-16) 0;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--s-12);
}

/* 10. BUTTONS, LINKS, LABELS =============================================== */

/* The 404 page's own search box. It hands its term to the search overlay rather
   than posting anywhere, so it is laid out as one row that wraps. */
.notfound__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
  align-items: flex-start;
}
.notfound__search .input { flex: 1 1 16rem; }
.notfound__search .btn { flex: 0 0 auto; }

/* Compact rectangles, modest tracking, flat fill. No pill shapes, no
   gradient, no glow, no scale-on-hover. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-8);
  background: var(--plum);
  color: var(--cream);
  border: 1px solid var(--plum);
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--plum-deep); border-color: var(--plum-deep); color: var(--white); }

.btn--outline {
  background: transparent;
  color: var(--plum-deep);
  border-color: var(--mauve);
}
.btn--outline:hover { background: var(--plum-deep); border-color: var(--plum-deep); color: var(--white); }

.btn--cream {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.btn--cream:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost-light:hover { background: var(--white); color: var(--inks, var(--ink)); border-color: var(--white); }

.btn--small { min-height: 40px; padding: var(--s-2) var(--s-6); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
  cursor: not-allowed;
}

/* Text action with a rule that grows on hover. Used instead of welding an
   arrow to every link on the page. */
.action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-deep);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--mauve);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.action:hover { border-bottom-color: var(--plum-deep); color: var(--ink); }

.action--light { color: var(--cream); border-bottom-color: rgba(255, 255, 255, 0.5); }
.action--light:hover { color: var(--white); border-bottom-color: var(--white); }

.label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pill {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--ink-2);
  background: var(--cream);
}
.pill--plum { border-color: var(--plum); color: var(--plum-deep); background: transparent; }
.pill--sage { border-color: var(--sage); color: var(--ink-2); background: transparent; }

.prose a:not(.btn):not(.action) {
  color: var(--plum-deep);
  text-decoration: underline;
  text-decoration-color: var(--mauve);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.prose a:not(.btn):not(.action):hover { text-decoration-color: var(--plum-deep); }

/* Inline links outside .prose — status lines, asides, card copy — need the same
   affordance. An unmarked link inside a sentence is invisible, and the song
   pages link to the music page from a plain paragraph. Scoped to `p` so it
   cannot reach navigation, cards or the ledger. */
p a:not(.btn):not(.action):not(.pill):not(.cover) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur) var(--ease);
}
p a:not(.btn):not(.action):not(.pill):not(.cover):hover {
  text-decoration-color: var(--plum-deep);
}

/* 11. ICONS =============================================================== */

.icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 32px; height: 32px; }
.icon--filled { fill: currentColor; stroke: none; }

/* 12. FORMS & STATES ======================================================= */

.form { max-width: 40rem; }
.field { margin-bottom: var(--s-6); }

.field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--s-2); }

.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--mauve); }
.input:focus, .textarea:focus, .select:focus {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
  border-color: var(--plum);
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.select { appearance: none; padding-right: var(--s-12); cursor: pointer; }

.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error);
  background: #FBF3F1;
}
.field__error {
  display: none;
  font-size: var(--fs-sm);
  color: var(--error);
  margin-top: var(--s-2);
}
.input[aria-invalid="true"] ~ .field__error,
.textarea[aria-invalid="true"] ~ .field__error { display: block; }

.check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--ink);
  margin-bottom: var(--s-6);
}
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--plum); margin-top: 2px; }

/* Forms on a dark ground.
   --ink and --ink-2 are cream-ground tokens: on --plum-deep they measure 1.16:1
   and 1.77:1, which is not "slightly dim", it is invisible. Every form that sits
   on the footer or inside a plum panel needs its own light palette. */
.site-foot .field label,
.panel-plum .field label { color: var(--cream); }
.site-foot .check,
.panel-plum .check { color: var(--cream-2); }
.site-foot .field .hint,
.panel-plum .field .hint { color: var(--cream-2); }
.site-foot .field__error,
.panel-plum .field__error { color: var(--error-light); }
.site-foot .form-status,
.panel-plum .form-status { color: var(--ink); }
.site-foot .input,
.site-foot .textarea,
.site-foot .select { background: var(--cream); color: var(--ink); }
.panel-plum .input,
.panel-plum .textarea { background: var(--cream); color: var(--ink); }

.form-status {
  display: none;
  margin-top: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--r);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  background: var(--cream-2);
}
.form-status[data-state="ok"] {
  display: block;
  border-color: var(--sage);
  background: #F1F2EC;
  color: var(--ink);
}
.form-status[data-state="error"] {
  display: block;
  border-color: var(--error);
  background: #FBF3F1;
  color: var(--ink);
}
.form-status[data-state="unconfigured"] {
  display: block;
  border-color: var(--mauve);
  background: var(--cream-2);
  color: var(--ink);
}
.form-status strong { display: block; margin-bottom: var(--s-2); font-weight: 700; }

/* 13. QUIZ ================================================================= */

.quiz { max-width: 44rem; }
.quiz__progress {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-4);
}
.quiz__bar {
  height: 2px;
  background: var(--line);
  margin-bottom: var(--s-8);
  overflow: hidden;
}
.quiz__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--plum);
  transition: width var(--dur) var(--ease);
}
.quiz__question {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  margin-bottom: var(--s-8);
}
.quiz__options { display: grid; gap: var(--s-3); }
.quiz__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-4) var(--s-6);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quiz__option:hover { border-color: var(--mauve); background: var(--parchment); }
.quiz__nav { display: flex; gap: var(--s-4); margin-top: var(--s-8); }
.quiz__step { display: none; }
.quiz__step[data-active="true"] { display: block; }
.quiz__result { display: none; }
.quiz__result[data-active="true"] { display: block; }

/* 14. PLAYER =============================================================== */

/* Muted plum player bar, per the brief. Rendered only when a playable asset
   exists; never autoplays. */
.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--plum-deep);
  color: var(--cream);
  transform: translateY(100%);
  /* visibility, not just transform: a transformed-but-painted element still
     occupies its own layer and shows up in full-page captures, and a screen
     reader or a broken transform would expose it. Hidden means hidden. */
  visibility: hidden;
  transition: transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.player[data-visible="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur) var(--ease), visibility 0s;
}
.player__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-3);
}
.player__art {
  width: 48px; height: 48px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex: 0 0 auto;
}
.player__text { min-width: 0; }
.player__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__status { font-size: var(--fs-xs); color: var(--cream-2); }
.player__controls { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.player__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.player__btn:hover { background: var(--cream); color: var(--plum-deep); border-color: var(--cream); }
.player__btn svg { width: 16px; height: 16px; }
.player__close { border-color: transparent; }
.player__scrub { flex: 1 1 auto; height: 2px; background: rgba(255, 255, 255, 0.25); position: relative; }
.player__scrub span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--mauve); }
.player__time { font-size: var(--fs-xs); color: var(--cream-2); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* 15. PROSE (READING SURFACES) ============================================= */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-6); }
.prose h2 { margin-top: var(--s-12); }
.prose h3 { margin-top: var(--s-8); }
.prose p { max-width: none; }
.prose blockquote {
  margin: var(--s-12) 0;
  padding-left: var(--s-8);
  border-left: 1px solid var(--mauve);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--ink-2);
}
.prose blockquote p { margin: 0; }
.prose ul { list-style: none; max-width: none; }
.prose ul li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px;
  border-top: 1px solid var(--mauve);
}

/* Lyrics: preserved exactly as supplied, line breaks intact. */
.lyrics {
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-line;
}
.lyrics-note {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  margin-top: var(--s-8);
  max-width: 56ch;
}

.story-block {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-12);
}

/* Detail rows for a song or product: a definition list, not a table. */
.spec { border-top: 1px solid var(--line); }
.spec__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.spec dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 4px;
}
.spec dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.spec dd ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.platform-list { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* "Not available" is signalled by a dashed border and no fill — NOT by
   dropping container opacity, which drags otherwise-compliant text (5.77:1)
   down to 2.32:1 and makes it unreadable. De-emphasis must never cost
   legibility; the honest explanatory copy beside it does that job. */
.platform-list--unavailable .pill {
  border-style: dashed;
  border-color: var(--mauve);
  background: transparent;
  color: var(--ink-2);
}

/* 16. FOOTER =============================================================== */

.site-foot {
  background: var(--plum-deep);
  color: var(--cream-2);
  padding-block: var(--s-16) var(--s-8);
  margin-top: var(--s-24);
  position: relative;
  isolation: isolate;
}
.site-foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* Two rows instead of five columns. The previous layout put a full signup form
   in one of five equal columns, which made the whole footer look cramped and
   unfinished; the form now gets its own full-width band. */
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-16);
  align-items: start;
  padding-bottom: var(--s-12);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
}
.site-foot .wordmark { color: var(--cream); font-size: 2.25rem; }
.site-foot h3 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--s-4);
}
.site-foot .foot-intro {
  color: var(--cream-2);
  font-size: var(--fs-sm);
  max-width: 26ch;
  margin-top: var(--s-4);
}
.foot-links li { margin-bottom: var(--s-2); }
.foot-links a {
  font-size: var(--fs-sm);
  color: var(--cream-2);
  transition: color var(--dur) var(--ease);
}
.foot-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
/* Names with no destination yet: plain and muted, no boxes. */
.foot-links .foot-pending {
  font-size: var(--fs-sm);
  color: rgba(240, 232, 222, 0.68);
}
.foot-note {
  font-size: var(--fs-xs);
  color: rgba(240, 232, 222, 0.68);
  margin-top: var(--s-3);
  max-width: none;
}

/* The Porchlight signup lives in the brand column, under the intro. As its own
   full-width band it left a dead void down the left of an otherwise tall footer;
   here it fills that space with the most useful thing on the page. */
.foot-brand .foot-signup {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 24rem;
}
.foot-brand .foot-signup p {
  color: var(--cream-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-5);
}
.foot-brand .foot-signup .field { margin-bottom: var(--s-3); }
.foot-brand .foot-signup .form-status {
  margin-top: var(--s-4);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--cream-2);
  font-size: var(--fs-xs);
  padding: var(--s-4);
}
.foot-brand .foot-signup .form-status strong {
  display: block;
  color: var(--white);
  margin-bottom: 2px;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-xs);
  color: rgba(240, 232, 222, 0.72);
}
.foot-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.foot-bottom a { color: inherit; }
.foot-bottom a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* 17. MOTION =============================================================== */

/* The site's one orchestrated moment, on the Home hero only. */
@keyframes hero-drift {
  from { transform: scale(1.035); }
  to   { transform: scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__media img { animation: hero-drift 1600ms var(--ease) both; }
.hero__copy .hero-title,
.hero__copy .lead,
.hero__copy .hero__actions { animation: rise 900ms var(--ease) both; }
.hero__copy .lead { animation-delay: 120ms; }
.hero__copy .hero__actions { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__media img { animation: none; transform: none; }
  .cover:hover .cover__art img { transform: none; }
  .heart-card:hover { transform: none; }
}

/* 17b. SEARCH ============================================================= */

.search {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  animation: search-in 260ms var(--ease) both;
}
.search[hidden] { display: none; }
@keyframes search-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.search__bar {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-6);
}
.search__shell { display: flex; align-items: center; gap: var(--s-6); }
.search__icon { color: var(--ink-2); }
.search__icon svg { width: 24px; height: 24px; }
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--ink);
  padding: var(--s-2) 0;
}
.search__input:focus { outline: none; border-bottom-color: var(--plum); }
.search__input::placeholder { color: var(--ink-2); opacity: 1; }
.search__close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.search__close:hover { background: var(--cream-2); border-color: var(--mauve); }
.search__close svg { width: 18px; height: 18px; }
.search__body {
  flex: 1 1 auto;
  overflow-y: auto;
  background: rgba(248, 244, 238, 0.985);
  padding-block: var(--s-8) var(--s-16);
}
.search__hint { color: var(--ink-2); font-size: var(--fs-sm); }
.search__results { display: grid; gap: 0; border-top: 1px solid var(--line); }
.search__result {
  border-bottom: 1px solid var(--line);
  animation: rise 420ms var(--ease) both;
}
.search__result a {
  display: block;
  padding: var(--s-6) var(--s-4);
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.search__result a:hover { background: var(--cream-2); padding-left: var(--s-6); }
.search__result h3 { font-size: var(--fs-h3); }
.search__result p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--s-1);
  max-width: 60ch;
}
.search__kind {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-deep);
  margin-bottom: var(--s-2);
}
.search__empty { padding-block: var(--s-16); text-align: center; color: var(--ink-2); }
.search__unlock {
  margin-top: var(--s-8);
  padding: var(--s-6);
  border: 1px dashed var(--mauve);
  border-radius: var(--r);
  background: var(--cream-2);
  max-width: 34rem;
}

/* 17c. MOTION — scroll & entrance ========================================== */

/* Everything here is gated on .js: with JavaScript unavailable nothing is
   hidden and nothing is offset, so the page is completely readable. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--ease) var(--reveal-delay, 0ms),
              transform 800ms var(--ease) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Stagger by position among siblings, so a row of cards arrives as a wave
   rather than all at once. Cap it: past the sixth child the delay would exceed
   the animation and read as lag rather than rhythm. */
.js [data-reveal]:nth-child(2) { --reveal-delay: 70ms; }
.js [data-reveal]:nth-child(3) { --reveal-delay: 140ms; }
.js [data-reveal]:nth-child(4) { --reveal-delay: 210ms; }
.js [data-reveal]:nth-child(5) { --reveal-delay: 280ms; }
.js [data-reveal]:nth-child(n+6) { --reveal-delay: 340ms; }

/* Parallax needs headroom or translating the layer exposes the page ground
   behind it. The media wrappers are 7% taller than their container on each
   side, and the movement stays well inside that. */
.hero__media,
.band-hero__media,
.feature__media {
  inset: -7% 0;
  transform: translate3d(0, var(--py, 0px), 0);
}
.js .hero__media,
.js .band-hero__media,
.js .feature__media { will-change: transform; }

/* A section heading that draws its own hairline in as it arrives. */
.js .section-head h2::after {
  content: "";
  display: block;
  width: 48px;
  border-top: 1px solid var(--mauve);
  margin-top: var(--s-6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease) 160ms;
}
.js .section-head.is-in h2::after,
.js .section-head.is-in h2:only-child::after { transform: scaleX(1); }

/* The sticky header tightens slightly once you leave the top. */
.site-head .head-inner { transition: min-height 320ms var(--ease); }
.site-head[data-scrolled="true"] .head-inner { min-height: 64px; }

/* The section-jump bar lifts off the page content once it sticks. */
.jump { transition: box-shadow 320ms var(--ease); }
.jump[data-stuck="true"] { box-shadow: 0 10px 24px rgba(57, 47, 41, 0.16); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__media, .band-hero__media, .feature__media { inset: 0; transform: none; }
  .js .section-head h2::after { transform: scaleX(1); transition: none; }
  .search { animation: none; }
  .search__result { animation: none; }
}

/* Sections the owner has hidden in the editor.
   This MUST live in the always-loaded stylesheet. It cannot live in editor.css:
   a visitor never loads editor.css, so a hide rule kept there would hide the
   section from the owner and show it to everybody else. */
[data-ane-hidden="true"] { display: none !important; }

/* 18. RESPONSIVE =========================================================== */

@media (max-width: 1080px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
  .split { gap: var(--s-12); }
  .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --gutter: var(--s-4); }

  .menu-toggle { display: block; }

  .nav {
    position: absolute;
    left: var(--s-4);
    right: var(--s-4);
    top: calc(100% + 1px);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-menu);
    padding: var(--s-4);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a {
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--line);
  }
  .nav li:last-child a { border-bottom: 0; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--plum-deep); }

  .head-inner { min-height: 64px; position: relative; }
  .jump { top: 64px; }

  .hero { min-height: 68vh; }
  .hero__inner { padding-block: var(--s-16) var(--s-12); }
  .hero__media img { object-position: 62% center; }
  .hero__media::after {
    background: linear-gradient(0deg,
      rgba(36, 25, 32, 0.86) 0%,
      rgba(36, 25, 32, 0.66) 44%,
      rgba(36, 25, 32, 0.30) 100%);
  }

  .split-hero { grid-template-columns: minmax(0, 1fr); }
  .split-hero__copy {
    padding: var(--s-16) var(--gutter);
    order: 2;
  }
  .split-hero__media { min-height: 380px; order: 1; }

  .split, .split--even, .two-up { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .split--reverse > :first-child { order: 0; }

  .banner { grid-template-columns: minmax(0, 1fr); }
  .banner__copy { padding: var(--s-12) var(--gutter); order: 2; }
  .banner__media { min-height: 280px; order: 1; }

  .grid--3, .grid--4, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--feature-first { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--feature-first > :first-child { grid-column: span 2; }

  .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }

  .archive__row { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-6); }
  .archive__row img { width: 96px; height: 72px; }

  .spec__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .section { padding-block: var(--s-12); }
  .section--roomy { padding-block: var(--s-16); }
  .feature__inner { padding-block: var(--s-16); }
  .panel-plum, .story-block { padding: var(--s-8); }

  .player__scrub, .player__time { display: none; }

  .site-foot { margin-top: var(--s-16); }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4, .grid--6, .grid--feature-first { grid-template-columns: minmax(0, 1fr); }
  .grid--feature-first > :first-child { grid-column: span 1; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .heart-card, .card { padding: var(--s-6); }
  .ledger__row { padding: var(--s-4); }
  .ledger__status { display: none; }
  .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover__title { font-size: 1rem; }
  .hero__actions .btn { width: 100%; }
}