/* Bernie Breen Management, custom site styles. Fully self-contained, nothing
   shared with other custom sites or the Merto template system. Premium dark
   editorial, cinematic motion. Mobile-first. No em dashes in any copy or comment. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&display=swap");

:root {
  --bg: #0b0b0c;
  --bg-2: #111012;
  --bg-3: #16151a;
  --ink: #f4f1ea;
  --ink-dim: #b6b1a6;
  /* Lifted from #7d786e to clear ~5:1 on the dark bg for small-caps detail text. */
  --ink-faint: #8d887d;
  --gold: #c9a24b;
  --gold-soft: #d8b864;
  /* Dimmer decorative gold for NON-interactive accents (stat numbers, dots at
     rest). Full --gold stays reserved for interactive / active states. */
  --gold-dim: #9c7e3c;
  --line: rgba(244, 241, 234, 0.12);
  --line-strong: rgba(244, 241, 234, 0.22);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  --pad: clamp(56px, 9vw, 120px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nowbar-h: 72px;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
}

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Never let the sticky now-managing bar cover content. */
  padding-bottom: var(--nowbar-h);
}

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

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

::selection { background: var(--gold); color: #1a1407; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- Type scale ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 1.1rem;
  display: inline-block;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-dim); line-height: 1.6; }

.gold { color: var(--gold); }
.serif-em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.page-h1 { font-size: clamp(2.4rem, 8vw, 5.5rem); line-height: 0.96; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.2s var(--ease);
}
.btn--gold { background: var(--gold); color: #160f02; }
.btn--gold:hover { background: var(--gold-soft); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Brand mark (BB monogram + wordmark) ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.brand-mark { width: 34px; height: 34px; flex: none; display: block; transition: transform 0.35s var(--ease); }
.brand-word { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; transition: color 0.35s var(--ease); }
.brand-word b { color: var(--gold); font-weight: 500; }
/* Make the wordmark obviously the clickable home link. */
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { transform: translateY(-2px); }
.brand:hover .brand-word, .brand:focus-visible .brand-word { color: var(--gold-soft); }
.brand:hover .brand-word b, .brand:focus-visible .brand-word b { color: var(--gold-soft); }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
/* legacy wordmark alias (text-only links) */
.wordmark { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.wordmark b { color: var(--gold); font-weight: 500; }

/* ---------- Sticky nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
/* Past the hero the nav adopts the player's glass material. */
.nav.is-stuck {
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line-strong);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-stuck { background: rgba(11, 11, 12, 0.97); }
}
/* Sentinel: a zero-height marker the IO watches to toggle .is-stuck. */
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav-links { display: none; align-items: center; gap: 1.9rem; }
.nav-links a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links .nav-cta {
  color: var(--gold);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.6rem 1.1rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-links .nav-cta::after { display: none; }
.nav-links .nav-cta:hover { border-color: var(--gold); color: var(--gold-soft); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }

/* Full-screen mobile overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
  visibility: hidden;
}
.nav-overlay[data-open="true"] { transform: translateY(0); visibility: visible; }
.nav-overlay-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink);
  font-size: 1.8rem; line-height: 1;
}
.nav-overlay nav { display: flex; flex-direction: column; gap: 0.4rem; }
.nav-overlay a {
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--ink);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.nav-overlay a .idx { font-family: var(--sans); font-size: 0.7rem; color: var(--gold); letter-spacing: 0.18em; vertical-align: super; margin-right: 0.6rem; }
.nav-overlay a:last-child { color: var(--gold); border-bottom: 0; }

/* ---------- Sections ---------- */
.section { padding: var(--pad) 0; position: relative; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.section--ink { background: var(--bg-2); }
.section--deep { background: #070708; }
/* Hairline gradient seam between major dark bands. */
.section--ink::before, .section--deep::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent);
  pointer-events: none;
}
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 { font-size: clamp(2rem, 5.2vw, 3.6rem); margin-bottom: 0.6rem; }
.section-head p { color: var(--ink-dim); font-size: 1.06rem; }

/* Film grain overlay (shared, sits over photos and dark bands). Applied to the
   .grain helper plus every dark band so the premium texture reads uniformly. */
.grain, .section--deep, .section--ink, .cta-band { position: relative; }
.grain::after,
.section--deep::after,
.section--ink::after,
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Keep band content above its own grain layer. */
.section--deep > .wrap, .section--ink > .wrap, .cta-band > .wrap { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Reserve the fixed player so the last stat row is never occluded on phones. */
  min-height: calc(100svh - var(--nowbar-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute;
  /* Generous bleed + a base scale give the lerped parallax + Ken Burns headroom. */
  inset: -10% -4%;
  background-image: url("/clients/bernie-breen/assets/hero-venue.jpg");
  background-size: cover;
  background-position: center 35%;
  transform: scale(1.06);
  will-change: transform;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(11,11,12,0) 0%, rgba(11,11,12,0.45) 70%, rgba(11,11,12,0.85) 100%),
    linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.1) 30%, rgba(11,11,12,0.72) 78%, rgba(11,11,12,0.96) 100%);
}
.hero-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(48px, 8vh, 96px); padding-top: 120px; }
.hero .eyebrow { color: var(--gold); }
.hero h1 {
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1.4rem;
}
.hero h1 .line2 { font-style: italic; color: var(--gold); display: block; }
.hero-tag { font-size: clamp(1.05rem, 2vw, 1.45rem); color: var(--ink); max-width: 40ch; font-family: var(--serif); font-weight: 400; line-height: 1.4; }
.hero-tag span { color: var(--ink-dim); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2.2rem 0 0; }
.hero-cta .btn { margin: 0; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--line);
}
.hero-stats .stat { padding: 1.3rem 1.2rem 0.2rem; }
.hero-stats .stat .num { font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.9rem); color: var(--gold-dim); line-height: 1; display: block; }
.hero-stats .stat .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); margin-top: 0.5rem; display: block; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: none;
}

