/* ============================================================
   Brian El Dorado & The Tuesday People — EPK
   Design system + section styling
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Colour palette — derived from logo wordmark */
  --color-black:       #0A0A0F;
  --color-cream:       #F8F2E4;
  --color-cyan:        #5BC2DD;
  --color-cyan-dark:   #3E9CB6;
  --color-purple:      #4F4F9E;
  /* Was pink #E84B7B — flipped to brand cyan so all
     formerly-pink elements (Book-a-show CTA, .latest__card
     borders, contact hover, etc.) read as the brand blue. */
  --color-accent-pink: #5BC2DD;
  --color-text-light:  #2A2A2E;   /* body on cream bg */
  --color-text-dark:   #C0BAB2;   /* body on black bg */
  --color-white:       #fff;
  --color-divider-dark:  #2A2A2E;
  --color-divider-light: #D9D2C5;

  /* Legacy aliases — keeps selectors working during migration */
  --color-dark:   var(--color-black);
  --color-light:  var(--color-cream);
  --color-accent: var(--color-cyan);
  --color-accent-dark: var(--color-cyan-dark);

  /* Typography */
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing scale */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2.5rem;   /* 40px */
  --space-xl:  4rem;     /* 64px */
  --space-2xl: 6rem;     /* 96px */
  --space-3xl: 8rem;     /* 128px */

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;

  /* Transitions — smoother out-quart curve, snappier durations */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
  --duration-reveal: 520ms;
}

/* ---------- RESET ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-light);
  background-color: var(--color-black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* ---------- A11Y UTILITIES ---------- */
/* Skip link: hidden until focused. Renders at top of viewport
   for keyboard users so they can bypass the nav on every page. */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-black);
  color: var(--color-cream);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: translateY(-110%);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

/* Visually-hidden utility: removes from layout but keeps in the
   accessibility tree. Used for off-screen h1s on sub-pages. */
.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;
}

/* Global focus ring. The browser default is unreliable on cyan
   and purple backgrounds — make it explicit. Purple reads on
   cream sections (6.2:1); cyan reads on dark sections (10:1). */
:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible,
.footer :focus-visible,
.nav :focus-visible {
  outline-color: var(--color-cyan);
}

/* ---------- REDUCED MOTION ---------- */
/* (Removed the prefers-reduced-motion override that was forcing
   transition-duration to 0.01ms — Windows defaults to "reduce"
   and that was killing every site animation. Client wants the
   animations always running. Same call we made on the bg
   shaders, the album gallery, and the videos marquee.) */

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ---------- UTILITY / SHARED ---------- */

/* Section scaffolding */
.section {
  position: relative;
}

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

.section--dark {
  background-color: var(--color-black);
  color: var(--color-text-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-cream);
}

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Was: --space-3xl (128px) top/bottom. Tightened to --space-2xl
     (96px) — sections felt disconnected before. */
  padding: var(--space-2xl) var(--space-md);
}

.section__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
  /* Cyan on cream is ~1.74:1 — fails WCAG AA. Use purple
     (6.2:1) on light sections; dark sections override below. */
  color: var(--color-purple);
}
.section--dark .section__eyebrow {
  color: var(--color-cyan);
}

.section__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xl);
  line-height: 1.1;
}

.section--light .section__title {
  color: var(--color-black);
}

/* ============================================================
   REVEAL ANIMATION SYSTEM — unified, professional
   Single motion language across the entire site:
     opacity 0 → 1, translateY(14px) → 0
   600ms with out-expo easing (Apple/Linear-style gentle deceleration).
   No scale, no slide-from-left, no rotation — keep it clean.

   Gated by body.js-reveal-ready so content stays visible without JS.
   ============================================================ */

/* ============================================================
   SCROLL REVEALS — group-synced bidirectional fade.
   ------------------------------------------------------------
   scroll-reveal.js toggles `.is-visible` on:
     a) container elements (.home-links__grid, .latest__grid,
        .disco__grid, etc) — every child fades in unison
     b) standalone elements (.section__title, .bio__quote, ...)
        — each fades on its own
   A single CSS transition does the visual work — the browser
   composites it on the GPU so it's smooth at any frame rate. */

/* ---------- INITIAL HIDDEN STATE ---------- */

/* Standalone reveal targets */
.js-reveal-ready .section__eyebrow,
.js-reveal-ready .section__title,
.js-reveal-ready .disco__sub-heading,
.js-reveal-ready .fly,
.js-reveal-ready .bio__body > p,
.js-reveal-ready .bio__quote,
.js-reveal-ready .bio__facts,
.js-reveal-ready .bio__notes,
.js-reveal-ready .about-preview__body,
.js-reveal-ready .about-preview__photo,
.js-reveal-ready .videos__intro,
.js-reveal-ready .videos__channel,
.js-reveal-ready .press__sub-eyebrow,
.js-reveal-ready .press__kit,
.js-reveal-ready .contact__booking,
.js-reveal-ready .music__feature,
.js-reveal-ready .music__streaming,
.js-reveal-ready .music__art,
.js-reveal-ready .live__empty,
.js-reveal-ready .live__recent,
.js-reveal-ready .live__past,
.js-reveal-ready .live__book-cta,
.js-reveal-ready .live-quote-reveal,
.js-reveal-ready .live-reveal,
/* Group children — hidden until parent gets .is-visible */
.js-reveal-ready .home-links__grid > li,
.js-reveal-ready .latest__grid > .latest__card,
.js-reveal-ready .disco__grid > .disco__card,
.js-reveal-ready .music__streaming-grid > .stream-btn,
.js-reveal-ready .bio__notes-list > div,
.js-reveal-ready .bio__facts-list > div,
.js-reveal-ready .live__past-list > li,
.js-reveal-ready .press__highlights > .press__highlight,
.js-reveal-ready .press__highlight-quote-list > .press__quote,
.js-reveal-ready .press__kit-buttons > .btn,
.js-reveal-ready .contact__socials > li,
.js-reveal-ready .photos__grid > .photo {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- VISIBLE STATE ---------- */

/* Standalone targets reveal when their own .is-visible fires */
.js-reveal-ready .section__eyebrow.is-visible,
.js-reveal-ready .section__title.is-visible,
.js-reveal-ready .disco__sub-heading.is-visible,
.js-reveal-ready .fly.is-visible,
.js-reveal-ready .bio__body > p.is-visible,
.js-reveal-ready .bio__quote.is-visible,
.js-reveal-ready .bio__facts.is-visible,
.js-reveal-ready .bio__notes.is-visible,
.js-reveal-ready .about-preview__body.is-visible,
.js-reveal-ready .about-preview__photo.is-visible,
.js-reveal-ready .videos__intro.is-visible,
.js-reveal-ready .videos__channel.is-visible,
.js-reveal-ready .press__sub-eyebrow.is-visible,
.js-reveal-ready .press__kit.is-visible,
.js-reveal-ready .contact__booking.is-visible,
.js-reveal-ready .music__feature.is-visible,
.js-reveal-ready .music__streaming.is-visible,
.js-reveal-ready .music__art.is-visible,
.js-reveal-ready .live__empty.is-visible,
.js-reveal-ready .live__recent.is-visible,
.js-reveal-ready .live__past.is-visible,
.js-reveal-ready .live__book-cta.is-visible,
.js-reveal-ready .live-quote-reveal.is-visible,
.js-reveal-ready .live-reveal.is-visible,
/* Group children reveal when the PARENT gets .is-visible */
.js-reveal-ready .home-links__grid.is-visible > li,
.js-reveal-ready .latest__grid.is-visible > .latest__card,
.js-reveal-ready .disco__grid.is-visible > .disco__card,
.js-reveal-ready .music__streaming-grid.is-visible > .stream-btn,
.js-reveal-ready .bio__notes-list.is-visible > div,
.js-reveal-ready .bio__facts-list.is-visible > div,
.js-reveal-ready .live__past-list.is-visible > li,
.js-reveal-ready .press__highlights.is-visible > .press__highlight,
.js-reveal-ready .press__highlight-quote-list.is-visible > .press__quote,
.js-reveal-ready .press__kit-buttons.is-visible > .btn,
.js-reveal-ready .contact__socials.is-visible > li,
.js-reveal-ready .photos__grid.is-visible > .photo {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.85em 2em;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-cyan);
  color: var(--color-black);
  border-color: var(--color-cyan);
}

