/* ==========================================================================
   components.css — buttons, cards, badges, link grid
   Rules: every hover has a tap twin · tap targets ≥ 44px · nothing hover-only
   ========================================================================== */

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: linear-gradient(150deg, var(--c-rose), var(--c-rose-deep));
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: .05em;
  text-decoration: none;
  box-shadow: var(--sh-soft);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out);
  /* tap twin of hover */
  -webkit-tap-highlight-color: transparent;
}
/* HOVER (Master's call): lighter / more translucent, NOT darker.
   Paired with the sound from audio.hover() and a slight size change. */
.btn:hover, .btn:focus-visible {
  background: rgba(255, 255, 255, .34);
  color: var(--c-brand-pri);
  border-color: rgba(201, 154, 83, .85);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 32px -14px rgba(168, 60, 102, .32);
  filter: none;
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

.btn--ghost {
  background: rgba(255,255,255,.72);
  color: var(--c-rose-deep);
  border: 1px solid rgba(217,106,146,.34);
  box-shadow: none;
}
.btn--ghost:hover { background: #fff; box-shadow: var(--sh-soft); }

.btn--big {
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-body);
}
.btn--big small {
  font-family: var(--f-body);
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .88;
  font-size: var(--t-small);
}

/* -------------------------------------------------------------- releases */
.release {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(217,106,146,.16);
}
.release:first-of-type { border-top: 0; padding-top: 0; }

.release__cover {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-soft);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.release__cover img {
  width: 100%;
  height: auto;
  transition: transform .6s var(--ease-out);
}
.release__cover:hover, .release__cover:focus-visible {
  transform: translateY(-5px) rotate(-.5deg);
  box-shadow: 0 26px 52px -20px rgba(168,60,102,.55);
}
.release__cover:hover img { transform: scale(1.045); }

.release__cover-full {
  width: min(420px, 100%);
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
  margin: 0 auto var(--s-4);
}

.release__body h3 a {
  text-decoration: none;
  background: linear-gradient(120deg, var(--c-rose-deep), var(--c-rose));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.release__body h3 a:hover { text-decoration: underline; text-decoration-color: rgba(217,106,146,.5); }

.release__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

@media (min-width: 720px) {
  .release { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
}

/* ------------------------------------------------------------ link grid -- */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2);
}

/* ---------------------------------------------------------------- badges - */
.badge {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--c-gold), var(--c-gold-light));
  color: var(--c-night);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.panel--soon {
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(255,232,244,.95), rgba(255,253,253,.95));
  border: 1px dashed rgba(217,106,146,.45);
}
/* Master: keep clear air between the "Coming Soon" badge and the heading below
   it (the badge is inline-block and .panel h2 has margin-top 0). */
.panel--soon .badge { margin: 0 0 var(--s-2); }
.panel--soon h2 { margin-top: var(--s-4); }

/* ------------------------------------------------------- profile / stats - */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}
.stat {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,238,247,.86));
  border: 1px solid rgba(217,106,146,.18);
}
.stat dt {
  font-size: var(--t-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-rose-deep);
  font-weight: 700;
}
.stat dd {
  margin: var(--s-1) 0 0;
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--c-ink);
}

.quote {
  position: relative;
  padding-left: var(--s-5);
  border-left: 4px solid var(--c-rose);
  font-family: var(--f-display);
  font-size: var(--t-lead);
  line-height: 1.72;
  color: var(--c-rose-deep);
}

/* ------------------------------------------------------------- charm HUD - */
.charm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.charm-dot {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(201,154,83,.28);
  font-size: 1.5rem;
  filter: grayscale(1) opacity(.45);
  transition: filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.charm-dot.is-on {
  filter: none;
  transform: scale(1.06);
  box-shadow: 0 10px 22px -10px rgba(201,154,83,.7);
}

/* ---------------------------------------------------------------- footer - */
.foot {
  position: relative;
  z-index: 4;
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--c-night);
  color: rgba(255,247,250,.82);
  text-align: center;
  font-size: var(--t-small);
}
.foot a { color: var(--c-gold-light); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { text-decoration: underline; }
.foot p + p { margin-top: var(--s-2); }

/* ---------------------------------------------- gallery albums / news ----- */
.album + .album {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(217,106,146,.16);
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.album-grid li {
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--c-blush);
}
.album-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out), filter .5s var(--ease-out);
}
.album-grid li:hover img,
.album-grid li:focus-within img { transform: scale(1.08); filter: saturate(1.12); }

