/* ==========================================================================
   ECHORA — Musician & Band Template
   Main stylesheet

   Do not edit this file directly. It is compiled from the SCSS source:
     node build-css.js       (or: npx sass scss/main.scss assets/css/main.css)

   A minified copy for production sits beside it as main.min.css.

   --------------------------------------------------------------------
   TABLE OF CONTENTS
   --------------------------------------------------------------------

   1. ABSTRACTS
       1.1 mixins                Breakpoint map plus the shared below()/above() and helper mixins.
       1.2 tokens                All design decisions live here as CSS custom properties.

   2. BASE
       2.1 reset                 Modern baseline: border-box, margin zeroing, media and form…
       2.2 typography            Unbounded (display) · Instrument Serif (editorial accent) · Inter…
       2.3 utilities             Reusable primitives. Bootstrap 5.3 grid supplies layout columns;…
       2.4 animations            GSAP owns the motion; CSS only declares pre-reveal states so…

   3. LAYOUT
       3.1 header                Slim fixed bar. Transparent over heroes, glass once scrolled,…
       3.2 nav-overlay           Clip-path curtain, oversized display links with per-line mask…
       3.3 preloader             Wordmark rise + counter, then a two-panel curtain wipe. Also…
       3.4 footer                Variant 1 (default): mega footer with ghost wordmark + newsletter.
       3.5 page-caption          Shared hero for every inner page: display title with a ghost…

   4. COMPONENTS
       4.1 buttons               `.btn` is the base. Magnetic behaviour is opt-in via…
       4.2 forms                 Underline-only fields with floating labels and an accent focus…
       4.3 cards                 Generic card shell + the shared "editorial media card" used by…
       4.4 music-player          AmplitudeJS binds by class name, so every `amplitude-*` hook is…
       4.5 bottom-player         Docked glass bar with a hairline progress rule along its top edge.
       4.6 lightbox              Custom vanilla replacement for Magnific Popup. Handles images and
       4.7 swiper                Overrides Swiper's defaults with the template's tokens plus the…
       4.8 cursor                Desktop-only dot + trailing ring that swells and picks up a label…
       4.9 tabs-filter           Underline tab rail (events months, product tabs) and the pill…
       4.10 video-player         Native <video> in a cinematic frame with a custom overlay, plus…

   5. SECTIONS
       5.1 hero                  Shared scaffolding for all eight home-page heroes. Each variant…
       5.2 hero-1                Split editorial: oversized stacked headline on the left, a tall…
       5.3 gigs                  Editorial ledger rows: oversized date block, venue, time, ticket…
       5.4 video-section         The featured "video clip" block on home pages and the…
       5.5 hero-variants         Each demo gets a distinct composition on the shared `.hero`…
       5.6 discography           Four variants share one album card; each gets its own composition.
       5.7 members               v1 portrait slider, grayscale to colour (demo-2 / demo-8)
       5.8 testimonials          Oversized serif italic quote with a ghost quotation mark behind…
       5.9 news                  Uses the shared `.media-card` shell with editorial dates and…
       5.10 gallery              CSS masonry with a lightbox trigger overlay. Two visual variants…
       5.11 store                Product tiles with a hover image swap and a slide-up cart action.

   6. PAGES
       6.1 pages                 Contact, single-album, single-event, typography and the shared…
       6.2 extra-a               Extra rules needed by this group of pages. Keep…
       6.3 extra-b               Extra rules needed by this group of pages. Keep…
       6.4 extra-c               Extra rules needed by this group of pages. Keep…
       6.5 extra-d               Extra rules needed by this group of pages. Keep…
       6.6 extra-e               Extra rules needed by this group of pages. Keep…
       6.7 extra-f               Extra rules needed by this group of pages. Keep…

   ========================================================================== */
@charset "UTF-8";
/* ==========================================================================
   ECHORA — Musician & Band Template
   Main stylesheet entry point.

   Compile:
     npx sass scss/main.scss assets/css/main.css --style=compressed --no-source-map

   Layer order matters: abstracts define tokens/mixins, base sets the
   groundwork, layout builds the page shell, components are reusable UI,
   sections style page blocks, pages hold one-off page rules.
   ========================================================================== */
/* 1. ABSTRACTS — tokens, mixins, functions (no CSS output except :root) */
/* ==========================================================================
   ECHORA — MIXINS & BREAKPOINTS (desktop-first)
   Breakpoint map plus the shared below()/above() and helper mixins.
   ========================================================================== */
/* --------------------------------------------------------------------------
   THEME TOKENS
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   SURFACES
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   INTERACTION
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
/* ==========================================================================
   ECHORA — DESIGN TOKENS
   All design decisions live here as CSS custom properties.
   ========================================================================== */
:root {
  /* ---------------------------------------------------------------
     SURFACES — dark-first ramp with a subtle violet cast
     --------------------------------------------------------------- */
  --bg-0: #0a0a0f;
  --bg-1: #101018;
  --bg-2: #16161f;
  --bg-3: #1e1e2a;
  --bg-inverse: #f4f2ed;
  /* ---------------------------------------------------------------
     INK — warm off-white for an editorial, non-clinical feel
     --------------------------------------------------------------- */
  --ink-rgb: 244, 242, 237;
  --ink-100: rgb(var(--ink-rgb));
  --ink-70: rgba(var(--ink-rgb), 0.7);
  --ink-60: rgba(var(--ink-rgb), 0.62);
  --ink-40: rgba(var(--ink-rgb), 0.42);
  --ink-30: rgba(var(--ink-rgb), 0.32);
  --ink-15: rgba(var(--ink-rgb), 0.15);
  --ink-inverse: #0a0a0f;
  --line: rgba(var(--ink-rgb), 0.1);
  --line-strong: rgba(var(--ink-rgb), 0.18);
  /* ---------------------------------------------------------------
     ACCENTS — per-demo themes override --accent / --accent-rgb
     --------------------------------------------------------------- */
  --accent-rgb: 200, 255, 77;
  --accent-ink: #0a0a0f;
  --accent-2-rgb: 139, 124, 246;
  --accent-warm: #e8a54b;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
  /* ---------------------------------------------------------------
     GRADIENTS
     --------------------------------------------------------------- */
  --grad-fade: linear-gradient(180deg, transparent 0%, rgba(10, 10, 15, 0.35) 55%, var(--bg-0) 96%);
  --grad-fade-soft: linear-gradient(180deg, transparent 40%, rgba(10, 10, 15, 0.85) 100%);
  --grad-surface: linear-gradient(160deg, rgba(var(--ink-rgb), 0.06) 0%, rgba(var(--ink-rgb), 0.015) 100%);
  /* ---------------------------------------------------------------
     GLASS
     --------------------------------------------------------------- */
  --glass-bg: rgba(22, 22, 31, 0.55);
  --glass-bg-strong: rgba(10, 10, 15, 0.78);
  --glass-brd: rgba(var(--ink-rgb), 0.08);
  --blur-glass: 20px;
  --blur-heavy: 48px;
  /* ---------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------- */
  --font-display: "Unbounded", "Inter", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(3.25rem, 9vw, 9rem);
  --fs-h1: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-h4: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;
  --lh-tight: 0.92;
  --lh-display: 1;
  --lh-heading: 1.12;
  --lh-body: 1.7;
  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-label: 0.16em;
  /* ---------------------------------------------------------------
     SPACING
     --------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-10: 10rem;
  --space-11: 12.5rem;
  --space-12: 16rem;
  --section-y: clamp(6rem, 10vw, 10rem);
  --section-y-sm: clamp(4rem, 6vw, 6rem);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --container-max: 1560px;
  --container-narrow: 1180px;
  --measure: 68ch;
  /* ---------------------------------------------------------------
     RADIUS & ELEVATION
     --------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.55);
  /* ---------------------------------------------------------------
     MOTION
     --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.35s;
  --dur-2: 0.7s;
  --dur-3: 1.2s;
  /* ---------------------------------------------------------------
     LAYERS
     --------------------------------------------------------------- */
  --z-grain: 9000;
  --z-preloader: 9500;
  --z-cursor: 9600;
  --z-header: 800;
  --z-overlay-menu: 850;
  --z-lightbox: 900;
  --z-bottom-player: 700;
  /* ---------------------------------------------------------------
     COMPONENT METRICS
     --------------------------------------------------------------- */
  --header-h: 92px;
  --bottom-player-h: 84px;
}

/* ==========================================================================
   PER-DEMO ACCENT THEMES
   Applied on <body> so each home variant has its own identity while
   sharing one design system.
   ========================================================================== */
.theme-chartreuse {
  --accent-rgb: 200, 255, 77;
  --accent-ink: #0a0a0f;
  --accent-2-rgb: 139, 124, 246;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

.theme-violet {
  --accent-rgb: 155, 140, 255;
  --accent-ink: #0a0a0f;
  --accent-2-rgb: 236, 110, 173;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

.theme-crimson {
  --accent-rgb: 255, 77, 94;
  --accent-ink: #fff6f6;
  --accent-2-rgb: 255, 145, 92;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

.theme-amber {
  --accent-rgb: 240, 176, 62;
  --accent-ink: #0a0a0f;
  --accent-2-rgb: 231, 106, 74;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

.theme-cyan {
  --accent-rgb: 77, 232, 255;
  --accent-ink: #04121a;
  --accent-2-rgb: 100, 130, 255;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

.theme-magenta {
  --accent-rgb: 255, 92, 199;
  --accent-ink: #16020f;
  --accent-2-rgb: 141, 100, 255;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

.theme-mono {
  --accent-rgb: 244, 242, 237;
  --accent-ink: #0a0a0f;
  --accent-2-rgb: 160, 160, 168;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

.theme-gold {
  --accent-rgb: 226, 186, 118;
  --accent-ink: #14100a;
  --accent-2-rgb: 172, 138, 214;
  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent-2-rgb));
  --grad-hero: linear-gradient(135deg, rgb(var(--accent-2-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  --grad-accent: linear-gradient(120deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  --grad-glow-accent: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  --shadow-glow: 0 30px 80px rgba(var(--accent-rgb), 0.16);
}

/* 2. BASE */
/* ==========================================================================
   ECHORA — RESET
   Modern baseline: border-box, margin zeroing, media and form defaults.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: auto;
}

body {
  background-color: var(--bg-0);
  color: var(--ink-60);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Lenis */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Scroll lock used by overlay menu / lightbox on touch devices */
body.is-locked {
  overflow: hidden;
  touch-action: none;
}

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

img {
  height: auto;
  border: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Native scrollbar — visible only when Lenis is off (mobile / reduced motion) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-0);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--ink-rgb), 0.16);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--ink-rgb), 0.28);
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   ECHORA — TYPOGRAPHY
   Unbounded (display) · Instrument Serif (editorial accent) · Inter (body)
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink-100);
  text-wrap: balance;
}

h1,
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
}

h2,
.h2 {
  font-size: var(--fs-h2);
}

h3,
.h3 {
  font-size: var(--fs-h3);
}

h4,
.h4 {
  font-size: var(--fs-h4);
}

h5,
.h5 {
  font-size: var(--fs-h5);
}

h6,
.h6 {
  font-size: var(--fs-h6);
  letter-spacing: 0;
}

p {
  margin-bottom: var(--space-3);
}
p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 600;
  color: var(--ink-100);
}

small {
  font-size: var(--fs-sm);
}

blockquote {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-100);
  letter-spacing: -0.01em;
}

code,
pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.875em;
}

/* --------------------------------------------------------------------------
   DISPLAY SCALE
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink-100);
  text-transform: uppercase;
}

.display--lower {
  text-transform: none;
}

/* --------------------------------------------------------------------------
   EDITORIAL ACCENT — serif italic words inside display headings
   -------------------------------------------------------------------------- */
.accent-serif,
.display em,
h1 em,
h2 em,
.h1 em,
.h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  /* Serif has a smaller cap-height than Unbounded — nudge for optical match */
  font-size: 1.12em;
  line-height: 0.9;
}

.accent-color {
  color: var(--accent);
}

.accent-gradient {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ghost-text {
  color: rgba(var(--ink-rgb), 0.12);
  filter: url(#echora-outline);
}

/* --------------------------------------------------------------------------
   LABELS / EYEBROWS
   -------------------------------------------------------------------------- */
.label,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.label--accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   BODY VARIANTS
   -------------------------------------------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-70);
}

.text-muted-2 {
  color: var(--ink-40);
}

.measure {
  max-width: var(--measure);
}

/* Numerals: tabular for dates, times, prices, track durations */
.tnum,
.gig-date,
.track-duration,
.price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   RICH TEXT (article bodies, single-news, single-event, typography page)
   -------------------------------------------------------------------------- */
.rich-text {
  color: var(--ink-60);
  font-size: var(--fs-lead);
  line-height: 1.75;
}
.rich-text > * + * {
  margin-top: var(--space-4);
}
.rich-text h2,
.rich-text h3,
.rich-text h4 {
  margin-top: var(--space-6);
  margin-bottom: calc(var(--space-3) * -1 + var(--space-4));
}
.rich-text a:not(.btn) {
  color: var(--ink-100);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-1) var(--ease-out);
}
.rich-text a:not(.btn):hover {
  background-size: 0% 1px;
}
.rich-text ul,
.rich-text ol {
  padding-left: var(--space-4);
}
.rich-text li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}
.rich-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.rich-text ol {
  counter-reset: rt;
}
.rich-text ol li::before {
  counter-increment: rt;
  content: counter(rt, decimal-leading-zero);
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.rich-text blockquote {
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  border-left: 1px solid var(--accent);
  margin-block: var(--space-6);
}
.rich-text img {
  border-radius: var(--radius-md);
}

/* Editorial drop cap for long-form article openers */
.has-dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 4.2em;
  line-height: 0.78;
  padding: 0.08em 0.12em 0 0;
  color: var(--ink-100);
}

/* --------------------------------------------------------------------------
   SPLITTEXT — pre-reveal state, cleared by JS once split
   -------------------------------------------------------------------------- */