.btn--primary:hover {
  background-color: var(--color-cyan-dark);
  border-color: var(--color-cyan-dark);
  transform: scale(1.03);
}

/* Pink CTA — used for "Book a show" hero button */
.btn--pink {
  background-color: var(--color-accent-pink);
  /* White on pink ~3.55:1 fails AA. Black on pink ~5.5:1 passes. */
  color: var(--color-black);
  border-color: var(--color-accent-pink);
}

.btn--pink:hover {
  background-color: var(--color-cyan-dark);
  border-color: var(--color-cyan-dark);
  transform: scale(1.03);
}

.btn--ghost {
  background: transparent;
  color: var(--color-cream);
  border-color: var(--color-cream);
}

.btn--ghost:hover {
  background-color: var(--color-cream);
  color: var(--color-black);
  transform: scale(1.03);
}

.btn--outline {
  background: transparent;
  color: var(--color-cream);
  border-color: rgba(248, 242, 228, 0.4);
  font-size: 0.85rem;
}

.btn--outline svg {
  width: 18px;
  height: 18px;
  transform: rotate(180deg); /* arrow points down for download */
}

.btn--outline:hover {
  border-color: var(--color-cyan);
  background-color: rgba(91, 194, 221, 0.1);
  color: var(--color-cyan);
  transform: scale(1.03);
}


/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--space-md);
  background: transparent;
  transition: background var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
}

.nav.is-scrolled {
  background: var(--color-black);
  box-shadow: 0 1px 0 var(--color-divider-dark);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-cream);
  text-decoration: none;
  z-index: 1001;
}

/* Logo image in nav replaces old text brand mark */
.nav__brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

.nav__brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: var(--color-cyan);
}

.nav__brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.nav.is-scrolled .nav__brand-text {
  opacity: 1;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav__links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream);
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__links a:not(.nav__cta):not(.nav__merch)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-cyan);
  transition: width var(--duration-base) var(--ease-out);
}

.nav__links a:not(.nav__cta):not(.nav__merch):hover::after,
.nav__links a[aria-current="page"]:not(.nav__cta):not(.nav__merch)::after {
  width: 100%;
}

.nav__links a:not(.nav__cta):not(.nav__merch):hover {
  color: var(--color-cyan);
}

.nav__links a[aria-current="page"]:not(.nav__cta) {
  color: var(--color-cream);
}

.nav__cta[aria-current="page"] {
  background: var(--color-accent-pink);
  border-color: var(--color-accent-pink);
  color: var(--color-white) !important;
}

/* Push the nav links to the right edge — brand · (flex space) · links. */
.nav__links {
  margin-left: auto;
}

/* Book CTA in nav */
.nav__cta {
  background: var(--color-accent-pink);
  border: 1px solid var(--color-accent-pink);
  padding: 0.4em 1.2em;
  border-radius: 2px;
  /* Black on pink ~5.5:1 reads on every nav state, light or
     dark. Was: pink text on cream/black, ~3.2:1 — failed AA. */
  color: var(--color-black) !important;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.nav__cta:hover {
  background: var(--color-accent-pink);
  border-color: var(--color-accent-pink);
  color: var(--color-white) !important;
}

/* Merch CTA in nav — solid cyan (brand primary) so it sits
   beside the pink Contact button without competing. Links out
   to the Bandcamp merch store. Black text on cyan ~6:1 — AA. */
.nav__merch {
  background: var(--color-cyan);
  border: 1px solid var(--color-cyan);
  padding: 0.4em 1.2em;
  border-radius: 2px;
  color: var(--color-black) !important;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.nav__merch:hover {
  background: var(--color-cyan-dark);
  border-color: var(--color-cyan-dark);
  color: var(--color-white) !important;
}

/* Hamburger toggle (mobile) */
.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  z-index: 1001;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-cream);
  border-radius: 1px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
  transform-origin: center;
}

/* Hamburger → X animation */
.nav.is-open .nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.is-open .nav__toggle span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  background-image: url('brand_assets/photos/band_collage.jpg');
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Darker centre band so the logo + tagline + CTAs have a
     legible backdrop without losing the photo. Previous overlay
     dipped to 0.25 alpha in the middle which let the band's
     faces compete with the text. */
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 15, 0.55) 0%,
    rgba(10, 10, 15, 0.55) 35%,
    rgba(10, 10, 15, 0.7) 65%,
    rgba(10, 10, 15, 0.94) 100%
  );
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  /* Centred column with max-width so the logo + tagline + CTA
     stack has comfortable margins on wide screens. */
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  padding-top: calc(var(--nav-height) + var(--space-lg));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero entrance — JS-driven. Elements start hidden, .js-ready reveals them. */
.hero__eyebrow,
.hero__logo,
.hero__title,
.hero__subtitle,
.hero__tagline,
.hero__cta,
.hero__scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

/* Hero entrance ~60% of previous timings — felt sluggish */
.js-ready .hero__eyebrow  { opacity: 1; transform: none; transition-delay: 120ms; }
.js-ready .hero__logo     { opacity: 1; transform: none; transition-delay: 240ms; }
.js-ready .hero__title    { opacity: 1; transform: none; transition-delay: 240ms; }
.js-ready .hero__subtitle { opacity: 1; transform: none; transition-delay: 320ms; }
.js-ready .hero__tagline  { opacity: 1; transform: none; transition-delay: 360ms; }
.js-ready .hero__cta      { opacity: 1; transform: none; transition-delay: 420ms; }
.js-ready .hero__scroll   { opacity: 1; transform: none; transition-delay: 540ms; }

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-cream);
  /* Was 0.2em + 0.8rem cream-dark — tracking the eyebrow wider
     and giving it more space below pushes it visually out of
     the logo's gravity well. */
  margin-bottom: var(--space-lg);
  opacity: 0.85;
}

/* Wordmark — sized so it sits inside the hero column with a
   comfortable margin on every viewport. Was clamp(280, 50vw,
   700px) which overflowed on wider screens. */
.hero__logo {
  display: block;
  width: clamp(240px, 42vw, 520px);
  height: auto;
  margin: 0 auto var(--space-md);
  filter: drop-shadow(0 6px 30px rgba(10, 10, 15, 0.55));
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 9rem);
  line-height: 0.95;
  color: var(--color-cyan);
  -webkit-text-stroke: 2px var(--color-black);
  text-stroke: 2px var(--color-black);
  text-shadow:
    4px 4px 0 var(--color-purple),
    6px 6px 0 rgba(10, 10, 15, 0.6);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 0.1em;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-dark);
  margin-bottom: var(--space-lg);
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  /* Cream (was text-dark = #C0BAB2) so it pops more against
     the hero photo overlay. */
  color: var(--color-cream);
  margin-bottom: var(--space-xl);
  max-width: 480px;
  line-height: 1.5;
}

