/* Listen page — page-specific styles.
   Reproduces the authoritative Figma file
   figma.com/design/iBbuaxPtkTyuJ9FwenUBMy (node 1:3, "Desktop - Listen",
   1440px reference frame). Built one named Figma frame at a time
   (BUILD-ROADMAP.md Phase 5); sections not yet built keep the earlier
   structural-only placeholder markup/styles until their turn.

   Typography: Perandory Semi-Condensed for display headings and nav,
   IM Fell English for readable text (PROJECT-SPEC.md §5), Sue Ellen
   Francisco for handwritten notes.

   Asset note: a parallel session uploaded the real Figma exports for
   this page (assets/images/listen/) after this file's first pass, which
   originally had to approximate several backgrounds/tapes/photos in flat
   CSS color because this session's own network access to the Figma
   asset host was blocked. Those placeholders have since been swapped for
   the real exports below; see individual section comments for which
   asset backs which element. */

/* Full-page grain texture (Figma node 1:4, "background paper_2"). The
   source file's own native aspect (2880×4856) happens to match the
   page's 1440×2428 reference almost exactly, so a plain cover-sized,
   non-repeating background reproduces it without needing Figma's own
   (much larger, 4096×3396) bleed-and-clip bounding box. Re-exported from
   the original 2880×4856 7.4MB PNG to a 1186×2000 WebP (long edge
   2000px, quality 85, ~57KB) — same aspect ratio, so the cover-sizing
   math above still holds; visually indistinguishable at this texture's
   actual displayed size. Original PNG removed (kept in git history). */
/* Scoped to this page only (not the shared base.css) — clips the
   intentional horizontal bleed of decorative elements like the
   1950sMusicAD photo below at the true document root, since overflow-x
   on body alone isn't reliably respected for full-page rendering. */
html:has(body.page-listen) {
  overflow-x: hidden;
}

.page-listen {
  overflow-x: hidden;
  background-color: var(--color-paper);
  background-image: url('/assets/images/listen/background-paper.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.page-listen main.listen-page {
  max-width: none;
  padding: 0;
}

/* ── Header / Navigation (Figma node 12:7) ──
   A genuine Auto Layout row in Figma: 5 fixed 142×57 tabs with a
   26.25px gap, right-aligned within the 1440px reference frame (tab row
   spans x=621-1436, i.e. flush to the right edge). The reused torn-paper
   tab asset (ASSET-MANIFEST.md §1) is the tab's entire visual
   treatment; labels are real text layered on top in Perandory
   Semi-Condensed, matching the nav on every other page. */
.listen-header {
  display: flex;
  justify-content: flex-end;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.6875rem 0.25rem 0 1rem; /* ~27px top, matching Figma y=27 */
}

.listen-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 26.25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* font-weight intentionally not set: only a Regular/400 cut of Perandory Semi-Condensed is
   hosted (css/tokens.css), so 600 here would trigger a synthetic/fake
   bold — confirmed visibly heavier than Journal's and Journal Post's
   identical nav-tape component side by side. Those two don't set
   font-weight either, so leaving it unset here matches them exactly
   rather than reintroducing a synthetic-bold mismatch. */
.listen-nav__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 57px;
  background-image: url('/assets/images/listen/sarahtonin_sounds-listen-Menu-tape_2_1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--color-near-black);
}

.listen-nav__tab[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-crimson);
  text-underline-offset: 3px;
}

.listen-nav__tab:hover,
.listen-nav__tab:focus-visible {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .listen-header {
    justify-content: center;
    padding: 1rem;
  }

  .listen-nav__list {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .listen-nav__tab {
    width: 108px;
    height: 44px;
    font-size: 15px;
  }

  .listen-nav__list {
    gap: 12px;
  }
}

/* ── Hero (Figma node 15:3) ──
   Reference frame is 852×262.912, itself offset -167px from the page's
   own left edge within the shared 1440px-wide canvas — LISTEN and the
   subtitle sit left-of-center by design, not centered on the viewport.
   Children are positioned as percentages of this same 1440px reference
   (left/width) crossed with the Hero frame's own local height (top/
   height), matching the geometry get_design_context returned directly.
   overflow stays visible (not clipped) because the logo's rotated
   bounding box bleeds above the Hero frame's own top edge into the
   empty space beside the nav row above it — confirmed against the full
   page screenshot, where the two never overlap horizontally. */
.listen-hero {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 262.912;
  overflow: visible;
}

.listen-hero__title {
  position: absolute;
  left: -11.597%;
  top: 41.96%; /* 7% below Figma so the logo's bottom edge doesn't crowd the L */
  width: 59.167%;
  height: 60.86%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(2.5rem, 6.9444vw, 6.25rem);
  line-height: 1;
  text-align: center;
  color: var(--color-near-black);
}

/* Divider and subtitle follow the heading (7% lower than Figma) and sit
   ~18% higher relative to it than the Figma frame, so the line hugs
   the heading as on the other pages. */
.listen-hero__divider {
  position: absolute;
  left: -0.0694%;
  top: 75.5%;
  width: 37.977%;
  height: 2px;
  background-color: var(--color-crimson);
}

.listen-hero__subtitle {
  position: absolute;
  left: -0.833%;
  top: 77.4%;
  width: 36.25%;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.3889vw, 1.25rem);
  text-align: center;
  color: var(--color-near-black);
}