[data-split]:not(.is-split-ready) {
  visibility: hidden;
}

.split-line {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  [data-split] {
    visibility: visible !important;
  }
}
/* ==========================================================================
   ECHORA — UTILITIES
   Reusable primitives. Bootstrap 5.3 grid supplies layout columns; these
   cover the template-specific patterns Bootstrap doesn't.
   ========================================================================== */
/* --------------------------------------------------------------------------
   SECTIONS & CONTAINERS
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--top-0 {
  padding-top: 0;
}

.section--bottom-0 {
  padding-bottom: 0;
}

.section--alt {
  background: var(--bg-1);
}

.section--glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background: var(--grad-glow);
  pointer-events: none;
  z-index: 0;
}

.section--glow-accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: var(--grad-glow-accent);
  pointer-events: none;
  z-index: 0;
}

.container-echora {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.container-wide {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   SECTION HEADERS — shared by nearly every section
   -------------------------------------------------------------------------- */
.section-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
@media (max-width: 991px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
}

.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-head__title {
  font-size: var(--fs-h2);
  margin-top: var(--space-3);
  max-width: 16ch;
}
.section-head--center .section-head__title {
  max-width: 22ch;
}

.section-head__text {
  max-width: 42ch;
  color: var(--ink-60);
}

/* Host for the #echora-outline filter that every outlined text refers to.
   Carries no visual weight of its own. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Oversized outlined word sitting behind a section as a texture layer */
.ghost-word {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -38%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 17rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.055);
  filter: url(#echora-outline);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ghost-word--right {
  left: auto;
  right: var(--gutter);
  transform: translateY(-38%);
}

/* --------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--zoom {
  overflow: hidden;
}
.media--zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--dur-3) var(--ease-out);
  will-change: transform;
}
.media--zoom .media--zoom:hover img {
  transform: scale(1.06);
}

.media--fade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-fade-soft);
  pointer-events: none;
}

.ratio-1x1 {
  aspect-ratio: 1;
}

.ratio-4x3 {
  aspect-ratio: 4/3;
}

.ratio-3x4 {
  aspect-ratio: 3/4;
}

.ratio-16x9 {
  aspect-ratio: 16/9;
}

.ratio-21x9 {
  aspect-ratio: 21/9;
}

.ratio-2x3 {
  aspect-ratio: 2/3;
}

/* --------------------------------------------------------------------------
   DECORATIVE LAYERS
   -------------------------------------------------------------------------- */
/* Fixed film-grain overlay — one instance per page, injected in markup */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  background: var(--grad-hero);
}

.hairline {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.divider-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  vertical-align: middle;
}

/* Thin vertical rule column used in editorial layouts */
.rule-v {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   FLEX / GRID HELPERS
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
}

.stack-2 {
  gap: var(--space-2);
}

.stack-3 {
  gap: var(--space-3);
}

.stack-4 {
  gap: var(--space-4);
}

.stack-5 {
  gap: var(--space-5);
}

.stack-6 {
  gap: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster-4 {
  gap: var(--space-4);
}

.cluster-5 {
  gap: var(--space-5);
}

.center-abs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.no-select {
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 991px) {
  .hide-mobile {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}
/* --------------------------------------------------------------------------
   MARQUEE — CSS-driven, JS adds velocity skew on scroll
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* The track holds the content twice and travels exactly half its width, so
   the loop is seamless regardless of content length. */
.marquee__track {
  display: flex;
  align-items: center;
  flex: none;
  animation: marquee-scroll var(--marquee-duration, 32s) linear infinite;
  will-change: transform;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding-right: var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-100);
  white-space: nowrap;
}

.marquee__item--ghost {
  color: rgba(var(--ink-rgb), 0.22);
  filter: url(#echora-outline);
}

.marquee__sep {
  color: var(--accent);
  font-size: 0.6em;
}

@keyframes marquee-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* --------------------------------------------------------------------------
   SPACING & ALIGNMENT OVERRIDES
   Small single-purpose helpers, so one-off tweaks stay out of style attributes.
   -------------------------------------------------------------------------- */
.d-block {
  display: block;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mx-auto {
  margin-inline: auto;
}

.items-center {
  align-items: center;
}

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

/* Spans every column of its grid, whatever the column count */
.col-span-full {
  grid-column: 1/-1;
}

/* ==========================================================================
   ECHORA — ANIMATION BASE STATES
   GSAP owns the motion; CSS only declares pre-reveal states so there is no
   flash of un-animated content before JS runs.
   ========================================================================== */
/* Pre-reveal states are applied only once JS confirms it will animate.
   `.js-anim` is set on <html> by the inline head script, so no-JS visitors
   and reduced-motion users always see fully rendered content. */
.js-anim [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
.js-anim [data-reveal=up] {
  transform: translate3d(0, 42px, 0);
}
.js-anim [data-reveal=down] {
  transform: translate3d(0, -32px, 0);
}
.js-anim [data-reveal=left] {
  transform: translate3d(-42px, 0, 0);
}
.js-anim [data-reveal=right] {
  transform: translate3d(42px, 0, 0);
}
.js-anim [data-reveal=scale] {
  transform: scale(0.94);
}
.js-anim [data-reveal=fade] {
  transform: none;
}
.js-anim {
  /* Image mask reveal — the wrapper clips, the image counter-scales. */
}
.js-anim [data-reveal=mask] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
.js-anim [data-reveal=mask] img,
.js-anim [data-reveal=mask] video,
.js-anim [data-reveal=mask] .media__inner {
  transform: scale(1.18);
  will-change: transform;
}
.js-anim [data-reveal=mask-left] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}
.js-anim {
  /* Elements revealed and then released — GSAP clears the props. */
}
.js-anim [data-reveal].is-revealed {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   PAGE LOAD CURTAIN
   -------------------------------------------------------------------------- */
/* While the preloader runs, prevent scroll and hide overflow. */
html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
}

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes echora-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes echora-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
@keyframes echora-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
}
/* Equalizer bars shown next to the currently playing track */
@keyframes echora-eq {
  0%, 100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}
@keyframes echora-scroll-cue {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
.float-slow {
  animation: echora-float 7s var(--ease-inout) infinite;
}

.float-slower {
  animation: echora-float 11s var(--ease-inout) infinite;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — everything visible, nothing moves
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-anim [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js-anim [data-reveal] img,
  .js-anim [data-reveal] video,
  .js-anim [data-reveal] .media__inner {
    transform: none !important;
  }
  .marquee__track {
    animation: none !important;
  }
}
/* 3. LAYOUT */
/* ==========================================================================
   ECHORA — HEADER
   Slim fixed bar. Transparent over heroes, glass once scrolled, hides on
   scroll-down / returns on scroll-up (driven by Lenis direction in JS).
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), backdrop-filter var(--dur-2) var(--ease-out);
  border-bottom: 1px solid transparent;
  will-change: transform;
}

.site-header__inner {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-h);
}
@media (max-width: 767px) {
  .site-header__inner {
    gap: var(--space-3);
  }
}

/* Scrolled — frosted bar with a hairline */
.site-header.is-scrolled {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border-bottom-color: var(--line);
  --header-h: 76px;
}

/* Hidden while scrolling down */
.site-header.is-hidden {
  transform: translate3d(0, -100%, 0);
}

/* While the fullscreen menu is open the header must sit ABOVE the overlay —
   otherwise the trigger (which doubles as the close button) is unreachable.
   It also stops hiding on scroll and drops its frosted background. */
.site-header.is-menu-open {
  z-index: calc(var(--z-overlay-menu) + 1);
  transform: none !important;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  /* The overlay already lists every link — strip the bar back to
     logo + close so the two navigations don't compete. */
}
.site-header.is-menu-open .nav,
.site-header.is-menu-open .cart-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-out), visibility var(--dur-1);
}

/* ==========================================================================
   HEADER VARIANTS
   Four layouts share one nav model. Swap the modifier on <header> — the
   markup differs only in where the nav sits.
     (default)              logo left · nav centre · actions right
     --center               nav split either side of a centred logo
     --float                detached glass pill
     --minimal              logo + trigger only; the overlay is the navigation
   ========================================================================== */
/* --- Variant 2: centred logo ---------------------------------------------- */
.site-header--center .site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
@media (max-width: 1199px) {
  .site-header--center .site-header__inner {
    display: flex;
  }
}

.site-header--center .nav--left {
  justify-content: flex-end;
}

.site-header--center .site-logo {
  justify-self: center;
}

/* The right cell holds the second nav half plus the actions, so the two
   can never overlap however wide the labels get. */
.site-header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  min-width: 0;
}

/* Centred variant: the nav half sits against the logo and the actions are
   pushed out to the edge on their own. */
.site-header--center .site-header__end {
  justify-content: flex-start;
}
.site-header--center .site-header__end .header-actions {
  margin-left: auto;
}

/* Mirror of the right cell: socials pinned to the page edge, nav half against
   the logo. */
.site-header--center .site-header__start {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  min-width: 0;
}
.site-header--center .site-header__start .site-header__socials {
  margin-right: auto;
}

/* Sized to sit comfortably in the bar rather than dominate it */
.site-header__socials a {
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
}

/* Below `lg` the nav is gone and the bar collapses to logo + actions, so the
   socials would only crowd it. Scoped so it outranks `.socials { display: flex }`,
   which the components layer emits later in the cascade. */
@media (max-width: 1199px) {
  .site-header__start .site-header__socials {
    display: none;
  }
}
/* The centred variant shows the whole menu inline, so the overlay trigger is
   redundant there — but only while that nav is actually on screen. Below `lg`
   the nav is hidden and the trigger becomes the only way to navigate. */
@media (min-width: 1200px) {
  .site-header--center .menu-trigger {
    display: none;
  }
}
.site-header--center .nav--right {
  justify-content: flex-start;
  min-width: 0;
}
.site-header--center .nav--right .nav__list {
  flex-wrap: nowrap;
}

/* Below the nav breakpoint the layout collapses to logo + actions */
@media (max-width: 1199px) {
  .site-header--center .site-logo {
    margin-right: auto;
  }
}
/* --- Variant 3: floating pill --------------------------------------------- */
.site-header--float {
  padding-top: var(--space-3);
  transition: padding var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.site-header--float .site-header__inner {
  max-width: calc(var(--container-max) - var(--space-6));
  margin-inline: auto;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-md);
  height: 72px;
}
@media (max-width: 767px) {
  .site-header--float .site-header__inner {
    border-radius: var(--radius-lg);
  }
}

/* The bar itself never frosts — the pill already does */
.site-header--float.is-scrolled {
  padding-top: var(--space-2);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header--float.is-scrolled .site-header__inner {
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-lg);
}

.site-header--float.is-menu-open .site-header__inner {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}

/* --- Variant 4: minimal --------------------------------------------------- */
/* No inline nav is rendered; the fullscreen overlay is the only navigation. */
.site-header--minimal .header-actions {
  gap: var(--space-4);
}

.site-header--minimal .header-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--ink-60);
  transition: color var(--dur-1) var(--ease-out);
}
.site-header--minimal .header-contact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.site-header--minimal .header-contact:hover {
  color: var(--accent);
}
@media (max-width: 991px) {
  .site-header--minimal .header-contact {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   LOGO
   -------------------------------------------------------------------------- */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  color: var(--ink-100);
}
.site-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.site-logo img,
.site-logo svg {
  height: 30px;
  width: auto;
}

.site-logo__word {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.site-logo__dot {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   PRIMARY NAV (desktop)
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
}
@media (max-width: 1199px) {
  .nav {
    display: none;
  }
}

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

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.75rem var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  overflow: hidden;
}
.nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: var(--radius-xs);
}
.nav__link i {
  font-size: 0.9em;
  opacity: 0.6;
  transition: transform var(--dur-1) var(--ease-out);
}
.nav__link:hover, .nav__item.is-active > .nav__link {
  color: var(--ink-100);
}

/* Text flip on hover — the label rises out, a duplicate rises in */
.nav__link-inner {
  position: relative;
  display: block;
  overflow: hidden;
}

.nav__link-text {
  display: block;
  transition: transform var(--dur-2) var(--ease-out);
}

.nav__link-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--accent);
}

.nav__link:hover .nav__link-text {
  transform: translateY(-100%);
}

/* Active indicator dot */
.nav__item.is-active > .nav__link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}

.nav__item.has-children:hover .nav__link i {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   DROPDOWN
   -------------------------------------------------------------------------- */
.nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 216px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-1);
  will-change: transform, opacity;
}

.nav__item.has-children:hover > .nav__sub,
.nav__item.has-children:focus-within > .nav__sub,
.nav__item.is-open > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.nav__sub a {
  display: block;
  padding: 0.625rem var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-60);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), padding-left var(--dur-1) var(--ease-out);
}
.nav__sub a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}
.nav__sub a:hover {
  color: var(--ink-100);
  background: rgba(var(--ink-rgb), 0.06);
  padding-left: calc(var(--space-3) + 6px);
}

.nav__sub li.is-active > a {
  color: var(--accent);
}

/* Third level — opens to the right of the row that owns it */
.nav__sub li.has-children {
  position: relative;
}

.nav__sub li.has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nav__sub li.has-children > a i {
  font-size: 1.15em;
  opacity: 0.5;
  transition: transform var(--dur-1) var(--ease-out);
}

.nav__sub li.has-children:hover > a i,
.nav__sub li.has-children:focus-within > a i {
  transform: translateX(3px);
}

.nav__sub--flyout {
  top: calc(var(--space-2) * -1);
  left: 100%;
  margin-left: var(--space-2);
  transform: translate3d(-8px, 0, 0);
  /* Bridges the gap so the pointer can travel across to the panel */
}
.nav__sub--flyout::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: var(--space-2);
  height: 100%;
}

.nav__sub li.has-children:hover > .nav__sub--flyout,
.nav__sub li.has-children:focus-within > .nav__sub--flyout {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   HEADER ACTIONS — cart, socials, menu trigger
   -------------------------------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink-70);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.cart-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.cart-button i {
  font-size: 1.25rem;
}
.cart-button:hover {
  color: var(--ink-100);
  background: rgba(var(--ink-rgb), 0.06);
}