.news-row {
  padding: var(--s-3) 0;
  border-top: 1px solid rgba(217,106,146,.16);
}
.news-row:first-of-type { border-top: 0; padding-top: 0; }
.news-row h3 a {
  text-decoration: none;
  background: linear-gradient(120deg, var(--c-rose-deep), var(--c-rose));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.news-row h3 a:hover,
.news-row h3 a:focus-visible { text-decoration: underline; }

.prose h2 { margin-top: var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: var(--s-3); }
.prose ul { list-style: disc; padding-left: 1.3em; margin: var(--s-3) 0; }
.prose li + li { margin-top: var(--s-1); }
.prose blockquote {
  margin: var(--s-4) 0;
  padding-left: var(--s-4);
  border-left: 4px solid var(--c-rose);
  font-family: var(--f-display);
  color: var(--c-rose-deep);
}
.prose img {
  width: 100%;
  border-radius: var(--r-md);
  margin: var(--s-3) 0;
  box-shadow: var(--sh-soft);
}
.prose .embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: var(--s-4) 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.prose .embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}


/* ---- shared hover: lighter / translucent, slight growth ----------------
   Every clickable surface follows one rule so the whole site feels
   consistent. Sound comes from audio.hover() in JS; this is the visual half. */
.chip:hover, .chip:focus-visible,
.releases a:hover, .releases a:focus-visible,
.socials a:hover, .socials a:focus-visible,
.news-row:hover, .news-row:focus-visible,
.wallpapers a:hover, .wallpapers a:focus-visible,
.gallery__tabs button:hover, .gallery__tabs button:focus-visible,
.album a:hover, .album a:focus-visible {
  background: rgba(255, 255, 255, .34);
  color: var(--c-brand-pri);
  border-color: rgba(201, 154, 83, .85);
  transform: translateY(-2px) scale(1.05);
}
.chip:active, .releases a:active, .socials a:active,
.news-row:active, .wallpapers a:active,
.gallery__tabs button:active, .album a:active {
  transform: translateY(0) scale(.97);
  transition-duration: .08s;
}

.album a:hover .album__img img,
.album a:focus-visible .album__img img {
  transform: scale(1.05);
}
.album a:hover .album__title,
.album a:focus-visible .album__title {
  color: var(--c-brand-pri);
}

/* ==========================================================================
   VN DIALOGUE BOX  ·  Suzu speaks here, typewriter style
   ========================================================================== */
.dialogue {
  position: relative;
  margin-block: var(--s-5);
  padding: var(--s-5) var(--s-6) var(--s-6);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(217, 106, 146, .22);
  box-shadow: 0 22px 50px -22px rgba(168, 60, 102, .30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

.dialogue__name {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 11px;
  border-radius: var(--r-pill);
  /* SOLID colour on purpose: a gradient/var() here silently rendered as white
     on white for a visitor. Do not "improve" this back into a gradient. */
  background-color: #a83c66;
  background-image: none;
  color: #ffffff;
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px -8px rgba(120, 20, 60, .6);
}

.dialogue__body {
  position: relative;
  padding-bottom: var(--s-2);
  min-height: 3.2em;            /* so the first typed words do not shift the box */
}

.dialogue__text {
  display: inline;              /* the caret must sit at the END of the line */
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.06rem, 2.4vw, 1.32rem);
  line-height: 1.95;
  color: var(--c-text-1);
  letter-spacing: .012em;
}
.dialogue__text br { content: ""; }

/* the blinking VN caret sits after the last typed character */
.dialogue__caret {
  display: inline-block;
  width: .58em;
  height: 1.12em;
  margin-left: .16em;
  vertical-align: text-bottom;
  border-radius: 3px;
  background: var(--c-rose-deep);
  animation: caret-blink 1s steps(1, end) infinite;
}
.dialogue.is-done .dialogue__caret { display: none; }
@keyframes caret-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.dialogue__skip {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-3);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  border: 1px solid rgba(201, 154, 83, .7);
  color: var(--c-brand-pri);
  font-size: .82rem;
  cursor: pointer;
  animation: caret-blink 1.4s steps(1, end) infinite;
  transition: transform .16s cubic-bezier(.22, 1.2, .36, 1), background .16s;
}
.dialogue__skip:hover { transform: scale(1.12); background: rgba(255,255,255,.5); }
.dialogue.is-done .dialogue__skip { display: none; }
.dialogue__skip { animation: none; }

.is-typing { white-space: pre-wrap; }

/* ==========================================================================
   HINT NOTE — a card inside the card, so a tip reads as a tip
   ========================================================================== */
.hint-note {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: 14px;
  background: rgba(255, 246, 222, .92);
  border: 1px dashed rgba(201, 154, 83, .55);
}
.hint-note__icon {
  flex: none;
  font-size: 1.16rem;
  line-height: 1.5;
}
.hint-note p {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-small);
  line-height: 1.85;
  color: var(--c-text-1);
}

/* ==========================================================================
   BELL DISCOVERABILITY — it must be findable WITHOUT the Hint button
   (Master: "I myself won't be able to find the bell without clicking Hint")
   So the bell now leaves a soft golden trail of light you can spot, instead
   of being fully invisible until poked.
   ========================================================================== */
