/* =========================================================================
   Bone Skeleton Music Songs — landing page (design 4a, revised)
   Mobile-first. On desktop the cover art becomes a sticky left column and
   all content scrolls in a right column until the holiday (flip) section.
   ========================================================================= */

/* Interpolate skeleton body + ray colors (accent stays snappy / non-registered) */
@property --skel-fill {
  syntax: "<color>";
  inherits: true;
  initial-value: #FE013A;
}
@property --skel-mid {
  syntax: "<color>";
  inherits: true;
  initial-value: #4ef08e;
}

:root {
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255, 255, 255, .72);
  --dim: rgba(255, 255, 255, .55);
  --faint: rgba(255, 255, 255, .4);
  --line: rgba(255, 255, 255, .1);
  --purple: #4a1152;
  --yellow: #ffd166;
  --maxw: 1160px;

  /* Shared color palette (spectrum order) */
  --palette-01: #EE362B;
  --palette-02: #FF7A1A;
  --palette-03: #F2C230;
  --palette-04: #E2DB38;
  --palette-05: #7FFF3D;
  --palette-06: #52DF58;
  --palette-07: #3CB44B;
  --palette-08: #00D9C0;
  --palette-09: #5CE2E6;
  --palette-10: #189BCC;
  --palette-11: #2D5BFF;
  --palette-12: #717594;
  --palette-13: #B8BACA;
  --palette-14: #7862A2;
  --palette-15: #C9B8E8;
  --palette-16: #7029DA;
  --palette-17: #B235D8;
  --palette-18: #E692D3;
  --palette-19: #C83F94;
  --palette-20: #FF3EA5;
  --palette-21: #000000;
  --palette-22: #4ef08e; /* page accent (headings, buttons, eyes) */
  --palette-23: #FE013A; /* skeleton main fill */

  /*
   * AA-safe accent series — ≥4.5:1 vs black, ordered ROYGBIV (by hue).
   * Cycle these via the weekly badge; --accent points into this list.
   */
  --palette-aa-01: var(--palette-01); /* #EE362B  red */
  --palette-aa-02: var(--palette-02); /* #FF7A1A  orange */
  --palette-aa-03: var(--palette-03); /* #F2C230  yellow */
  --palette-aa-04: var(--palette-04); /* #E2DB38  yellow-green */
  --palette-aa-05: var(--palette-05); /* #7FFF3D  lime */
  --palette-aa-06: var(--palette-06); /* #52DF58  green */
  --palette-aa-07: var(--palette-07); /* #3CB44B  green */
  --palette-aa-08: var(--palette-22); /* #4ef08e  bright green (default accent) */
  --palette-aa-09: var(--palette-08); /* #00D9C0  teal */
  --palette-aa-10: var(--palette-09); /* #5CE2E6  cyan */
  --palette-aa-11: var(--palette-10); /* #189BCC  blue */
  --palette-aa-12: var(--palette-12); /* #717594  indigo-gray */
  --palette-aa-13: var(--palette-15); /* #C9B8E8  violet */
  --palette-aa-14: var(--palette-18); /* #E692D3  lilac */
  --palette-aa-15: var(--palette-19); /* #C83F94  magenta */
  --palette-aa-16: var(--palette-20); /* #FF3EA5  pink */
  --palette-aa-17: var(--palette-23); /* #FE013A  rose-red */
  /* #B8BACA (palette-13) omitted — off-white, skeleton-only */

  /* Page accent — cycled by the weekly badge */
  --accent: #4ef08e;
  --accent-hi: color-mix(in srgb, var(--accent) 72%, white);
  --accent-ink: #00170a;

  /*
   * Karma / Support band — AA (≥4.5:1) on white. Cycled by the karma badge.
   * Only the karma seal + merch button consume these (not the global accent).
   */
  --palette-karma-01: var(--palette-11); /* #2D5BFF */
  --palette-karma-02: var(--palette-14); /* #7862A2 */
  --palette-karma-03: var(--palette-16); /* #7029DA */
  --palette-karma-04: var(--purple);     /* #4a1152 */
  --palette-karma-05: var(--palette-17); /* #B235D8 */
  --palette-karma-06: var(--palette-19); /* #C83F94 */
  --karma: var(--palette-karma-04);
  --karma-ink: #ffffff;
  --karma-hi: color-mix(in srgb, var(--karma) 72%, white);
  --karma-face: color-mix(in srgb, var(--karma) 78%, black);

  /* Bone Skeleton SVG colors — fill/mid randomized on badge click */
  --skel-bg: var(--palette-21);   /* #000000 */
  --skel-fill: #FE013A;           /* skeleton body */
  --skel-mid: #4ef08e;            /* background rays / shading */
  --skel-eyes: var(--accent);     /* round eye orbs (follow accent) */
  --skel-color-duration: 1.25s;

  --f-display: "Archivo Black", Impact, Haettenschweiler, sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, Menlo, monospace;

  /* Type scale — deliberately small set of sizes */
  --fs-eyebrow: 13px;   /* mono kickers (flip only) */
  --fs-small: 14px;     /* secondary text, meta */
  --fs-body: 16px;      /* body copy, buttons */
  --fs-title: 22px;     /* component titles (Archivo Black) */
  --fs-heading: clamp(34px, 4.6vw, 40px);   /* section headings */
  --fs-display-l: clamp(32px, 6vw, 46px);   /* flip title */
  --fs-display-xl: clamp(48px, 8.5vw, 74px); /* hero title */

  --tap: 48px;          /* minimum interactive target */
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  transition:
    --skel-fill var(--skel-color-duration) ease,
    --skel-mid var(--skel-color-duration) ease,
    filter .9s ease;
}
/* When the weekly badge finally gives up, the whole page drains to gray */
html.drained { filter: grayscale(1); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/*
 * Accent fades on a few UI chrome nodes. Skeleton body + rays ease more
 * slowly on their own (still cheaper than animating every accent surface).
 */
.heading,
.title .accent,
.photo .badge .badge-star,
.photo .badge-face .b2,
.btn-primary {
  transition: color .35s ease, background-color .35s ease;
}

.badge-karma .badge-star,
.badge-karma .badge-face,
.support-btn {
  transition: color .35s ease, background-color .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    transition: none;
  }
  .heading,
  .title .accent,
  .photo .badge .badge-star,
  .photo .badge-face .b2,
  .btn-primary,
  .badge-karma .badge-star,
  .badge-karma .badge-face,
  .support-btn {
    transition: none;
  }
}

