/* ============================================
   Cherri — Design Tokens
   Sleek, minimal, restrained. Ink + cherry + gold.
   ============================================ */
@view-transition {
  navigation: auto;
}

:root {
  color-scheme: light;

  --ink: oklch(16% 0.03 25);
  --cherry: oklch(52% 0.19 22);
  --blush: oklch(90% 0.04 10);
  --cream: oklch(97% 0.012 55);
  --gold: oklch(72% 0.12 85);
  --white: oklch(100% 0 0);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad-desktop: 96px;
  --pad-mobile: 56px;
  --max-width: 1200px;
  --radius: 12px;
  --radius-lg: 20px;
  --header-height: 78px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Photo Collage — a deliberately distinct, moodier near-black tone from
     the design handoff; not the same as --ink so kept as its own tokens. */
  --collage-bg: oklch(0.16 0.005 260);
  --collage-type-fill: oklch(0.97 0.01 90 / 0.22);
  --collage-type-stroke: oklch(1 0 0 / 0.95);
  --collage-caption: oklch(0.97 0.005 90);
  --collage-wordmark: oklch(0.55 0.02 90);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  scrollbar-color: var(--cherry) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--cherry);
  color: var(--cream);
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
  max-inline-size: 62ch;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Visible focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cherry);
  outline-offset: 3px;
}

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--pad-mobile) 0;
}

@media (width >=900px) {
  .section {
    padding: var(--pad-desktop) 0;
  }
}

.section--dark {
  background: var(--ink);
  color: var(--cream);
}

.section--blush {
  background-color: var(--blush);
  background-image: url("../assets/images/cherry-tile.svg");
  background-repeat: repeat;
}

.section--cream {
  background: var(--cream);
}

/* Second blush section gets the "WE ARE CHERRI" text pattern instead of
   the cherry-tile pattern, so each pink section has its own distinct detail. */
#testimonials {
  background-image: url("../assets/images/cherri-text-tile.svg");
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cherry);
  margin-bottom: 0.75em;
}

.section--dark .eyebrow {
  color: var(--gold);
}