.charm {
  opacity: .2;                       /* faintly visible at rest */
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-spring);
}

/* the glow halo — this is what actually makes it findable */
.charm::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 208, 122, .55) 0%,
              rgba(255, 208, 122, .18) 42%,
              transparent 70%);
  animation: bell-glow 2.8s ease-in-out infinite;
  pointer-events: none;
}
.charm.is-found::after { display: none; }

@keyframes bell-glow {
  0%, 100% { transform: scale(.82); opacity: .55; }
  50%      { transform: scale(1.22); opacity: 1; }
}

/* the Hint button makes the glow burst so you cannot miss it */
.charm.is-hinted { opacity: 1; transform: scale(1.16) rotate(-6deg); }
.charm.is-hinted::after {
  animation: bell-burst .85s ease-out 3;
  background: radial-gradient(circle,
              rgba(255, 226, 140, .95) 0%,
              rgba(255, 190, 90, .45) 45%,
              transparent 72%);
}
@keyframes bell-burst {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ==========================================================================
   SUZU'S REACTION — same outfit, happy pose
   ========================================================================== */
.scene__sprite {
  transition: opacity .18s ease-out, transform .32s var(--ease-spring),
              filter .32s ease-out;
}
.scene__sprite.is-reacting {
  opacity: .001;
}
.scene__sprite.is-happy {
  animation: suzu-delight .62s var(--ease-spring) both;
}
@keyframes suzu-delight {
  /* `scale` (not `transform`) so it never overrides the sprite's own
     centring transform and she never shifts sideways. */
  0%   { scale: 1; }
  38%  { scale: 1.055; }
  100% { scale: 1; }
}

/* ==========================================================================
   VN DIALOGUE PAGING
   The box height is FIXED here and nothing in JS may change it. That is the
   whole point: the page must not resize while text is typing in.
   ========================================================================== */
:root {
  --dialogue-h: clamp(84px, 11svh, 118px);   /* << the single knob */
}

.dialogue__body {
  height: var(--dialogue-h) !important;
  min-height: var(--dialogue-h) !important;
  max-height: var(--dialogue-h) !important;
  overflow: hidden;
  position: relative;
}

.dialogue__page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.dialogue__page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.dialogue__page .dialogue__text {
  display: inline;
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 2.2vw, 1.24rem);
  line-height: 1.95;
  color: var(--c-text-1);
}

/* ---- ◀ rewind · counter · ▶ forward ---------------------------------- */
.dialogue__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.dialogue__step {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  border: 1px solid rgba(201, 154, 83, .7);
  color: var(--c-brand-pri);
  font-size: .76rem;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.22, 1.2, .36, 1), background .16s, opacity .16s;
}
.dialogue__step:hover:not(:disabled) {
  background: rgba(255, 255, 255, .5);
  transform: scale(1.1);
}
.dialogue__step:active:not(:disabled) { transform: scale(.94); }
.dialogue__step:disabled { opacity: .3; cursor: default; }

.dialogue__count {
  min-width: 62px;
  text-align: center;
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c-text-2);
}

.dialogue__skip {
  position: static;
  margin-left: auto;
  /* deliberately static: this is a control, not a cue (Master's call) */
  animation: none;
}

/* ==========================================================================
   PROFILE STAT SHEET — two columns, so the whole page fits one screen
   ========================================================================== */
.profile__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px var(--s-4);
  margin-block: 6px 0;
}
.profile__stats .stat {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 4px 11px;
  border-radius: 10px;
  background: rgba(255, 240, 246, .62);
  border: 1px solid rgba(217, 106, 146, .16);
}
.profile__stats dt {
  font-family: var(--f-body);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.profile__stats dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-rose-deep);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .profile__stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RELEASE CARDS
   Master's EN layout: romaji title -> English translation -> "Single - date"
   under the translation -> a one-line catch phrase drawn from the lyric.
   ========================================================================== */
.release__sub {
  margin: 1px 0 0;
  font-family: var(--f-display);
  font-size: clamp(.92rem, 1.5vw, 1.06rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-ink-soft);
  font-style: italic;
}
.release__body .meta {
  margin: 2px 0 0;
  font-family: var(--f-body);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.release__tagline {
  margin: var(--s-2) 0 0;
  font-family: var(--f-display);
  font-size: clamp(.95rem, 1.6vw, 1.12rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-rose-deep);
}
.release__blurb {
  margin: 6px 0 0;
  line-height: 1.75;
}
.release__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* the cloned nav row that sits under the dialogue box */
.scene-nav--top {
  margin-block: var(--s-3) 0;
}

/* ==========================================================================
   THE RELEASES SECTION
   Its own room on the page, with its own palette. The dialogue section above
   keeps the music-studio photograph; this one is a warm rose-cream wash so the
   two read as distinct without clashing. Every release stays its own card.
   ========================================================================== */
.scene__section--releases {
  position: relative;
  z-index: 3;
  padding: var(--s-6) var(--s-5) var(--s-7);
  background:
    linear-gradient(180deg,
      rgba(255, 246, 240, .0)  0%,
      rgba(255, 238, 234, .88) 12%,
      rgba(255, 232, 236, .92) 100%),
    var(--c-cream, #fffaf6);
  border-top: 1px solid rgba(217, 106, 146, .18);
}
.scene__section-inner {
  max-width: 1120px;
  margin-inline: auto;
}
.scene__section-title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-rose-deep);
  margin-block: 0 var(--s-4);
  text-align: center;
}