.cart-button__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   MENU TRIGGER
   -------------------------------------------------------------------------- */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem 1.25rem 0.75rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-100);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.menu-trigger:hover {
  border-color: var(--accent);
}
@media (max-width: 767px) {
  .menu-trigger {
    padding: 0.7rem;
    border-radius: 50%;
  }
}

.menu-trigger__label {
  position: relative;
  display: inline-block;
  /* Reserve room for the longer "Close" state so the bars never shift */
  min-width: 3.6em;
  text-align: center;
}

/* Scoped to .menu-trigger so it outranks `.btn__label { display: inline-flex }`,
   which is emitted later in the cascade. */
@media (max-width: 767px) {
  .menu-trigger .menu-trigger__label {
    display: none;
  }
}
/* Swap the label to "Close" when open, without duplicating it in every page's
   markup. The bars morph into an X at the same time. */
.menu-trigger.is-active .menu-trigger__label {
  color: transparent;
}
.menu-trigger.is-active .menu-trigger__label::after {
  content: "Close";
  position: absolute;
  inset: 0;
  color: var(--accent);
}

.menu-trigger__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 14px;
  flex: none;
}
.menu-trigger__bars span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out), width var(--dur-2) var(--ease-out);
}
.menu-trigger__bars span:last-child {
  width: 62%;
  align-self: flex-end;
}

.menu-trigger:hover .menu-trigger__bars span:last-child {
  width: 100%;
}

/* Open state — bars become an X */
.menu-trigger.is-active {
  border-color: var(--accent);
}
.menu-trigger.is-active .menu-trigger__bars span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.menu-trigger.is-active .menu-trigger__bars span:last-child {
  width: 100%;
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ==========================================================================
   ECHORA — FULLSCREEN OVERLAY MENU
   Clip-path curtain, oversized display links with per-line mask reveal,
   and a hover image preview that follows the cursor on desktop.
   ========================================================================== */
.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay-menu);
  background: var(--bg-0);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.overlay-menu::-webkit-scrollbar {
  display: none;
}

.overlay-menu.is-open {
  visibility: visible;
}

/* Ambient glow + grain so the panel doesn't read as flat black */
.overlay-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 20% 100%, rgba(var(--accent-2-rgb), 0.16), transparent 70%), radial-gradient(60% 50% at 90% 0%, rgba(var(--accent-rgb), 0.1), transparent 70%);
  pointer-events: none;
}

.overlay-menu__inner {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--space-8);
  align-items: center;
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-6);
}
@media (max-width: 1199px) {
  .overlay-menu__inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   LINK LIST
   -------------------------------------------------------------------------- */
.overlay-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.overlay-nav__item {
  position: relative;
  overflow: hidden;
  /* Keep the link and its toggle on one line at every width */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.overlay-nav__link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--ink-100);
  transition: color var(--dur-1) var(--ease-out);
}
.overlay-nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.overlay-nav__link {
  /* The longest label ("Discography") must still fit a 320px screen */
}
@media (max-width: 767px) {
  .overlay-nav__link {
    font-size: clamp(1.375rem, 7.2vw, 2.25rem);
    gap: var(--space-3);
  }
}

/* The sub-panel is a sibling of the link, so it needs the full row width */
.overlay-nav__sub {
  flex: 0 0 100%;
}

.overlay-nav__index {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  /* Dim siblings so the hovered item leads */
  .overlay-nav:hover .overlay-nav__link {
    color: var(--ink-30);
  }
  .overlay-nav__link:hover {
    color: var(--accent) !important;
  }
  .overlay-nav__link:hover .overlay-nav__index {
    color: var(--accent);
  }
}
/* --------------------------------------------------------------------------
   SUB LINKS — expandable groups
   -------------------------------------------------------------------------- */
.overlay-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  margin-left: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-60);
  font-size: 1rem;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.overlay-nav__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.overlay-nav__toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.overlay-nav__item.is-open .overlay-nav__toggle {
  transform: rotate(45deg);
  color: var(--accent);
  border-color: var(--accent);
}

.overlay-nav__sub {
  /* Sub links line up with where the parent label starts, not with its index
     number: the index is a fixed-width tabular figure pair (--fs-label at
     --ls-label) plus the link's own gap. */
  --overlay-sub-indent: calc(1.62 * var(--fs-label) + var(--space-4));
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-inout);
}
.overlay-nav__sub > div {
  overflow: hidden;
}
@media (max-width: 767px) {
  .overlay-nav__sub {
    /* the link drops to a --space-3 gap at this width */
    --overlay-sub-indent: calc(1.62 * var(--fs-label) + var(--space-3));
  }
}

.overlay-nav__item.is-open .overlay-nav__sub {
  grid-template-rows: 1fr;
}

.overlay-nav__sub-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) 0 var(--space-4);
  padding-left: var(--overlay-sub-indent);
}

.overlay-nav__sub-list a {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-40);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
.overlay-nav__sub-list a:hover {
  background-size: 100% 1px;
}
.overlay-nav__sub-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.overlay-nav__sub-list a:hover {
  color: var(--ink-100);
}

.overlay-nav__sub-list li.is-active a {
  color: var(--accent);
}

/* A group whose label is not a page of its own opens its panel on click */
.overlay-nav__link--group {
  text-align: left;
}

/* Grouped panel — used by Pages, where some entries have children of their own.
   Laid out as even columns rather than a wrapping row: with a wrapping row the
   entries carrying children pushed the flat ones out of rhythm and the nested
   rules hung at unrelated positions. */
.overlay-nav__sub-list--grouped {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5) var(--space-6);
  /* the indent eats into the row, so widen the cap by the same amount */
  max-width: calc(46rem + var(--overlay-sub-indent));
}
@media (max-width: 1199px) {
  .overlay-nav__sub-list--grouped {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .overlay-nav__sub-list--grouped {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* Every entry is a column, so the row of labels shares one baseline whether or
   not it carries children */
.overlay-nav__sub-list--grouped > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

/* The column head reads as a heading, not as another child link */
.overlay-nav__sub-list--grouped > li > a {
  color: var(--ink-100);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}

.overlay-nav__sub-list--grouped > li.is-active > a,
.overlay-nav__group.is-active > a {
  color: var(--accent);
}

/* Children are a plain indent-free stack; the column edge already groups them,
   so the old border-left rule only added a stray hairline */
.overlay-nav__nested {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.overlay-nav__nested a {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-40);
  transition: color var(--dur-1) var(--ease-out);
}
.overlay-nav__nested a:hover {
  color: var(--ink-100);
}

.overlay-nav__nested li.is-active a {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   ASIDE — contact block, socials, mini gallery
   -------------------------------------------------------------------------- */
.overlay-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-left: var(--space-7);
  border-left: 1px solid var(--line);
}
@media (max-width: 1199px) {
  .overlay-aside {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--space-6);
    gap: var(--space-5);
  }
}

.overlay-aside__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.overlay-aside__value {
  font-size: var(--fs-h5);
  color: var(--ink-100);
  align-self: flex-start;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
.overlay-aside__value:hover {
  background-size: 100% 1px;
}

.overlay-aside__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.overlay-aside__gallery img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.overlay-aside__gallery img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

/* ==========================================================================
   ECHORA — PRELOADER / PAGE REVEAL
   Wordmark rise + counter, then a two-panel curtain wipe. Also serves as the
   page-load animation on every navigation (no SPA router).
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-0);
  overflow: hidden;
}

/* Once the reveal is done JS removes the node entirely. */
.preloader.is-done {
  pointer-events: none;
}

.preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-glow);
  opacity: 0.7;
}

.preloader__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.preloader__word {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-100);
  overflow: hidden;
}

.preloader__word .split-char {
  display: inline-block;
  will-change: transform;
}

.preloader__tagline {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  opacity: 0;
}

/* Progress rule + counter */
.preloader__bar {
  position: relative;
  width: min(280px, 60vw);
  height: 1px;
  background: var(--line-strong);
  overflow: hidden;
}

.preloader__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.preloader__count {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--ink-rgb), 0.22);
  filter: url(#echora-outline);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   CURTAIN PANELS — wipe away to reveal the page
   -------------------------------------------------------------------------- */
.preloader__curtain {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
}

.preloader__panel {
  flex: 1;
  background: var(--bg-0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   NO-JS FALLBACK — never trap content behind a static overlay
   -------------------------------------------------------------------------- */
html:not(.js-anim) .preloader {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none;
  }
}
/* ==========================================================================
   ECHORA — FOOTER
   Variant 1 (default): mega footer with ghost wordmark + newsletter.
   Variant 2 (.site-footer--minimal): centred single-rule footer.
   Variant 3 (.site-footer--cta): booking CTA headline above a slim meta bar.
   ========================================================================== */
.site-footer {
  position: relative;
  padding-top: var(--section-y);
  background: var(--bg-0);
  overflow: hidden;
  isolation: isolate;
}

/* Background image layer — masked and faded into the page */
.site-footer__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
}
.site-footer__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.site-footer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-0) 0%, rgba(10, 10, 15, 0.55) 45%, var(--bg-0) 100%);
}

.site-footer__glow {
  position: absolute;
  inset: auto 0 -20% 0;
  height: 60%;
  z-index: -1;
  background: radial-gradient(50% 100% at 50% 100%, rgba(var(--accent-2-rgb), 0.18), transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   CTA BLOCK — top of the mega footer
   -------------------------------------------------------------------------- */
.footer-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 991px) {
  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding-bottom: var(--space-6);
  }
}

.footer-cta__title {
  font-size: var(--fs-h1);
  max-width: 14ch;
  line-height: 0.98;
}

/* --------------------------------------------------------------------------
   COLUMN GRID
   -------------------------------------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  padding-block: var(--space-8);
}
@media (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    padding-block: var(--space-7);
  }
}
@media (max-width: 575px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-col--brand {
  gap: var(--space-5);
  padding-right: var(--space-6);
}
@media (max-width: 1199px) {
  .footer-col--brand {
    grid-column: 1/-1;
    padding-right: 0;
  }
}

.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--ink-100);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-links a {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-60);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
.footer-links a:hover {
  background-size: 100% 1px;
}
.footer-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.footer-links a:hover {
  color: var(--ink-100);
}

.footer-text {
  color: var(--ink-60);
  font-size: var(--fs-sm);
  max-width: 34ch;
}

.footer-newsletter {
  max-width: 380px;
}

/* --------------------------------------------------------------------------
   GHOST WORDMARK — oversized outline that lights up on hover
   -------------------------------------------------------------------------- */
.footer-wordmark-wrap {
  container-type: inline-size;
  position: relative;
  padding-top: var(--space-4);
}

.footer-wordmark {
  /* "Echora" measures 5.21em wide at this tracking; the extra room keeps a
     margin either side. Raise it for a longer word, lower it for a shorter
     one — anything below 5.3 starts to overflow the container. */
  --wordmark-fit: 5.45;
  /* The word's ink sits 0.045em right of its layout box, so this much
     padding pulls it back to optical centre. */
  --wordmark-optical: 0.09em;
  display: block;
  font-size: clamp(4rem, 18vw, 18rem);
  font-size: calc(100cqw / var(--wordmark-fit));
  padding-right: var(--wordmark-optical);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.18);
  filter: url(#echora-outline);
  user-select: none;
  transition: color var(--dur-3) var(--ease-out);
}
.footer-wordmark:hover {
  color: rgba(var(--accent-rgb), 0.55);
}

/* --------------------------------------------------------------------------
   BOTTOM BAR
   -------------------------------------------------------------------------- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-40);
}
@media (max-width: 767px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
}

.footer-bottom a {
  color: var(--ink-60);
}
.footer-bottom a:hover {
  color: var(--accent);
}

.footer-bottom__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   VARIANT 2 — MINIMAL (demo-3)
   -------------------------------------------------------------------------- */
.site-footer--minimal {
  padding-top: var(--section-y-sm);
}
.site-footer--minimal .footer-minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  padding-bottom: var(--space-6);
}
.site-footer--minimal .footer-minimal__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}
.site-footer--minimal .footer-minimal__nav a {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.site-footer--minimal .footer-minimal__nav a:hover {
  color: var(--accent);
}
.site-footer--minimal .footer-bottom {
  justify-content: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   VARIANT 3 — BOOKING CTA (demo-5)
   -------------------------------------------------------------------------- */
.site-footer--cta .footer-booking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  padding-bottom: var(--space-8);
}
.site-footer--cta .footer-booking__title {
  font-size: var(--fs-display);
  line-height: 0.94;
  max-width: 12ch;
  text-transform: uppercase;
}
.site-footer--cta .footer-grid {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   VARIANT 4 — SPLIT EDITORIAL (demo-7)
   Oversized contact address on the left, a glass link card on the right,
   closed by a marquee instead of a ghost wordmark.
   -------------------------------------------------------------------------- */
.site-footer--split .footer-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: center;
  padding-bottom: var(--space-6);
}
@media (max-width: 991px) {
  .site-footer--split .footer-split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
  }
}
.site-footer--split .footer-split__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  display: block;
  margin-bottom: var(--space-3);
}
.site-footer--split .footer-split__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-heading);
  color: var(--ink-100);
  word-break: break-word;
  transition: color var(--dur-1) var(--ease-out);
}
.site-footer--split .footer-split__email:hover {
  color: var(--accent);
}
.site-footer--split .footer-split__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.site-footer--split .footer-split__card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
}
@media (max-width: 575px) {
  .site-footer--split .footer-split__card {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }
}
.site-footer--split .footer-marquee {
  margin-bottom: 0;
  margin-top: var(--space-4);
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   MARQUEE STRIP — optional band across the footer top
   -------------------------------------------------------------------------- */
.footer-marquee {
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
  margin-bottom: var(--space-7);
}

/* Pages with the sticky bottom player need clearance */
body.has-bottom-player .site-footer {
  padding-bottom: var(--bottom-player-h);
}

/* ==========================================================================
   ECHORA — PAGE CAPTION
   Shared hero for every inner page: display title with a ghost duplicate
   behind it, breadcrumb rail and an ambient glow.
   ========================================================================== */
.page-caption {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(5rem, 11vw, 10rem));
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

.page-caption::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 50% 0%, rgba(var(--accent-2-rgb), 0.2), transparent 68%);
  pointer-events: none;
}