a { color: inherit; }
img { max-width: 100%; }

/* Phosphor icon sizing helper */
[class*="ph-"] { line-height: 1; }

/* Section headings — a step down from the hero, same face, accent color */
.heading {
  font: 400 var(--fs-heading)/1 var(--f-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Supporting subtext — one shared style beneath the hero and every heading */
.blurb, .section-desc, .band-desc, .flip-desc {
  font: 400 18px/1.6 var(--f-body);
  letter-spacing: .05em;
  color: var(--muted);
  text-wrap: pretty;
}
.section-desc { margin: 12px 0 0; max-width: 54ch; }

/* =========================================================================
   STAGE — cover art + all pre-holiday content
   ========================================================================= */

.stage-media { position: relative; line-height: 0; }
.photo { position: relative; }
.record { display: none; }

.hero-art-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: var(--skel-bg);
  isolation: isolate; /* keep multiply blend inside the art stack */
  contain: paint; /* limit accent/SVG paint invalidation */
}
.hero-art {
  display: block;
  width: 100%;
  height: 100%;
}
/* Recolorable Bone Skeleton SVG — override the baked-in fills via CSS vars */
.hero-art [fill="black"] { fill: var(--skel-bg); }
.hero-art [fill="white"] { fill: var(--skel-fill); }
.hero-art [fill="#888888"] { fill: var(--skel-mid); }
.hero-art path.skel-eye { fill: var(--skel-eyes); }

/* Multiply texture — only shown when blend-mode is supported */
.hero-multiply { display: none; }
@supports (mix-blend-mode: multiply) {
  .hero-multiply {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* match SVG preserveAspectRatio xMidYMin slice */
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: .8;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 34%,
      rgba(0, 0, 0, .88) 86%, #000 100%);
}

/* Spinning starburst stamp (item 1 — enlarged) */
.badge {
  position: relative;
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Hero badge sits over the cover art — also cycles the page accent on tap */
.photo .badge {
  position: absolute;
  top: 14px;
  right: 12px;
  cursor: pointer;
}
.badge.pop { animation: badgePop .18s ease; }
.badge-star {
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: polygon(50.0% 0.0%, 55.8% 9.4%, 64.1% 2.0%, 67.0% 12.7%, 77.0% 7.9%, 76.8% 19.0%, 87.8% 17.3%, 84.5% 27.8%, 95.5% 29.2%, 89.3% 38.4%, 99.5% 42.9%, 91.0% 50.0%, 99.5% 57.1%, 89.3% 61.6%, 95.5% 70.8%, 84.5% 72.2%, 87.8% 82.7%, 76.8% 81.0%, 77.0% 92.1%, 67.0% 87.3%, 64.1% 98.0%, 55.8% 90.6%, 50.0% 100.0%, 44.2% 90.6%, 35.9% 98.0%, 33.0% 87.3%, 23.0% 92.1%, 23.2% 81.0%, 12.2% 82.7%, 15.5% 72.2%, 4.5% 70.8%, 10.7% 61.6%, 0.5% 57.1%, 9.0% 50.0%, 0.5% 42.9%, 10.7% 38.4%, 4.5% 29.2%, 15.5% 27.8%, 12.2% 17.3%, 23.2% 19.0%, 23.0% 7.9%, 33.0% 12.7%, 35.9% 2.0%, 44.2% 9.4%);
  will-change: transform;
}
.badge-face {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.badge-face .b1 { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--fg); }
.badge-face .b2 { font: 400 24px/1 var(--f-display); letter-spacing: -.01em; color: var(--accent); }
.badge-face .b3 { font: 700 9.5px/1 var(--f-mono); letter-spacing: .04em; color: rgba(255, 255, 255, .62); margin-top: 1px; }

@keyframes badgePop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* ---- Secret easter-egg: badge starts talking back after enough taps ---- */
.badge-secret .badge-face { gap: 3px; padding: 0 7px; }
.badge-secret .b1,
.badge-secret .b3 {
  font: 700 8px/1.15 var(--f-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  max-width: 98px;
  color: var(--fg);
}
.badge-secret .b3 { color: rgba(255, 255, 255, .62); }
.badge-secret .b2 {
  font: 400 15px/1 var(--f-display);
  letter-spacing: -.02em;
  text-align: center;
  max-width: 104px;
  color: var(--accent);
}

/* ---- The badge breaks off and tumbles away ---- */
@keyframes badgeBreak {
  0%   { transform: rotate(0deg) translateY(0); opacity: 1; }
  12%  { transform: rotate(-15deg) translateY(-4px); opacity: 1; }
  100% { transform: rotate(30deg) translateY(480px); opacity: 0; }
}
.badge.badge-break {
  animation: badgeBreak 1s cubic-bezier(.45, .03, .9, .4) forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .badge.badge-break { animation: none; opacity: 0; }
}

/* ---- Saw mode: long-press then drag the badge to grind the cover away ---- */
.badge { touch-action: none; }            /* let the badge be dragged, not scroll */
.saw-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;                             /* above the wear overlay (z-index 3) */
  pointer-events: none;
}
.badge.sawing { z-index: 9; cursor: grabbing; }
.badge.returning { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }

/* Shards of the cover flung out by the saw */
.saw-chunk {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  border-radius: 1px;
  will-change: transform, opacity;
  animation: sawChunk var(--dur, .9s) cubic-bezier(.3, .5, .7, 1) forwards;
}
@keyframes sawChunk {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 220px)) rotate(var(--rot, 360deg)); opacity: 0; }
}