h2 {
  font-size: clamp(30px, 4.5vw, 44px);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn--primary {
  background: var(--cherry);
  color: var(--cream);
}

.btn--primary:hover {
  background: color-mix(in oklch, var(--cherry), black 12%);
}

.btn--outline {
  background: transparent;
  color: var(--cherry);
  border-color: color-mix(in oklch, var(--cherry), transparent 40%);
}

.btn--outline:hover {
  border-color: var(--cherry);
  background: color-mix(in oklch, var(--cherry), transparent 94%);
}

.section--dark .btn--outline {
  color: var(--cream);
  border-color: color-mix(in oklch, var(--cream), transparent 55%);
}

.section--dark .btn--outline:hover {
  border-color: var(--cream);
  background: color-mix(in oklch, var(--cream), transparent 90%);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ============================================
   Placeholders (images/video to be supplied)
   ============================================ */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: color-mix(in oklch, var(--cherry), transparent 92%);
  border: 1px solid color-mix(in oklch, var(--ink), transparent 85%);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  min-height: 200px;
  padding: 16px;
}

.placeholder__label {
  max-width: 320px;
}

.placeholder--photo {
  aspect-ratio: 4 / 3;
}

.placeholder--wide {
  aspect-ratio: 16 / 9;
}

.placeholder--square {
  aspect-ratio: 1 / 1;
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: var(--header-height);
  background: color-mix(in oklch, var(--ink), transparent 35%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  color: var(--cream);
  view-transition-name: site-header;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Once the page has scrolled, ground the header with a touch more opacity
   and a soft shadow so it reads clearly over any section behind it, not
   just the hero video it starts on top of. */
.site-header.is-scrolled {
  background: color-mix(in oklch, var(--ink), transparent 8%);
  border-bottom-color: color-mix(in oklch, var(--cream), transparent 88%);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
}

/* Grid (not flex + space-between) so .main-nav centers on the header's
   full width — the logo and header-actions columns are different widths,
   so space-between would center the nav between them instead of on the
   page, drifting it visibly off-center. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Explicit grid-column pins each item to its intended track. Without this,
   .main-nav going display:none on mobile removes it from grid item
   generation entirely, so auto-placement shifts .header-actions into the
   middle "auto" track instead of the right-hand "1fr" one — landing the
   hamburger button dead center, on top of the centered logo wordmark. */
.site-header__inner>.logo {
  grid-column: 1;
  justify-self: start;
}

.site-header__inner>.main-nav {
  grid-column: 2;
  justify-self: center;
}

.site-header__inner>.header-actions {
  grid-column: 3;
  justify-self: end;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--cream);
}

.logo__text {
  font-family: var(--font-display);
  font-weight: 700;
}

.logo__mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

@media (width < 900px) {
  .site-header .logo__text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.main-nav {
  display: none;
  align-items: center;
  gap: 32px;
}

.main-nav a {
  position: relative;
  padding-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.2s var(--ease);
}

.main-nav a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: color-mix(in oklch, var(--cream), transparent 75%);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--cherry);
  transition: right 0.25s var(--ease);
}

.main-nav a:hover {
  color: var(--cherry);
}

.main-nav a:hover::after {
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a::after {
    transition: none;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-divider {
  display: none;
  width: 1px;
  height: 22px;
  background: color-mix(in oklch, var(--cream), transparent 75%);
}

@media (width >=900px) {
  .header-divider {
    display: block;
  }
}

.header-actions .btn {
  display: none;
  padding: 10px 22px;
  font-size: 14px;
}

@media (width >=900px) {
  .header-actions .btn {
    display: inline-block;
  }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--cream);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn:hover {
  background: color-mix(in oklch, var(--cream), transparent 85%);
  color: var(--cherry);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn:hover {
    transform: none;
  }
}

.header-actions .icon-btn {
  display: none;
}

@media (width >=900px) {
  .header-actions .icon-btn {
    display: inline-flex;
  }
}

.nav-toggle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 8px;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar {
    transition: none;
  }
}

@media (width >=900px) {
  .main-nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

/* Mobile full-screen overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transform: translateY(-100%);
  transition: transform 0.3s var(--ease);
}

.mobile-menu.is-open {
  transform: translateY(0);
}

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 26px;
}

.mobile-menu .btn {
  margin-top: 12px;
}

.mobile-menu__social {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu {
    transition: none;
  }
}

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      color-mix(in oklch, var(--ink), transparent 15%) 0%,
      color-mix(in oklch, var(--ink), transparent 65%) 60%,
      color-mix(in oklch, var(--ink), transparent 78%) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 0 24px 40px;
  width: 100%;
}

@media (width >=900px) {
  .hero__content {
    padding-bottom: 96px;
  }
}

.hero h1 {
  font-size: clamp(36px, 7vw, 74px);
  margin-bottom: 0.3em;
  max-inline-size: 16ch;
}

@media (width < 700px) {
  .hero .eyebrow {
    font-size: 13px;
  }

  .hero h1 {
    font-size: clamp(26px, 8vw, 34px);
  }
}

/* Decorative "cherri" marquee — sits behind the hero content, matching the
   bold caps look of the "WE ARE CHERRI" background tile further down the
   page. Rows scroll continuously; each word is outlined until hovered, at
   which point it fills in solid. */
.hero__marquee {
  position: absolute;
  inset: 0;
  /* Keep clear of the headline/CTA pinned to the bottom of the hero. */
  bottom: clamp(-70px, -3vh, -30px);
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  pointer-events: none;
}

/* Tablets in landscape (and short laptop browser windows) are wide enough
   to miss the < 700px rule above but too short for the marquee's vh-based
   upward nudge to keep it clear of the bottom-pinned headline — the nudge
   actually shrinks as height drops, which is backwards. Shrinking the
   headline and pushing the marquee further up compensate directly. */
@media (width >= 700px) and (height <= 900px) {
  .hero h1 {
    font-size: clamp(28px, 6vw, 46px);
  }

  .hero__content {
    padding-bottom: 32px;
  }

  .hero__marquee {
    bottom: clamp(-160px, -14vh, -60px);
  }
}

.hero__marquee-row {
  /* Not overflow-x/-y split: mixing hidden with visible makes the browser
     compute the visible axis as auto, which grows a real (visible) scrollbar
     on this element. The parent .hero already clips horizontal overflow, so
     this just needs to stay unclipped. */
  overflow: visible;
  width: 100%;
  line-height: 1.25;
}

.hero__marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* No gap here: the seamless loop relies on translateX(-50%) landing on
     exactly one set-width. A flex gap between the two sets would add extra
     width the -50% math doesn't account for, causing a periodic jump once
     per loop. The equivalent spacing is baked into each set's own trailing
     padding instead, so both sets (and therefore the whole track) come out
     to an exact, evenly-divisible width. */
  gap: 0;
  /* Single source of truth for the whole marquee's scale. Word size, gap,
     icon size and stroke width all derive from this in em, so mobile is a
     proportionally-shrunk version of the exact same layout, not a
     separately-tuned one that can drift out of sync with desktop. */
  font-size: clamp(15px, 3vw, 32px);
}

.hero__marquee-track--left {
  animation: hero-marquee-left 70s linear infinite;
}

.hero__marquee-track--right {
  animation: hero-marquee-right 70s linear infinite;
}

/* Bottom row scrolls at its own pace so all three don't move in lockstep. */
.hero__marquee-row:last-child .hero__marquee-track {
  animation-duration: 110s;
}

/* Pause-on-hover only for devices that actually have real hover (a mouse).
   On touch devices, tapping a cherry simulates :hover with no way to leave
   it again, permanently freezing that row — scoping this away from touch
   avoids that "sticky hover" trap entirely. */
@media (hover: hover) and (pointer: fine) {
  .hero__marquee-row:hover .hero__marquee-track {
    animation-play-state: paused;
  }
}

.hero__marquee-set {
  display: flex;
  flex-shrink: 0;
  gap: 1.8em;
  /* Stands in for the old track-level gap between this set and the next
     one, so the visual spacing is identical but is counted as part of
     this set's own width (see .hero__marquee-track). */
  padding-right: 1.8em;
}

.hero__marquee-word {
  display: inline-block;
  font-family: "Archivo Black", var(--font-body), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 0.035em color-mix(in oklch, var(--cream), transparent 25%);
  white-space: nowrap;
  cursor: default;
  pointer-events: auto;
  transform: scaleY(1.7);
  transition: color 0.25s ease, -webkit-text-stroke-color 0.25s ease;
}

.hero__marquee-word:hover {
  color: var(--gold);
  -webkit-text-stroke-color: var(--gold);
}

/* A little cherry icon tucked into the "cherri" repeats every so often,
   drifting past with its own gentle bob instead of just sliding flat. */
.hero__marquee-icon {
  flex-shrink: 0;
  height: 1.3em;
  width: auto;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
  animation: hero-marquee-icon-float 3s ease-in-out infinite;
  cursor: pointer;
  pointer-events: auto;
}

@keyframes hero-marquee-icon-float {

  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }

  50% {
    transform: translateY(-6px) rotate(6deg);
  }
}

/* Clicking a cherry "collects" it — see main.js. animation shorthand here
   overrides the continuous float above (higher specificity), and
   animation-fill-mode: forwards keeps it shrunk/gone once it finishes. */
.hero__marquee-icon.is-collected {
  animation: hero-cherry-collected 0.45s ease forwards;
  pointer-events: none;
}

@keyframes hero-cherry-collected {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  40% {
    transform: scale(1.35) rotate(12deg);
    opacity: 1;
  }

  100% {
    transform: scale(0) rotate(50deg);
    opacity: 0;
  }
}

/* ============================================
   Cherry Score Card (easter egg)
   ============================================ */
.cherry-score {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  right: 24px;
  z-index: 350;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--cream);
  color: var(--ink);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.cherry-score.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.cherry-score__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

#cherry-score-count {
  color: var(--cherry);
}