/* ---------- Reveal motion (the workhorse) ---------- */
/* Hidden states are gated behind .reveal-ready (set synchronously by script.js).
   With JS off the class never lands, so .reveal stays visible and wall tiles sit
   at their natural scale. With JS on they start hidden and the observer reveals. */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-ready .reveal { opacity: 0; transform: translateY(20px); pointer-events: none; }
.reveal-ready .reveal.in { opacity: 1; transform: none; pointer-events: auto; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* Directional reveal variants. Vary the entrance vector per element so rows feel
   composed rather than a single uniform fade-up. Hidden states still gated behind
   .reveal-ready, so JS-off keeps everything visible. */
.reveal-ready .reveal[data-dir="left"] { transform: translate3d(-32px, 0, 0); }
.reveal-ready .reveal[data-dir="right"] { transform: translate3d(32px, 0, 0); }
.reveal-ready .reveal[data-dir="up"] { transform: translate3d(0, 36px, 0); }
.reveal-ready .reveal[data-dir="scale"] { transform: scale(0.94); }
.reveal-ready .reveal[data-dir].in { transform: none; }

/* Gold-rule wipe: a hairline that grows from 0 to full width when its section
   header enters. Decorative; pure CSS once .in lands. */
.rule-wipe { position: relative; }
.rule-wipe::before {
  content: "";
  position: absolute;
  left: 0; top: -0.9rem;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 0.8s var(--ease) 0.1s;
}
.rule-wipe.in::before { width: clamp(48px, 8vw, 96px); }

/* Parallax drift target. script.js translates it slightly slower than scroll on
   fine pointers only (gated in JS + the reduced-motion query below). Images that
   drift get a base scale so the drift never reveals an edge, and their figure
   clips overflow. */
.parallax { will-change: transform; }
img.parallax { transform: scale(1.12); transform-origin: center; }
.story-figure, .intro-portrait { overflow: clip; }
/* The contact backdrop is a background-image div pinned inset:0; give it bleed so
   the parallax translate never exposes an edge. */
.contact-hero .c-bg.parallax { inset: -12% 0; }

/* ---------- Thesis ---------- */
.thesis-line { font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.32; color: var(--ink); max-width: 24ch; font-weight: 400; }
.thesis-sub { margin-top: 1.6rem; color: var(--ink-dim); font-size: 1.02rem; }
.thesis-sub .gold:hover { color: var(--gold-soft); }

/* ---------- Signature pinned scroll-storytelling moment (homepage) ----------
   The ONE big cinematic pin. A tall outer section holds a sticky 100svh stage;
   script.js (--p, set on #storyPin) drives the layers. Defaults below are the
   STATIC fallback (no-JS / reduced motion): everything visible, no pinning. The
   .pin-on class (added by JS only when it can drive the scrub) switches the
   section to the tall sticky treatment. */
.story-pin { position: relative; background: var(--bg); }
.story-stage { position: relative; display: grid; }
.story-bg {
  position: absolute;
  inset: -6%;
  background-image: url("/clients/bernie-breen/assets/hero-venue.jpg");
  background-size: cover;
  background-position: center 42%;
  filter: grayscale(0.4) contrast(1.05) brightness(0.5);
  z-index: 0;
}
.story-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(11,11,12,0.2) 0%, rgba(11,11,12,0.55) 60%, rgba(11,11,12,0.92) 100%),
    linear-gradient(180deg, rgba(11,11,12,0.7) 0%, rgba(11,11,12,0.3) 40%, rgba(11,11,12,0.9) 100%);
}
.story-stage-inner { position: relative; z-index: 2; }
.story-statement {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 8vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
}
.story-statement .sl { display: block; }
.story-statement .sl:last-child { color: var(--gold); font-style: italic; }
.story-handoff { margin-top: clamp(28px, 4vw, 48px); max-width: 32ch; }
.story-handoff .thesis-line { font-size: clamp(1.25rem, 2.6vw, 1.9rem); max-width: 30ch; }
.story-handoff .thesis-sub { margin-top: 1.2rem; }
.story-handoff .gold:hover { color: var(--gold-soft); }
.story-cue { display: none; }

/* Static stacked fallback: a normal padded section, no pin, all layers shown. */
.story-pin:not(.pin-on) { padding: clamp(72px, 12vh, 160px) 0; overflow: hidden; }
.story-pin:not(.pin-on) .story-stage { min-height: 0; padding: clamp(48px, 8vw, 96px) 0; }
.story-pin:not(.pin-on) .story-stage-inner { padding-top: 0; padding-bottom: 0; }

/* Pinned treatment (JS-driven only). The tall outer scroll-track + sticky stage.
   Layer transforms are applied inline by script.js via the --p progress var so
   the scrub stays weighted (eased in JS), not a 1:1 CSS scroll-linked animation. */
.story-pin.pin-on { height: 280vh; }
.story-pin.pin-on .story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  align-content: center;
  overflow: hidden;
}
.story-pin.pin-on .story-bg { will-change: transform, filter, opacity; }
.story-pin.pin-on .story-statement .sl,
.story-pin.pin-on .story-handoff { will-change: transform, opacity; }
.story-pin.pin-on .story-cue {
  display: block;
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: opacity 0.4s var(--ease);
}

/* Signature (home): gold stage-light sweep. A soft warm glow that travels once
   across the stage as the venue dissolves and the handoff rises, reading as house
   lights coming up. script.js sets --lp (0 to 1) + --lx (horizontal travel) from
   pin progress; opacity stays low and the blend is screen so it lifts, never
   smears. Off entirely with no JS (no inline vars => opacity 0) and reduced motion. */