/* Optional background image variant */
.page-caption__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-caption__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.page-caption__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.85) 0%, rgba(10, 10, 15, 0.45) 50%, var(--bg-0) 100%);
}

.page-caption__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.page-caption--center .page-caption__inner {
  align-items: center;
  text-align: center;
}

.page-caption__title {
  position: relative;
  font-size: var(--fs-display);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  margin: 0;
}

/* Outlined duplicate sitting behind, slightly larger and offset */
.page-caption__ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%) scale(1.32);
  font-size: var(--fs-display);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.06);
  filter: url(#echora-outline);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

.page-caption__text {
  max-width: 46ch;
  color: var(--ink-60);
  font-size: var(--fs-lead);
}

/* --------------------------------------------------------------------------
   BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb-echora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}
.breadcrumb-echora a {
  color: var(--ink-40);
}
.breadcrumb-echora a:hover {
  color: var(--accent);
}
.breadcrumb-echora li[aria-current],
.breadcrumb-echora li:last-child {
  color: var(--ink-100);
}
.breadcrumb-echora .breadcrumb-echora__sep {
  opacity: 0.5;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   META ROW — counters / filters below the title on index pages
   -------------------------------------------------------------------------- */
.page-caption__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  width: 100%;
}

.page-caption__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-caption__stat strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink-100);
  font-variant-numeric: tabular-nums;
}
.page-caption__stat span {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

/* 4. COMPONENTS */
/* ==========================================================================
   ECHORA — BUTTONS
   `.btn` is the base. Magnetic behaviour is opt-in via [data-magnetic] and
   requires the inner `.btn__label` wrapper so text can counter-move.
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1.125rem 2.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.btn {
  /* Fill that wipes up from the bottom on hover */
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--dur-2) var(--ease-out);
  will-change: transform;
}
.btn:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn:hover::before {
  transform: translate3d(0, 0, 0);
}
.btn i,
.btn svg {
  font-size: 1.15em;
  transition: transform var(--dur-1) var(--ease-out);
}
.btn:hover i, .btn:hover svg {
  transform: translateX(3px);
}

/* Inner span kept still (or counter-moved) while the button body drifts */
.btn__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   VARIANTS
   -------------------------------------------------------------------------- */
.btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--solid::before {
  background: var(--ink-100);
}
.btn--solid:hover {
  color: var(--ink-inverse);
  border-color: var(--ink-100);
}

.btn--light {
  background: var(--ink-100);
  border-color: var(--ink-100);
  color: var(--ink-inverse);
}
.btn--light::before {
  background: var(--accent);
}
.btn--light:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn--ghost {
  border-color: transparent;
  padding-inline: 0;
  color: var(--ink-100);
}
.btn--ghost::before {
  display: none;
}
.btn--ghost:hover {
  color: var(--accent);
}

.btn--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  color: var(--ink-100);
}

.btn--sm {
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-xs);
}

.btn--lg {
  padding: 1.4rem 3rem;
  font-size: var(--fs-base);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   CIRCULAR / ICON BUTTONS
   -------------------------------------------------------------------------- */
.btn-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-100);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn-circle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.btn-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-out);
}
.btn-circle:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-circle:hover::before {
  transform: scale(1);
}
.btn-circle i {
  font-size: 1.25rem;
}

.btn-circle--lg {
  width: 84px;
  height: 84px;
}
.btn-circle--lg i {
  font-size: 1.75rem;
}

.btn-circle--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-circle--solid::before {
  background: var(--ink-100);
}
.btn-circle--solid:hover {
  color: var(--ink-inverse);
}

.btn-circle--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
}

/* --------------------------------------------------------------------------
   PLAY BUTTON — video overlays, album previews
   -------------------------------------------------------------------------- */
.btn-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  transition: transform var(--dur-1) var(--ease-out);
}
.btn-play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.btn-play i {
  font-size: 1.75rem;
  margin-left: 3px;
}
.btn-play {
  /* Expanding ripple rings */
}
.btn-play::before, .btn-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  animation: btn-play-ripple 2.8s var(--ease-out) infinite;
}
.btn-play::after {
  animation-delay: 1.4s;
}
.btn-play:hover {
  transform: scale(1.08);
}
@media (max-width: 767px) {
  .btn-play {
    width: 68px;
    height: 68px;
  }
  .btn-play i {
    font-size: 1.25rem;
  }
}

.btn-play--glass {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  color: var(--ink-100);
}
.btn-play--glass::before, .btn-play--glass::after {
  border-color: var(--glass-brd);
}

@keyframes btn-play-ripple {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}
/* --------------------------------------------------------------------------
   TEXT LINK WITH ARROW — "View all" style
   -------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-100);
  padding-bottom: 6px;
  position: relative;
}
.link-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.link-arrow:hover {
  color: var(--accent);
}
.link-arrow:hover::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
}
.link-arrow i {
  transition: transform var(--dur-1) var(--ease-out);
}
.link-arrow:hover i {
  transform: translate(3px, -3px);
}

/* --------------------------------------------------------------------------
   PILL / TAG
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), 0.04);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.pill--accent {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.pill--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   SOCIAL ICON ROW
   -------------------------------------------------------------------------- */
.socials {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-60);
  font-size: 1rem;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.socials a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.socials a:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}

.socials--bare a {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.socials--bare a:hover {
  background: none;
  color: var(--accent);
  transform: none;
}

/* --------------------------------------------------------------------------
   SCROLL CUE
   -------------------------------------------------------------------------- */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 68px;
  background: var(--accent);
  animation: echora-scroll-cue 2.4s var(--ease-inout) infinite;
}

.scroll-cue--horizontal {
  writing-mode: horizontal-tb;
}

/* ==========================================================================
   ECHORA — FORMS
   Underline-only fields with floating labels and an accent focus rule.
   ========================================================================== */
.field {
  position: relative;
  display: block;
  margin-bottom: var(--space-5);
}

.field__control {
  display: block;
  width: 100%;
  padding: 1.5rem 0 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  color: var(--ink-100);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
.field__control::placeholder {
  color: transparent;
}
.field__control:focus {
  border-bottom-color: transparent;
}

textarea.field__control {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.field__label {
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-size: var(--fs-lead);
  color: var(--ink-40);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

/* Float the label when focused or filled */
.field__control:focus ~ .field__label,
.field__control:not(:placeholder-shown) ~ .field__label {
  transform: translateY(-1.55rem) scale(0.7);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.field__control:focus ~ .field__label {
  color: var(--accent);
}

/* Accent rule that wipes in on focus, sitting over the static border */
.field__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}

.field__control:focus ~ .field__line {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   SELECT
   -------------------------------------------------------------------------- */
.field--select::after {
  content: "\ea4e";
  font-family: "remixicon";
  position: absolute;
  right: 0;
  top: 1.9rem;
  color: var(--ink-40);
  pointer-events: none;
}

select.field__control {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2rem;
}
select.field__control option {
  background: var(--bg-2);
  color: var(--ink-100);
}

/* --------------------------------------------------------------------------
   CHECKBOX / RADIO
   -------------------------------------------------------------------------- */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink-60);
}
.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check__box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.check__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-1) var(--ease-spring);
}

.check input:checked ~ .check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked ~ .check__box::after {
  transform: rotate(45deg) scale(1);
}

.check input:focus-visible ~ .check__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   INLINE FORM (newsletter) — input + submit on one rule
   -------------------------------------------------------------------------- */
.form-inline {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-1) var(--ease-out);
}
.form-inline:focus-within {
  border-bottom-color: var(--accent);
}
.form-inline input {
  flex: 1;
  min-width: 0;
  padding: 1rem 0;
  font-size: var(--fs-base);
  color: var(--ink-100);
  background: transparent;
  border: 0;
  outline: none;
}
.form-inline input::placeholder {
  color: var(--ink-30);
}
.form-inline button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink-100);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.form-inline button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.form-inline button i {
  font-size: 1.25rem;
}
.form-inline button:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   QUANTITY STEPPER (single-product)
   -------------------------------------------------------------------------- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 52px;
  color: var(--ink-60);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.qty button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}
.qty button:hover {
  color: var(--accent-ink);
  background: var(--accent);
}
.qty input {
  width: 52px;
  height: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-100);
  background: transparent;
  border: 0;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   FORM MESSAGE (stub target kept from the original markup)
   -------------------------------------------------------------------------- */
.form-message {
  min-height: 0;
  font-size: var(--fs-sm);
  color: var(--accent);
}
.form-message:not(:empty) {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-rgb), 0.08);
}

/* ==========================================================================
   ECHORA — CARDS
   Generic card shell + the shared "editorial media card" used by news,
   videos, albums and artists. Section files extend these.
   ========================================================================== */
.card {
  position: relative;
  background: var(--bg-2);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  /* Accent glow that fades in on hover */
}
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 0%, rgba(var(--accent-rgb), 0.12), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.card:hover {
  border-color: rgba(var(--accent-rgb), 0.28);
}
.card:hover::after {
  opacity: 1;
}

.card--flush {
  padding: 0;
}

.card--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
}

.card--lift:hover {
  transform: translateY(-6px);
}

/* --------------------------------------------------------------------------
   MEDIA CARD — image on top, meta below. Shared by news / video / artist.
   -------------------------------------------------------------------------- */
.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.media-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.media-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-2) var(--ease-out);
  will-change: transform;
}
.media-card__media {
  /* Bottom scrim so overlaid meta stays legible */
}
.media-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-fade-soft);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}

.media-card:hover .media-card__media img {
  transform: scale(1.06);
}

.media-card:hover .media-card__media::after {
  opacity: 1;
}

.media-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}

.media-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.media-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.media-card__title {
  font-size: var(--fs-h4);
  line-height: 1.25;
}
.media-card__title a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.media-card:hover .media-card__title a {
  background-size: 100% 1px;
}

.media-card__excerpt {
  color: var(--ink-60);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.media-card__foot {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Full-bleed variant: meta sits over the image (featured items) */
.media-card--overlay .media-card__media::after {
  opacity: 1;
}
.media-card--overlay .media-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-5);
}

/* --------------------------------------------------------------------------
   CORNER ICON — appears on hover of a media card (arrow / play / plus)
   -------------------------------------------------------------------------- */
.card-icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.15rem;
  opacity: 0;
  transform: scale(0.6) rotate(-25deg);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
  pointer-events: none;
}

.media-card:hover .card-icon,
.card:hover .card-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* --------------------------------------------------------------------------
   STAT / INFO ROW — used on single pages (album facts, event details)
   -------------------------------------------------------------------------- */
.info-list {
  display: flex;
  flex-direction: column;
}

.info-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.info-list__row:first-child {
  border-top: 1px solid var(--line);
}

.info-list__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  flex: none;
}

.info-list__value {
  color: var(--ink-100);
  font-weight: 500;
  text-align: right;
}

/* --------------------------------------------------------------------------
   NUMBERED CARD — big index numeral behind the content
   -------------------------------------------------------------------------- */
.card-index {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--ink-rgb), 0.12);
  filter: url(#echora-outline);
  pointer-events: none;
  transition: color var(--dur-2) var(--ease-out);
}

.card:hover .card-index {
  color: rgba(var(--accent-rgb), 0.4);
}

/* ==========================================================================
   ECHORA — MUSIC PLAYER (AmplitudeJS)
   AmplitudeJS binds by class name, so every `amplitude-*` hook is preserved
   exactly; only presentation changes here.
   ========================================================================== */
.music-player {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
@media (max-width: 991px) {
  .music-player {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-4);
  }
}

/* Accent bloom behind the panel */
.music-player::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(90% 70% at 20% 0%, rgba(var(--accent-rgb), 0.12), transparent 65%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   NOW PLAYING — cover art + title
   -------------------------------------------------------------------------- */
.player-now {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.player-cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--shadow-md);
}
.player-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vinyl disc that peeks out from behind the sleeve while playing */
.player-cover__vinyl {
  position: absolute;
  top: 50%;
  right: 0;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(18%, -50%) scale(0.9);
  border-radius: 50%;
  background: radial-gradient(circle at center, #2a2a33 0 18%, #101015 18.5% 20%, #17171e 20.5% 100%);
  box-shadow: var(--shadow-md);
  opacity: 0;
  z-index: -1;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
  /* Groove rings */
}
.player-cover__vinyl::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink-rgb), 0.06);
  box-shadow: inset 0 0 0 12px rgba(var(--ink-rgb), 0.02), inset 0 0 0 24px rgba(var(--ink-rgb), 0.02);
}
.player-cover__vinyl {
  /* Centre label */
}
.player-cover__vinyl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
}

.music-player.is-playing .player-cover__vinyl {
  opacity: 1;
  transform: translate(52%, -50%) scale(0.9);
  animation: echora-spin 8s linear infinite;
}

.player-now__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.player-now__title {
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--ink-100);
}

.player-now__artist {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */
.player-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
}

.player-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.player-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  color: var(--ink-60);
  font-size: 1.35rem;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.player-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.player-btn:hover {
  color: var(--ink-100);
  background: rgba(var(--ink-rgb), 0.07);
}
.player-btn:active {
  transform: scale(0.94);
}

/* Amplitude toggles `.amplitude-playing` / `.amplitude-paused` on this node */
.player-btn--play {
  width: 62px;
  height: 62px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.6rem;
}
.player-btn--play:hover {
  background: var(--ink-100);
  color: var(--ink-inverse);
}
.player-btn--play {
  /* Swap the glyph based on Amplitude's state class */
}
.player-btn--play .icon-pause {
  display: none;
}
.player-btn--play.amplitude-playing .icon-play {
  display: none;
}
.player-btn--play.amplitude-playing .icon-pause {
  display: block;
}