@media (prefers-reduced-motion: reduce) {
  .cherry-score {
    transition: opacity 0.3s ease;
  }
}

/* ============================================
   Funny Photo Popup (easter egg — pops up every
   10 cherries collected, see main.js)
   ============================================ */
.funny-photo-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.funny-photo-popup.is-visible {
  background: rgba(0, 0, 0, 0.55);
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.funny-photo-popup__img {
  width: min(85vw, 480px);
  height: auto;
  border-radius: 16px;
  border: 4px solid var(--cream);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0) rotate(-15deg);
}

.funny-photo-popup.is-visible .funny-photo-popup__img {
  animation: funny-photo-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes funny-photo-pop {
  0% {
    transform: scale(0) rotate(-15deg);
  }

  55% {
    transform: scale(1.15) rotate(8deg);
  }

  70% {
    transform: scale(0.95) rotate(-4deg);
  }

  85% {
    transform: scale(1.05) rotate(3deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .funny-photo-popup {
    transition: opacity 0.3s ease;
  }

  .funny-photo-popup__img {
    transform: none;
  }

  .funny-photo-popup.is-visible .funny-photo-popup__img {
    animation: none;
  }
}

@keyframes hero-marquee-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes hero-marquee-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track {
    animation: none;
  }

  .hero__marquee-icon {
    animation: none;
  }
}

@media (width < 700px) {
  .hero__marquee-row {
    line-height: 1.20;
  }
}

/* ============================================
   Services Strip
   ============================================ */
.coverage-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.coverage-row li {
  padding: 0;
  font-weight: 600;
  font-size: 15px;
}

@media (width >=700px) {
  .coverage-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  .coverage-row li {
    padding: 0 22px;
    border-inline-start: 1px solid color-mix(in oklch, var(--ink), transparent 80%);
  }

  .coverage-row li:first-child {
    border-inline-start: none;
  }
}

/* ============================================
   Meet the Band
   ============================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (width >=900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }

  .split--reverse {
    direction: rtl;
  }

  .split--reverse>* {
    direction: ltr;
  }
}

.split .placeholder--photo {
  border-radius: var(--radius-lg);
}

.band-photo {
  position: relative;
}

.band-photo__sticker {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  transform: translate(26%, -26%) rotate(-20deg);
  filter: drop-shadow(0 6px 10px color-mix(in oklch, var(--ink), transparent 55%));
  pointer-events: none;
}

.band-photo__tag {
  position: absolute;
  bottom: 0;
  left: 20%;
  transform: translate(-50%, 50%);
  background: #69463e;
  color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px color-mix(in oklch, var(--ink), transparent 35%);
}

@media (width < 700px) {
  .band-photo__sticker {
    width: 52px;
    height: 52px;
  }

  .band-photo__tag {
    font-size: 17px;
    padding: 7px 14px;
  }
}

/* ============================================
   Showcases
   ============================================ */
.date-list {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 32px auto 0;
  border-top: 1px solid color-mix(in oklch, var(--ink), transparent 85%);
}

/* Shared "loading / check back soon" placeholder for any section whose
   content is pulled in async from a Google Sheet (gigs, repertoire). */
.status-message {
  width: 100%;
  max-inline-size: none;
  padding: 24px 0;
  margin: 0;
  text-align: center;
  color: color-mix(in oklch, var(--ink), transparent 45%);
  animation: status-message-pulse 1.4s ease-in-out infinite;
}

@keyframes status-message-pulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-message {
    animation: none;
  }
}

.date-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink), transparent 85%);
}