.story-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--lp, 0);
  mix-blend-mode: screen;
  background:
    radial-gradient(48% 42% at var(--lx, 18%) 14%, rgba(216, 184, 100, 0.5) 0%, rgba(201, 162, 75, 0.15) 34%, transparent 58%),
    linear-gradient(100deg, transparent 0%, rgba(201, 162, 75, 0.09) calc(var(--lx, 18%)), transparent calc(var(--lx, 18%) + 20%));
  /* Fade the whole light out before the section edge so it dissolves into the
     next section instead of hard-cutting gold into black. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
  will-change: opacity, background;
}

/* ---------- Entity / story ---------- */
.entity-lead { font-family: var(--serif); font-size: clamp(1.4rem, 3.2vw, 2.2rem); line-height: 1.35; color: var(--ink); max-width: 24ch; font-weight: 400; }
.story-grid { display: grid; gap: clamp(32px, 5vw, 64px); }
.story-grid p { color: var(--ink-dim); font-size: 1.06rem; }
.story-grid h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 1rem; color: var(--ink); }
.story-figure { position: relative; }
.story-figure img { width: 100%; height: auto; border: 1px solid var(--line); filter: grayscale(0.35) contrast(1.04) brightness(0.92); }
.story-figure figcaption { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.7rem; }

/* ---------- Page-intro hero (inner pages) ---------- */
/* Two-column intro so the H1 + lede no longer float over an empty black column.
   On /about the right column carries a portrait that dissolves into the bg. */
.page-intro .intro-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.page-intro .intro-portrait { position: relative; display: none; }
.page-intro .intro-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.45) contrast(1.05) brightness(0.85);
  /* Dissolve the edges into the page (matches the roster/film dissolve look). */
  -webkit-mask-image: radial-gradient(120% 100% at 65% 45%, #000 38%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 65% 45%, #000 38%, transparent 78%);
}
.page-intro .intro-portrait figcaption { position: absolute; left: 0; bottom: 6px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
/* A thin gold rule + one-line dek to lift the lone-H1-over-black tops. */
.hero-rule { width: 56px; height: 2px; background: var(--gold); margin: 0 0 1.4rem; border: 0; }
.hero-dek { color: var(--ink-dim); font-size: 1rem; max-width: 60ch; margin-top: 1.2rem; }
@media (min-width: 760px) {
  .page-intro .intro-grid { grid-template-columns: 1.15fr 0.85fr; }
  .page-intro .intro-portrait { display: block; min-height: 320px; }
}

/* ---------- Row heads (home spoke links) ---------- */
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(28px, 4vw, 44px); }
.row-head .eyebrow { margin: 0; }
.row-link { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; transition: color 0.3s var(--ease); }
.row-link:hover { color: var(--gold); }

/* ---------- Home poster row (film teaser) ---------- */
.poster-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.poster { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); aspect-ratio: 3 / 4; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); }
.poster img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.05) brightness(0.7); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.poster:hover img, .poster:focus-within img { transform: scale(1.05); filter: grayscale(0.1) brightness(0.82); }
.poster:hover, .poster:focus-within { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 16px 40px -18px rgba(201, 162, 75, 0.45); }
.poster-meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.3rem; background: linear-gradient(0deg, rgba(7,7,8,0.92) 0%, rgba(7,7,8,0.3) 70%, transparent 100%); }
.poster-meta .yr { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.4rem; }
.poster-meta h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: #fff; }

/* ---------- Recognition strip (home one-liner) ---------- */
.recog-line { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }
.recog-line li { font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.5rem); color: var(--ink); font-weight: 400; position: relative; padding-right: 1.4rem; }
.recog-line li::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dim); opacity: 0.7; }
.recog-line li:last-child { padding-right: 0; }
.recog-line li:last-child::after { display: none; }
.recog-line li b { color: var(--gold); font-weight: 500; font-style: italic; }

/* ---------- The Artists: vertical scaling wall (signature move) ---------- */
.wall { position: relative; padding: clamp(64px, 12vh, 180px) 0 clamp(64px, 12vh, 160px); overflow: clip; }
/* Sticky mix-blend section title that inverts over the tiles as they pass. */
.wall-title {
  position: sticky;
  top: 50%;
  z-index: 4;
  height: 0;
  pointer-events: none;
  text-align: center;
}
.wall-title span {
  display: inline-block;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 13vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  mix-blend-mode: exclusion;
}
.wall-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 3vw, 36px) clamp(12px, 4vw, 48px);
  max-width: 980px;
  margin: 0 auto;
  padding: 0 4px;
}
.wall-cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
}
/* Scatter the tiles vertically so they cross center at different times. */
.wall-cell:nth-child(2) { margin-top: clamp(40px, 14vh, 160px); }
.wall-cell:nth-child(3) { margin-top: clamp(-24px, -6vh, -10px); }
.wall-cell:nth-child(4) { margin-top: clamp(56px, 18vh, 200px); }
.wall-cell:nth-child(5) { margin-top: clamp(20px, 6vh, 70px); }
.wall-cell:nth-child(6) { margin-top: clamp(72px, 22vh, 240px); }
.wall-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.08) brightness(0.78);
  transform-origin: center;
  will-change: transform;
}
/* JS-on only: tiles start collapsed and scale up as they cross center. With JS
   off (no .reveal-ready) the tile rests at its natural scale and is visible. */
.reveal-ready .wall-cell img { transform: scale(0.001); }
.wall-cell figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(7,7,8,0.9) 0%, rgba(7,7,8,0.2) 80%, transparent 100%);
}
.wall-cell .wc-name { display: block; font-family: var(--serif); font-size: clamp(1rem, 2.2vw, 1.4rem); color: #fff; line-height: 1.05; }
.wall-cell .wc-tag { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 0.35rem; }
.wall-cta { margin-top: clamp(48px, 8vh, 96px); text-align: center; position: relative; z-index: 2; }

/* ---------- Sticky mix-blend title (deep-page media variant) ---------- */
.blendwrap { position: relative; }
.blend-media img { width: 100%; height: clamp(420px, 80vh, 760px); object-fit: cover; filter: grayscale(0.4) contrast(1.05); }
.blend-title { position: sticky; top: 0; height: 0; z-index: 5; pointer-events: none; }
.blend-title span {
  position: absolute;
  top: 50svh; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 12vw, 9rem);
  font-style: italic;
  line-height: 0.95;
  color: #fff;
  mix-blend-mode: exclusion;
  padding: 0 16px;
}