/* --------------------------------------------------------------------------
   PROGRESS + VOLUME SLIDERS
   `--progress` is written by JS so the filled portion tracks the thumb.
   -------------------------------------------------------------------------- */
.player-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.player-time {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  color: var(--ink-40);
  flex: none;
  min-width: 38px;
}

input[type=range].player-range {
  flex: 1;
  min-width: 0;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type=range].player-range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-radius: var(--radius-xs);
}
input[type=range].player-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--progress, 0%), rgba(var(--ink-rgb), 0.14) var(--progress, 0%), rgba(var(--ink-rgb), 0.14) 100%);
}
input[type=range].player-range::-moz-range-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), 0.14);
}
input[type=range].player-range::-moz-range-progress {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
input[type=range].player-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-0);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease-spring);
}
input[type=range].player-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg-0);
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease-spring);
}
input[type=range].player-range:hover::-webkit-slider-thumb, input[type=range].player-range:focus-visible::-webkit-slider-thumb {
  transform: scale(1);
}
input[type=range].player-range:hover::-moz-range-thumb, input[type=range].player-range:focus-visible::-moz-range-thumb {
  transform: scale(1);
}

.player-volume {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 150px;
}
.player-volume i {
  color: var(--ink-40);
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   TRACK LIST
   -------------------------------------------------------------------------- */
.playlist {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.playlist::-webkit-scrollbar {
  display: none;
}

.playlist[data-lenis-prevent] {
  scrollbar-width: thin;
}

/* `.list-song.amplitude-song-container` — Amplitude's row hook */
.list-song {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem var(--space-3);
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.list-song:last-child {
  border-bottom: 0;
}
.list-song:hover {
  background: rgba(var(--ink-rgb), 0.05);
}

.list-song__index {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.list-song__title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-song__artist {
  font-size: var(--fs-xs);
  color: var(--ink-40);
}

.list-song__duration {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}

/* Equalizer bars replace the index on the active track */
.list-song__eq {
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 14px;
}
.list-song__eq span {
  width: 2px;
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  transform-origin: bottom;
  animation: echora-eq 0.9s var(--ease-inout) infinite;
}
.list-song__eq span:nth-child(2) {
  animation-delay: 0.18s;
}
.list-song__eq span:nth-child(3) {
  animation-delay: 0.36s;
}

/* Amplitude adds `.amplitude-active-song-container` to the playing row */
.list-song.amplitude-active-song-container {
  background: rgba(var(--accent-rgb), 0.08);
}
.list-song.amplitude-active-song-container .list-song__title {
  color: var(--accent);
}
.list-song.amplitude-active-song-container .list-song__index {
  display: none;
}
.list-song.amplitude-active-song-container .list-song__eq {
  display: flex;
}

/* Paused: keep the highlight but freeze the bars */
.music-player:not(.is-playing) .list-song__eq span {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   SECTION WRAPPER — full-width player block on home pages
   -------------------------------------------------------------------------- */
.player-section {
  position: relative;
}

.player-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.player-section__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}
.player-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-0) 0%, transparent 35%, transparent 65%, var(--bg-0) 100%);
}

/* ==========================================================================
   ECHORA — STICKY BOTTOM PLAYER
   Docked glass bar with a hairline progress rule along its top edge.
   Collapses to a floating disc on small screens.
   ========================================================================== */
.bottom-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-player);
  height: var(--bottom-player-h);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

/* Progress rail across the very top edge */
.bottom-player__rail {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(var(--ink-rgb), 0.1);
  overflow: hidden;
}

.bottom-player__rail-fill {
  position: absolute;
  inset: 0;
  width: var(--progress, 0%);
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
  transition: width 0.12s linear;
}

.bottom-player__inner {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  height: 100%;
}
@media (max-width: 991px) {
  .bottom-player__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* --------------------------------------------------------------------------
   TRACK INFO
   -------------------------------------------------------------------------- */
.bottom-player__track {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.bottom-player__cover {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
}
.bottom-player__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom-player__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.bottom-player__title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-player__artist {
  font-size: var(--fs-xs);
  color: var(--ink-40);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */
.bottom-player__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: center;
}

.bottom-player__controls .player-btn {
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
}

.bottom-player__controls .player-btn--play {
  width: 48px;
  height: 48px;
  font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   RIGHT SIDE — time + volume
   -------------------------------------------------------------------------- */
.bottom-player__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}
@media (max-width: 991px) {
  .bottom-player__side {
    display: none;
  }
}

.bottom-player__time {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   MOBILE — collapse to a floating disc that expands on tap
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .bottom-player {
    --bottom-player-h: 68px;
  }
  .bottom-player__inner {
    gap: var(--space-2);
  }
  .bottom-player__cover {
    width: 40px;
    height: 40px;
  }
  /* Only prev/play/next survive */
  .bottom-player__controls .player-btn:not(.player-btn--play):not(.player-btn--next) {
    display: none;
  }
}
/* Keep page content clear of the docked bar */
body.has-bottom-player {
  padding-bottom: var(--bottom-player-h);
}

/* ==========================================================================
   ECHORA — LIGHTBOX
   Custom vanilla replacement for Magnific Popup. Handles images and
   embedded video (YouTube/Vimeo) with a heavy glass backdrop.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  visibility: hidden;
  opacity: 0;
}

.lightbox.is-open {
  visibility: visible;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 10, 0.86);
  -webkit-backdrop-filter: blur(var(--blur-heavy));
  backdrop-filter: blur(var(--blur-heavy));
  cursor: zoom-out;
}

.lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1280px, 100%);
  max-height: 100%;
  will-change: transform, opacity;
}

.lightbox__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 100%;
}

.lightbox__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
}
.lightbox__media img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__media iframe,
.lightbox__media video {
  display: block;
  width: min(1280px, 88vw);
  aspect-ratio: 16/9;
  max-height: calc(100vh - 10rem);
  border: 0;
  background: #000;
}

.lightbox__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink-60);
}

.lightbox__counter {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2.5rem);
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.lightbox__nav--prev {
  left: clamp(0.5rem, 2.5vw, 2.5rem);
}

.lightbox__nav--next {
  right: clamp(0.5rem, 2.5vw, 2.5rem);
}

.lightbox__nav[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

/* Loading spinner shown while a large image decodes */
.lightbox__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(var(--ink-rgb), 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: echora-spin 0.8s linear infinite;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}

.lightbox.is-loading .lightbox__spinner {
  opacity: 1;
}

@media (max-width: 767px) {
  .lightbox__nav {
    top: auto;
    bottom: clamp(1rem, 4vw, 2rem);
    transform: none;
  }
  .lightbox__nav--prev {
    left: 50%;
    margin-left: -60px;
  }
  .lightbox__nav--next {
    right: 50%;
    margin-right: -60px;
  }
}
/* --------------------------------------------------------------------------
   TRIGGER AFFORDANCE — zoom cursor + icon on lightbox links
   -------------------------------------------------------------------------- */
[data-lightbox] {
  cursor: zoom-in;
}

/* ==========================================================================
   ECHORA — SWIPER THEME (Swiper 11)
   Overrides Swiper's defaults with the template's tokens plus the custom navigation,
   numbered pagination and progress rail used across the sliders.
   ========================================================================== */
:root {
  --swiper-theme-color: var(--accent);
  --swiper-navigation-size: 22px;
}

.swiper {
  width: 100%;
  overflow: visible;
}

.swiper--clip {
  overflow: hidden;
}

.swiper-slide {
  height: auto;
}

.swiper-slide-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Sliders that bleed past the container need their own clipping mask */
.swiper-mask {
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   NAVIGATION — template arrows (Swiper's own arrows are disabled)
   -------------------------------------------------------------------------- */
.slider-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

/* Pair with `.btn-circle` in markup: class="btn-circle slider-nav__btn" */
.slider-nav__btn {
  width: 52px;
  height: 52px;
}
.slider-nav__btn.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Arrows floated over the slider edges */
.slider-nav--float {
  position: absolute;
  inset: 0;
  z-index: 3;
  justify-content: space-between;
  pointer-events: none;
  align-items: center;
}
.slider-nav--float .slider-nav__btn {
  pointer-events: auto;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
}
@media (max-width: 991px) {
  .slider-nav--float {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   PAGINATION — thin rules instead of dots
   -------------------------------------------------------------------------- */
.swiper-pagination.pagination-lines {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
}
.swiper-pagination.pagination-lines .swiper-pagination-bullet {
  width: 34px;
  height: 2px;
  border-radius: 0;
  margin: 0 !important;
  background: rgba(var(--ink-rgb), 0.2);
  opacity: 1;
  transition: background-color var(--dur-1) var(--ease-out), width var(--dur-2) var(--ease-out);
}
.swiper-pagination.pagination-lines .swiper-pagination-bullet-active {
  width: 58px;
  background: var(--accent);
}

/* Numbered pagination used by the hero sliders */
.swiper-pagination.pagination-numbers {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: auto;
}
.swiper-pagination.pagination-numbers .pagination-number {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--ink-30);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.swiper-pagination.pagination-numbers .pagination-number::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: width var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.swiper-pagination.pagination-numbers .swiper-pagination-bullet-active.pagination-number {
  color: var(--accent);
}
.swiper-pagination.pagination-numbers .swiper-pagination-bullet-active.pagination-number::after {
  width: 52px;
  opacity: 1;
}

/* Fraction counter — "01 / 08" */
.slider-counter {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink-40);
  font-size: var(--fs-sm);
}
.slider-counter .slider-counter__current {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink-100);
  line-height: 1;
}
.slider-counter .slider-counter__sep {
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   PROGRESS BAR — autoplay timing rail
   -------------------------------------------------------------------------- */
.slider-progress {
  position: relative;
  flex: 1;
  min-width: 60px;
  max-width: 220px;
  height: 2px;
  background: rgba(var(--ink-rgb), 0.14);
  overflow: hidden;
}

.slider-progress__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--slider-progress, 0));
  transform-origin: left;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   SLIDER TOOLBAR — nav + pagination row under a slider
   -------------------------------------------------------------------------- */
.slider-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
@media (max-width: 767px) {
  .slider-toolbar {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-3);
  }
  .slider-toolbar .slider-nav {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   SCROLLBAR (horizontal galleries)
   -------------------------------------------------------------------------- */
.swiper-scrollbar.scrollbar-line {
  position: static;
  width: 100%;
  height: 2px;
  margin-top: var(--space-5);
  background: rgba(var(--ink-rgb), 0.12);
  border-radius: 0;
}
.swiper-scrollbar.scrollbar-line .swiper-scrollbar-drag {
  background: var(--accent);
  border-radius: 0;
}

/* ==========================================================================
   ECHORA — CUSTOM CURSOR
   Desktop-only dot + trailing ring that swells and picks up a label when
   hovering [data-cursor] targets.
   ========================================================================== */
.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.cursor {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
}

.cursor-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  transition: width var(--dur-1) var(--ease-out), height var(--dur-1) var(--ease-out), margin var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.cursor-ring__label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  white-space: nowrap;
}

/* Hover state on an interactive target */
.cursor-ring.is-active {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--accent);
  border-color: var(--accent);
}

.cursor-ring.is-active .cursor-ring__label {
  opacity: 1;
  transform: scale(1);
}

.cursor-ring.is-active ~ .cursor,
.cursor.is-hidden {
  opacity: 0 !important;
}

/* Simple link hover — ring grows slightly, no label */
.cursor-ring.is-link {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-color: var(--accent);
}

/* The custom cursor only exists on precise pointers */
@media (hover: none), (pointer: coarse) {
  .cursor,
  .cursor-ring {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor-ring {
    display: none;
  }
}
/* ==========================================================================
   ECHORA — TABS & FILTERS
   Underline tab rail (events months, product tabs) and the pill filter list
   used by the galleries.
   ========================================================================== */
.tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__btn {
  position: relative;
  flex: none;
  padding: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-40);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.tabs__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.tabs__btn:hover {
  color: var(--ink-70);
}
.tabs__btn.is-active {
  color: var(--ink-100);
}
.tabs__btn {
  /* Count superscript */
}
.tabs__btn sup {
  font-size: 0.65em;
  color: var(--accent);
  margin-left: 3px;
  vertical-align: super;
  font-variant-numeric: tabular-nums;
}

/* Sliding indicator positioned by JS */
.tabs__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  will-change: transform, width;
  transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out);
}

.tabs__panel {
  display: none;
  padding-top: var(--space-6);
}

.tabs__panel.is-active {
  display: block;
}

/* --------------------------------------------------------------------------
   FILTER LIST — galleries and video gallery
   -------------------------------------------------------------------------- */
.filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-list__btn {
  padding: 0.625rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  background: transparent;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.filter-list__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.filter-list__btn:hover {
  color: var(--ink-100);
  border-color: var(--line-strong);
}
.filter-list__btn.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   FILTERABLE GRID — CSS masonry + FLIP animation hooks
   -------------------------------------------------------------------------- */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 991px) {
  .filter-grid {
    --grid-cols: 2;
  }
}
@media (max-width: 767px) {
  .filter-grid {
    --grid-cols: 1;
  }
}

.filter-grid__item {
  will-change: transform, opacity;
}

/* Hidden by the filter — removed from flow so the grid reflows */
.filter-grid__item.is-filtered {
  display: none;
}

/* Masonry variant: CSS columns, items must avoid breaking */
.filter-grid--masonry {
  display: block;
  columns: var(--grid-cols, 3);
  column-gap: var(--space-4);
}
.filter-grid--masonry .filter-grid__item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  display: block;
}

/* Explicit-span masonry: a grid where items claim different row counts */
.filter-grid--spans {
  grid-auto-rows: 12px;
  align-items: stretch;
}
.filter-grid--spans .filter-grid__item {
  grid-row-end: span var(--span, 24);
}