.date-card__location {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-card__venue {
  font-family: var(--font-display);
  font-size: clamp(19px, 1vw + 16px, 24px);
}

.date-card__county {
  font-size: clamp(13px, 0.3vw + 12px, 16px);
  opacity: 0.65;
}

.date-card__tickets {
  display: inline-block;
  margin-top: 4px;
  font-size: clamp(15px, 0.4vw + 13px, 18px);
  font-weight: 700;
  color: var(--cherry);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}

.date-card__tickets:hover {
  color: color-mix(in oklch, var(--cherry), black 12%);
}

.date-card__date {
  flex-shrink: 0;
  font-size: clamp(13px, 0.3vw + 12px, 16px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cherry);
}

.gig-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto 8px;
}

.gig-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 640px;
  margin: 24px auto 0;
}

.gig-pagination:empty {
  margin: 0;
}

.gig-pagination__status {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in oklch, var(--ink), transparent 35%);
}

.gig-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklch, var(--cherry), transparent 40%);
  background: transparent;
  color: var(--cherry);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.gig-pagination__btn:hover:not(:disabled) {
  border-color: var(--cherry);
  background: color-mix(in oklch, var(--cherry), transparent 94%);
}

.gig-pagination__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .gig-pagination__btn {
    transition: none;
  }
}