/* ---------- Pull quote (tightened, not a column) ---------- */
.pullquote { text-align: center; max-width: 22ch; margin: 0 auto; padding: clamp(8px, 2vw, 24px) 0; }
.pullquote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 4.2vw, 3rem); line-height: 1.22; color: var(--ink); }
.pullquote .mark { color: var(--gold); font-size: 1.3em; line-height: 0; }
.pullquote cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.pullquote cite b { color: var(--gold); font-weight: 600; }

/* ---------- Discography cascade (about: the career as albums) ---------- */
/* Each milestone is a record (a sleeve with a vinyl) in a centered column. As you
   scroll vertically, script.js drifts each card on its own DIAGONAL path: it rises
   in from the lower right, passes dead-center (centered + brightest + readable),
   then exits upper left and dims. Every record, first and last, gets centered once,
   so nothing is missed at the edges the way a purely horizontal row did. This
   replaces the old vertical spine + needle; the record motif lives in the vinyl. */
.discography-wrap { position: relative; }
.shelf-hint { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.9rem; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.shelf-hint svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.discography { padding: clamp(8px, 2vw, 24px) 0; }
.discography-track {
  display: grid;
  gap: clamp(22px, 5vw, 52px);
  max-width: 540px;
  margin: 0 auto;
}
/* Each record is a compact row (sleeve + liner notes). JS drives transform +
   opacity per frame, so no .reveal transition here (it would lag the scrub). */
.album {
  display: grid;
  grid-template-columns: clamp(104px, 27vw, 148px) 1fr;
  gap: clamp(18px, 4vw, 30px);
  align-items: center;
  will-change: transform, opacity;
}

.album-sleeve {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(125% 120% at 16% 10%, rgba(201, 162, 75, 0.18), transparent 54%),
    linear-gradient(155deg, var(--bg-3), var(--bg-2));
  transition: border-color 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.album:hover .album-sleeve,
.album:focus-within .album-sleeve {
  border-color: var(--line-strong);
  box-shadow: 0 18px 44px -22px rgba(201, 162, 75, 0.5);
}
/* The vinyl nested behind the sleeve, edge peeking out the right; slides + spins
   out as the album lifts. Clipped by the sleeve's overflow at rest. */
.album-disc {
  position: absolute;
  top: 50%; right: 8%;
  width: 76%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(20%, -50%);
  background: radial-gradient(circle at center, #15131600 0 12%, #0c0b0c 12% 15%, #1b181d 15% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 26px rgba(0, 0, 0, 0.7);
  transition: transform 0.6s var(--ease);
}
.album-disc::before { /* grooves */
  content: "";
  position: absolute; inset: 7%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, rgba(244, 241, 234, 0.05) 0 1px, transparent 1px 5px);
}
.album-disc::after { /* center label */
  content: "";
  position: absolute; inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--gold-soft), var(--gold-dim));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.25);
}
.album:hover .album-disc,
.album:focus-within .album-disc { transform: translate(48%, -50%) rotate(16deg); }

.album-sleeve .album-no {
  position: absolute; left: 12px; top: 8px; z-index: 2;
  font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--gold);
}
.album-sleeve .album-cat,
.album-sleeve .album-rpm {
  position: absolute; bottom: 9px; z-index: 2;
  font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.album-sleeve .album-cat { left: 12px; }
.album-sleeve .album-rpm { right: 11px; }

.album-meta .yr { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3.4vw, 1.7rem); color: var(--gold); line-height: 1; display: block; margin-bottom: 0.4rem; }
.album-meta h3 { font-size: clamp(1.05rem, 2.4vw, 1.22rem); margin-bottom: 0.4rem; }
.album-meta p { color: var(--ink-dim); margin: 0; font-size: 0.92rem; line-height: 1.55; }

/* Signature (roster): a small static gold equalizer accent on the section heading,
   the player's own vocabulary (3 to 5 bars). It animates once on enter then rests
   flat. Static fallback / reduced motion = bars sit at a calm fixed height. */
.eq-head { display: inline-flex; align-items: baseline; gap: 0.7rem; }
.eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 0.7em; transform: translateY(-0.04em); }
.eq i { display: block; width: 3px; height: 35%; background: var(--gold-dim); border-radius: 1px; transform-origin: bottom; }
/* Plays once when the heading reveals, then holds at rest (forwards). */
.eq-head.in .eq i { animation: eq-bar 0.9s var(--ease) forwards; background: var(--gold); }
.eq-head.in .eq i:nth-child(1) { animation-delay: 0.05s; }
.eq-head.in .eq i:nth-child(2) { animation-delay: 0.17s; }
.eq-head.in .eq i:nth-child(3) { animation-delay: 0.10s; }
.eq-head.in .eq i:nth-child(4) { animation-delay: 0.24s; }
.eq-head.in .eq i:nth-child(5) { animation-delay: 0.14s; }
@keyframes eq-bar {
  0% { height: 18%; }
  45% { height: 100%; }
  100% { height: 55%; }
}

/* Beat-staggered "tracks dropping" entrance. A controlled, slightly springy curve
   (overshoots once, settles) layered on the existing .reveal so the flagship and
   grid tiles land on a rhythm rather than a uniform fade. Delays are rhythmic.
   Hidden states stay gated behind .reveal-ready; reduced motion drops it (below). */