/* Empty-state message when a filter matches nothing */
.filter-empty {
  display: none;
  grid-column: 1/-1;
  padding: var(--space-7) 0;
  text-align: center;
  color: var(--ink-40);
}

.filter-grid.is-empty .filter-empty {
  display: block;
}

/* ==========================================================================
   ECHORA — VIDEO PLAYER
   Native <video> in a cinematic frame with a custom overlay, plus the
   ambient blurred-poster glow used on single-video and the video sections.
   ========================================================================== */
.video-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.video-frame video,
.video-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #000;
  border: 0;
}

/* Blurred copy of the poster bleeding out behind the frame.
   Uses a real <img> rather than a CSS custom property so the path stays
   relative to the document, not to main.css. */
.video-ambient {
  position: relative;
  isolation: isolate;
}

.video-ambient__glow {
  position: absolute;
  inset: 6% 4%;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px) saturate(150%);
  opacity: 0.5;
  transform: translateZ(0);
}
.video-ambient__glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   POSTER OVERLAY — hides once playback starts
   -------------------------------------------------------------------------- */
.video-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transform: scale(1.001);
  transition: transform var(--dur-3) var(--ease-out);
}
.video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.25), rgba(10, 10, 15, 0.65));
}
.video-poster:hover img {
  transform: scale(1.04);
}

.video-frame.is-playing .video-poster {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   CAPTION OVER THE FRAME
   -------------------------------------------------------------------------- */
.video-frame__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
@media (max-width: 767px) {
  .video-frame__caption {
    padding: var(--space-4);
  }
}

.video-frame.is-playing .video-frame__caption {
  opacity: 0;
}

.video-frame__title {
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--ink-100);
  max-width: 18ch;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.video-frame__duration {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--ink-70);
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   VIDEO CARD — grid items in the video gallery
   -------------------------------------------------------------------------- */
.video-card {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-2);
}
.video-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.video-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--dur-3) var(--ease-out);
  will-change: transform;
}
.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10, 10, 15, 0.8) 100%);
  transition: opacity var(--dur-2) var(--ease-out);
}
.video-card:hover img {
  transform: scale(1.06);
}

.video-card--tall img {
  aspect-ratio: 3/4;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.video-card:hover .video-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.video-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
}

.video-card__title {
  font-size: var(--fs-h5);
  line-height: 1.25;
  color: var(--ink-100);
}

.video-card__meta {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   VIDEO SLIDER — full-bleed slides with native playback
   -------------------------------------------------------------------------- */
.video-slider .swiper-slide {
  opacity: 0.35;
  transform: scale(0.94);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.video-slider .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 991px) {
  .video-slider .swiper-slide {
    opacity: 1;
    transform: none;
  }
}
/* 5. SECTIONS */
/* ==========================================================================
   ECHORA — HERO BASE
   Shared scaffolding for all eight home-page heroes. Each variant file adds
   its own composition on top; nothing here is variant-specific.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 991px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + var(--space-7));
    padding-bottom: var(--space-7);
  }
}

/* Keep the hero rail clear of the docked player */
body.has-bottom-player .hero {
  padding-bottom: calc(var(--bottom-player-h) + var(--space-4));
}

.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Background media layer */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img,
.hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.7) 0%, rgba(10, 10, 15, 0.35) 45%, var(--bg-0) 100%);
}

/* Ambient colour wash */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(65% 60% at 15% 20%, rgba(var(--accent-2-rgb), 0.22), transparent 68%), radial-gradient(55% 50% at 85% 75%, rgba(var(--accent-rgb), 0.14), transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   TITLE
   -------------------------------------------------------------------------- */
.hero__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink-100);
  margin: 0;
}

.hero__title em {
  display: inline-block;
}

.hero__text {
  max-width: 44ch;
  margin-top: var(--space-4);
  color: var(--ink-60);
  font-size: var(--fs-lead);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   FOOTER RAIL — scroll cue + socials, shared by every hero
   -------------------------------------------------------------------------- */
.hero__rail {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
}
@media (max-width: 767px) {
  .hero__rail {
    align-items: center;
    padding-top: var(--space-5);
  }
}

.hero__rail-socials {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.hero__rail-socials a {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  transition: color var(--dur-1) var(--ease-out);
}
.hero__rail-socials a:hover {
  color: var(--accent);
}
@media (max-width: 767px) {
  .hero__rail-socials {
    gap: var(--space-3);
  }
  .hero__rail-socials a {
    font-size: 0.6875rem;
  }
}

.hero__rail-note {
  max-width: 26ch;
  font-size: var(--fs-sm);
  color: var(--ink-40);
}
@media (max-width: 991px) {
  .hero__rail-note {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   FLOATING DECORATION — small tilted cards / discs in hero compositions
   -------------------------------------------------------------------------- */
.hero__float {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.hero__float img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .hero__float {
    display: none;
  }
}

/* Vinyl disc decoration */
.hero__vinyl {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, #23232b 0 16%, #0e0e13 16.5% 18%, #1a1a21 18.5% 100%);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 0;
}
.hero__vinyl::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.05), inset 0 0 0 18px rgba(var(--ink-rgb), 0.02), inset 0 0 0 36px rgba(var(--ink-rgb), 0.02);
}
.hero__vinyl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--grad-accent);
}
@media (max-width: 991px) {
  .hero__vinyl {
    display: none;
  }
}

/* ==========================================================================
   ECHORA — HERO 1 (index.html)
   Split editorial: oversized stacked headline on the left, a tall portrait
   with a mask reveal on the right, floating album art with mouse parallax.
   ========================================================================== */
.hero-1 {
  --hero-portrait-w: clamp(280px, 30vw, 460px);
}

.hero-1 .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-portrait-w);
  align-items: center;
  gap: var(--space-7);
}
@media (max-width: 1199px) {
  .hero-1 .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   TEXT COLUMN
   -------------------------------------------------------------------------- */
.hero-1__text {
  position: relative;
  z-index: 3;
}

.hero-1__title {
  font-size: clamp(3rem, 10.5vw, 11rem);
  line-height: 0.86;
  /* The second line is pushed in so the headline reads as a composition */
}
.hero-1__title .hero-1__line-2 {
  display: block;
  padding-left: clamp(0rem, 8vw, 7rem);
}
@media (max-width: 991px) {
  .hero-1__title .hero-1__line-2 {
    padding-left: 0;
  }
}

.hero-1__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  max-width: 620px;
}

.hero-1__stat {
  display: flex;
  flex-direction: column;
}
.hero-1__stat strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink-100);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-1__stat span {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

/* --------------------------------------------------------------------------
   PORTRAIT COLUMN
   -------------------------------------------------------------------------- */
.hero-1__portrait {
  position: relative;
  aspect-ratio: 3/4.2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-1__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-1__portrait {
  /* Duotone accent wash so the 2020s stock photo reads as art-directed */
}
.hero-1__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(var(--accent-2-rgb), 0.35), transparent 55%), linear-gradient(0deg, rgba(10, 10, 15, 0.6), transparent 45%);
  mix-blend-mode: color-dodge;
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 1199px) {
  .hero-1__portrait {
    aspect-ratio: 16/10;
    max-width: 640px;
  }
}

/* Caption plate over the portrait */
.hero-1__portrait-caption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
}

.hero-1__portrait-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-100);
  line-height: 1.3;
}
.hero-1__portrait-title span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   FLOATING ALBUM — overlaps the top-right corner of the portrait,
   mouse-parallaxed
   -------------------------------------------------------------------------- */
.hero-1__album {
  position: absolute;
  right: clamp(0%, 0.8vw, 1.5%);
  top: 18%;
  width: clamp(140px, 13vw, 210px);
  aspect-ratio: 1;
  z-index: 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(-7deg);
}
.hero-1__album img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1399px) {
  .hero-1__album {
    display: none;
  }
}

/* Vinyl peeking out from behind the floating album, on its inner side */
.hero-1 .hero__vinyl {
  right: clamp(5%, 7.5vw, 10%);
  top: 22%;
  width: clamp(120px, 11vw, 180px);
  z-index: 3;
  animation: echora-spin 22s linear infinite;
}
@media (max-width: 1399px) {
  .hero-1 .hero__vinyl {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   GHOST WORD — huge outlined word bleeding off the left edge
   -------------------------------------------------------------------------- */
.hero-1__ghost {
  position: absolute;
  left: calc(var(--gutter) * -1);
  bottom: 6%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 19rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.05);
  filter: url(#echora-outline);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 991px) {
  .hero-1__ghost {
    display: none;
  }
}

/* ==========================================================================
   ECHORA — UPCOMING GIGS
   Editorial ledger rows: oversized date block, venue, time, ticket action.
   A cursor-following poster preview sits above the list on desktop.
   ========================================================================== */
.gigs {
  position: relative;
}

.gigs__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.gigs__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  object-position: center;
}
.gigs__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-0) 0%, transparent 30%, transparent 70%, var(--bg-0) 100%);
}

.gigs__list {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   ROW
   -------------------------------------------------------------------------- */
.gig-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 0.85fr) minmax(0, 1.6fr) minmax(90px, 0.5fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(1.25rem, 2.6vw, 2.25rem) var(--space-4);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
@media (max-width: 1199px) {
  .gig-row {
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr) auto;
    row-gap: var(--space-3);
  }
}
@media (max-width: 767px) {
  .gig-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    padding-inline: 0;
    gap: var(--space-3);
  }
}

/* Fill that sweeps up behind the row on hover */
.gig-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.01));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-2) var(--ease-out);
}

.gig-row:hover::before {
  transform: scaleY(1);
}

/* --------------------------------------------------------------------------
   DATE
   -------------------------------------------------------------------------- */
.gig-row__date {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.gig-row__day {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink-100);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2) var(--ease-out);
}

.gig-row:hover .gig-row__day {
  color: var(--accent);
}

.gig-row__month {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}

.gig-row__month strong {
  color: var(--ink-70);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   VENUE
   -------------------------------------------------------------------------- */
.gig-row__venue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gig-row__city {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  color: var(--ink-100);
  text-transform: uppercase;
}

.gig-row__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-40);
}
.gig-row__place i {
  color: var(--accent);
  font-size: 1em;
}

.gig-row__time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.gig-row__time i {
  font-size: 1.15em;
}
@media (max-width: 1199px) {
  .gig-row__time {
    grid-column: 1/-1;
    order: 3;
  }
}

.gig-row__action {
  justify-self: end;
}
@media (max-width: 767px) {
  .gig-row__action {
    justify-self: start;
  }
}

/* Sold-out state */
.gig-row--sold {
  opacity: 0.55;
}

.gig-row--sold:hover::before {
  transform: scaleY(0);
}

.gig-row__sold {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-40);
}

/* --------------------------------------------------------------------------
   CURSOR PREVIEW
   -------------------------------------------------------------------------- */
.row-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  aspect-ratio: 4/5;
  z-index: 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  margin: -160px 0 0 -130px;
  will-change: transform, opacity;
}
.row-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1199px) {
  .row-preview {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   COMPACT VARIANT — used inside sidebars and the events page grid
   -------------------------------------------------------------------------- */
.gig-row--compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-block: var(--space-4);
}
.gig-row--compact .gig-row__day {
  font-size: var(--fs-h3);
}
.gig-row--compact .gig-row__city {
  font-size: var(--fs-h5);
}

/* ==========================================================================
   ECHORA — VIDEO SECTIONS
   The featured "video clip" block on home pages and the video-gallery grid.
   ========================================================================== */
.video-section {
  position: relative;
}

.video-section__stage {
  position: relative;
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* Oversized outlined caption behind the frame */
.video-section__ghost {
  position: absolute;
  left: 50%;
  top: -0.35em;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.07);
  filter: url(#echora-outline);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.video-section__frame {
  position: relative;
  z-index: 1;
}

/* Meta rail beneath the player */
.video-section__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
@media (max-width: 767px) {
  .video-section__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

.video-section__meta-group {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   VIDEO GALLERY GRID
   -------------------------------------------------------------------------- */
.video-gallery__featured {
  margin-bottom: var(--space-8);
}

.video-gallery__grid {
  --grid-cols: 3;
}
@media (max-width: 1199px) {
  .video-gallery__grid {
    --grid-cols: 2;
  }
}
@media (max-width: 767px) {
  .video-gallery__grid {
    --grid-cols: 1;
  }
}

/* Alternating tall cards give the grid an editorial rhythm */
.video-gallery__grid .filter-grid__item:nth-child(6n+1) .video-card img,
.video-gallery__grid .filter-grid__item:nth-child(6n+4) .video-card img {
  aspect-ratio: 4/5;
}

/* ==========================================================================
   ECHORA — HERO VARIANTS 2–8
   Each demo gets a distinct composition on the shared `.hero` scaffolding.
   ========================================================================== */
/* --------------------------------------------------------------------------
   HERO 2 — full-bleed fade slider with Ken Burns and numbered pagination
   -------------------------------------------------------------------------- */
.hero-2 {
  padding-bottom: 0;
}

.hero-2__slider {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-2__slider .swiper,
.hero-2__slider .swiper-wrapper,
.hero-2__slider .swiper-slide {
  height: 100%;
}
.hero-2__slider .swiper-slide {
  position: relative;
  overflow: hidden;
}
.hero-2__slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 7s linear;
}
.hero-2__slider {
  /* Ken Burns drift on the visible slide */
}
.hero-2__slider .swiper-slide-active img {
  transform: scale(1);
}
.hero-2__slider {
  /* Two scrims: a vertical fade into the page plus a left-side wash so the
     headline stays legible over bright stage photography. */
}
.hero-2__slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.72) 0%, rgba(10, 10, 15, 0.45) 35%, var(--bg-0) 100%), linear-gradient(90deg, rgba(10, 10, 15, 0.82) 0%, rgba(10, 10, 15, 0.25) 55%, transparent 100%);
  pointer-events: none;
}

.hero-2__caption {
  max-width: 16ch;
}

.hero-2__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding-top: var(--space-5);
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}
@media (max-width: 767px) {
  .hero-2__toolbar {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   HERO 3 — typographic: giant outlined/filled headline over a marquee rail
   -------------------------------------------------------------------------- */
.hero-3 .hero__inner {
  align-items: flex-start;
}

.hero-3__title {
  /* Three display lines stack up fast, so the size tracks viewport height as
     well as width — on a short window 13vw overflowed by a whole screen. */
  font-size: clamp(2.5rem, min(8.5vw, 12.5vh), 9rem);
  line-height: 0.86;
  /* Alternating filled and outlined lines */
}
.hero-3__title .hero-3__outline {
  display: block;
  /* The line is a single unit; letting it wrap breaks the
     filled / outlined / italic rhythm. */
  white-space: nowrap;
  color: rgba(var(--ink-rgb), 0.55);
  filter: url(#echora-outline);
}

.hero-3__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-6);
  width: 100%;
  margin-top: var(--space-5);
}
@media (max-width: 991px) {
  .hero-3__aside {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.hero-3__card {
  position: relative;
  width: clamp(180px, min(20vw, 26vh), 280px);
  /* Album artwork is square; a 4/3 box cropped the sleeve's own lettering
     off the top and bottom. */
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-3__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .hero-3__card {
    width: 100%;
    max-width: 320px;
  }
}

.hero-3__marquee {
  /* The track is deliberately wider than the page; keep it from pushing the
     hero out sideways. */
  overflow: hidden;
  margin-top: var(--space-5);
  padding-block: var(--space-3);
  border-block: 1px solid var(--line);
}
.hero-3__marquee .marquee__item {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   HERO 4 — poster: duotone cut-out with the headline layered front and back
   -------------------------------------------------------------------------- */
.hero-4 .hero__inner {
  align-items: center;
  text-align: center;
}

.hero-4__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-4__title {
  position: relative;
  z-index: 3;
  font-size: clamp(3rem, 12vw, 12rem);
  line-height: 0.86;
  mix-blend-mode: difference;
}

/* Duplicate that sits behind the photo, completing the sandwich */
.hero-4__title--behind {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  mix-blend-mode: normal;
  color: var(--ink-100);
  pointer-events: none;
}

.hero-4__photo {
  position: relative;
  z-index: 2;
  width: clamp(240px, 34vw, 480px);
  aspect-ratio: 3/4;
  margin-top: clamp(-6rem, -7vw, -3rem);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.hero-4__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
}
.hero-4__photo {
  /* Duotone wash in the demo accent */
}
.hero-4__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--accent-2-rgb), 0.55), rgba(var(--accent-rgb), 0.35));
  mix-blend-mode: color;
}