.stage-content { padding: 0 24px 64px; }

.hero-copy { position: relative; z-index: 2; margin-top: -58px; }

.title {
  margin: 0;
  font: 400 var(--fs-display-xl)/.87 var(--f-display);
  letter-spacing: -.028em;
  text-transform: uppercase;
}
.title .accent { color: var(--accent); }

.blurb { margin: 20px 0 0; max-width: 42ch; }

/* Sections within the content column */
.block { padding-top: 60px; }
#new { padding-top: 92px; }   /* more separation from "Ways to Listen" */

html { scroll-behavior: smooth; }
#signup { scroll-margin-top: 24px; }

/* =========================================================================
   BUTTONS  (consolidated)
   ========================================================================= */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 6px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font: 700 var(--fs-body)/1 var(--f-body);
  letter-spacing: .04em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn i { font-size: 20px; }

.btn-primary { height: 58px; background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); }

/* White outline buttons (IG / Discord) */
.btn-outline {
  height: 54px;
  background: transparent;
  border: 1.5px solid var(--fg);
  color: var(--fg);
}
.btn-outline:hover { background: var(--fg); color: var(--bg); }

.cta { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.cta-row { display: flex; gap: 10px; }
.cta-row .btn { flex: 1; }

/* =========================================================================
   LISTEN ANYWHERE
   ========================================================================= */

.services { display: flex; flex-direction: column; margin-top: 16px; }

.service {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--tap);
  padding: 12px 0;
  text-decoration: none;
  color: var(--fg);
  transition: color .15s ease;
}
.service:hover { color: var(--accent); }
.service:hover .mark { color: var(--accent); }