.hero__tagline em {
  color: var(--color-accent-pink);
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Wider gap between the two CTAs so they read as two
     distinct choices rather than one button bar. */
  gap: var(--space-md);
  flex-wrap: wrap;
}
/* Hero CTAs: size + type only — the liquid-glass surface
   itself is inherited from hover-button.css so they match
   every other button on the site. Equal width so the gap
   between them sits on the .hero__scroll line. */
.hero__cta .btn {
  padding: 1.05rem 2rem;
  width: 200px;
  flex: 0 0 200px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cream) !important;
  /* Inherit the liquid-glass background + multi-stop inset
     shadow + outer halo from hover-button.css — explicit
     `unset` so my old override rules don't leak through. */
  background: unset;
}

/* Subtle chevron after the label to hint at action */
.hero__cta .btn::after {
  content: '→';
  display: inline-block;
  margin-left: 0.6em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0;
  opacity: 0.65;
  transform: translateX(0);
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

.hero__cta .btn:hover::after {
  opacity: 1;
  transform: translateX(3px);
}

.hero__cta .btn:hover {
  transform: translateY(-2px);
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Override transform for scroll once visible */
.js-ready .hero__scroll {
  transform: translateX(-50%);
}

.hero__scroll span {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--color-cyan);
  opacity: 0.7;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.2;
    transform: scaleY(0.6);
    transform-origin: top;
  }
  50% {
    opacity: 0.6;
    transform: scaleY(1);
    transform-origin: top;
  }
}


/* ============================================================
   BIO
   ============================================================ */
.bio__grid {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: var(--space-xl);
  align-items: start;
}

.bio__body {
  font-size: clamp(1rem, 1.2vw, 1.19rem);
  line-height: 1.7;
  color: var(--color-text-light);
}

.bio__body p {
  margin-bottom: 1.4em;
}

.bio__body strong {
  font-weight: 600;
  color: var(--color-black);
}

.bio__body em {
  font-style: italic;
}

/* Pull quote */
.bio__quote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  border-left: 3px solid var(--color-cyan);
}

.bio__quote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--color-black);
  font-style: italic;
  margin-bottom: 0.6em !important;
}

.bio__quote cite {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}

/* Facts sidebar */
/* Editorial sidebar — no box, no border. Lets the type carry the structure
   so it sits naturally on the cream page next to the bio body. */
.bio__facts {
  background: transparent;
  padding: 0 0 0 var(--space-lg);
  border: 0;
  border-left: 1px solid var(--color-divider-light);
}

.bio__facts-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-cyan);
  margin-bottom: var(--space-lg);
}

.bio__facts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bio__facts-list > div {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-divider-light);
}

.bio__facts-list > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bio__facts-list dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-light);
  opacity: 0.55;
  margin-bottom: 0.4em;
}

.bio__facts-list dd {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.bio__facts-list dd span {
  color: var(--color-text-light);
  opacity: 0.6;
  font-size: 0.85rem;
}

.bio__facts-list dd em {
  font-style: italic;
}

.bio__facts-list dd a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.bio__facts-list dd a:hover {
  color: var(--color-cyan-dark);
}


/* ============================================================
   MUSIC
   ============================================================ */
.music__feature {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-xl);
}

.music__art {
  aspect-ratio: 1;
  background: var(--color-divider-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}

.music__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music__art-placeholder {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-dark);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.music__feature-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cyan);
  margin-bottom: var(--space-xs);
}

.music__feature-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
  text-transform: none;
  font-style: italic;
}

.music__feature-credit {
  font-size: 0.9rem;
  color: var(--color-text-dark);
  margin-bottom: var(--space-sm);
}

.music__feature-blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-dark);
  max-width: 480px;
}

.music__feature-upcoming {
  font-size: 0.85rem;
  color: var(--color-text-dark);
  opacity: 0.6;
  margin-top: var(--space-sm);
  font-style: italic;
}

.music__feature-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.music__feature-title a:hover {
  color: var(--color-cyan);
}

/* Streaming buttons */
.music__streaming {
  border-top: 1px solid var(--color-divider-dark);
  padding-top: var(--space-lg);
}

.music__streaming-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-dark);
  margin-bottom: var(--space-md);
}

.music__streaming-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.stream-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  height: 64px;
  border: 1px solid rgba(248, 242, 228, 0.3);
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--color-cream);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.stream-btn__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.stream-btn:hover {
  transform: scale(1.03);
}

/* Platform icon colours — default state */
.stream-btn--spotify .stream-btn__icon { color: #1DB954; }
.stream-btn--bandcamp .stream-btn__icon { color: #1DA0C3; }
.stream-btn--apple .stream-btn__icon { color: #FB233B; }
.stream-btn--youtube .stream-btn__icon { color: #FF0000; }

/* Per-platform hover — fill background, icon turns white */
.stream-btn--spotify:hover {
  background: #1DB954;
  border-color: #1DB954;
  color: var(--color-white);
}
.stream-btn--spotify:hover .stream-btn__icon { color: var(--color-white); }

.stream-btn--bandcamp:hover {
  background: #1DA0C3;
  border-color: #1DA0C3;
  color: var(--color-white);
}
.stream-btn--bandcamp:hover .stream-btn__icon { color: var(--color-white); }

.stream-btn--apple:hover {
  background: #FB233B;
  border-color: #FB233B;
  color: var(--color-white);
}
.stream-btn--apple:hover .stream-btn__icon { color: var(--color-white); }

.stream-btn--youtube:hover {
  background: #FF0000;
  border-color: #FF0000;
  color: var(--color-white);
}
.stream-btn--youtube:hover .stream-btn__icon { color: var(--color-white); }


/* ============================================================
   LIVE
   ============================================================ */
.live {
  border-top: 1px solid var(--color-divider-light);
}

.live__empty {
  text-align: center;
  padding: var(--space-xl) 0;
}

.live__empty-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
  margin-bottom: var(--space-sm);
}

.live__empty-sub {
  font-size: 1rem;
  color: var(--color-text-light);
}

.live__empty-sub a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.live__empty-sub a:hover {
  color: var(--color-cyan-dark);
}

.live__past {
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-light);
  opacity: 0.7;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-divider-light);
}

/* Live — recent shows */
.live__recent {
  margin-bottom: var(--space-lg);
}

.live__recent-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cyan);
  margin-bottom: var(--space-md);
}

.live__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.live__list-item {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1.5fr;
  gap: var(--space-sm);
  align-items: baseline;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-divider-light);
}

.live__list-item:last-child {
  border-bottom: none;
}

.live__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

.live__venue {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.live__city {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
  opacity: 0.7;
}

.live__note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-light);
  opacity: 0.8;
}

.live__cta {
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.live__cta a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.live__cta a:hover {
  color: var(--color-cyan-dark);
}


/* ============================================================
   PRESS
   ============================================================ */
.press__quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.press__quote {
  padding: var(--space-lg);
  border: 2px solid var(--color-purple);
  /* Was 2px square corners — softened to match the rounded
     look across the site (streaming tiles, hover buttons). */
  border-radius: 20px;
  transition: border-color var(--duration-base) var(--ease-out);
}

.press__quote:hover {
  border-color: var(--color-cyan);
}

.press__quote blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.4;
  color: var(--color-cream);
  font-style: italic;
  margin-bottom: var(--space-sm);
  position: relative;
}

.press__quote blockquote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--color-cyan);
  line-height: 0.6;
  margin-bottom: 0.3em;
}

.press__quote figcaption {
  font-size: 0.8rem;
  color: var(--color-text-dark);
  font-style: normal;
}

/* Press sub-eyebrow */
.press__sub-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
  color: var(--color-purple);
}

.press__sub-eyebrow--highlights {
  margin-top: var(--space-lg);
}