/* ============================================
   Testimonials
   ============================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}

@media (width >=900px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid color-mix(in oklch, var(--ink), transparent 92%);
}

.testimonial-card__quote-mark {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--gold);
  line-height: 1;
}

.testimonial-card__rating {
  color: var(--gold);
  letter-spacing: 2px;
}

.testimonial-card__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonial-card__avatar.placeholder {
  width: 48px;
  height: 48px;
  min-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

.testimonial-card__name {
  font-weight: 700;
}

.testimonial-card__venue {
  font-size: 14px;
  opacity: 0.7;
}

.read-more-link {
  display: inline-block;
  margin-top: 32px;
  font-weight: 700;
  color: var(--cherry);
  border-bottom: 2px solid var(--cherry);
}

/* ============================================
   Photo Collage (Gallery)
   Fluid, absolutely-positioned photo wall — no breakpoints. Every
   position/size/font-size is in cqw (% of the .photo-collage root's own
   width, via container-type: inline-size), so the whole hand-composed
   layout scales as one fixed arrangement at any viewport width instead of
   reflowing or stacking. Coordinates started from the design handoff 1:1,
   then every `top` was shifted +6cqw as a block (and the root's
   aspect-ratio grown from 210 to 216 to match) to fix a blur-clipping
   artifact on the top photo — see its comment below. Left/right/width/
   height are untouched. If a photo moves, its matching display-type clip
   wrapper (below) must move with it.
   --band was later nudged down another +3cqw for the same blur-clipping
   reason (see its own comment); since --band is otherwise unmoved, every
   other `top` (photos, "Groovy Tunes!"/its clips, caption, wordmark) got
   +3cqw too, to preserve --band's original spacing relative to the rest. */
.photo-collage-section {
  background: var(--collage-bg);
}

.photo-collage {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 100 / 216;
  overflow: hidden;
  background: var(--collage-bg);
  font-family: "Inter", sans-serif;
  container-type: inline-size;
}

.photo-collage__photo {
  position: absolute;
  display: block;
  object-fit: cover;
  z-index: 3;
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, 0.5);
}

.photo-collage__photo--bass {
  top: 105cqw;
  left: 30cqw;
  width: 56cqw;
  height: 50cqw;
}

/* Uncropped — natural portrait ratio, so height is auto, not object-fit. */
.photo-collage__photo--guitarist {
  top: 15cqw;
  left: 3cqw;
  width: 34cqw;
  height: auto;
  z-index: 2;
}

.photo-collage__photo--singer {
  top: 39cqw;
  left: 46cqw;
  width: 40cqw;
  height: 46cqw;
}

.photo-collage__photo--drummer {
  top: 71cqw;
  left: 4cqw;
  width: 44cqw;
  height: 40cqw;
}

/* Bleeds off the top edge, cropped by .photo-collage's overflow: hidden.
   Nudged in from the spec's -3cqw top / 4cqw right: any edge closer than
   ~3x the blur radius (2cqw) to the clip boundary doesn't give the blur
   filter room to render its falloff (nothing past the edge to blend
   from), which left a hard unblurred seam along that edge. 6cqw of
   clearance is enough for the falloff to reach ~0 before it's clipped. */
.photo-collage__photo--band {
  top: 6cqw;
  right: 6cqw;
  width: 42cqw;
  height: 38cqw;
  filter: blur(2cqw);
  opacity: 0.8;
  box-shadow: none;
  z-index: 1;
}

/* left nudged from 2cqw to 6cqw for the same clip-seam reason as --band. */
.photo-collage__photo--crowd {
  top: 145cqw;
  left: 6cqw;
  width: 52cqw;
  height: 30cqw;
  filter: blur(2cqw);
  opacity: 0.8;
  z-index: 1;
}

.photo-collage__photo--live {
  top: 165cqw;
  left: 40cqw;
  width: 58cqw;
  height: 33cqw;
  z-index: 4;
}

/* Small cherry-tile patch in the canvas's bottom-right corner. Uses the
   transparent variant (no solid blush-pink backing rect) so it reads the
   same as the "we are cherri" text band — faint stroke on the bare dark
   canvas — rather than a solid pink block. Positioned to straddle the live
   photo's own bottom-right corner (top 165cqw + height 33cqw = 198cqw
   bottom edge, right edge at 40cqw + 58cqw = 98cqw): z-index sits below the
   live photo (4) so the top-left of this square disappears behind it,
   while the bottom-right portion peeks out past the photo's edge. */