/* 2 columns, newest first: S3 top-left, S2 top-right, S1 second row left */
.releases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.releases-grid .release {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(217, 106, 146, .16);
  box-shadow: 0 10px 26px rgba(168, 60, 102, .08);
}
.releases-grid .release__cover {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.releases-grid .release__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.releases-grid .release__links { margin-top: auto; }

@media (max-width: 780px) {
  .releases-grid { grid-template-columns: 1fr; }
  .scene__section--releases { padding: var(--s-5) var(--s-3) var(--s-6); }
}

/* streaming platform marks sit inline before the label */
.release__links .btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.release__links .btn .plat {
  flex: 0 0 auto;
  display: block;
}

/* ==========================================================================
   MASTER'S CORRECTION (2026-10-13) - the layer stack on the Music page.

   He wants: Suzu IN FRONT of section 2 on desktop, and on mobile BEHIND the
   content but IN FRONT of the section's background image.

   That means the section's background, Suzu, and the section's content have to
   live in THREE separate layers, and they cannot be inside one stacking
   context. So the section does NOT create one (z-index: auto), its background
   moves onto a ::before at z-index 0, Suzu is z-index 1, and the content is
   z-index 2. Section 1's .scene__content stays at z-index 3.

   WHY it was broken: this file set `.scene__section--releases { z-index: 3 }`
   and components.css loads AFTER vn.css, so it outranked the `z-index: auto`
   I had set in vn.css. Suzu (z-index 1) was therefore painted behind the whole
   panel and disappeared the moment you scrolled into it.
   ========================================================================== */
.scene__section--releases {
  position: relative;
  z-index: auto;              /* not a stacking context - the fix */
  background: none;           /* moved onto ::before so it can sit BELOW her */
  border-top: none;
}

.scene__section--releases::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                 /* layer 1: the background image, behind Suzu */
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 246, 240, .0)   0%,
      rgba(255, 238, 234, .88) 12%,
      rgba(255, 232, 236, .92) 100%),
    url("/media/backgrounds/bg_gallery_v2.webp") center / cover no-repeat;
  border-top: 1px solid rgba(217, 106, 146, .18);
}

/* layer 3: the content - in front of Suzu (what Master wants on mobile) */
.scene__section--releases .scene__section-inner,
.scene__section--releases .scene__bottom-nav {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   RELEASE PAGES  (Master, 2026-10-13)
   Section 1 must fit one 16:9 screen with the cover art card in it, so the
   cover is capped against the viewport height rather than at a fixed pixel
   size. Section 2 (Lyrics) is fully independent: 3 columns like the old site.
   ========================================================================== */

/* --- the cover card -------------------------------------------------- */
.release-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  /* the cover is sized by HEIGHT so it can never push section 1 past one screen */
}
.release__cover-full {
  display: block;
  width: auto;
  height: min(46svh, 420px);      /* the knob: cover height in section 1 */
  max-width: 100%;
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 18px 40px rgba(140, 52, 88, .22);
  object-fit: cover;
}
.release-credits {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: .82rem;
  line-height: 1.75;
  color: var(--c-text-2, #7c5566);
}
.release-credits li { white-space: pre-line; }
.release__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0;
}

/* --- section 2: the lyric, 3 columns, its own soft palette ----------- */
.scene__section--lyrics {
  position: relative;
  z-index: auto;                  /* same layer trick as the Releases section */
  padding: var(--s-6) var(--s-5) var(--s-7);
}
.scene__section--lyrics::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 250, 246, .0)  0%,
      rgba(255, 243, 236, .92) 10%,
      rgba(255, 236, 228, .95) 100%),
    url("/media/backgrounds/bg_title_v2.webp") center / cover no-repeat;
  border-top: 1px solid rgba(217, 106, 146, .16);
}
.scene__section--lyrics .scene__section-inner {
  position: relative;
  z-index: 2;
}
.lyric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: start;
}
.lyric-col {
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(217, 106, 146, .16);
  border-radius: var(--r-lg, 18px);
  padding: var(--s-4) var(--s-4) var(--s-5);
}
.lyric-col-title {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-rose-deep, #a83c66);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(217, 106, 146, .18);
}
.lyric-block { margin-bottom: var(--s-4); }
.lyric-block:last-child { margin-bottom: 0; }
.lyric-part {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-rose, #d96a92);
  margin: 0 0 .35em;
}
.lyric-lines {
  margin: 0;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--c-text-1, #5c3346);
}
.lyric-col:nth-child(2) .lyric-lines { font-style: italic; }