/* Press kit block */
/* Tightened — was the full section width with --space-xl
   (64 px) padding all round. Compact card centred in the
   column now. */
.press__kit {
  max-width: 560px;
  margin: var(--space-xl) auto 0;
  background: rgba(248, 242, 228, 0.04);
  border: 1px solid rgba(91, 194, 221, 0.30);
  border-radius: 20px;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
}

.press__kit-title {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
}

.press__kit-sub {
  font-size: 0.88rem;
  color: rgba(248, 242, 228, 0.72);
  margin-bottom: var(--space-md);
}

.press__kit-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* ============================================================
   PHOTOS
   ============================================================ */
.photos__hint {
  font-size: 0.85rem;
  color: var(--color-text-light);
  opacity: 0.6;
  margin-top: calc(var(--space-xl) * -0.8);
  margin-bottom: var(--space-lg);
}

.photos__grid {
  column-count: 3;
  column-gap: var(--space-sm);
}

.photo {
  display: block;
  width: 100%;
  margin-bottom: var(--space-sm);
  break-inside: avoid;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  background: none;
  border: none;
  padding: 0;
}

.photo img {
  width: 100%;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out),
              filter var(--duration-slow) var(--ease-out);
  filter: saturate(0.85);
}

.photo:hover img {
  transform: scale(1.05);
  filter: saturate(1.1);
}


/* ============================================================
   VIDEOS
   ============================================================ */
.videos__intro {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text-light);
  opacity: 0.7;
  margin-top: calc(var(--space-xl) * -0.6);
  margin-bottom: var(--space-xl);
  max-width: 38em;
}

.videos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}

.video-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-black);
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-direction: column;
  color: var(--color-text-dark);
  border: 2px solid var(--color-purple);
  transition: transform var(--duration-slow) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.video-card:hover .video-card__frame {
  border-color: var(--color-cyan);
  transform: translateY(-4px);
}

.video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-card__play {
  width: 48px;
  height: 48px;
  opacity: 0.35;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.video-card--placeholder:hover .video-card__play {
  opacity: 0.6;
  transform: scale(1.08);
}

.video-card__tbc {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.5;
}

.video-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
}

.video-card__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-light);
  opacity: 0.6;
  margin-top: 0.2em;
}

/* Teaser cards — styled intentionally, not like broken placeholders */
.video-card--teaser .video-card__frame {
  border-style: dashed;
}

.video-card--teaser .video-card__tbc {
  opacity: 0.7;
  font-size: 0.75rem;
}

.video-card--teaser .video-card__title {
  color: var(--color-text-light);
}

/* CTA card — YouTube channel link */
.video-card--cta .video-card__channel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text-dark);
  width: 100%;
  height: 100%;
}

.video-card--cta .video-card__play {
  color: #FF0000;
  opacity: 0.7;
}

.video-card--cta:hover .video-card__play {
  opacity: 1;
  transform: scale(1.08);
}

.video-card--placeholder .video-card__title {
  color: var(--color-text-light);
  opacity: 0.4;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.videos__channel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-divider-light);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-light);
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

/* YouTube brand colour */
.videos__channel svg {
  width: 22px;
  height: 22px;
  color: #FF0000;
  transition: color var(--duration-base) var(--ease-out);
}

.videos__channel:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-cream);
}

/* YouTube brand colour */
.videos__channel:hover svg {
  color: #FF0000;
}

/* Removed: .videos__channel[aria-disabled="true"] — no longer needed */


/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-dark);
  margin-bottom: var(--space-md);
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  max-width: 100%;
  padding: 0.85em 1.1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--color-cyan);
  text-decoration: none;
  margin-bottom: var(--space-md);
  border: 1px solid rgba(94, 234, 212, 0.30);
  border-radius: 10px;
  background: rgba(94, 234, 212, 0.06);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: normal;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.contact__email::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>") center / contain no-repeat;
}

.contact__email:hover {
  color: var(--color-accent-pink);
  background: rgba(244, 114, 182, 0.10);
  border-color: rgba(244, 114, 182, 0.45);
  transform: translateY(-1px);
}

.contact__note {
  font-size: 0.9rem;
  color: var(--color-text-dark);
  margin-bottom: var(--space-lg);
  max-width: 400px;
}

.contact__management {
  font-size: 0.9rem;
  color: var(--color-text-dark);
}

.contact__management span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 0.3em;
}

.contact__management strong {
  color: var(--color-cream);
  font-weight: 500;
}

/* ---- Booking enquiry form (Formspree) ---- */
.contact__grid--form {
  grid-template-columns: 1.05fr 0.95fr;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 560px;
}

.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-dark);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.8em 0.95em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-cream);
  background: rgba(248, 242, 228, 0.04);
  border: 1px solid rgba(248, 242, 228, 0.18);
  border-radius: 10px;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(192, 186, 178, 0.5);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-cyan);
  background: rgba(91, 194, 221, 0.07);
  box-shadow: 0 0 0 3px rgba(91, 194, 221, 0.20);
}

/* Honeypot — hidden from people, bait for bots */
.contact__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__submit {
  align-self: flex-start;
}

/* The global glass button treatment (hover-button.css) washed this
   CTA out — a black label on dark glass. Force a solid, high-contrast
   cyan fill so "Send enquiry" reads clearly on the dark section. */
.contact__form .contact__submit {
  background: var(--color-cyan);
  color: var(--color-black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(10, 10, 15, 0.25);
  filter: none;
}

.contact__form .contact__submit:hover {
  background: var(--color-cyan-dark);
  color: var(--color-black);
  filter: none;
}

.contact__form.is-submitting .contact__submit {
  opacity: 0.6;
  cursor: progress;
}

.contact__form-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  font-weight: 500;
}

.contact__form-status--success {
  color: var(--color-cyan);
}

.contact__form-status--error {
  color: #ff8f7a;
}

@media (max-width: 768px) {
  .contact__form-row {
    grid-template-columns: 1fr;
  }
}

/* Socials button grid — 6 branded buttons in 2 columns */
.socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.socials li {
  border-bottom: none;
}

.socials a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.socials a:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

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

.socials svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.socials a:hover svg {
  transform: scale(1.12);
}