.listen-hero__logo {
  position: absolute;
  left: -2.014%;
  top: -45.678%; /* re-pulled from Figma: logo nudged down (was -52.145%) */
  width: 26.686%;
  height: 106.657%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listen-hero__logo-inner {
  flex: none;
  width: 91.445%;
  aspect-ratio: 351.406 / 155.659;
  transform: rotate(-22.96deg);
}

.listen-hero__logo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Mood Picker Bar (Figma node 15:5) ──
   A flexbox row of record-label buttons, rendered by js/listen.js from
   content/listen/moods.json (number, name, and descriptor once Sarah
   writes one). The card backdrop uses the real "Menu-tape_3" export. */
.listen-moods {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* Between the mobile layout and ~880px the subtitle wraps to two lines
   and would run into the mood card; give it room. */
@media (min-width: 761px) and (max-width: 879.98px) {
  .listen-moods {
    margin-top: 2.5rem;
  }
}

.listen-moods__card {
  position: relative;
  margin-left: 1.806%;
  width: 95.69%;
  aspect-ratio: 1377.94 / 267.466;
  background-image: url('/assets/images/listen/sarahtonin_sounds-listen-Menu-tape_3_1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.listen-moods__heading {
  position: absolute;
  left: 1.428%;
  top: 6.494%;
  width: 18.74%;
  height: 11.687%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.3889vw, 1.25rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-near-black);
}

.listen-moods__row-wrap {
  position: absolute;
  left: 5.273%;
  top: 29.01%;
  width: 89.81%;
  height: 41.99%;
  display: flex;
  align-items: center;
}

.listen-moods__row {
  display: flex;
  align-items: center;
  /* Tighter than Figma's 2.383% so all 8 launch labels fit at 1440px. */
  gap: 1.5%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Snap labels inside the row's padding so the selected ring and
     focus outline aren't scrolled under the row's clipped edge. */
  scroll-padding-inline: 0.75rem;
  list-style: none;
  margin: 0;
  /* room for the selected ring and focus outline, which the scroll
     container would otherwise clip */
  padding: 0.75rem 0.75rem;
  flex: 1 1 0%;
  min-width: 0;
}

/* Set by js/listen.js when every live label fits; overflowing rows stay
   left-aligned so the first labels can't be clipped. */
.listen-moods__row.is-centered {
  justify-content: center;
}

/* Sized up from Figma's 8.981% so Sarah's descriptors fit at a readable
   size (12px minimum) inside the circle. */
.listen-moods__row li {
  flex: none;
  width: clamp(7.75rem, 11%, 9.5rem);
  scroll-snap-align: start;
}

.mood-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  padding: 11%;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  font-family: var(--font-display);
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.mood-circle--dark-text { color: var(--color-near-black); }
.mood-circle--light-text { color: #fffaf0; }

/* Faint halo for circle art where the label text alone falls short of
   4.5:1 (set per mood with labelShadow in moods.json). */
.mood-circle--shadow { text-shadow: 0 0 2px rgba(28, 26, 22, 0.7); }

.mood-circle__number {
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1;
}

.mood-circle__name {
  font-size: clamp(0.8rem, 1.15vw, 1.05rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mood-circle__descriptor {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.85vw, 0.8rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
  .mood-circle:hover {
    transform: translateY(-3px);
  }
}

/* Selected = crimson ring; keyboard focus = the site's dark ring pushed
   out past it, so the two stay distinguishable on the same label. The
   paper gap fills the space between them. */
.mood-circle.is-active {
  box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 6px var(--color-crimson);
}

.mood-circle:focus-visible {
  outline-offset: 8px;
  box-shadow: 0 0 0 8px var(--color-focus-gap);
}

.mood-circle.is-active:focus-visible {
  box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 6px var(--color-crimson), 0 0 0 8px var(--color-focus-gap);
}

/* Slot for Sarah's note about more moods coming. Position only; the
   typeface and styling are still to be decided. */
.listen-moods__note {
  position: absolute;
  left: 5.273%;
  top: 76%;
  width: 89.81%;
  margin: 0;
  text-align: center;
  color: var(--color-near-black);
}

.listen-moods__error {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--color-near-black);
}

.listen-moods__arrow {
  flex: none;
  width: 1.4rem;
  height: 1.9rem;
  border: none;
  padding: 0;
  margin: 0 0.5rem;
  background: transparent;
  cursor: pointer;
}

.listen-moods__arrow span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-near-black);
}

.listen-moods__arrow--prev span {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.listen-moods__arrow--next span {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (max-width: 760px) {
  .listen-moods__card {
    aspect-ratio: auto;
    width: calc(100% - 1.5rem);
    margin: 0 auto;
    padding: 1.25rem 0.75rem;
  }

  .listen-moods__heading,
  .listen-moods__row-wrap,
  .listen-moods__note {
    position: static;
    width: 100%;
    height: auto;
  }

  .listen-moods__row-wrap {
    margin-top: 1rem;
  }

  .listen-moods__note {
    margin-top: 0.75rem;
  }

  .listen-moods__row {
    gap: 2.383%;
  }

  /* Phones swipe the row instead: no arrows, and the width they took
     goes to a partial next label (js/listen.js). The labels keep their
     own keyboard and screen-reader access; the arrows only scrolled. */
  .listen-moods__arrow {
    display: none;
  }

  .listen-moods__row li {
    width: 7.5rem;
  }

  .mood-circle { padding: 10%; }
  .mood-circle__descriptor { font-size: 0.75rem; }
  .mood-circle__number { font-size: 0.95rem; }
  .mood-circle__name { font-size: 0.85rem; }
}

/* ── Turntable + Mood Detail (Figma node 15:7) ──
   Same 1440px-reference technique as Hero: left/width as % of the page,
   top/height as % of this frame's own local 540px height. Populated by
   js/listen.js on 'listen:moodchange' so the mood picker (section 3)
   genuinely drives this section's content, per the task's functional
   requirement.

   Vinyl and tape art come from each mood's entry in
   content/listen/moods.json. Blurb, description, and Sarah's Picks are
   hidden for moods where they're still undecided. */
.listen-turntable {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 540;
  container-type: inline-size;   /* lets the picks note size its art in cqw */
}

.tt-record {
  position: absolute;
  left: 31.53%;
  top: 12.59%;
  width: 42.43%;
  height: 87.41%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
}

.tt-record img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The vinyl and turntable are separate transparent exports. The vinyl
   sits below the stationary deck/tonearm overlay so the whole record can
   rotate without moving the hardware. The paper center label sits on the
   vinyl inside the same box, so the two spin together. */
.tt-record .tt-vinyl {
  position: absolute;
  z-index: 2;
  left: 3.5%;
  top: 1%;
  width: 73%;
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.tt-record .tt-vinyl__disc {
  position: absolute;
  inset: 0;
}

/* 33% covers the blank center printed on every vinyl export. */
.tt-record .tt-vinyl__label {
  position: absolute;
  left: 33.5%;
  top: 33.5%;
  width: 33%;
  height: 33%;
}

.tt-record .tt-turntable-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tt-record .tt-tonearm-overlay {
  position: absolute;
  z-index: 3;
  left: 47%;
  top: 2%;
  width: 45%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
}

/* The exported artwork combines the vinyl, tonearm, and turntable in one
   image. A rotating sheen makes the vinyl read as moving without rotating
   the stationary tonearm and deck along with it. */
.tt-record::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 3.5%;
  top: 1%;
  width: 73%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 20deg,
    transparent 0 18%,
    rgba(255, 255, 255, 0.25) 24%,
    transparent 31% 68%,
    rgba(255, 255, 255, 0.14) 75%,
    transparent 82% 100%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
}

/* Play/pause for the Spotify embed in the now spinning bar, sitting over
   the record so the turntable itself is the control. */
.tt-playback-toggle {
  position: absolute;
  z-index: 4;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.tt-playback-toggle:disabled {
  cursor: wait;
}

.tt-playback-toggle__status {
  position: absolute;
  right: 8%;
  bottom: 8%;
  padding: 0.3rem 0.65rem;
  border: 2px solid var(--color-near-black);
  border-radius: 999px;
  background: var(--color-cream);
  box-shadow: 2px 2px 0 var(--color-near-black);
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.15vw, 1rem);
  line-height: 1;
  color: var(--color-near-black);
}

.tt-playback-toggle[data-state='playing'] .tt-playback-toggle__status {
  background: var(--color-gold, #ffd200);
}

/* Shown in place of the status pill if the Spotify player never loads. */
.tt-player-fallback {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 8%;
  max-width: 15rem;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border: 2px solid var(--color-near-black);
  border-radius: 12px;
  background: var(--color-cream);
  box-shadow: 2px 2px 0 var(--color-near-black);
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  line-height: 1.3;
  color: var(--color-near-black);
}

.tt-player-fallback[hidden],
.now-spinning__fallback[hidden] {
  display: none;
}

.tt-player-fallback a,
.now-spinning__fallback a {
  color: var(--color-crimson);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Hidden while Apple Music is the active embed: that embed has no
   control API, so the turntable can't start or stop it. */
.tt-playback-toggle[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tt-record.is-playing::before {
    opacity: 1;
    animation: tt-record-spin 3s linear infinite;
  }

  .tt-record.is-playing .tt-vinyl {
    animation: tt-vinyl-spin 2.4s linear infinite;
  }
}

@keyframes tt-record-spin {
  to { transform: rotate(1turn); }
}

@keyframes tt-vinyl-spin {
  to { transform: rotate(1turn); }
}

.tt-tape {
  position: absolute;
  left: 0.54%;
  top: 0;
  width: 30.5%;
  height: 18.72%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tt-tape__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.75rem, 4.1667vw, 3.75rem);
  text-transform: uppercase;
  color: var(--color-near-black);
}

.tt-blurb {
  position: absolute;
  left: 0.07%;
  top: 24.07%;
  width: 30.9%;
  margin: 0;
  font-family: var(--font-marginalia);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  text-align: center;
  color: var(--color-near-black);
}

.tt-description {
  position: absolute;
  left: -0.07%;
  top: 54.26%;
  width: 31.04%;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.0833vw, 1.5rem);
  line-height: 1.35;
  text-align: center;
  color: var(--color-near-black);
}

.tt-picks {
  /* Note art is paper_note_with_sticker_1.png (758x812). As a border
     image, the top 140px (tape + top edge) and bottom 100px (bottom edge)
     keep their proportions and only the plain paper between stretches,
     so the note can grow or shrink to fit the picks without squashing
     the tape. --note-w is the note's rendered width. */
  --note-w: 26.53cqw;
  --note-tilt: -4.3deg;   /* measured slope of the paper's top and bottom edges */
  position: absolute;
  left: 74.24%;
  top: 0;
  width: var(--note-w);
  border-style: solid;
  border-width: calc(var(--note-w) * 140 / 758) 0 calc(var(--note-w) * 100 / 758);
  border-image: url('/assets/images/listen/paper_note_with_sticker_1.png') 140 0 100 0 fill stretch;
  /* The paper's own edges sit ~8% in from each side of the art. */
  padding: 0 calc(var(--note-w) * 0.13);
}

.tt-picks__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.1rem, 2.0833vw, 1.875rem);
  line-height: 1.1;
  text-align: center;
  color: var(--color-near-black);
  transform: rotate(var(--note-tilt));
}

.tt-picks__divider {
  height: 2px;
  margin: 0.4em 4% 0.6em;
  background-color: var(--color-crimson);
  transform: rotate(var(--note-tilt));
}

.tt-picks__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-picks__item {
  margin: 0 0 0.45em;
  font-family: var(--font-marginalia);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-near-black);
  transform: rotate(var(--tt-rotate, var(--note-tilt)));
}

.tt-picks__item:last-child { margin-bottom: 0; }

/* Each half wraps as a unit: a pick that doesn't fit breaks at the
   dash, and only a half that is itself too long wraps inside. */
.tt-picks__song,
.tt-picks__artist {
  display: inline-block;
}

/* A little handwritten wobble around the note's own tilt. */
.tt-picks__item:nth-child(1) { --tt-rotate: -5.8deg; }
.tt-picks__item:nth-child(2) { --tt-rotate: -3.4deg; }
.tt-picks__item:nth-child(3) { --tt-rotate: -4.9deg; }

@media (max-width: 760px) {
  .listen-turntable {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }

  .tt-record,
  .tt-tape,
  .tt-blurb,
  .tt-description,
  .tt-picks {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }

  /* Every layer inside is absolutely positioned, so without an aspect
     ratio the box collapses to 0px and the vinyl spills over the text
     below. 1991 / 1538 is turntable-overlay.png's own size. */
  .tt-record {
    max-width: 22rem;
    margin: 0 auto;
    aspect-ratio: 1991 / 1538;
  }

  .tt-picks {
    --note-w: min(22rem, 100cqw);
    width: var(--note-w);
    max-width: none;
    height: auto;
  }
}

/* When no Crash Course is live the turntable ends the page, so give it
   room above the now spinning bar (css/crash-courses.css styles the
   shelf that otherwise follows it). The old "An Introduction To..."
   section and its styles are archived in archive/listen-crash-courses-v1/. */
@media (min-width: 761px) {
  .listen-turntable:last-child {
    margin-bottom: 3rem;
  }
}

@media (max-width: 760px) {
  /* Shared mobile paper and red-stripe band (css/layout.css). The logo
     lives in the hero, not the header, but on mobile it sits above the
     nav like every other page: the header's band gets a logo-height
     top padding, and the logo is lifted into that space (positioned
     against the page, since the hero and main are static here). One
     band element, so the stripes are continuous. */
  .page-listen {
    background: var(--m-paper);
  }

  .listen-header {
    background: var(--m-band);
    padding: 8.5rem 1rem 1.25rem;
  }

  .listen-hero {
    position: static;
    aspect-ratio: auto;
    min-height: 0;
    padding: 1.75rem 1rem 2rem;
  }

  .listen-hero__logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 8.5rem;
    margin: 0;
    padding: 0;
  }

  .listen-hero__logo-inner {
    width: 12rem;
    margin: 0 auto;
    transform: rotate(-6deg);
  }

  .listen-hero__title,
  .listen-hero__divider,
  .listen-hero__subtitle {
    position: static;
    width: 100%;
    margin: 0 auto;
  }

  .listen-hero__divider {
    width: 80%;
    margin: 0.75rem auto;
  }
}