.beat-stagger .reveal { transition: opacity 0.6s var(--ease), transform 0.62s cubic-bezier(0.34, 1.4, 0.5, 1); }
.beat-stagger .reveal[data-delay="1"] { transition-delay: 0.10s; }
.beat-stagger .reveal[data-delay="2"] { transition-delay: 0.20s; }
.flagship.reveal { transition: opacity 0.7s var(--ease), transform 0.7s cubic-bezier(0.34, 1.32, 0.52, 1); }

/* ---------- Roster grid (editorial / broken) ---------- */
.roster-grid { display: grid; grid-template-columns: 1fr; gap: 14px; grid-auto-flow: dense; }
.artist {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.artist img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.06) brightness(0.8); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.artist:hover img, .artist:focus-within img { transform: scale(1.04); filter: grayscale(0.2) brightness(0.9); }
.artist:hover, .artist:focus-within { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 16px 40px -18px rgba(201, 162, 75, 0.45); }
.artist-meta { position: absolute; inset: auto 0 0 0; padding: 1.2rem 1.3rem; background: linear-gradient(0deg, rgba(7,7,8,0.92) 0%, rgba(7,7,8,0.5) 55%, transparent 100%); z-index: 2; }
.artist-meta .role { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); display: block; margin-bottom: 0.35rem; }
.artist-meta h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: #fff; }
.artist-meta .note { font-size: 0.86rem; color: var(--ink-dim); margin-top: 0.5rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin 0.4s var(--ease); }
.artist:hover .note, .artist:focus-within .note { max-height: 7rem; opacity: 1; }
.artist::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--gold); z-index: 3; transition: width 0.6s var(--ease); }
.artist:hover::before, .artist:focus-within::before { width: 100%; }
.artist.is-flag { aspect-ratio: 16 / 10; }
/* broken-grid size variations */
.artist.is-tall { aspect-ratio: 3 / 4; }
.artist.is-wide { aspect-ratio: 16 / 10; }

/* Flagship Hip hero block on /roster */
.flagship {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(340px, 56vh, 560px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.flagship img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.45) contrast(1.05) brightness(0.62); }
.flagship .flag-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,8,0.94) 0%, rgba(7,7,8,0.4) 55%, rgba(7,7,8,0.2) 100%); }
.flagship .flag-body { position: relative; z-index: 2; padding: clamp(28px, 5vw, 56px); max-width: 64ch; }
.flagship .role { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); display: block; margin-bottom: 0.8rem; }
.flagship h2 { font-size: clamp(2.2rem, 7vw, 4.6rem); color: #fff; line-height: 0.96; margin-bottom: 1rem; }
.flagship p { color: var(--ink-dim); font-size: 1.02rem; max-width: 56ch; }

.roster-cat { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); margin: clamp(48px, 7vw, 80px) 0 1.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }

/* ---------- Film gallery (A24-style posters) ---------- */
.film-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); }
.film {
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.film img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.05) brightness(0.72); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.film:hover img, .film:focus-within img { transform: scale(1.05); filter: none; }
.film:hover, .film:focus-within { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 16px 40px -18px rgba(201, 162, 75, 0.45); }
.film-meta { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; background: linear-gradient(0deg, rgba(7,7,8,0.94) 0%, rgba(7,7,8,0.3) 55%, rgba(7,7,8,0.22) 100%); z-index: 2; }
.film-meta .yr { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.film-meta h3 { font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; margin: 0.5rem 0 0.4rem; }
.film-meta .role { font-size: 0.82rem; color: var(--ink-dim); }
.film-meta .accolade { font-size: 0.86rem; color: var(--gold-soft); margin-top: 0.9rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin 0.4s var(--ease); }
.film:hover .accolade, .film:focus-within .accolade { max-height: 8rem; opacity: 1; }

/* Signature (film): "now showing". On enter a thin gold scanline wipes down each
   poster once, like a projector frame settling into place, staggered by the
   existing reveal delays. Pure CSS keyed off .film.in; off under reduced motion. */
.film::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 50%, transparent);
  box-shadow: 0 0 12px 1px rgba(216, 184, 100, 0.55);
}
.film.in::after { animation: frame-wipe 0.9s var(--ease) 0.15s forwards; }
@keyframes frame-wipe {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(min(58vh, 520px)); opacity: 0; }
}

/* ---------- Recognition rows (editorial) ---------- */
.rec-rows { display: grid; max-width: 920px; }
.rec-row { position: relative; display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: clamp(20px, 4vw, 48px); align-items: baseline; padding: clamp(22px, 3.4vw, 36px) 0; border-top: 1px solid var(--line); }
/* Signature (recognition): "spotlight". On enter a soft gold radial glow sweeps
   across the row once, left to right, then leaves the gold year/marker lit. Pure
   CSS keyed off .rec-row.in; the glow sits behind the text and is off under
   reduced motion. */