.mark {
  width: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  transition: color .15s ease;
}
.mark i { font-size: 30px; }

.service-name {
  flex: 1;
  min-width: 0;
  font: 400 clamp(16px, 4.7vw, 22px)/1 var(--f-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.service-go { font-size: 18px; color: var(--dim); }

/* =========================================================================
   NEW THIS WEEK  (item 4 — real dummy rows)
   ========================================================================= */

.tracks { margin-top: 12px; }

.track {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--tap);
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.track:first-child { border-top: 0; }
.track-no { font: 400 var(--fs-small)/1 var(--f-mono); color: var(--accent); width: 20px; flex: none; }
.track-meta { flex: 1; min-width: 0; }
.track-title { font: 400 var(--fs-body)/1.25 var(--f-body); }
.track-artist { font: 400 var(--fs-small)/1.3 var(--f-body); color: var(--dim); margin-top: 2px; }
.track-dur { font: 400 var(--fs-small)/1 var(--f-mono); color: var(--faint); flex: none; }

/* =========================================================================
   SPOTIFY EMBED  (item 10 — moved below "new this week", taller)
   ========================================================================= */

.embed { margin-top: 16px; }
.embed iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  border-radius: 12px;
  background: #121212;
}

/* =========================================================================
   SUPPORT — full-width band (mirrors the holiday band structure)
   ========================================================================= */

.band { color: #101010; }
.support-band { background: var(--fg); }
.band-inner { position: relative; max-width: 620px; margin: 0 auto; padding: 48px 24px; }
.band-kicker { font: 700 var(--fs-eyebrow)/1 var(--f-mono); letter-spacing: .08em; color: rgba(0, 0, 0, .5); }
.band-title { font: 400 var(--fs-heading)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; margin-top: 12px; padding-right: 68px; }
.band-desc { color: rgba(0, 0, 0, .72); }
.band-cta { margin-top: 24px; }
.band-cta .btn { width: 100%; }

/* "Certified Karma Boost" seal — own AA-on-white colors, cycled on tap */
.badge-karma { position: absolute; top: -44px; right: 2px; z-index: 3; width: 122px; height: 122px; }
.badge-karma .badge-star { background: var(--karma); }
.badge-karma .badge-face { width: 92px; height: 92px; background: var(--karma-face); }
.badge-karma .b1 { color: var(--yellow); font-size: 9px; }
.badge-karma .b2 { color: #fff; font-size: 19px; }
.badge-karma .b3 { font: 400 19px/1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; margin-top: 0; }
.support-btn { background: var(--karma); color: var(--karma-ink); animation: supportWiggle 5s ease-in-out infinite; }
.support-btn:hover { background: var(--karma-hi); }

@keyframes supportWiggle {
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(-2.2deg); }
  91% { transform: rotate(2.2deg); }
  94% { transform: rotate(-1.6deg); }
  97% { transform: rotate(.9deg); }
}

/* =========================================================================
   MAILING-LIST SIGNUP (contained on black, between the two bands)
   ========================================================================= */

.signup-inner { max-width: 620px; margin: 0 auto; padding: 56px 24px; }

/* =========================================================================
   MAIL-IN COUPON → KLAVIYO SIGNUP  (item 11)
   ========================================================================= */

.coupon { position: relative; max-width: 480px; margin-inline: auto; border: 2px dashed rgba(78, 240, 142, .55); padding: 20px; }

/* Snip-here scissors on the dashed border (item 3) */
.coupon-scissors {
  position: absolute;
  top: 0;
  right: 22px;
  transform: translateY(-50%);
  padding: 0 6px;
  background: var(--bg);
  color: var(--accent);
  font-size: 22px;
}
.coupon-title { font: 400 var(--fs-title)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; }
.coupon-desc { font: 400 var(--fs-small)/1.5 var(--f-body); color: var(--muted); margin-top: 8px; }

.coupon input {
  width: 100%;
  margin-top: 10px;
  height: var(--tap);
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: var(--fg);
  padding: 0 14px;
  font: 400 var(--fs-body)/1 var(--f-body);
}
.coupon input:first-of-type { margin-top: 16px; }
.coupon input::placeholder { color: var(--faint); }
.coupon input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.coupon button { width: 100%; margin-top: 12px; height: 52px; }

.coupon-note {
  font: 400 12px/1.5 var(--f-mono);
  color: var(--faint);
  margin-top: 12px;
}
.coupon-msg { font: 400 var(--fs-small)/1.4 var(--f-mono); margin-top: 12px; }
.coupon-msg.err { color: #ff6b6b; }
.coupon-msg[hidden] { display: none; }

/* Completed state — keeps the box size, centers a confirmation (item 6) */
.coupon.done .coupon-body { visibility: hidden; }
.coupon-done {
  position: absolute;
  inset: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.coupon-done[hidden] { display: none; }
.coupon-done i { font-size: 44px; color: var(--accent); }
.coupon-done-title { font: 400 var(--fs-title)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; }
.coupon-done-sub { font: 400 var(--fs-small)/1.5 var(--f-body); color: var(--muted); max-width: 30ch; }

/* =========================================================================
   FLIP SIDE — holiday songs (full-bleed purple band)
   ========================================================================= */

.flip { background: var(--purple); color: var(--fg); }
.flip-inner { max-width: 620px; margin: 0 auto; padding: 40px 24px 44px; }
.flip-kicker { font: 700 var(--fs-eyebrow)/1 var(--f-mono); letter-spacing: .1em; color: var(--yellow); }
.flip-title { font: 400 var(--fs-heading)/.95 var(--f-display); text-transform: uppercase; margin-top: 12px; }
.flip-desc { margin: 12px 0 0; color: rgba(255, 255, 255, .82); max-width: 46ch; }

/* image + button block locked to the same height (item 6) */
.flip-row { display: flex; gap: 14px; align-items: stretch; margin-top: 20px; }
.flip-art { width: 150px; flex: none; object-fit: cover; align-self: stretch; min-height: 0; border: 3px solid #fff; }
.flip-links { flex: 1; display: flex; flex-direction: column; gap: 10px; }
/* Match the site button component, kept flex:1 so the stack matches the art height */
.flip-links a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: 6px;
  text-decoration: none;
  font: 700 var(--fs-body)/1 var(--f-body);
  letter-spacing: .04em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.flip-links a i { font-size: 20px; }
.flip-links .fl-solid { background: var(--fg); color: var(--purple); }
.flip-links .fl-solid:hover { background: var(--yellow); }
.flip-links .fl-outline { border: 1.5px solid rgba(255, 255, 255, .7); color: var(--fg); }
.flip-links .fl-outline:hover { background: var(--fg); color: var(--purple); }

/* =========================================================================
   FOOTER  (items 7 & 13 — was "about", now the footer with breathing room)
   ========================================================================= */

.footer { border-top: 1px solid var(--line); }
.footer-inner { max-width: 620px; margin: 0 auto; padding: 72px 24px 80px; }
/* Crew credits — the listen-row pattern at a smaller size (item 4) */
.crew { display: flex; flex-direction: column; margin-top: 18px; }
.crew a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 0;
  text-decoration: none;
  color: var(--fg);
  transition: color .15s ease;
}
.crew a:hover { color: var(--accent); }
.crew-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.crew-name { flex: 1; font: 400 17px/1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.crew-go { font-size: 16px; color: var(--dim); }

.footer-social { display: flex; gap: 10px; margin-top: 28px; }
.footer-social .btn { flex: 1; }

/* =========================================================================
   TABLET  ≥ 720px
   ========================================================================= */

@media (min-width: 720px) {
  .hero-art-stack { height: 520px; }
  .hero-copy { margin-top: -72px; }
  .stage-content { max-width: 720px; margin: 0 auto; padding: 0 40px 64px; }
  .flip-inner, .footer-inner, .band-inner, .signup-inner { max-width: 720px; padding-left: 40px; padding-right: 40px; }
  .flip-art { width: 190px; }
}

/* =========================================================================
   DESKTOP  ≥ 1000px — sticky cover art + scrolling content column (item 12)
   ========================================================================= */

@media (min-width: 1000px) {
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 64px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 40px 48px 64px;
    align-items: start;
  }

  .stage-media {
    position: sticky;
    top: 40px;
    align-self: start;
  }
  /* Worn album-sleeve wear — layered over the recolorable SVG + multiply map.
     The stack already tilts/clips, so the overlay just fills it (no own rotate)
     and sits above the multiply layer (z-index) so sheen/scratches read on top. */
  .hero-overlay {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 3;
    pointer-events: none;
    background:
      /* fine scratches, two directions */
      repeating-linear-gradient(63deg, transparent 0 6px, rgba(255, 255, 255, .05) 6px 6.6px, transparent 6.6px 14px),
      repeating-linear-gradient(-71deg, transparent 0 9px, rgba(0, 0, 0, .1) 9px 9.6px, transparent 9.6px 19px),
      /* diagonal sheen */
      linear-gradient(122deg, transparent 26%, rgba(255, 255, 255, .17) 45%, transparent 61%),
      /* ring wear from the record inside */
      radial-gradient(circle at 50% 49%, transparent 0 32%, rgba(0, 0, 0, .12) 34%, rgba(255, 255, 255, .06) 36%, transparent 39%),
      /* dust / grain */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)' opacity='0.42'/%3E%3C/svg%3E");
    background-size: auto, auto, auto, auto, 160px 160px;
    /* edge wear: worn light edge, darkened/dented edges, top gloss */
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .11),
      inset 0 0 46px rgba(0, 0, 0, .45),
      inset 0 3px 8px rgba(255, 255, 255, .13),
      inset 9px -11px 28px rgba(0, 0, 0, .34),
      inset -13px 13px 26px rgba(0, 0, 0, .28);
  }

  /* Spotify embed tucked under the record on tall screens */
  .stage-media > .in-media { line-height: 1.5; padding-top: 48px; }

  /* ---- Square cover art at a tilt ---- */
  .photo { width: 100%; aspect-ratio: 1 / 1; transform: rotate(-2deg); }

  /* the vinyl record — centered above the square cover (hidden for now, kept in) */
  .record {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 2;
    background:
      repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .04) 0 1px, rgba(0, 0, 0, 0) 1px 3.5px),
      radial-gradient(circle at 40% 34%, #383838 0%, #1a1a1a 26%, #0b0b0b 60%, #000 100%);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .6), inset 0 0 55px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .85);
  }
  .record::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(125deg,
      rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .03) 48%,
      rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .1) 88%, rgba(255, 255, 255, 0) 94%);
    pointer-events: none;
  }
  .record::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 33%;
    height: 33%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #050505 0 7%, var(--purple) 8% 100%);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .5);
  }

  .hero-art-stack {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: none;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    /* extra left tilt on the image only — badge (on .photo) stays put */
    transform: rotate(-3deg);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .45);
  }
  .hero-art,
  .hero-multiply {
    border-radius: inherit;
  }

  /* badge overhangs the top-right corner */
  .photo .badge { top: -20px; right: -20px; width: 160px; height: 160px; z-index: 7; }
  .photo .badge-face { width: 122px; height: 122px; }

  .stage-content { max-width: none; margin: 0; padding: 0; }
  /* Fill the image height: headline top, subhead centered, buttons at the image bottom */
  .hero-copy {
    margin-top: 0;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hero-copy .blurb, .hero-copy .cta { margin: 0; }
  .blurb { max-width: 48ch; }

  /* content column keeps a comfortable single-column measure */
  .flip-inner, .footer-inner { max-width: var(--maxw); padding-left: 48px; padding-right: 48px; }

  /* Holiday band: heading left, locked image+button block right (item 6) */
  .flip { margin-top: 0; }
  .flip-inner { padding: 64px 48px; }
  .flip-body { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .flip-row { margin-top: 0; }
  .flip-art { width: 200px; }

  /* Support band: text left, CTA right */
  .band-inner { max-width: var(--maxw); padding: 76px 48px; }
  .band-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
  .band-cta { margin-top: 0; display: flex; flex-direction: column; align-items: center; }
  .band-cta .btn { width: auto; min-width: 300px; margin-top: 20px; }
  /* Seal sits centered over the button */
  .badge-karma { position: relative; top: auto; right: auto; z-index: 2; width: 138px; height: 138px; }
  .badge-karma .badge-face { width: 104px; height: 104px; }
  .band-title { padding-right: 0; }
  .signup-inner { max-width: 640px; padding: 84px 24px; }

  /* Footer: heading/links left, social right */
  .footer-inner { padding: 88px 48px 96px; }
  .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .footer-social { margin-top: 0; align-self: start; }
}

/* Tall desktop: the embed is under the art, so line "Ways to Listen" up with
   the player itself (which sits a little below the top of its container) */
@media (min-width: 1000px) and (min-height: 940px) {
  #listen { padding-top: 48px; }
}

/* =========================================================================
   Motion / focus preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .badge-star { animation: none; transform: rotate(-8deg); }
  .support-btn { animation: none; }
  * { transition: none !important; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* "New this week" — badged artists + linked songs, paginated */
.nw-badge {
  display: inline-flex; align-items: center; flex: none;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: 700 10px/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase;
}
.nw-link { color: inherit; text-decoration: none; }
.nw-link:hover { color: var(--accent); text-decoration: underline; }
.nw-empty { color: var(--dim); font: 400 var(--fs-body)/1.6 var(--f-body); padding: 14px 0 0; }
.nw-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.nw-pgbtn {
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg); padding: 8px 16px; cursor: pointer;
  font: 700 13px/1 var(--f-body); letter-spacing: .02em;
}
.nw-pgbtn:hover:not(:disabled) { border-color: var(--fg); }
.nw-pgbtn:disabled { opacity: .4; cursor: default; }
.nw-pginfo { font: 400 13px/1 var(--f-mono); color: var(--dim); }