/* Platform brand colours — default icon state */
.social--spotify svg { color: #1DB954; }
.social--bandcamp svg { color: #1DA0C3; }
.social--apple svg { color: #FB233B; }
.social--youtube svg { color: #FF0000; }
.social--instagram svg { color: #E4405F; }
.social--facebook svg { color: #1877F2; }

.social--spotify a:hover { color: #1DB954; }
.social--bandcamp a:hover { color: #1DA0C3; }
.social--apple a:hover { color: #FB233B; }
.social--youtube a:hover { color: #FF0000; }
.social--instagram a:hover { color: #E4405F; }
.social--facebook a:hover { color: #1877F2; }


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align: center;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-divider-dark);
  background-color: var(--color-black);
}

/* Footer logo image replaces old text mark */
.footer__logo {
  display: inline-block;
  height: 32px;
  width: auto;
  margin-bottom: var(--space-xs);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.footer__logo:hover {
  opacity: 0.7;
}

.footer__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
  text-decoration: none;
  display: inline-block;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.footer__mark:hover {
  opacity: 0.7;
}

.footer__meta {
  font-size: 0.8rem;
  color: var(--color-text-dark);
  margin-bottom: 0.3em;
}

.footer__credit {
  font-size: 0.7rem;
  /* Was: opacity 0.5 on text-dark, ~3.2:1 (fails AA).
     Direct rgba ~7:1 on the black footer. */
  color: rgba(192, 186, 178, 0.78);
}


/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 10, 15, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 2px;
  transform: scale(0.95);
  transition: transform var(--duration-slow) var(--ease-out);
}

.lightbox.is-open .lightbox__img {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 2rem;
  color: var(--color-cream);
  background: none;
  border: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-fast) var(--ease-out);
  opacity: 0.7;
  line-height: 1;
}

.lightbox__close:hover {
  opacity: 1;
}

.lightbox__download {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.lightbox__download:hover {
  opacity: 1;
}

.lightbox__download svg {
  width: 24px;
  height: 24px;
  transform: rotate(180deg);
}


/* ============================================================
   PAGE SECTIONS — top padding for sub-pages (no hero)
   ============================================================ */
.page-section {
  padding-top: var(--nav-height);
}

/* Sub-pages: the first section sits below the sticky nav.
   Tighten the inner top padding so there's not a giant void between
   the nav and the section eyebrow. */
.page-section > .section__inner {
  /* Was: --space-xl (64px). Sub-pages sit right under the nav and
     don't need that much air. */
  padding-top: var(--space-lg);
}


/* ============================================================
   ABOUT PREVIEW (Home page)
   ============================================================ */
.about-preview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-preview__body {
  max-width: 640px;
}

.about-preview__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--color-purple);
}

.about-preview__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.about-preview__body p {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.btn--dark {
  background-color: var(--color-black);
  color: var(--color-cream);
  border-color: var(--color-black);
}

.btn--dark:hover {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  transform: scale(1.03);
}

/* (Reveal targets for .about-preview__body, .latest__card, .disco__card, .press__highlight
   are consolidated into the main reveal block near the top of this file.) */

/* #3: Latest cards — tighter 60ms stagger */
.latest__card:nth-child(2) { transition-delay: 60ms; }
.latest__card:nth-child(3) { transition-delay: 120ms; }

/* Reveal cascade tightened: 25ms step (was 40ms). Disco grid
   now becomes static fallback for the canvas — only matters on
   reduced-motion / no-WebGL / mobile fallback. */
.disco__card:nth-child(2) { transition-delay: 25ms; }
.disco__card:nth-child(3) { transition-delay: 50ms; }
.disco__card:nth-child(4) { transition-delay: 75ms; }
.disco__card:nth-child(5) { transition-delay: 100ms; }
.disco__card:nth-child(6) { transition-delay: 125ms; }
.disco__card:nth-child(7) { transition-delay: 150ms; }
.disco__card:nth-child(8) { transition-delay: 175ms; }

/* (press__highlight stagger now defined above with other staggers) */


/* ============================================================
   LATEST THREE-UP (Home page)
   ============================================================ */

/* Tighten gap between adjacent dark sections on home. Sections
   re-ordered so streaming-links now sits ABOVE the three-up
   cards. Both stay tight against each other. */
.home-links + .latest .section__inner {
  padding-top: var(--space-lg);
}
.latest .section__inner {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
}

/* Tighten the seam between about-preview (light) and home-links (dark).
   Default section padding (96+96 = 192px) made the dark section feel
   like an empty starfield void before the CONNECT heading appeared. */
.about-preview .section__inner {
  padding-bottom: var(--space-lg);
}
.home-links .section__inner {
  padding-top: var(--space-lg);
}

.latest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.latest__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* Was: --space-lg / clamp 1.1-1.4rem title — read as billboard
     tiles. Tightened to button-row proportions. */
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border: 2px solid var(--color-purple);
  /* Was 2px square corners — softened to match the rounded
     look across the site (streaming tiles, hover buttons). */
  border-radius: 20px;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.latest__card:hover {
  border-color: var(--color-cyan);
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(91, 194, 221, 0.1);
}

.latest__card-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cyan);
}

.latest__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Was: clamp(1.1, 1.8vw, 1.4) — too big for nav-style buttons */
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.2;
  color: var(--color-cream);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1;
}

.latest__card-arrow {
  font-size: 1.4rem;
  color: var(--color-text-dark);
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.latest__card:hover .latest__card-arrow {
  color: var(--color-cyan);
  transform: translateX(4px);
}


/* ============================================================
   DISCOGRAPHY
   ============================================================ */
.disco__sub-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-black);
  /* Was: --space-lg. Tightened so the curved gallery sits
     closer to its heading. */
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  display: inline-block;
}

.disco__grid {
  /* Was: --space-2xl (96px). Tighter gap between the Albums and
     EPs rows. */
  margin-bottom: var(--space-xl);
}

.disco__grid--albums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.disco__grid--singles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.disco__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out);
}

.disco__card:hover {
  transform: translateY(-4px);
}

.disco__cover {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-black);
  margin-bottom: var(--space-xs);
  border: 2px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

.disco__card:hover .disco__cover {
  border-color: var(--color-cyan);
}

.disco__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.disco__card:hover .disco__cover img {
  transform: scale(1.05);
}

.disco__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disco__cover-tbc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.disco__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
  line-height: 1.2;
}

.disco__card--small .disco__card-title {
  font-size: 0.85rem;
}

.disco__card-year {
  font-family: var(--font-body);
  font-size: 0.8rem;
  /* Was: opacity 0.7 on text-light, ~3.6:1 (fails AA on cream).
     Direct hex ~6:1. */
  color: #5A554F;
}

.disco__card-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  /* Was: cyan on cream ~1.74:1 (fails AA). Purple ~6.2:1. */
  color: var(--color-purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.disco__card:hover .disco__card-link {
  opacity: 1;
}


/* ============================================================
   PRESS HIGHLIGHTS (replaces fake quotes)
   ============================================================ */
.press__highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.press__highlight {
  padding: var(--space-lg);
  border: 2px solid var(--color-purple);
  /* Was 2px square corners — softened to match the rounded
     look across the site (streaming tiles, hover buttons). */
  border-radius: 20px;
  transition: border-color var(--duration-base) var(--ease-out);
}

.press__highlight:hover {
  border-color: var(--color-cyan);
}

.press__highlight-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.press__highlight-body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin-bottom: var(--space-sm);
}

.press__highlight-body em {
  font-style: italic;
  color: var(--color-cream);
}

.press__highlight-source {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-dark);
  opacity: 0.6;
  font-style: italic;
}

.press__highlight-source a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* MUSIC — discography link: styles moved to polish pass section below */


/* ============================================================
   BIO — Notes & credits
   ============================================================ */
.bio__notes {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-divider-light);
}

.bio__notes-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-cyan);
  margin-bottom: var(--space-lg);
}

.bio__notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bio__notes-list > div {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-divider-light);
}

.bio__notes-list > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bio__notes-list dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-light);
  opacity: 0.6;
  margin-bottom: 0.3em;
}

.bio__notes-list dd {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.bio__notes-list dd em {
  font-style: italic;
}

.bio__notes-list dd a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.bio__notes-list dd a:hover {
  color: var(--color-cyan-dark);
}


/* ============================================================
   BIO — CTA line
   ============================================================ */
.bio__cta-line a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.bio__cta-line a:hover {
  color: var(--color-cyan-dark);
}


/* ============================================================
   FOOTER VARIANTS
   ============================================================ */
.footer--dark {
  background-color: var(--color-black);
}

.footer--on-light {
  background-color: var(--color-black);
  margin-top: 0;
}

.footer--on-light .footer__mark,
.footer--dark .footer__mark {
  color: var(--color-cream);
  text-decoration: none;
  display: inline-block;
}


/* ============================================================
   BIO PHOTO — About page image insert
   ============================================================ */
.bio__photo {
  width: 100%;
  border-radius: 8px;
  margin-bottom: var(--space-lg);
  border: 2px solid var(--color-purple);
}

/* Sidebar wrapper — stacks facts + portrait in the right column */
.bio__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-sm));
  align-self: start;
  margin-top: -0.5rem;
}