.photo-collage__corner-tile {
  position: absolute;
  top: 187cqw;
  right: 0;
  width: 34cqw;
  height: 24cqw;
  background-image: url("../assets/images/cherry-tile-transparent.svg");
  background-repeat: repeat;
  background-size: 6cqw 6cqw;
  z-index: 3;
  pointer-events: none;
}

/* The "Groovy Tunes!" display type — three identically-positioned copies.
   The fill copy sits behind the photos (reads only on bare background);
   the outline copies are clipped to a specific photo's exact rect and
   re-positioned into that clip's local coordinate space so the glyphs
   land in the same global spot, producing a hollow cutout over the photo. */
.photo-collage__type {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16cqw;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

/* Container (not viewport) query — matches the fluid canvas's own logic:
   what matters is the collage's rendered width, not the page's. A very
   slight trim on phone-width renders; the fill/outline copies stay in
   sync automatically since both share this one rule. */
@container (max-width: 480px) {
  .photo-collage__type {
    font-size: 15cqw;
  }
}

.photo-collage__type--fill {
  position: absolute;
  top: 45cqw;
  left: 0;
  width: 100cqw;
  color: var(--collage-type-fill);
  z-index: 1;
}

/* Single row of the "cherri" wordmark tile, run as a full-width strip
   through the bass player photo — the one whose rect straddles the
   canvas's vertical middle (216cqw / 2 = 108cqw). z-index sits below the
   photos (z-index 3+) so it disappears behind that photo and only peeks
   out to either side of it. repeat-x (not repeat) keeps it to one line. */
.photo-collage__text-band {
  position: absolute;
  top: 120cqw;
  left: 0;
  width: 100cqw;
  height: 12cqw;
  background-image: url("../assets/images/cherri-text-tile.svg");
  background-repeat: repeat-x;
  background-size: auto 12cqw;
  z-index: 2;
  pointer-events: none;
}

/* "Photo Wall" — sits at the very top of the canvas overlapping --band,
   solid (no fill/cutout trick), so it stays fully legible over the photo
   below. Uses Bodoni Moda so it reads as a distinct typeface from the
   Playfair Display script used for "Groovy Tunes!". */
.photo-collage__type--top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqw;
  color: var(--white);
  z-index: 5;
  font-family: "Bodoni Moda", serif;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9cqw;
}

.photo-collage__type-clip {
  position: absolute;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}

.photo-collage__type-clip--singer {
  top: 39cqw;
  left: 46cqw;
  width: 40cqw;
  height: 46cqw;
}

.photo-collage__type-clip--guitarist {
  top: 15cqw;
  left: 3cqw;
  width: 34cqw;
  height: 51cqw;
}

.photo-collage__type--outline {
  position: absolute;
  width: 100cqw;
  color: transparent;
  -webkit-text-stroke: 0.13cqw var(--collage-type-stroke);
}

.photo-collage__type--in-singer {
  top: 6cqw;
  left: -46cqw;
}

.photo-collage__type--in-guitarist {
  top: 30cqw;
  left: -3cqw;
}

.photo-collage__caption {
  position: absolute;
  top: 181cqw;
  left: 5cqw;
  width: 32cqw;
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 5.4cqw;
  line-height: 1.25;
  color: var(--collage-caption);
  z-index: 5;
}

.photo-collage__wordmark {
  position: absolute;
  top: 207cqw;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 4;
}

.photo-collage__wordmark p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 1.5cqw;
  color: var(--collage-wordmark);
}

/* ============================================
   TikTok Block
   ============================================ */
.tiktok-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  overflow: hidden;
}

.tiktok-frame-wrap {
  display: block;
  width: 325px;
  max-width: 100%;
  aspect-ratio: 325 / 725;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tiktok-frame {
  width: 100%;
  height: 100%;
  border: 0;
  /* The player's caption/"more" overlay (revealed on click) has a TikTok-side
     layout bug that squishes onto the icon column. Interaction is disabled
     since these already autoplay/loop/mute; a click opens the real video on
     TikTok instead of pausing into the broken overlay. */
  pointer-events: none;
}

@media (width < 700px) {
  .tiktok-frame-wrap {
    width: 220px;
  }
}

/* ============================================
   Media page — featured video + podcast cards
   ============================================ */
.media-video {
  max-width: 900px;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in oklch, var(--ink), transparent 92%);
}

.media-video__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.media-video__cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}