/* ── Now spinning bar ──
   Pinned to the bottom of the viewport on this page only. It holds the
   visible Spotify / Apple Music embed, so playback continues while the
   visitor scrolls. --mood-color and --now-spinning-height are set by
   js/listen.js. */
.page-listen {
  padding-bottom: var(--now-spinning-height, 0px);
}

.now-spinning {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  border-top: 6px solid var(--mood-color, var(--color-near-black));
  background-color: var(--color-cream);
  background-image: url('/assets/images/journal/paper-tile.webp');
  background-size: 600px 600px;
  box-shadow: 0 -4px 14px rgba(28, 26, 22, 0.22);
}

.now-spinning[hidden],
.now-spinning [hidden] {
  display: none;
}

.now-spinning__inner {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.625rem 1.5rem;
}

.now-spinning__mood {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.now-spinning__label {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 3px var(--mood-color, var(--color-near-black));
}

.now-spinning__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-crimson);
}

.now-spinning__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-near-black);
}

.now-spinning__source {
  display: flex;
  gap: 0.375rem;
}

.now-spinning__source-btn {
  min-height: 2.5rem;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--color-near-black);
  border-radius: 999px;
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-near-black);
  cursor: pointer;
}

.now-spinning__source-btn[aria-pressed='true'] {
  background: var(--color-near-black);
  color: var(--color-cream);
}