.bio__sidebar-photo {
  margin: 0;
  border: 2px solid var(--color-purple);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-black);
}

.bio__sidebar-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.bio__sidebar-photo figcaption {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cyan);
  background: var(--color-black);
  border-top: 1px solid var(--color-divider-dark);
}

@media (max-width: 1024px) {
  .bio__sidebar {
    position: static;
  }
  .bio__sidebar-photo {
    max-width: 480px;
  }
}


/* ============================================================
   HOME LINKS (Find Brian everywhere)
   ============================================================ */
.home-links__intro {
  font-size: 1.05rem;
  color: var(--color-text-dark);
  opacity: 0.7;
  margin-top: calc(var(--space-xl) * -0.6);
  margin-bottom: var(--space-xl);
}

.home-links__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  list-style: none;
}

.home-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(248, 242, 228, 0.04);
  border: 2px solid var(--color-divider-dark);
  /* Was 8px — bumped up to match the site's pill-rounded
     feel (hover buttons, press cards). */
  border-radius: 24px;
  text-decoration: none;
  color: var(--color-cream);
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.home-link svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: color var(--duration-base) var(--ease-out);
}

.home-link__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-link__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-link__handle {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-dark);
  margin-top: 0.15em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Platform-specific border + icon colours */
.home-link--spotify { border-color: #1DB954; }
.home-link--spotify svg { color: #1DB954; }
/* Brand-coloured border + icon only — hover no longer fills
   the whole tile with the brand colour (was garish against
   the dark page). On hover the border just brightens slightly
   and the tile lifts. */
.home-link--bandcamp  { border-color: #1DA0C3; }
.home-link--bandcamp svg  { color: #1DA0C3; }
.home-link--apple     { border-color: #FB233B; }
.home-link--apple    svg  { color: #FB233B; }
.home-link--youtube   { border-color: #FF0000; }
.home-link--youtube  svg  { color: #FF0000; }
.home-link--instagram { border-color: #E4405F; }
.home-link--instagram svg { color: #E4405F; }
.home-link--facebook  { border-color: #1877F2; }
.home-link--facebook svg  { color: #1877F2; }

.home-link:hover {
  transform: translateY(-3px);
  /* Subtle inner glow + slight border-brightness instead of
     a full colour fill. */
  background: rgba(248, 242, 228, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}


/* ============================================================
   LIVE HERO (banner with quote)
   ============================================================ */
.live__hero {
  position: relative;
  /* Was 400px — too short, cropped most of the band out.
     Use a viewport-relative height so the whole shot reads
     (singer plus the rest of the band) while still leaving
     room below the fold for the dates list. */
  height: clamp(520px, 70vh, 760px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The band sits in the lower-middle of this square shot and the crowd
     runs across the bottom — anchor the crop low so both stay in frame
     (top anchoring showed only the sunset sky). */
  object-position: center 72%;
}

.live__hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-md);
}

.live__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 15, 0.5) 0%,
    rgba(10, 10, 15, 0.7) 100%
  );
  z-index: 0;
}

.live__hero-overlay {
  z-index: 1;
}

.live__hero-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  max-width: 700px;
  margin: 0 auto var(--space-sm);
  font-style: italic;
}

.live__hero-cite {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-cyan);
  letter-spacing: 0.05em;
}


/* ============================================================
   LIVE — Poster-style date rows
   ============================================================ */
.live__list-item--poster {
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  padding: var(--space-lg) 0;
  border-bottom: 2px solid var(--color-divider-light);
}

.live__date--big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-cyan-dark);
  line-height: 1;
}

.live__venue--big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
  line-height: 1.15;
}

/* Gig poster thumbnail beside a listed show */
.live__list-item--haspic {
  grid-template-columns: 132px 1fr;
  gap: var(--space-md);
  align-items: center;
}

.live__list-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.live__poster {
  display: block;
  width: 132px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(10, 10, 15, 0.18);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.live__poster img {
  display: block;
  width: 100%;
  height: auto;
}

.live__poster:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(10, 10, 15, 0.30);
}

.live__poster:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .live__list-item--haspic {
    grid-template-columns: 92px 1fr;
    gap: var(--space-sm);
  }
  .live__poster {
    width: 92px;
  }
}


/* ============================================================
   LIVE — Past shows block
   ============================================================ */
.live__past-block {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-divider-light);
}

.live__past-block-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-black);
  margin-bottom: var(--space-md);
}

.live__past-list {
  list-style: disc;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.live__past-list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

.live__beastie-photo {
  margin: var(--space-lg) 0 0;
  max-width: 520px;
  border-radius: 8px;
  overflow: hidden;
}

.live__beastie-photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--duration-slow) var(--ease-out);
}

.live__beastie-photo:hover img {
  transform: scale(1.04);
}


/* ============================================================
   LIVE — Action strip (two live photos)
   ============================================================ */
.live__action-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.live__action-photo {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
}

.live__action-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform var(--duration-slow) var(--ease-out);
}

.live__action-photo:hover img {
  transform: scale(1.04);
}

.live__action-photo figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cream);
  background: linear-gradient(to top, rgba(10,10,15,0.85), rgba(10,10,15,0));
}

@media (max-width: 768px) {
  .live__action-strip {
    grid-template-columns: 1fr;
  }
  .live__action-photo img {
    height: 240px;
  }
}


/* ============================================================
   LIVE — Book CTA card
   ============================================================ */
/* Was a full-bleed solid cyan billboard with huge padding —
   read as garish + visually heavy on the dark page. Restyled
   as a tight bordered card with subtle cyan accent, sized to
   sit naturally in the column rather than dominating. */
.live__book-cta {
  margin: var(--space-xl) auto 0;
  max-width: 560px;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  background: rgba(15, 25, 50, 0.30);
  border: 1px solid rgba(91, 194, 221, 0.30);
  border-radius: 20px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.live__book-cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
}

.live__book-cta-sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(248, 242, 228, 0.78);
  margin-bottom: var(--space-md);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.live__book-cta .btn--pink {
  /* Sits on a black hero — keep pink fill with black text
     to stay consistent with the rest of the site (5.5:1). */
  background: var(--color-accent-pink);
  color: var(--color-black);
  border-color: var(--color-accent-pink);
}

.live__book-cta .btn--pink:hover {
  background: var(--color-cyan-dark);
  border-color: var(--color-cyan-dark);
  color: var(--color-black);
}


/* ============================================================
   SCROLL ANIMATIONS — transform-only (safe, no opacity traps)
   ============================================================ */

/* Disco covers: gentle scale-up on reveal — transform only */
.js-reveal-ready .disco__cover {
  transform: scale(0.95);
  transition: transform 600ms var(--ease-out);
}

.js-reveal-ready .disco__card.is-visible .disco__cover {
  transform: scale(1);
}

/* About preview photo: subtle zoom-in on reveal — transform only */
.js-reveal-ready .about-preview__photo {
  transform: scale(1.03);
  transition: transform 700ms var(--ease-out);
}

.js-reveal-ready .about-preview__photo.is-visible {
  transform: scale(1);
}

/* Home link cards: scale-in + slide up on reveal — using class-only selectors */
.home-link-reveal {
  transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out);
}

/* hide state already set in the main reveal block above (.js-reveal-ready .home-link-reveal) */

/* is-visible override already set in the main override block above */

/* Stagger for home link items */
.home-links__grid li:nth-child(1) .home-link-reveal { transition-delay: 0ms; }
.home-links__grid li:nth-child(2) .home-link-reveal { transition-delay: 35ms; }
.home-links__grid li:nth-child(3) .home-link-reveal { transition-delay: 70ms; }
.home-links__grid li:nth-child(4) .home-link-reveal { transition-delay: 105ms; }
.home-links__grid li:nth-child(5) .home-link-reveal { transition-delay: 140ms; }
.home-links__grid li:nth-child(6) .home-link-reveal { transition-delay: 175ms; }