@media (max-width: 899px) {
  .lyric-grid { grid-template-columns: 1fr; }
  .scene__section--lyrics { padding: var(--s-5) var(--s-3) var(--s-6); }
  .release__cover-full { height: min(38svh, 320px); }
}

/* --- release panel: cover BESIDE the credits so section 1 fits one screen.
   Stacked, the panel alone was 374px + credits + links and pushed the page to
   1175px inside an 813px viewport, cutting the cover off at the bottom. --- */
@media (min-width: 900px) {
  .release-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4) var(--s-5);
  }
  .release__cover-full {
    height: min(30svh, 260px);      /* the knob Master asked for */
    grid-row: 1 / span 2;
  }
  .release-credits { text-align: left; }
  .release__links { justify-content: flex-start; }
}

/* --- release pages: fit the WHOLE of section 1 into one screen ---------- */
.scene--music .scene__content {
  padding-bottom: var(--s-4);
  gap: var(--s-3);
}
.scene--music .release-panel { gap: var(--s-3) var(--s-4); }
.scene--music .release__cover-full { height: min(26svh, 230px); }
.scene--music .release-credits { font-size: .78rem; line-height: 1.6; }
.scene--music .release__links { gap: .4rem; }
.scene--music .release__links .btn { padding: .42em .85em; font-size: .82rem; }
@media (min-width: 900px) {
  .scene--music .release__cover-full {
    height: min(26svh, 230px);
    grid-row: 1 / span 2;
  }
}

/* release pages: reclaim the last ~100px so the WHOLE of section 1 fits.
   Breakdown that was overflowing at 1440x900 (813px of viewport):
     hero 125 + dialogue 257 + panel 261 + nav 38 + gaps/padding 33 = 914
   Each item gives back a little, so no single element is crushed. */
.scene--music .scene__content { gap: 10px; padding-top: 60px; }
.scene--music .panel--hero { padding: var(--s-3) var(--s-4); }
.scene--music .dialogue {
  padding: var(--s-2) var(--s-3);
}
.scene--music .dialogue__body { padding-block: 0; }
.scene--music .dialogue__text { line-height: 1.5; }
.scene--music .release__cover-full { height: min(19svh, 168px); }
@media (min-width: 900px) {
  .scene--music .release__cover-full {
    height: min(19svh, 168px);
    grid-row: 1 / span 2;
  }
}

/* Master wants her flush to the bottom of section 1 — NO floating gap.
   (The entrance animation no longer lifts her vertically, so no clearance
   is needed and she sits exactly on the section's bottom edge.) */
.scene__lead .scene__sprite { bottom: 0; }

/* ==========================================================================
   MASTER'S CORRECTIONS on the release pages (2026-10-13).

   a) Section 2 was only 742px wide. `.scene` is a two-column desktop grid and
      only `.scene__section--releases` had `grid-column: 1 / -1`, so the lyric
      section landed in column 1 and left the whole right lane empty.
   b) "why there's two background there, I think the book as background is
      enough." The page's own background is the study desk with the stack of
      books (bg_home_v2). The lyric section was painting a SECOND photo
      (bg_title_v2, the concert stage) on top of it. The lyric section now has
      no photograph of its own - only a soft warm tint - so the book/desk
      background is the one and only image on the page.
   c) the lyric columns stretch across the full width instead of stopping at
      1120px.
   ========================================================================== */
.scene__section--lyrics {
  grid-column: 1 / -1;            /* full width - no empty right lane */
}
.scene__section--lyrics::before {
  background:
    linear-gradient(180deg,
      rgba(255, 248, 242, .58)  0%,
      rgba(255, 240, 232, .72) 100%);
  border-top: 1px solid rgba(217, 106, 146, .16);
}
.scene__section--lyrics .scene__section-inner {
  max-width: none;                /* cover the whole width */
  margin-inline: 0;
}
.lyric-grid { gap: var(--s-5) var(--s-5); }
@media (max-width: 899px) {
  .scene__section--lyrics { grid-column: 1 / -1; }
}

/* Master wants the BOOK (the study desk, bg_home_v2) to be THE background of
   the lyric section. The tint was too heavy (58-72%) and washed it out into a
   plain gradient. Light enough now for the desk and the stack of books to read
   clearly, still opaque enough for the lyric text to stay legible. */
.scene__section--lyrics::before {
  background:
    linear-gradient(180deg,
      rgba(255, 248, 242, .30)  0%,
      rgba(255, 240, 232, .46) 100%);
}