.rec-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(40% 120% at 0% 50%, rgba(201, 162, 75, 0.22), transparent 60%);
}
.rec-row > * { position: relative; z-index: 1; }
.rec-row.in::before { animation: spotlight-sweep 1.4s var(--ease) 0.1s forwards; }
@keyframes spotlight-sweep {
  0% { opacity: 0; transform: translateX(-30%); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(110%); }
}
.rec-row:last-child { border-bottom: 1px solid var(--line); }
.rec-row h3 { font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: var(--ink); }
.rec-row p { color: var(--ink-dim); margin: 0.4rem 0 0; font-size: 0.96rem; max-width: 58ch; }
.rec-row .yr { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 4.4vw, 2.8rem); color: var(--gold-dim); line-height: 1; }
.rec-row.is-highlight h3 { color: #fff; }

.member-group { margin-top: 1.4rem; }
.member-list { display: grid; grid-template-columns: 1fr; gap: 0.2rem; margin: 0; padding: 0; }
.member-list li { list-style: none; padding: 0.8rem 0; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 0.96rem; display: flex; justify-content: space-between; gap: 1rem; }
.member-list li b { color: var(--ink); font-weight: 500; }

/* ---------- Giving back / Unison ---------- */
.giving-quote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 4vw, 2.6rem); line-height: 1.25; color: var(--ink); max-width: 22ch; }
.giving-quote .mark { color: var(--gold); }
.unison-stats { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.unison-stats .u { padding: 1.6rem 0 0.4rem; }
.unison-stats .u .num { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); color: var(--gold-dim); line-height: 1; display: block; }
.unison-stats .u .lbl { font-size: 0.82rem; color: var(--ink-dim); margin-top: 0.6rem; display: block; max-width: 32ch; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); margin-bottom: 1rem; }
.cta-band .eyebrow { margin-bottom: 1.2rem; }
.cta-band p { color: var(--ink-dim); max-width: 52ch; margin: 0 auto 2rem; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- Contact ---------- */
.contact-hero { position: relative; min-height: clamp(54vh, 60vh, 70vh); display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); }
.contact-hero .c-bg { position: absolute; inset: 0; background-image: url("/clients/bernie-breen/assets/stage-spotlight.jpg"); background-size: cover; background-position: center; filter: grayscale(0.4) brightness(0.5); }
.contact-hero .c-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,8,0.7) 0%, rgba(7,7,8,0.35) 40%, rgba(7,7,8,0.92) 100%); }
.contact-hero .wrap { position: relative; z-index: 2; padding-top: 140px; padding-bottom: clamp(40px, 7vh, 80px); }
.contact-hero h1 { font-size: clamp(2.6rem, 9vw, 6rem); line-height: 0.94; }
.contact-hero h1 em { font-style: italic; color: var(--gold); }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px); }

/* Signature (contact): "soundcheck". A thin gold waveform under the heading draws
   in once on reveal, then the form fields rise in a quick rhythmic stagger. The
   waveform is an inline SVG sized via clip-path so it appears to be drawn left to
   right. Off / static under reduced motion + no JS (fully drawn, no motion). */