/* Live hero quote: fade-up with CLASS selector */
.live-quote-reveal {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.js-reveal-ready .live-quote-reveal {
  opacity: 0;
  transform: translateY(20px);
}

.js-reveal-ready .live-quote-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Live past block + book CTA reveals */
/* (Legacy `.live-reveal` rules removed — the unified reveal
   block above uses `.is-visible` not `.is-visible`. The old rules
   left .live-reveal stuck at opacity:0 because they overrode
   the new ones by source order.) */


/* ============================================================
   POLISH PASS — NEW MOTION & DEAD SPACE FIXES
   ============================================================ */

/* #1: Hero parallax — removed.
   background-attachment: fixed forces a full hero repaint on
   every scroll frame on most laptops (Safari/iOS already ignore
   it). Single biggest contributor to home-page scroll jank. */

/* #7: Music art — perspective tilt on hover */
.music__art {
  transition: transform var(--duration-slow) var(--ease-out);
}

.music__art:hover {
  transform: perspective(1200px) rotateY(2deg);
}

/* #10: Disco sub-heading — animated cyan underline on reveal */
.disco__sub-heading {
  position: relative;
  border-bottom: none;
  padding-bottom: calc(var(--space-xs) + 2px);
}

.disco__sub-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-cyan);
  width: 0;
  transition: width 600ms var(--ease-out);
}

.disco__sub-heading.is-visible::after {
  width: 100%;
}

/* #13: Live hero quote scroll-fade — IntersectionObserver sets .is-faded */
.live__hero-quote,
.live__hero-cite {
  transition: opacity 400ms var(--ease-out);
}

.live__hero-quote.is-faded,
.live__hero-cite.is-faded {
  opacity: 0.5;
}

/* #20: Photo hover 3D tilt (overrides base .photo:hover img) */
.photo:hover img {
  transform: perspective(800px) rotateY(2deg) scale(1.05);
  filter: saturate(1.1);
}

/* #22: Home links grid — tighter gap, more substantial cards */
.home-links__grid {
  gap: var(--space-sm);
}

.home-link {
  padding: var(--space-md) var(--space-lg);
  min-height: 88px;
}

/* #22: Accent line above "Find Brian everywhere" heading */
.home-links .section__title {
  position: relative;
  padding-top: var(--space-md);
}

.home-links .section__title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--color-cyan);
}

/* #23: Reduce bottom padding on Notes & credits section */
.bio__notes {
  padding-bottom: var(--space-md);
}

/* Notes & credits now stands as its own section below the Rockdogs
   feature. The section wrapper supplies the top rhythm, so drop the
   margin / padding / divider it carried as a bio sub-block. */
.bio__notes--standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Notes & credits reads as a quiet appendix to the Rockdogs feature
   above it — tighten the vertical rhythm on both so the two dark
   bands sit close together instead of leaving a full section-sized
   gap between them. */
.rockdogs > .section__inner {
  padding-bottom: var(--space-lg);
}
.bio-notes > .section__inner {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* #24: Music page — replace bare disco link with a CTA card */
.music__disco-link {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 2px solid var(--color-purple);
  /* Was 2px square corners — softened to match the rounded
     look across the site (streaming tiles, hover buttons). */
  border-radius: 20px;
  text-align: center;
  border-top: 2px solid var(--color-purple);
}

.music__disco-link a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.music__disco-link a:hover {
  color: var(--color-cream);
  opacity: 1;
}

/* #26: Live booking lead time note */
.live__book-cta-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-sm);
  font-style: italic;
}

/* #27: Footer divider — thin cyan line above footer on select pages */
.footer-divider {
  display: block;
  width: 60%;
  max-width: 600px;
  height: 1px;
  background: var(--color-cyan);
  opacity: 0.3;
  border: none;
  margin: 0 auto;
}


/* ============================================================
   VIEW TRANSITIONS
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) vtFadeOut;
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) vtFadeIn;
}

@keyframes vtFadeOut {
  to { opacity: 0; }
}

@keyframes vtFadeIn {
  from { opacity: 0; }
}

/* Page transition fallback for browsers without View Transitions */
body.is-transitioning {
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}


/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .bio__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .bio__facts {
    max-width: 480px;
    padding: var(--space-lg) 0 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-divider-light);
  }

  .music__feature {
    grid-template-columns: 220px 1fr;
  }

  .press__quotes {
    grid-template-columns: repeat(2, 1fr);
  }

  .press__quote:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
  }

  .latest__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .disco__grid--albums {
    grid-template-columns: repeat(2, 1fr);
  }

  .disco__grid--singles {
    grid-template-columns: repeat(3, 1fr);
  }

  .press__highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  .press__highlight:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
  }

  .home-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
  }

  .section__inner {
    padding: var(--space-2xl) var(--space-sm);
  }

  /* Mobile nav */
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    background: var(--color-black);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
  }

  .nav.is-open .nav__links {
    opacity: 1;
    pointer-events: auto;
  }

  .nav__links a {
    font-size: 1.4rem;
    letter-spacing: 0.12em;
  }

  .nav__cta,
  .nav__merch {
    font-size: 1.2rem !important;
    padding: 0.5em 1.8em;
  }

  .nav__brand-text {
    opacity: 0 !important;
    width: 0;
    overflow: hidden;
  }

  .nav__brand-logo {
    height: 28px;
  }

  /* Hero */
  .hero__title {
    font-size: clamp(2.8rem, 14vw, 5rem);
  }

  /* Music */
  .music__feature {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .music__art {
    max-width: 260px;
    margin: 0 auto;
  }

  .music__feature-blurb {
    max-width: 100%;
  }

  .music__streaming-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Live shows — stack on mobile */
  .live__list-item {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
  }

  .live__note {
    grid-column: 1 / -1;
  }

  /* Press */
  .press__quotes {
    grid-template-columns: 1fr;
  }

  .press__quote:last-child {
    max-width: 100%;
    grid-column: auto;
  }

  .press__kit {
    padding: var(--space-lg);
  }

  .press__kit-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .press__kit-buttons .btn {
    justify-content: center;
  }

  /* Photos */
  .photos__grid {
    column-count: 2;
  }

  /* Videos */
  .videos__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Contact */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Latest three-up */
  .latest__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Discography */
  .disco__grid--albums {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .disco__grid--singles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  /* Press highlights */
  .press__highlights {
    grid-template-columns: 1fr;
  }

  .press__highlight:last-child {
    max-width: 100%;
    grid-column: auto;
  }

  /* About preview */
  .about-preview__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-preview__photo {
    max-width: 480px;
  }

  /* Home links */
  .home-links__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .home-link {
    padding: var(--space-sm) var(--space-md);
    min-height: auto;
  }

  .home-link svg {
    width: 24px;
    height: 24px;
  }

  /* Live hero */
  .live__hero {
    height: clamp(420px, 60vh, 560px);
  }
}


/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
  .section__inner {
    padding: var(--space-xl) var(--space-sm);
  }

  .hero__cta {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__title {
    font-size: clamp(2.2rem, 14vw, 3.5rem);
  }

  .nav__brand-logo {
    height: 24px;
  }

  .hero__logo {
    width: clamp(220px, 80vw, 320px);
  }

  .bio__quote p {
    font-size: 1.15rem;
  }

  .photos__grid {
    column-count: 1;
  }

  .contact__email {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }

  .music__streaming-grid {
    grid-template-columns: 1fr;
  }

  .stream-btn {
    height: 56px;
    font-size: 0.8rem;
  }

  /* Live shows — single column on small phones */
  .live__list-item {
    grid-template-columns: 1fr;
  }

  .btn {
    font-size: 0.8rem;
    padding: 0.75em 1.5em;
    min-height: 48px;
  }

  /* Discography — single column on small phones */
  .disco__grid--albums,
  .disco__grid--singles {
    grid-template-columns: 1fr;
  }

  /* Home links — single column */
  .home-links__grid {
    grid-template-columns: 1fr;
  }

  /* Live hero */
  .live__hero {
    height: clamp(320px, 55vh, 440px);
  }

  .live__hero-quote {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }
}


/* ============================================================
   ABOUT PAGE — editorial hero + reveals (page-specific)
   ------------------------------------------------------------
   Turns the bio from a wall of text into a magazine feature:
   a stacked headline that glides in on load, big pull-
   statements, a genre strip, a dramatic quote, and body copy
   that fades up (transform + opacity only) as it scrolls in.
   ============================================================ */

/* ---- Hero (now lives at the top of the bio's left column so the
   facts sidebar sits beside it at the top, as it did originally) ---- */
.bio__intro {
  margin-bottom: var(--space-lg);
}

/* Brighter body copy on the dark backdrop — lift the muted tan
   closer to cream so the writing reads clearly. */
.bio {
  --color-text-light: #EFEADF;
}

/* <strong> hard-codes --color-black, which is invisible on the
   dark backdrop — flip it to cream so emphasised words show. */
.bio__body strong {
  color: var(--color-cream);
}

.about-hero__kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-cyan);
  margin-bottom: var(--space-sm);
}