/* ==========================================================================
   THEATER CAROUSEL (MV page)
   Master: "display the music video inside the Theater card in carousel. Make
   sure the height does not exceed 16:9 aspect ratio section 1 height and
   overflow... when people hover on the video, enlarge it, and when people
   click, open in new tab."

   The whole carousel is capped by HEIGHT against the viewport so it can never
   push section 1 past one screen - that is why the previews are 480p and short.
   ========================================================================== */
.theater {
  --theater-h: min(34svh, 300px);
  margin-block: var(--s-4) 0;
}
.theater__track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  justify-content: center;                /* Master: center the carousel in the Theater card */
  /* vertical+horizontal room so the hover-enlarge (scale 1.14) is never clipped */
  padding-block: calc(var(--theater-h) * .11 + 6px);
  padding-inline: calc(var(--theater-h) * .11 + 6px);
  scrollbar-width: thin;
}
.theater__slide {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--theater-h) * 16 / 9);
  height: var(--theater-h);
  scroll-snap-align: center;
  border-radius: 0;                       /* Master: no rounded corner on the video */
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(120, 40, 76, .28);
  transition: transform .28s var(--ease-spring, ease), box-shadow .28s ease;
  transform-origin: center center;
  z-index: 1;
}
/* MASTER: "when people hover on the video, enlarge it" */
.theater__slide:hover,
.theater__slide:focus-visible {
  transform: scale(1.14);
  z-index: 5;
  box-shadow: 0 26px 60px rgba(120, 40, 76, .45);
  outline: none;
}
.theater__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a1522;
}
.theater__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .5em .8em;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(180deg, rgba(60, 18, 40, 0), rgba(60, 18, 40, .82));
  pointer-events: none;
}
.theater__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.theater__arrow {
  width: 2.4em; height: 2.4em;
  border-radius: 50%;
  border: 1px solid rgba(217, 106, 146, .38);
  background: rgba(255, 255, 255, .82);
  color: var(--c-rose-deep, #a83c66);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.theater__arrow:hover { background: #fff; transform: scale(1.08); }
.theater__dot {
  width: .72em; height: .72em;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(168, 60, 102, .3);
  cursor: pointer;
}
.theater__dot[aria-current="true"] { background: var(--c-rose-deep, #a83c66); }

@media (max-width: 899px) {
  .theater { --theater-h: min(26svh, 210px); }
  .theater__slide:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theater__slide { transition: none; }
}

@media (min-width: 900px) {
/* ==========================================================================
   MV page fits one screen.
   "Music Video" is longer than "MV" so the 9-button nav row wrapped to two
   lines (78px instead of 38px). The nav is tightened just enough to stay on a
   single row at 1440px, and the theater carousel is capped lower so section 1
   fits 16:9 without overflowing.
   ========================================================================== */
.scene-nav {
  gap: .38rem;
  flex-wrap: wrap;
}
.scene-nav .btn {
  padding: .42em .78em;
  font-size: .82rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.scene--mv .theater { --theater-h: min(21svh, 196px); }
.scene--mv .scene__content {
  padding-top: 56px;
  padding-bottom: var(--s-3);
  gap: 10px;
}
.scene--mv .panel--hero { padding: var(--s-3) var(--s-4); }
.scene--mv .dialogue { padding: var(--s-2) var(--s-3); }
.scene--mv .dialogue__body { padding-block: 0; }
.scene--mv .dialogue__text { line-height: 1.5; }
.scene--mv .panel { padding: var(--s-3) var(--s-4); }
@media (max-width: 899px) {
  .scene--mv .theater { --theater-h: min(24svh, 200px); }
}

/* The 9-button nav can never fit one row in a half-width column once "Music
   Video" replaced "MV", so it is a single horizontally-scrollable row: exactly
   one row tall on every screen, which is what the fixed-height section needs. */
.scene-nav {
  flex-wrap: wrap;          /* pills wrap to a 2nd row instead of overflowing */
  overflow-x: visible;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.scene-nav::-webkit-scrollbar { display: none; }

/* MV page: last pass to fit 16:9 at 1440x900 (viewport 813px). */
.scene--mv .panel--hero { padding: 10px var(--s-4); }
.scene--mv .panel--hero .eyebrow { margin-block: 2px; }
.scene--mv .panel--hero h1 { margin-block: 2px; font-size: clamp(1.75rem, 3.4vw, 2.55rem); }
.scene--mv .panel--hero .lead--romaji { margin-block: 2px; font-size: .84rem; }
.scene--mv .panel--hero .panel__tagline { margin-block: 2px 0; font-size: .95rem; }
.scene--mv .theater { --theater-h: min(18svh, 168px); margin-top: 6px; }
.scene--mv .theater__nav { margin-top: 6px; }
.scene--mv .dialogue__text { font-size: .93rem; line-height: 1.46; }

/* Final trim for 1440x900 (viewport 813px): the previews are small looping
   tiles by design, so they can afford to be compact. */
.scene--mv .theater { --theater-h: min(13.5svh, 132px); }
.scene--mv .theater__nav { margin-top: 4px; }
.scene--mv .panel--hero { padding: 6px var(--s-4); }
.scene--mv .panel--hero h1 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
.scene--mv .panel--hero .panel__tagline { font-size: .92rem; }
.scene--mv .scene__content { gap: 8px; }

/* Last 32px at 1440x900: trim the dialogue box padding and the trailing gap. */
.scene--mv .scene__content { padding-bottom: 2px; }
.scene--mv .dialogue { padding: 6px var(--s-3); }
.scene--mv .dialogue__foot { padding-block: 1px 2px; }
.scene--mv .dialogue__text { font-size: .9rem; line-height: 1.42; }

.scene--mv .scene__content { padding-top: 42px; }
.scene--mv .panel--hero { padding: 2px var(--s-4); }
.scene--mv .panel--hero .lead--romaji { font-size: .8rem; }

/* All three tiles must sit in the row without clipping at 1440px: the content
   column is roughly 700px wide, so each tile gets ~210px (16:9 -> 118px tall). */
.scene--mv .theater { --theater-h: min(11.8svh, 118px); }
.theater__slide { width: calc(var(--theater-h) * 16 / 9); }
}


/* ===== Gallery: album cards + photo grid + PhotoSwipe ===== */
.album-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-4);
}
.album-card {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 26px rgba(180, 120, 150, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.album-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 16px 38px rgba(180, 120, 150, 0.3);
}
.album-card__cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.album-card__body { padding: var(--s-3); }
.album-card__title { font-size: 1.08rem; margin: 0 0 3px; text-decoration: none; }
.album-card__count { margin: 0; opacity: 0.72; font-size: 0.82rem; text-decoration: none; }

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  align-items: start;            /* don't stretch tiles - that collapsed height:100% imgs to 0 */
}
.masonry__item { display: block; border-radius: 12px; overflow: hidden; }
.masonry__item img {
  width: 100%; height: auto; display: block;   /* natural ratio: tiles size themselves */
  transition: transform 0.3s ease, filter 0.3s ease;
}
.masonry__item:hover img { transform: scale(1.05); filter: brightness(1.06); }

.pswp__play-toggle { color: #fff; font-size: 1.25rem; width: 44px; height: 44px; cursor: pointer; }


/* --- section 2: the gallery albums, full width, its own soft palette -----
   Master: "move the album to section 2 and take full width of the section 2,
   no need Suzu-chan on section 2" - so this mirrors the lyric section: a plain
   full-bleed section with no sprite, independent of the layout above. */
.scene__section--gallery {
  position: relative;
  z-index: auto;
  grid-column: 1 / -1;
  padding: var(--s-6) var(--s-5) var(--s-7);
}
@media (min-width: 900px) {
  .scene__section--gallery { min-height: 100vh; }
}
.scene__section--gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 250, 246, .0)  0%,
      rgba(250, 240, 248, .92) 10%,
      rgba(245, 232, 244, .96) 100%),
    url("/media/backgrounds/bg_title_v2.webp") center / cover no-repeat;
  border-top: 1px solid rgba(217, 106, 146, .16);
}
.scene__section--gallery .scene__section-inner {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   NEWS — single post (full-width article, no VN sprite) + News page grid.
   Master: "Make the single post page full width since we don't show Suzu-chan
   VN character here at all." + "section 2 where all the posts appear with the
   thumbnail. 3 columns. The thumbnail just use 16:9 aspect ratio."
   ========================================================================== */
.post-page {
  position: relative;
  min-height: 100vh;
  padding: var(--s-6) var(--s-5) var(--s-7);
}
.post-page::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,250,246,.66), rgba(248,238,246,.9)),
    url("/media/backgrounds/bg_news_v2.webp") center / cover no-repeat;
}
.post-page__inner { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; }
.post-page__title { margin: var(--s-2) 0 var(--s-3); }
.post-page__cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 18px; margin: var(--s-3) 0 var(--s-4);
  box-shadow: 0 16px 38px rgba(178,120,160,.24);
}
.post-page__nav { margin-top: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* section 1 — the latest post featured */
.news-feature {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--s-4); align-items: center;
}
.news-feature__cover img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 12px; box-shadow: 0 10px 24px rgba(178,120,160,.2);
}
.news-feature__body h3 { margin: var(--s-2) 0 var(--s-2); }
.news-feature__body h3 a, .news-card__body h3, .post-page__title { text-decoration: none; }
.news-feature__excerpt { margin: 0 0 var(--s-3); opacity: .82; }