.wave-head { display: block; }
.wave-rule {
  display: block;
  width: clamp(120px, 22vw, 200px);
  height: 14px;
  margin-top: 0.7rem;
  background: var(--gold);
  /* A gentle waveform silhouette masked over the gold bar. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'%3E%3Cpath d='M0 7 Q5 7 8 4 T16 7 T24 2 T32 7 T40 5 T48 7 T56 1 T64 7 T72 4 T80 7 T88 3 T96 7 T104 5 T112 7 T120 2 T128 7 T136 5 T144 7 T152 3 T160 7 T168 5 T176 7 T184 4 T192 7 T200 7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") left center / auto 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'%3E%3Cpath d='M0 7 Q5 7 8 4 T16 7 T24 2 T32 7 T40 5 T48 7 T56 1 T64 7 T72 4 T80 7 T88 3 T96 7 T104 5 T112 7 T120 2 T128 7 T136 5 T144 7 T152 3 T160 7 T168 5 T176 7 T184 4 T192 7 T200 7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") left center / auto 100% repeat-x;
  clip-path: inset(0 100% 0 0);
}
.soundcheck.in .wave-rule { animation: wave-draw 0.95s var(--ease) 0.15s forwards; }
@keyframes wave-draw {
  0% { clip-path: inset(0 100% 0 0); opacity: 0.5; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
/* Fields rise in a quick rhythmic stagger once the column reveals. */
.soundcheck.in .form > * {
  animation: field-rise 0.55s var(--ease) both;
}
.soundcheck.in .form > *:nth-child(1) { animation-delay: 0.10s; }
.soundcheck.in .form > *:nth-child(2) { animation-delay: 0.18s; }
.soundcheck.in .form > *:nth-child(3) { animation-delay: 0.26s; }
.soundcheck.in .form > *:nth-child(4) { animation-delay: 0.34s; }
.soundcheck.in .form > *:nth-child(5) { animation-delay: 0.42s; }
.soundcheck.in .form > *:nth-child(6) { animation-delay: 0.50s; }
@keyframes field-rise {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
.form { display: grid; gap: 0.9rem; }
.form label { font-family: var(--serif); font-size: 0.92rem; color: var(--ink-dim); display: block; margin-bottom: 0.4rem; }
.field {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s var(--ease);
  scroll-margin-bottom: calc(var(--nowbar-h) + 0.5rem);
}
.field::placeholder { color: var(--ink-faint); }
.field:hover:not(.field--error):not(:focus) { border-color: var(--line-strong); }
.field:focus { outline: none; border-color: var(--gold); }
.field--error { border-color: #c5503e; background: rgba(197, 80, 62, 0.06); }
.field--error:focus { border-color: #d9745f; }
.field-err { display: block; margin-top: 0.4rem; font-size: 0.78rem; letter-spacing: 0.01em; color: #d9745f; }
.field-err:empty { display: none; }
/* Custom inquiry select (JS). Native select stays for no-JS; OS popup is never shown when enhanced. */
.field-select { position: relative; }
.form > div:has(.field-select.is-open) {
  position: relative;
  z-index: 2;
}
.field-select__trigger,
.field-select__list { display: none; }
.field-select[data-enhanced="1"] .field-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.field-select[data-enhanced="1"] .field-select__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23c9a24b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}
.field-select__value.is-placeholder { color: var(--ink-faint); }
.field-select.is-open .field-select__trigger { border-color: var(--gold); }
.field-select:has(.field-select__native.field--error) .field-select__trigger {
  border-color: #c5503e;
  background-color: rgba(197, 80, 62, 0.06);
}
.field-select__list {
  position: absolute;
  z-index: 24;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.75);
  max-height: min(240px, 50svh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Floated to body on open so sibling fields / transforms never clip the menu. */
.field-select__list.is-floating {
  position: fixed;
  z-index: 70;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  display: block;
}
.field-select[data-enhanced="1"] .field-select__list:not([hidden]):not(.is-floating) { display: block; }
.field-select__option {
  padding: 0.78rem 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.field-select__option:hover,
.field-select__option:focus-visible,
.field-select__option.is-active {
  background: rgba(201, 162, 75, 0.14);
  color: var(--gold-soft);
  outline: none;
}
.field-select__option.is-selected { color: var(--gold); }
/* No-JS / pre-enhance fallback for the native select. */
select.field {
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--gold);
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23c9a24b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}
textarea.field { resize: vertical; min-height: 130px; }
.form .btn { justify-self: start; margin-top: 0.4rem; scroll-margin-bottom: calc(var(--nowbar-h) + 1rem); }

.info-card h3 { font-size: 1.4rem; margin-bottom: 1.4rem; }
.info-row { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.info-row:last-child { border-bottom: 1px solid var(--line); }
.info-row .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); }
.info-row a, .info-row span { color: var(--ink); font-size: 0.98rem; word-break: break-word; }
.info-row a:hover { color: var(--gold); }
.form-note { font-size: 0.84rem; color: var(--ink-faint); margin-top: 0.6rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); padding: 0.4rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.2rem 2.4rem 1.2rem 0; position: relative; font-family: var(--serif); font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 1.5rem; transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .ans { color: var(--ink-dim); padding: 0 0 1.3rem; font-size: 1rem; max-width: 68ch; }
.faq .ans a { color: var(--gold); }

/* ---------- Footer ---------- */
.footer { background: #070708; border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 96px) 0 2.4rem; }
.footer .cols { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); }
.footer .brand, .footer .wordmark { margin-bottom: 1rem; }
.footer p { color: var(--ink-dim); font-size: 0.95rem; max-width: 36ch; }
.footer h4 { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); margin-bottom: 1.1rem; font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer ul a, .footer ul span { color: var(--ink-dim); font-size: 0.95rem; }
/* Comfortable tap area (~44px tall): pad the link, pull the box back with
   negative margins so the 0.6rem list rhythm is unchanged visually. */
.footer ul a { display: inline-block; padding-block: 0.8rem; margin-block: -0.8rem; }
.footer ul a:hover { color: var(--gold); }
.footer .legal { margin-top: clamp(40px, 6vw, 64px); padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; color: var(--ink-faint); font-size: 0.82rem; }
.footer .legal a { color: var(--ink-faint); }
.footer .legal a:hover { color: var(--gold); }

/* ---------- Sticky "Now managing" PLAYER (signature) ----------
   A real player frame: album-art | track-meta | wave + CTA, driven by the
   homepage artist-wall observer. Fully decorative (no audio) and entirely inside
   an aria-hidden aside with NO focusable controls (play/pause is a non-focusable
   span, the CTA is a round link that stays a real link, see markup). */
.nowbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 58;
  height: var(--nowbar-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.2rem);
  padding: 0 clamp(14px, 3vw, 22px);
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, rgba(18, 16, 20, 0.92), rgba(10, 9, 11, 0.96));
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
/* Faint gold radial glow along the top edge. */
.nowbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 140% at 18% 0%, rgba(201, 162, 75, 0.16), transparent 60%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nowbar { background: linear-gradient(180deg, #16141a, #0a090b); }
}
/* 2px gold progress hairline pinned to the top edge. */
.nowbar-progress {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 8px rgba(201, 162, 75, 0.5);
  transition: width 0.6s var(--ease);
  z-index: 2;
}

/* Album art = a thumbnail that swaps to the centered wall tile. */
.nowbar-art {
  position: relative;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  z-index: 1;
}
.nowbar-art img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.06) brightness(0.85); transition: opacity 0.4s var(--ease); }
.nowbar-art.swap img { opacity: 0; }
/* Play/pause glyph overlay (decorative span, never focusable). */
.nowbar-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 9, 11, 0.32);
}
.nowbar-play::before {
  content: "";
  width: 0; height: 0;
  /* Default = paused glyph (a triangle). */
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--gold-soft);
  margin-left: 2px;
}
.nowbar.is-playing .nowbar-play::before {
  /* Playing glyph = two bars. */
  width: 10px; height: 12px;
  border: 0;
  margin-left: 0;
  background:
    linear-gradient(var(--gold-soft), var(--gold-soft)) left / 3px 100% no-repeat,
    linear-gradient(var(--gold-soft), var(--gold-soft)) right / 3px 100% no-repeat;
}