.about-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  color: var(--color-cream);
  margin: 0;
  text-transform: none;
}

.about-hero__line {
  display: block;
}

.about-hero__accent {
  color: var(--color-cyan);
}

.about-hero__rule {
  display: block;
  width: clamp(96px, 14vw, 180px);
  height: 3px;
  margin-top: var(--space-md);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-accent-pink));
  transform-origin: left center;
}

/* Hero load-in — gated behind .js-reveal-ready so a no-JS page
   shows everything statically. Staggered via animation-delay.
   Transform + opacity only (GPU-composited) for a smooth glide. */
.js-reveal-ready .about-hero__kicker,
.js-reveal-ready .about-hero__line {
  opacity: 0;
  transform: translateY(22px);
  animation: aboutHeroIn 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js-reveal-ready .about-hero__kicker { animation-delay: 40ms; }
.js-reveal-ready .about-hero__title .about-hero__line:nth-child(1) { animation-delay: 130ms; }
.js-reveal-ready .about-hero__title .about-hero__line:nth-child(2) { animation-delay: 200ms; }
.js-reveal-ready .about-hero__title .about-hero__line:nth-child(3) { animation-delay: 270ms; }
.js-reveal-ready .about-hero__title .about-hero__line:nth-child(4) { animation-delay: 340ms; }

@keyframes aboutHeroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Rule wipes in via scaleX (composited) rather than animating
   width, which avoids per-frame layout. */
.js-reveal-ready .about-hero__rule {
  transform: scaleX(0);
  animation: aboutRuleIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 440ms forwards;
}
@keyframes aboutRuleIn {
  to { transform: scaleX(1); }
}

/* A little air below the nav before the intro. */
.bio > .section__inner {
  padding-top: var(--space-lg);
}

/* Let the body column shrink inside the grid so the big display
   type and figure can't force the track wider than the viewport
   (otherwise text overflows / clips on mobile). */
.bio__body {
  min-width: 0;
}
.bio__body p {
  overflow-wrap: break-word;
}

/* ---- Lead / standfirst ---- */
.bio__lead {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
  line-height: 1.5;
  color: var(--color-cream);
  margin-bottom: 1.2em;
}

/* ---- Big pull statement (signature "stairwell" moment) ---- */
.bio__statement {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
  font-size: clamp(2rem, 6vw, 3.75rem);
  color: var(--color-cream);
  margin: var(--space-xl) 0;
}

.bio__statement-em {
  color: var(--color-cyan);
}

/* ---- Genre strip ---- */
.bio__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
  align-items: baseline;
  margin: var(--space-lg) 0 var(--space-xl);
}

.bio__genres span {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.05rem, 2.6vw, 1.9rem);
  color: var(--color-cream);
  line-height: 1.15;
}

.bio__genres span + span::before {
  content: "·";
  color: var(--color-cyan);
  margin-right: 0.9em;
  font-weight: 700;
}

/* ---- Figure spacing ---- */
.bio__figure {
  margin: var(--space-xl) 0;
}
.bio__figure .bio__photo {
  margin-bottom: 0;
}

/* ---- Songs From the Stairwell — album cover feature ----
   Cover sits beside the album's description text, under the
   big "Album #7" statement heading. Stacks on narrow screens. */
.stairwell-feature {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin: var(--space-xl) 0;
}
.stairwell-feature__cover {
  margin: 0;
}
.stairwell-feature__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--color-purple);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 22px 60px rgba(79, 79, 158, 0.28);
}
.stairwell-feature__cover figcaption {
  margin-top: var(--space-xs);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cyan);
}
.stairwell-feature__body > p:first-child {
  margin-top: 0;
}

@media (max-width: 720px) {
  .stairwell-feature {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    justify-items: start;
  }
  .stairwell-feature__cover {
    width: 100%;
    max-width: 340px;
  }
}

/* ---- Dramatic pull quote ---- */
.bio__quote {
  position: relative;
  margin: var(--space-xl) 0;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-left-width: 4px;
}
.bio__quote p {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
  line-height: 1.3;
}
.bio__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.35em;
  left: calc(var(--space-lg) - 0.05em);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-cyan);
  opacity: 0.18;
  pointer-events: none;
}

/* About body reveals (.fly elements, body paragraphs, quote)
   now use the site-wide reveal system defined at the top of
   this file — identical fade-up + easing as every other page.
   No page-specific motion overrides here on purpose. */

/* Respect reduced-motion: show the hero statically (the body
   reveals are already handled by the global system). */
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .about-hero__kicker,
  .js-reveal-ready .about-hero__line,
  .js-reveal-ready .about-hero__rule {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .bio__quote::before {
    font-size: 3rem;
  }
}

/* ============================================================
   ROCKDOGS — Reclink Community Cup feature (About page)
   Dark band beneath the bio. Two-shot diptych + a stat strip.
   ============================================================ */
.rockdogs__lead p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  max-width: 65ch;
  color: var(--color-text-dark);
}
.rockdogs__lead strong,
.rockdogs__body strong {
  color: var(--color-cream);
  font-weight: 600;
}

/* Two-shot diptych — both photos are ~5:4, so cover-cropping is
   negligible and the trophy stays comfortably in frame. */
.rockdogs__diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
.rockdogs__shot {
  margin: 0;
}
.rockdogs__shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--color-purple);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 22px 60px rgba(79, 79, 158, 0.28);
}
.rockdogs__shot figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.rockdogs__body {
  max-width: 65ch;
}
.rockdogs__body p {
  line-height: 1.7;
  color: var(--color-text-dark);
}
.rockdogs__body p + p {
  margin-top: var(--space-md);
}

/* Stat strip — Brian's record + the event at a glance */
.rockdogs__stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-divider-dark);
}
.rockdogs__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.rockdogs__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-cyan);
}
.rockdogs__stat-label {
  font-size: 0.82rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-text-dark);
}

@media (max-width: 720px) {
  .rockdogs__diptych {
    grid-template-columns: 1fr;
  }
  .rockdogs__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-md);
  }
}