@media (width >=700px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.media-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--ink), transparent 92%);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.media-card:hover {
  border-color: var(--cherry);
  transform: translateY(-2px);
}

.media-card__source {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cherry);
}

.media-card__title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1vw + 16px, 22px);
}

@media (prefers-reduced-motion: reduce) {
  .media-card {
    transition: none;
  }
}

/* ============================================
   Final CTA
   ============================================ */
.final-cta {
  position: relative;
  color: var(--white);
  text-align: center;
  overflow: hidden;
}

.final-cta__bg {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--cherry), transparent 92%);
}

.final-cta__content {
  position: relative;
  z-index: 1;
  padding: 96px 24px;
}

.final-cta__content h2 {
  font-size: clamp(32px, 5.5vw, 52px);
}

.final-cta__content p {
  margin-inline: auto;
}

.final-cta__overlay {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.45;
}

/* ============================================
   Newsletter
   ============================================ */
.newsletter {
  text-align: center;
}

.newsletter p {
  margin-inline: auto;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 24px 0 12px;
}

.newsletter__form input[type="email"] {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklch, var(--ink), transparent 82%);
  background: var(--white);
  transition: border-color 0.2s var(--ease);
}

.newsletter__form input[type="email"]:focus-visible {
  border-color: var(--cherry);
}

.form-message {
  font-size: 14px;
  min-height: 1.4em;
}

.form-message--success {
  color: oklch(52% 0.13 150);
}

.form-message--error {
  color: var(--cherry);
}

.privacy-note {
  font-size: 13px;
  opacity: 0.65;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (width >=700px) {
  .footer-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1em;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  transition: color 0.2s var(--ease);
}

.footer-col a:hover {
  color: var(--cherry);
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklch, var(--cream), transparent 88%);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.75;
}

.footer-bottom__links {
  display: flex;
  gap: 20px;
}

/* ============================================
   Contact Page
   ============================================ */
.page-hero {
  padding-top: calc(var(--pad-mobile) + 88px);
  padding-bottom: var(--pad-mobile);
  background-color: var(--blush);
  background-image: url("../assets/images/cherry-tile.svg");
  background-repeat: repeat;
}

.page-hero h1 {
  font-size: clamp(32px, 5.5vw, 54px);
  max-inline-size: 18ch;
}

@media (width >=900px) {
  .page-hero {
    padding-top: calc(var(--pad-desktop) + 88px);
    padding-bottom: var(--pad-desktop);
  }
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
}

.spotify-link,
.youtube-link,
.tiktok-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-bottom: 5px;
  color: var(--ink);
  border-bottom: 2px solid var(--cherry);
  transition: color 0.2s var(--ease);
}

.spotify-link:hover,
.youtube-link:hover,
.tiktok-link:hover {
  color: var(--cherry);
}

.spotify-link__icon,
.youtube-link__icon,
.tiktok-link__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  fill: var(--cherry);
}

.spotify-link__text,
.youtube-link__text,
.tiktok-link__text {
  font-weight: 700;
  font-size: clamp(20px, 0.7vw + 17px, 24px);
}

@media (prefers-reduced-motion: reduce) {

  .spotify-link,
  .youtube-link,
  .tiktok-link {
    transition: none;
  }
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (width >=900px) {
  .contact-layout {
    grid-template-columns: 3fr 2fr;
    gap: 64px;
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (width >=600px) {
  .form-row--two {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  transition: color 0.2s var(--ease);
}

.field:has(:user-invalid) label {
  color: var(--cherry);
}

.field .required {
  color: var(--cherry);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid color-mix(in oklch, var(--ink), transparent 82%);
  background: var(--white);
  transition: border-color 0.2s var(--ease);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--cherry);
}

.field input:user-invalid,
.field select:user-invalid {
  border-color: var(--cherry);
}

.field textarea {
  min-height: 3lh;
  field-sizing: content;
  max-block-size: 40dvh;
  resize: vertical;
}

.field-error {
  color: var(--cherry);
  font-size: 13px;
  margin-top: 4px;
  min-height: 1.2em;
}

.form-submit-error {
  color: var(--cherry);
  font-size: 14px;
  margin-bottom: 16px;
}

.form-submit-error:empty {
  display: none;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  accent-color: var(--cherry);
}

.checkbox-field input {
  width: auto;
  margin-top: 4px;
}

.checkbox-field label {
  font-weight: 400;
  font-size: 14px;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-sidebar {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--ink), transparent 92%);
  padding: 32px;
  height: fit-content;
}

.contact-sidebar h3 {
  margin-bottom: 1em;
}

.contact-sidebar__item {
  margin-bottom: 20px;
}

.contact-sidebar__item h4 {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cherry);
  margin-bottom: 4px;
}

.social-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-top: 8px;
}