.hero-4__meta {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   HERO 5 — album-wall coverflow carousel
   -------------------------------------------------------------------------- */
.hero-5__carousel {
  width: 100%;
  margin-top: var(--space-5);
}
.hero-5__carousel .swiper-slide {
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
  opacity: 0.4;
  transform: scale(0.86);
}
.hero-5__carousel .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

.hero-5__slide {
  /* The slide is an <a>; without this it stays inline, where aspect-ratio
     and overflow do nothing and the slide collapses to zero height. */
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  /* Swiper sizes slides from slidesPerView, so slide height followed the
     viewport's width and ignored its height — on a short window the hero ran
     past the fold. Cap it by the height the rest of the hero needs: the
     header offset and title above, and the slider toolbar and rail below. */
  max-height: calc(100vh - 41rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-5__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-5__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-fade-soft);
}

.hero-5__slide-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   HERO 6 — fullscreen media with a bottom-aligned editorial caption
   -------------------------------------------------------------------------- */
.hero-6 .hero__inner {
  justify-content: flex-end;
}

.hero-6__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: var(--space-6);
}
@media (max-width: 991px) {
  .hero-6__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.hero-6__title {
  font-size: clamp(2.75rem, 9vw, 9rem);
  line-height: 0.9;
}

.hero-6__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-5);
  border-left: 1px solid var(--line);
}
@media (max-width: 991px) {
  .hero-6__side {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   HERO 7 — brutalist mono: ruled grid, quiet type, image revealed on scroll
   -------------------------------------------------------------------------- */
.hero-7 {
  background: var(--bg-0);
}

.hero-7 .hero__glow {
  opacity: 0.35;
}

/* Faint vertical rules behind the type */
.hero-7__rules {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
}
.hero-7__rules span {
  border-right: 1px solid rgba(var(--ink-rgb), 0.045);
}
@media (max-width: 991px) {
  .hero-7__rules {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero-7__title {
  font-size: clamp(3rem, 11.5vw, 12rem);
  line-height: 0.85;
  max-width: 14ch;
}

.hero-7__band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
@media (max-width: 991px) {
  .hero-7__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero-7__strip {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
}
.hero-7__strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* --------------------------------------------------------------------------
   HERO 8 — layered collage, three parallax planes behind a glass panel
   -------------------------------------------------------------------------- */
.hero-8__layers {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 991px) {
  .hero-8__layers {
    display: none;
  }
}

.hero-8__layer {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-8__layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-8__layer--a {
  left: 4%;
  top: 18%;
  width: 22vw;
  aspect-ratio: 3/4;
}

.hero-8__layer--b {
  right: 6%;
  top: 12%;
  width: 26vw;
  aspect-ratio: 4/3;
}

.hero-8__layer--c {
  right: 18%;
  bottom: 8%;
  width: 18vw;
  aspect-ratio: 1;
}

.hero-8__panel {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin-inline: auto;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  text-align: center;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 767px) {
  .hero-8__panel {
    padding: var(--space-5);
  }
}

.hero-8__title {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.94;
}

.hero-8__actions {
  justify-content: center;
}

/* ==========================================================================
   ECHORA — DISCOGRAPHY
   Four variants share one album card; each gets its own composition.
     v1  slider of large covers            (demo-2)
     v2  vinyl sliding out of the sleeve   (demo-3)
     v3  asymmetric editorial grid         (demo-4)
     v4  tracklist-style rows              (demo-5 / demo-6)
   ========================================================================== */
.album-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.album-card__cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow-md);
}
.album-card__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
  will-change: transform;
}
.album-card__cover {
  /* Accent rim that lights up on hover */
}
.album-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0), 0 30px 70px rgba(var(--accent-rgb), 0);
  transition: box-shadow var(--dur-2) var(--ease-out);
  pointer-events: none;
}

.album-card:hover .album-card__cover img {
  transform: scale(1.06);
}

.album-card:hover .album-card__cover::after {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45), 0 30px 70px rgba(var(--accent-rgb), 0.18);
}

/* Play affordance over the cover */
.album-card__play {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.album-card:hover .album-card__play {
  opacity: 1;
  transform: translateY(0);
}

.album-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.album-card__title {
  font-size: var(--fs-h5);
  line-height: 1.25;
  color: var(--ink-100);
  transition: color var(--dur-1) var(--ease-out);
}

.album-card:hover .album-card__title {
  color: var(--accent);
}

.album-card__meta {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  display: block;
  margin-top: 4px;
}

.album-card__year {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-base);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-40);
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   VARIANT 2 — vinyl slides out of the sleeve
   -------------------------------------------------------------------------- */
.discography-2 .album-card__cover {
  overflow: visible;
  border-radius: var(--radius-md);
}
.discography-2 .album-card__cover img {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-md);
}

.album-card__vinyl {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  width: 88%;
  aspect-ratio: 1;
  transform: translate(6%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #23232b 0 15%, #0e0e13 15.5% 17%, #1a1a21 17.5% 100%);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-3) var(--ease-out);
}
.album-card__vinyl::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.05), inset 0 0 0 16px rgba(var(--ink-rgb), 0.02), inset 0 0 0 32px rgba(var(--ink-rgb), 0.02);
}
.album-card__vinyl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--grad-accent);
}

.discography-2 .album-card:hover .album-card__vinyl {
  transform: translate(46%, -50%) rotate(120deg);
}

/* --------------------------------------------------------------------------
   VARIANT 3 — asymmetric editorial grid
   -------------------------------------------------------------------------- */
.discography-3__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
}
@media (max-width: 767px) {
  .discography-3__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Every second item drops down so the grid reads as a composition */
.discography-3__grid > *:nth-child(even) {
  transform: translateY(var(--space-8));
}
@media (max-width: 767px) {
  .discography-3__grid > *:nth-child(even) {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   VARIANT 4 — tracklist rows
   -------------------------------------------------------------------------- */
.discography-4__list {
  border-top: 1px solid var(--line);
}

.album-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.album-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.album-row:hover::before {
  transform: scaleX(1);
}
@media (max-width: 991px) {
  .album-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    row-gap: var(--space-2);
  }
}

.album-row__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
}
.album-row__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}
@media (max-width: 991px) {
  .album-row__thumb {
    width: 48px;
    height: 48px;
  }
}

.album-row__title {
  font-size: var(--fs-h5);
  line-height: 1.25;
  color: var(--ink-100);
  transition: color var(--dur-1) var(--ease-out);
}

.album-row:hover .album-row__title {
  color: var(--accent);
}

.album-row__meta {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.album-row__tracks {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 991px) {
  .album-row__tracks {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   DISCOGRAPHY PAGE — large alternating feature rows
   -------------------------------------------------------------------------- */
.album-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-7);
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--line);
}
.album-feature:last-child {
  border-bottom: 0;
}
@media (max-width: 991px) {
  .album-feature {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-block: var(--space-6);
  }
}

/* Alternate the image side down the page */
.album-feature:nth-child(even) .album-feature__media {
  order: 2;
}
@media (max-width: 991px) {
  .album-feature:nth-child(even) .album-feature__media {
    order: 0;
  }
}

.album-feature__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 520px;
}
.album-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.album-feature__media:hover img {
  transform: scale(1.05);
}

.album-feature__index {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.5);
  filter: url(#echora-outline);
  font-variant-numeric: tabular-nums;
}

.album-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.album-feature__title {
  font-size: var(--fs-h1);
  line-height: 0.98;
  text-transform: uppercase;
}

.album-feature__tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-5);
  width: 100%;
  max-width: 520px;
}
@media (max-width: 575px) {
  .album-feature__tracks {
    grid-template-columns: 1fr;
  }
}

.album-feature__track {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-60);
}
.album-feature__track span:first-child {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.album-feature__track span:last-child {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ECHORA — BAND MEMBERS / ARTISTS
     v1  portrait slider, grayscale to colour       (demo-2 / demo-8)
     v2  grid with a glass panel clip-path reveal   (demo-5)
     v3  giant name index with a cursor portrait    (demo-7)
   ========================================================================== */
.member-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.member-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.member-card__media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.member-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.001);
  transition: filter var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  will-change: transform;
}
.member-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 15, 0.85) 100%);
}

.member-card:hover .member-card__media img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.06);
}

.member-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-4);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.member-card__name {
  font-size: var(--fs-h5);
  line-height: 1.2;
  color: var(--ink-100);
}

.member-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--accent);
  display: block;
  margin-top: 4px;
}

/* Vertical name along the card edge — variant 1 signature detail */
.member-card__edge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-3);
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  letter-spacing: 0.24em;
  color: var(--ink-40);
}

/* --------------------------------------------------------------------------
   VARIANT 2 — glass panel slides up on hover
   -------------------------------------------------------------------------- */
.members-2 .member-card__body {
  padding: var(--space-4);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  border-radius: 0;
  border-inline: 0;
  border-bottom: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-2) var(--ease-out);
}

.members-2 .member-card:hover .member-card__body {
  clip-path: inset(0 0 0 0);
}

/* Name stays visible when the panel is closed */
.members-2 .member-card__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--space-4);
  transition: opacity var(--dur-1) var(--ease-out);
}

.members-2 .member-card:hover .member-card__label {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   VARIANT 3 — name index with a cursor-following portrait
   -------------------------------------------------------------------------- */
.members-3__list {
  border-top: 1px solid var(--line);
  position: relative;
}

.member-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(1.25rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.member-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.member-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--ink-100);
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.member-row__role {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  flex: none;
  transition: color var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .members-3__list:hover .member-row__name {
    color: var(--ink-30);
  }
  .member-row:hover .member-row__name {
    color: var(--accent);
    transform: translateX(var(--space-4));
  }
  .member-row:hover .member-row__role {
    color: var(--accent);
  }
}
/* --------------------------------------------------------------------------
   ARTISTS PAGE — grid of member cards with an index numeral
   -------------------------------------------------------------------------- */
.artists-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 991px) {
  .artists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
@media (max-width: 575px) {
  .artists-grid {
    grid-template-columns: 1fr;
  }
}

/* Stagger every third card for an editorial rhythm */
.artists-grid > *:nth-child(3n+2) {
  transform: translateY(var(--space-6));
}
@media (max-width: 991px) {
  .artists-grid > *:nth-child(3n+2) {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   SINGLE ARTIST — bio layout
   -------------------------------------------------------------------------- */
.artist-profile {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 991px) {
  .artist-profile {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.artist-profile__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3/4;
}
.artist-profile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 992px) {
  .artist-profile__media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.artist-profile__signature {
  max-width: 180px;
  opacity: 0.7;
  filter: invert(1) brightness(1.6);
}

/* ==========================================================================
   ECHORA — TESTIMONIALS / PRESS QUOTES
   Oversized serif italic quote with a ghost quotation mark behind it.
   ========================================================================== */
.testimonials {
  position: relative;
}

.testimonials__inner {
  position: relative;
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

.testimonials__mark {
  position: absolute;
  left: 50%;
  top: -0.35em;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: clamp(10rem, 26vw, 24rem);
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.07);
  filter: url(#echora-outline);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.testimonial {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.testimonial__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  max-width: 22ch;
  text-wrap: balance;
}

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

.testimonial__avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
}
.testimonial__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.testimonial__meta {
  text-align: left;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.testimonial__name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-100);
}

.testimonial__source {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.testimonial__stars {
  display: flex;
  gap: 3px;
  color: var(--accent-warm);
  font-size: 0.95rem;
}

/* Toolbar centred beneath the quote */
.testimonials .slider-toolbar {
  justify-content: center;
  border-top: 0;
  padding-top: var(--space-5);
}

/* ==========================================================================
   ECHORA — NEWS / JOURNAL
   Uses the shared `.media-card` shell with editorial dates and categories.
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
@media (max-width: 991px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}
@media (max-width: 575px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* News page: the first item spans the full width as a feature */
.news-grid--page > *:first-child {
  grid-column: 1/-1;
}
.news-grid--page > *:first-child .media-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--space-6);
}
@media (max-width: 991px) {
  .news-grid--page > *:first-child .media-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.news-grid--page > *:first-child .media-card__media {
  aspect-ratio: 16/10;
}
.news-grid--page > *:first-child .media-card__title {
  font-size: var(--fs-h2);
}
.news-grid--page > *:first-child .media-card__excerpt {
  font-size: var(--fs-lead);
  -webkit-line-clamp: 3;
}

.news-card__date {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink-40);
  letter-spacing: 0;
  text-transform: none;
}

.news-card__category {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--accent);
}

.news-card .media-card__media {
  aspect-ratio: 4/3;
}

/* --------------------------------------------------------------------------
   SINGLE NEWS — article layout
   -------------------------------------------------------------------------- */
.article {
  max-width: 760px;
  margin-inline: auto;
}

.article__hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  margin-bottom: var(--space-7);
  box-shadow: var(--shadow-lg);
}
.article__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
  margin-bottom: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.article__share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Pull quote inside an article */