.now-spinning__source-btn:disabled {
  border-style: dashed;
  opacity: 0.5;
  cursor: not-allowed;
}

.now-spinning__player {
  grid-column: -2 / -1;   /* stays in the wide column when the toggle is hidden */
  min-width: 0;
}

/* Hidden while the mood has no Apple Music link (launch is Spotify-only). */
.now-spinning__source[hidden] {
  display: none;
}

.now-spinning__embed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

.now-spinning__embed--apple iframe {
  max-width: 660px;
  overflow: hidden;
  background: transparent;
}

.now-spinning__unavailable {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-near-black);
}

.now-spinning__embed--spotify.is-failed {
  display: none;
}

.now-spinning__fallback {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-near-black);
}

@media (max-width: 760px) {
  /* The page is on the shared #FFE6AC paper here, so the bar uses the
     tinted tile to match it (desktop keeps the original tile, like the
     page's original texture). */
  .now-spinning {
    background-image: url('/assets/images/journal/paper-tile-tinted.webp');
  }

  .now-spinning__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 1rem 0.75rem;
  }

  .now-spinning__player {
    grid-column: 1 / -1;
  }

  .now-spinning__label {
    width: 40px;
    height: 40px;
  }

  .now-spinning__eyebrow { font-size: 0.75rem; }
  .now-spinning__name { font-size: 1.15rem; }

  .now-spinning__source-btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
  }
}