/* section 2 — ALL posts, 3-column 16:9 thumbnail grid */
.scene__section--news {
  position: relative; z-index: auto; grid-column: 1 / -1;
  padding: var(--s-6) var(--s-5) var(--s-7);
}
.scene__section--news::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,250,246,.0) 0%, rgba(250,240,248,.92) 10%, rgba(245,232,244,.96) 100%),
    url("/media/backgrounds/bg_title_v2.webp") center / cover no-repeat;
  border-top: 1px solid rgba(217,106,146,.16);
}
.scene__section--news .scene__section-inner { position: relative; z-index: 2; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.news-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 30px rgba(178,120,160,.18);
}
.news-card__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.news-card__body { padding: var(--s-3); }
.news-card__body h3 { margin: var(--s-2) 0 0; font-size: 1.02rem; }

@media (max-width: 899px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-feature { grid-template-columns: 1fr; }
}


/* ---- Connect socials: official icon + @handle ----------------------------
   Replaces the old fat pink pill with a clean row of brand-coloured icon
   badges (official mark, no label text) each showing the @handle below. */
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
}
.socials li { margin: 0; }
.social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55em;
  padding: .5em .75em;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, opacity .18s ease;
}
.social__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(150, 110, 150, .22);
}
.social__icon svg { width: 20px; height: 20px; fill: #fff; display: block; }
.social__handle {
  font-family: var(--f-body);
  font-size: .72rem;
  opacity: .82;
  letter-spacing: .01em;
}
.social:hover { opacity: .82; transform: scale(1.06); }


/* ---- Secret: the reward (letter + wallpaper) unlocks ONLY when all 8 bells
   are collected. charms.js adds .is-unlocked to .scene--secret when
   charms.isComplete() is true; until then the page shows just the lock. */
.scene--secret [data-secret-locked] { display: none; }
.scene--secret:not(.is-unlocked) [data-secret-locked] { display: block; }
.scene--secret:not(.is-unlocked) .dialogue,
.scene--secret:not(.is-unlocked) .charm,
.scene--secret:not(.is-unlocked) .hint-btn,
.scene--secret:not(.is-unlocked) .panel:not(.panel--hero):not([data-secret-locked]) {
  display: none;
}


/* ---- Bell-collection popover: which hidden bells are found vs missing ---- */
.hud__right { position: relative; }
.bell-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  min-width: 220px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(199, 146, 185, .3);
  box-shadow: 0 18px 44px rgba(150, 110, 150, .24);
}
.bell-pop__title {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: .92rem;
  letter-spacing: .02em;
}
.bell-pop__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.bell-pop__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 2px;
  font-family: var(--f-body);
  font-size: .88rem;
  opacity: .5;
}
.bell-pop__list li.is-on { opacity: 1; font-weight: 600; }
.bell-pop__mark { width: 1.25em; text-align: center; }