.social-row a {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blush);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.social-row a svg {
  width: 18px;
  height: 18px;
}

@media (width < 480px) {
  .social-row {
    gap: 8px;
  }

  .social-row a {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .social-row a svg {
    width: 15px;
    height: 15px;
  }
}

.social-row a:hover {
  background: var(--cherry);
  color: var(--white);
}

.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
  background: var(--white);
  border-radius: var(--radius-lg);
}

.form-success p {
  margin-inline: auto;
}

.form-success.is-visible {
  display: block;
}

.contact-form.is-hidden {
  display: none;
}

/* ============================================
   Repertoire Page
   ============================================ */
.repertoire-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklch, var(--ink), transparent 82%);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.filter-pill:hover {
  border-color: var(--cherry);
  color: var(--cherry);
}

.filter-pill.is-active {
  background: var(--cherry);
  border-color: var(--cherry);
  color: var(--cream);
}

.filter-pill__count {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.65;
}

.filter-pill.is-active .filter-pill__count {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .filter-pill {
    transition: none;
  }
}

.repertoire-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  margin: 40px auto 0;
}

.repertoire-genre {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--ink), transparent 92%);
  padding: 32px;
}

.repertoire-genre.is-hidden {
  display: none;
}

.repertoire-genre__title {
  font-size: clamp(20px, 2vw + 14px, 26px);
  margin-bottom: 0.9em;
}

.repertoire-genre__count {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--ink), transparent 50%);
  margin-left: 10px;
  vertical-align: middle;
}

.repertoire-genre__songs {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (width >=700px) {
  .repertoire-genre__songs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.repertoire-song {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink), transparent 92%);
}

.repertoire-song__leader {
  flex: 1;
  min-width: 12px;
  margin-bottom: 4px;
  border-bottom: 1px dotted color-mix(in oklch, var(--ink), transparent 65%);
}

.repertoire-song__title {
  font-weight: 600;
}

.repertoire-song__artist {
  flex-shrink: 0;
  font-size: 14px;
  text-align: right;
  color: color-mix(in oklch, var(--ink), transparent 35%);
}

.final-cta__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

/* ============================================
   Legal Pages (Privacy / Cookie Policy)
   ============================================ */
.legal-content {
  max-width: 72ch;
}

.legal-content .legal-updated {
  font-size: 14px;
  opacity: 0.65;
  margin-bottom: 2em;
}

.legal-content h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin-top: 1.8em;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
  max-width: 62ch;
}

.legal-content li {
  margin-bottom: 0.4em;
}

.legal-content a {
  color: var(--cherry);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content a:hover {
  color: color-mix(in oklch, var(--cherry), black 12%);
}

/* ============================================
   Scroll fade-up animation
   ============================================ */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

@media (prefers-contrast: more) {
  .btn--outline {
    border-width: 2px;
  }

  .date-card,
  .testimonial-card,
  .contact-sidebar,
  .repertoire-genre {
    border: 2px solid var(--ink);
  }

  .filter-pill {
    border-width: 2px;
  }
}

/* ============================================
   Cookie Consent Banner
   ============================================ */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: calc(100% - 32px);
  max-width: 640px;
  padding: 20px 24px;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.cookie-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.cookie-banner p {
  margin: 0;
  flex: 1 1 280px;
  font-size: 14px;
  line-height: 1.5;
}

.cookie-banner a {
  color: var(--gold);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-banner .btn {
  padding: 10px 22px;
  font-size: 14px;
}

.cookie-banner .btn--outline {
  color: var(--cream);
  border-color: color-mix(in oklch, var(--cream), transparent 55%);
}

.cookie-banner .btn--outline:hover {
  border-color: var(--cream);
  background: color-mix(in oklch, var(--cream), transparent 90%);
}

@media (width <=480px) {
  .cookie-banner {
    bottom: 12px;
    padding: 18px;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__actions .btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}