.pull-quote {
  position: relative;
  margin-block: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  text-align: center;
}
.pull-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ink-100);
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   COMMENTS
   -------------------------------------------------------------------------- */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.comment {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.comment:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.comment--reply {
  margin-left: var(--space-7);
}
@media (max-width: 767px) {
  .comment--reply {
    margin-left: var(--space-4);
  }
}

.comment__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
}
.comment__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.comment__name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-100);
}

.comment__date {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.comment__reply {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--accent);
}

/* ==========================================================================
   ECHORA — PHOTO GALLERY
   CSS masonry with a lightbox trigger overlay. Two visual variants share the
   same tile; only the grid rhythm differs.
   ========================================================================== */
.gallery-grid {
  --grid-cols: 3;
}
@media (max-width: 991px) {
  .gallery-grid {
    --grid-cols: 2;
  }
}
@media (max-width: 575px) {
  .gallery-grid {
    --grid-cols: 1;
  }
}

.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.gallery-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.gallery-tile img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.001);
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-2) var(--ease-out);
  will-change: transform;
}
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.1), rgba(10, 10, 15, 0.75));
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.gallery-tile:hover img {
  transform: scale(1.07);
}
.gallery-tile:hover::after {
  opacity: 1;
}

.gallery-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-4);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.gallery-tile:hover .gallery-tile__caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery-tile__title {
  font-size: var(--fs-h6);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-100);
  line-height: 1.25;
}

.gallery-tile__meta {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

/* Zoom badge in the corner */
.gallery-tile__zoom {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.gallery-tile:hover .gallery-tile__zoom {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   VARIANT 2 — uniform grid with mixed spans (demo-6)
   -------------------------------------------------------------------------- */
.gallery-grid--spans {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr));
  grid-auto-rows: 130px;
  gap: var(--space-3);
  --grid-cols: 4;
}
@media (max-width: 991px) {
  .gallery-grid--spans {
    --grid-cols: 2;
    grid-auto-rows: 110px;
  }
}
.gallery-grid--spans .gallery-tile {
  height: 100%;
}
.gallery-grid--spans .gallery-tile img {
  height: 100%;
  object-fit: cover;
}
.gallery-grid--spans {
  /* Feature tiles claim extra rows/columns */
}
.gallery-grid--spans .filter-grid__item:nth-child(6n+1) {
  grid-row: span 3;
  grid-column: span 2;
}
.gallery-grid--spans .filter-grid__item:nth-child(6n+4) {
  grid-row: span 3;
}
.gallery-grid--spans .filter-grid__item:not(:nth-child(6n+1)):not(:nth-child(6n+4)) {
  grid-row: span 2;
}
@media (max-width: 991px) {
  .gallery-grid--spans .filter-grid__item:nth-child(6n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* --------------------------------------------------------------------------
   FILTER BAR ROW
   -------------------------------------------------------------------------- */
.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 767px) {
  .gallery-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

.gallery-toolbar__count {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ==========================================================================
   ECHORA — STORE / SHOP
   Product tiles with a hover image swap and a slide-up cart action.
   ========================================================================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}
@media (max-width: 1199px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.product-card__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-2);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
}
.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
  will-change: transform;
}

.product-card:hover .product-card__media img {
  transform: scale(1.05);
}

/* Slide-up action bar */
.product-card__action {
  position: absolute;
  inset: auto var(--space-3) var(--space-3) var(--space-3);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  transform: translateY(calc(100% + var(--space-3)));
  transition: transform var(--dur-2) var(--ease-out);
}

.product-card:hover .product-card__action,
.product-card:focus-within .product-card__action {
  transform: translateY(0);
}

.product-card__action .btn {
  flex: 1;
}

.product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}

.product-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.product-card__title {
  font-size: var(--fs-h6);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-100);
  transition: color var(--dur-1) var(--ease-out);
}

.product-card:hover .product-card__title {
  color: var(--accent);
}

.product-card__cat {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  display: block;
  margin-top: 4px;
}

.price {
  flex: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h5);
  color: var(--accent-warm);
  line-height: 1.2;
}

.price del {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-30);
  font-style: normal;
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-warm);
  font-size: 0.8rem;
}
.product-card__rating span {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  margin-left: var(--space-1);
}

/* --------------------------------------------------------------------------
   STORE PROMO BANNER (home "store" section)
   -------------------------------------------------------------------------- */
.store-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
}
@media (max-width: 991px) {
  .store-banner {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }
}

.store-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-glow-accent);
  pointer-events: none;
}

.store-banner__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.store-banner__title {
  font-size: var(--fs-h1);
  line-height: 0.98;
  text-transform: uppercase;
}

.store-banner__media {
  position: relative;
  z-index: 1;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.store-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 991px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.product-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 992px) {
  .product-detail__gallery {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.product-detail__main {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.product-detail__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.product-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.product-detail__thumbs button {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color var(--dur-1) var(--ease-out);
}
.product-detail__thumbs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.product-detail__thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-detail__thumbs button:hover, .product-detail__thumbs button.is-active {
  border-color: var(--accent);
}

.product-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.product-detail__title {
  font-size: var(--fs-h1);
  line-height: 1;
}

.product-detail__price {
  font-size: var(--fs-h3);
}

.product-detail__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

/* Size / colour swatches */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.swatch {
  min-width: 52px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-60);
  text-align: center;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.swatch:hover {
  color: var(--ink-100);
  border-color: var(--ink-40);
}
.swatch.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* 6. PAGES */
/* ==========================================================================
   ECHORA — PAGE-SPECIFIC LAYOUTS
   Contact, single-album, single-event, typography and the shared two-column
   article shell used by the inner pages.
   ========================================================================== */
/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 991px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-info__title {
  font-size: var(--fs-h1);
  line-height: 0.98;
  max-width: 10ch;
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.contact-info__item a,
.contact-info__item p {
  font-size: var(--fs-lg);
  color: var(--ink-100);
  align-self: flex-start;
}
.contact-info__item a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
.contact-info__item a:hover {
  background-size: 100% 1px;
}

.contact-form {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
}
@media (max-width: 767px) {
  .contact-form {
    padding: var(--space-4);
  }
}

.contact-map {
  position: relative;
  margin-top: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21/9;
  border: 1px solid var(--line);
}
.contact-map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) invert(0.92) contrast(0.9);
  opacity: 0.75;
}
@media (max-width: 767px) {
  .contact-map {
    aspect-ratio: 4/3;
  }
}

.contact-map__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--ink-100);
}
.contact-map__pin i {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   SINGLE ALBUM
   -------------------------------------------------------------------------- */
.album-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 991px) {
  .album-hero {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.album-hero__cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 480px;
}
.album-hero__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vinyl sliding out behind the sleeve */
.album-hero__vinyl {
  position: absolute;
  top: 50%;
  right: -22%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #23232b 0 15%, #0e0e13 15.5% 17%, #1a1a21 17.5% 100%);
  box-shadow: var(--shadow-lg);
  z-index: -1;
  animation: echora-spin 26s linear infinite;
}
.album-hero__vinyl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--grad-accent);
}
@media (max-width: 991px) {
  .album-hero__vinyl {
    display: none;
  }
}

.album-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.album-hero__title {
  font-size: var(--fs-display);
  line-height: 0.9;
  text-transform: uppercase;
}

.album-hero__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   SINGLE EVENT
   -------------------------------------------------------------------------- */
.event-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21/9;
  box-shadow: var(--shadow-lg);
}
.event-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-fade-soft);
}
@media (max-width: 767px) {
  .event-hero {
    aspect-ratio: 4/3;
  }
}

.event-hero__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}
@media (max-width: 767px) {
  .event-hero__body {
    padding: var(--space-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

.event-hero__title {
  font-size: var(--fs-h1);
  line-height: 0.98;
  text-transform: uppercase;
}

.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 991px) {
  .event-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.event-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--glass-brd);
}
@media (min-width: 992px) {
  .event-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.event-sidebar__price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h2);
  color: var(--accent-warm);
  line-height: 1;
}

/* Countdown-style stat row */
.event-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  text-align: center;
}
.event-stats > div {
  padding: var(--space-3) var(--space-1);
  border-radius: var(--radius-sm);
  background: rgba(var(--ink-rgb), 0.04);
  border: 1px solid var(--line);
}
.event-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink-100);
  font-variant-numeric: tabular-nums;
}
.event-stats span {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  font-size: 0.625rem;
}

/* --------------------------------------------------------------------------
   SHARED TWO-COLUMN CONTENT SHELL (single-artist / single-news / single-video)
   -------------------------------------------------------------------------- */
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 991px) {
  .content-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 992px) {
  .sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.sidebar__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.sidebar__block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sidebar__title {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  color: var(--ink-100);
}

/* Compact list used inside sidebars (recent posts, related albums) */
.mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mini-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.mini-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.mini-item {
  /* Matched by any heading level: the item's rank depends on the heading
     above it in the page, so it must not be pinned to one tag. */
}
.mini-item :is(h2, h3, h4, h5, h6) {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--ink-100);
  transition: color var(--dur-1) var(--ease-out);
}
.mini-item:hover :is(h2, h3, h4, h5, h6) {
  color: var(--accent);
}
.mini-item span {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
  display: block;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY / STYLE GUIDE PAGE
   -------------------------------------------------------------------------- */
.type-specimen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.type-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 767px) {
  .type-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.type-row__label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.swatch-chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.swatch-chip span:first-child {
  height: 88px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.swatch-chip span:last-child {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

/* --------------------------------------------------------------------------
   PAGINATION (index pages)
   -------------------------------------------------------------------------- */
.pagination-echora {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.pagination-echora a,
.pagination-echora span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.pagination-echora a:hover {
  color: var(--ink-100);
  border-color: var(--line-strong);
}
.pagination-echora .is-current {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* ==========================================================================
   ECHORA — page-group a additions
   Extra rules needed by this group of pages. Keep tokens/mixins-based.
   ========================================================================== */
/* Sections that open a page without a .page-caption above them still have to
   clear the fixed header (single-album). */
.section--below-header {
  padding-top: calc(var(--header-h) + var(--space-7));
}

/* Wider stack step for single-page layouts (matches the .stack-N scale). */
.stack-7 {
  gap: var(--space-7);
}

/* Filter grid rendered as full-width stacked rows instead of columns — used by
   the discography page so .album-feature keeps its own two-column layout and
   its :nth-child(even) side-swap. */
.filter-grid--rows {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* ==========================================================================
   ECHORA — page-group b additions
   Extra rules needed by this group of pages. Keep tokens/mixins-based.
   ========================================================================== */
/* Section that starts directly under the fixed header (single-artist hero) —
   mirrors the clearance .page-caption gets, without the caption chrome. */
.section--head-clear {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
}

/* Breadcrumb sitting above a bare section instead of inside a page caption */
.section--head-clear > .container-echora > .breadcrumb-echora {
  margin-bottom: var(--space-5);
}

/* Signature sits on its own line under the profile body */
.artist-profile__signature {
  display: block;
}

/* ==========================================================================
   ECHORA — page-group c additions
   Extra rules needed by this group of pages. Keep tokens/mixins-based.
   ========================================================================== */
/* --------------------------------------------------------------------------
   SINGLE PRODUCT — the page opens straight into content (no page caption),
   so the first section has to clear the fixed header itself.
   -------------------------------------------------------------------------- */
.product-section {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5.5rem));
}

.product-section__crumbs {
  margin-bottom: var(--space-5);
}

.product-tabs {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.product-tabs .rich-text {
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   SIDEBAR LINK COLUMN (single-news categories)
   -------------------------------------------------------------------------- */
.sidebar__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar__links a {
  align-self: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-60);
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.sidebar__links a:hover {
  color: var(--accent);
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   SINGLE NEWS — comments block below the two-column layout
   -------------------------------------------------------------------------- */
.comments-block {
  max-width: 860px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.comment-form {
  margin-top: var(--space-8);
}
.comment-form form {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   CONTACT — spacing for the submit row under the consent checkbox
   -------------------------------------------------------------------------- */
.contact-form__actions {
  margin-top: var(--space-5);
}

/* ==========================================================================
   ECHORA — page-group d additions
   Extra rules needed by this group of pages. Keep tokens/mixins-based.
   ========================================================================== */
/* ==========================================================================
   ECHORA — page-group e additions
   Extra rules needed by this group of pages. Keep tokens/mixins-based.
   ========================================================================== */
/* ==========================================================================
   ECHORA — page-group f additions
   Extra rules needed by this group of pages. Keep tokens/mixins-based.
   ========================================================================== */