/* ---- BGM volume popover (slider + quick mute) ---- */
.hud__pop-wrap { position: relative; display: flex; }
.vol-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  width: 260px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(199, 146, 185, .3);
  box-shadow: 0 18px 44px rgba(150, 110, 150, .24);
}
.vol-pop__title {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-size: .92rem;
  letter-spacing: .02em;
}
.vol-pop__row { display: flex; align-items: center; gap: 10px; }
.vol-pop__mute {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(199, 146, 185, .3);
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.vol-pop__mute.is-muted { opacity: .55; }
.vol-pop__slider {
  flex: 1 1 auto;
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-2, #f3a8c8), #f7cfe0);
  outline: none; cursor: pointer;
}
.vol-pop__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pink-1, #e86fa6);
  border: 2px solid #fff; cursor: pointer;
}
.vol-pop__slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pink-1, #e86fa6); border: 2px solid #fff; cursor: pointer;
}
.vol-pop__pct {
  flex: 0 0 auto; min-width: 3.2em; text-align: right;
  font-family: var(--f-display); font-size: .88rem;
}


/* ---- Footer links: white, no underline (Master's spec) ---- */
.foot__main { margin: 0 0 .2em; }
.foot__link {
  color: inherit;            /* keep the footer's white text */
  text-decoration: none;     /* no underline */
}
.foot__link:hover, .foot__link:focus { text-decoration: none; opacity: .82; }


/* ---- Keep the scene pill-nav always visible (it was getting clipped at the
   viewport bottom on content-heavy pages). Sticky at the bottom with a soft
   fade so it never hides the pills again. ---- */
.scene-nav {
  /* normal flow (NOT sticky): the pills sit after the content and never overlap
     or hide the last card's text. No background (Master found it ugly). */
  padding: var(--s-2) 0 var(--s-1);
}

/* Fan Club: tighten the "Something is growing" card so the pills fit on screen */
.scene--fanclub .scene__section h2 { font-size: 1.16rem; }
.scene--fanclub .scene__section p { font-size: .93rem; line-height: 1.62; }


/* Pill nav: do NOT let pills grow to fill one over-wide row (that overflowed
   and clipped the last pills). Let them keep natural width and wrap. */
.scene-nav .btn { flex: 0 1 auto; }