/* Track stack: gold eyebrow + serif title + subtitle. */
.nowbar-track { min-width: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.nowbar-track .np-eyebrow { font-family: var(--sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.nowbar-track .np-title { font-family: var(--serif); font-size: 0.98rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.4s var(--ease); }
.nowbar-track .np-sub { font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.4s var(--ease); }
.nowbar-track.swap .np-title, .nowbar-track.swap .np-sub { opacity: 0; }
/* The wordmark line replaced by the track meta on the homepage; the legacy
   data-default text lives in .np-title via JS. */

/* Wave + CTA zone. */
.nowbar-end { display: inline-flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.1rem); justify-self: end; z-index: 1; }

/* Refined 12-bar waveform (decorative, no audio). */
.nowbar-wave { display: none; align-items: flex-end; gap: 2px; height: 26px; flex: none; }
.nowbar-wave i { display: block; width: 2.5px; height: 30%; background: var(--gold); opacity: 0.85; transform-origin: bottom; border-radius: 1px; }
.nowbar.is-playing .nowbar-wave i { animation: wave 1.3s var(--ease) infinite; }
.nowbar-wave i:nth-child(1) { animation-delay: -0.05s; }
.nowbar-wave i:nth-child(2) { animation-delay: -0.45s; }
.nowbar-wave i:nth-child(3) { animation-delay: -0.2s; }
.nowbar-wave i:nth-child(4) { animation-delay: -0.7s; }
.nowbar-wave i:nth-child(5) { animation-delay: -0.3s; }
.nowbar-wave i:nth-child(6) { animation-delay: -0.9s; }
.nowbar-wave i:nth-child(7) { animation-delay: -0.15s; }
.nowbar-wave i:nth-child(8) { animation-delay: -0.6s; }
.nowbar-wave i:nth-child(9) { animation-delay: -0.35s; }
.nowbar-wave i:nth-child(10) { animation-delay: -0.8s; }
.nowbar-wave i:nth-child(11) { animation-delay: -0.1s; }
.nowbar-wave i:nth-child(12) { animation-delay: -0.5s; }
@keyframes wave {
  0%, 100% { height: 22%; }
  50% { height: 100%; }
}

/* CTA: full text on desktop, round 44px gold icon on mobile. */
.nowbar-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  flex: none;
  transition: color 0.3s var(--ease);
}
.nowbar-cta .cta-text { display: inline; }
.nowbar-cta .cta-icon { display: none; }
.nowbar-cta:hover { color: var(--gold-soft); }
.nowbar-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 18px; bottom: calc(var(--nowbar-h) + 18px);
  z-index: 55;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  background: rgba(11,11,12,0.85);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease), border-color 0.3s var(--ease);
  backdrop-filter: blur(6px);
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { border-color: var(--gold); color: var(--gold); }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Responsive ---------- */
/* Mobile player (<=560px): 64px tall, drop the wordmark line, keep art + the
   two-line track stack (artist name fully readable), a smaller 8-bar wave, and a
   round 44px gold icon CTA (minimum comfortable tap target). */
@media (max-width: 560px) {
  :root { --nowbar-h: 64px; }
  .nowbar-track .np-sub { display: none; }
  .nowbar-wave { display: flex; height: 20px; }
  /* Smaller 8-bar wave: hide the last four bars. */
  .nowbar-wave i:nth-child(n + 9) { display: none; }
  .nowbar-cta {
    width: 44px; height: 44px;
    border-radius: 50%;
    justify-content: center;
    background: var(--gold);
    color: #160f02;
  }
  .nowbar-cta:hover { background: var(--gold-soft); color: #160f02; }
  .nowbar-cta .cta-text { display: none; }
  .nowbar-cta .cta-icon { display: inline-flex; }
  .nowbar-cta .cta-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

@media (min-width: 600px) {
  .nowbar-wave { display: flex; }
}

@media (min-width: 760px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .story-grid.cols-2 { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
  .artist.is-flag { grid-column: span 2; }
  .artist.is-wide { grid-column: span 2; }
  .poster-row { grid-template-columns: repeat(3, 1fr); }
  .film-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1.05fr 0.95fr; }
  .unison-stats { grid-template-columns: repeat(3, 1fr); }
  .member-list { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .scroll-hint { display: block; }
  .wall-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px) clamp(24px, 5vw, 64px); }
  .roster-grid { grid-template-columns: repeat(3, 1fr); }
  .artist.is-flag { grid-column: span 2; aspect-ratio: 16 / 9; }
  .artist.is-tall { grid-row: span 2; aspect-ratio: 3 / 4; }
}

/* Reset wall scatter offsets at 3-col so the stagger reads diagonally, not lopsided */
@media (min-width: 900px) {
  .wall-cell:nth-child(1) { margin-top: clamp(30px, 9vh, 120px); }
  .wall-cell:nth-child(2) { margin-top: 0; }
  .wall-cell:nth-child(3) { margin-top: clamp(48px, 16vh, 200px); }
  .wall-cell:nth-child(4) { margin-top: clamp(72px, 22vh, 280px); }
  .wall-cell:nth-child(5) { margin-top: clamp(16px, 5vh, 60px); }
  .wall-cell:nth-child(6) { margin-top: clamp(96px, 30vh, 360px); }
}

/* Hero parallax only on capable, larger pointers */
@media (max-width: 899px), (pointer: coarse) {
  .hero-bg { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal-ready .reveal[data-dir] { transform: none; }
  .rule-wipe::before { width: clamp(48px, 8vw, 96px); transition: none; }
  .parallax { transform: none !important; }
  .hero-bg { transform: none !important; transition: none !important; }
  /* The pinned moment never pins under reduced motion: JS skips .pin-on and the
     static stacked fallback shows every layer. Belt-and-braces here too. */
  .story-pin { height: auto !important; }
  .story-pin .story-stage { position: static !important; height: auto !important; }
  .story-pin .story-bg { transform: none !important; filter: grayscale(0.4) brightness(0.5) !important; opacity: 1 !important; }
  .story-statement .sl, .story-handoff { transform: none !important; opacity: 1 !important; }
  /* Wall tiles rest fully shown, no scroll scaling */
  .wall-cell img { transform: none !important; transition: none !important; }
  .artist img, .film img, .poster img, .teaser img { transition: none; }
  /* Signature motifs park: motifs off, content visible + still. */
  .story-lights { opacity: 0 !important; }
  .album-sleeve, .album-disc { transition: none !important; }
  .eq-head.in .eq i { animation: none !important; height: 50%; background: var(--gold-dim); }
  .film::after { animation: none !important; opacity: 0 !important; }
  .rec-row::before { animation: none !important; opacity: 0 !important; }
  .soundcheck.in .wave-rule { animation: none !important; clip-path: inset(0 0 0 0); opacity: 1; }
  .soundcheck.in .form > * { animation: none !important; opacity: 1; transform: none; }
  /* Player parks: no wave animation, glyph stays paused (JS omits .is-playing). */
  .nowbar-wave i { animation: none !important; height: 45%; }
  .nowbar-art img, .nowbar-track .np-title, .nowbar-track .np-sub { transition: none; }
  .nowbar-progress { transition: none; }
  * { scroll-behavior: auto !important; }
}