/* ==========================================================
   Design tokens — COTI Brand Style Guide (brand_assets/)
   ========================================================== */
:root {
  /* Brand palette */
  --brand-gold: #F2C94C;           /* Uplifting Gold */
  --brand-teal: #2D9CDB;           /* Poetic Teal */
  --brand-night: #1A252C;          /* Deep Night */
  --brand-cream: #F8F9FA;          /* Festival Cream */

  /* Roles */
  --color-text: var(--brand-night);
  --color-bg: var(--brand-cream);
  --color-ink-inverse: var(--brand-cream);
  --color-accent: var(--brand-gold);
  --color-link: var(--brand-teal);
  --color-selection: rgba(242, 201, 76, .45);
  --color-hero-fallback: var(--brand-night);

  /* Montserrat: headlines and loud statements. Lora: body, poetry, prose. */
  --font-body: "Lora", Georgia, serif;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --font-size-small: 13px;
  --font-size-normal: 16px;
  --font-size-medium: 20px;
  --font-size-large: 36px;
  --font-size-huge: 42px;

  /* Spacing scale — 4px base. Every padding, gap and margin uses one of these steps.
     Sections are separated by generous whitespace rather than hard rules. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Organic shape — no sharp corners anywhere. Nested corners: outer = inner + padding */
  --radius-sm: 8px;                /* small chips, thumbnails inside a frame */
  --radius-md: 12px;               /* controls, strips, media */
  --radius-lg: 16px;               /* sheets, frames, cards */
  --radius-full: 999px;            /* accent dashes and bars */

  /* Borders: thin and low-contrast, only where separation is needed */
  --border-subtle: 1px solid rgba(26, 37, 44, .14);

  /* Floating depth: soft, diffused, low opacity — never a hard offset shadow */
  --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, .38), 0 8px 16px -8px rgba(0, 0, 0, .22);   /* on Deep Night */
  --shadow-soft: 0 16px 32px -16px rgba(26, 37, 44, .28), 0 4px 8px -4px rgba(26, 37, 44, .1);  /* on Festival Cream */
  --shadow-lift: 0 24px 48px -16px rgba(26, 37, 44, .36), 0 8px 16px -8px rgba(26, 37, 44, .14);

  /* Layout: everything scales off one centred column whose width tracks viewport height */
  --col: min(121vh, calc(100vw - 32px));
  --wordmark-k1: .1034;            /* line font-size ÷ column width, measured for Montserrat 900; refined by fitWordmark() in app.js */
  --wordmark-k2: .1345;
  --wordmark-line-gap: calc(var(--col) * .012);
  --nav-size: calc(var(--col) * .036);   /* seven labels across the column */
  --icon-size: calc(var(--col) * .0215);
  --icon-gap: calc(var(--col) * .0095);
  --stage-top: 15vh;
  --stage-bottom: 15vh;
  --logo-scale: .156;              /* large wordmark → small header logo */
  /* Brand mark beside the header logo: as tall as the scaled two-line wordmark
     (.188 = both lines at line-height .74 plus the line gap, as a fraction of --col) */
  --mark-size: calc(var(--col) * var(--logo-scale) * .188);
  --mark-gap: calc(var(--mark-size) * .35);

  /* Music: featured player + thumbnail strip */
  --card-gap: var(--space-2);
  --card-pad: var(--space-4);
  --card-title-size: 2.1vh;
  --player-caption-height: 5vh;
  --thumb-width: calc((var(--col) - 5 * var(--card-gap)) / 6);   /* six visible across the column */
  --thumb-title-size: 1.3vh;
  /* thumbnail image (16:9 of the inner width) + two title lines + paddings */
  --thumbs-height: calc((var(--thumb-width) - 2 * var(--frame-pad)) * 9 / 16 + var(--thumb-title-size) * 2.4 + 2 * var(--frame-pad) + var(--space-2));

  /* Live tour dates */
  --date-size: calc(var(--col) * .0252);   /* 25% below the original .0336 */
  --date-pad: var(--space-2);
  --date-gap: var(--space-1);

  /* Photo slider */
  --frame-pad: var(--space-1);
  --frame-pad-bottom: var(--space-4);
  --slide-width: 100%;            /* of the viewport; only the selected photo shows */
  --slide-duration: 500ms;
  --arrow-inset: var(--space-2);

  /* Bio */
  --bio-pad: var(--space-6);
  --bio-para-gap: var(--space-3);
  --section-gap: var(--space-7);  /* between titled sections inside a sheet */

  /* Contact: newsletter fields keep the width the box had before it went full-width */
  --form-width: calc(var(--col) * .493 - 2 * var(--space-4));

  /* Press kit */
  --epk-pad: var(--bio-pad);
  --gallery-stage-max: 46vh;

  /* Stacking order — keep strict, never use ad-hoc z-index values */
  --z-bg: 0;
  --z-stage: 10;
  --z-chrome: 20;                  /* logo, social, nav: always above revealed content */

  /* Hero photo (936 × 546): fits between the landing wordmark and the nav, never cropped */
  --hero-image: url("images/hero.jpg");
  --hero-ratio: calc(546 / 936);
  --hero-top: calc(8.9vh + var(--col) * .22);   /* just below the landing wordmark */
  --nav-block: var(--nav-size);                 /* height of the nav (one row) */
  --hero-bottom: calc(3.25vh + var(--nav-block) + 2.5vh);   /* nav offset + nav + breathing room */
  --hero-avail: calc(100svh - var(--hero-top) - var(--hero-bottom));
  --hero-width: min(var(--col), var(--hero-avail) / var(--hero-ratio));

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.42, 0, .58, 1);   /* Framer Motion "easeInOut" */
  --state-duration: 600ms;

  /* Aurora background + homepage entrance */
  --aurora-blob: 500px;
  --aurora-rise: 800ms;
  --hero-enter: 900ms;

  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-body);
  line-height: 150%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 719px) {
  :root, input, textarea, select { font-size: 16px; }
}

/* ==========================================================
   Reset (matches source)
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, time, figure, nav, section, header, main, footer, article, button, iframe {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { color: var(--color-text); background: var(--color-hero-fallback); width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; cursor: pointer; color: inherit; }
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
::selection { background: var(--color-selection); }

/* ==========================================================
   Shell
   ========================================================== */
.site {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  color: var(--color-ink-inverse);
}
.site__bg {
  position: absolute; inset: 0;
  z-index: var(--z-bg);
  background: var(--color-hero-fallback);
}
/* Photo: as wide as the column allows while ending above the nav; centred in the space between */
.site__bg::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--hero-top) + (var(--hero-avail) - var(--hero-width) * var(--hero-ratio)) / 2);
  width: var(--hero-width);
  aspect-ratio: 936 / 546;
  transform: translateX(-50%);
  background: var(--hero-image) center / cover no-repeat;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  transition: opacity var(--state-duration) var(--ease-out);
}
/* Sections open on plain Deep Night so the hero doesn't compete with their content */
.site.is-open .site__bg::before { opacity: 0; }

/* ---------- Aurora: blurred brand-colour wash, two soft glows rising in on load ----------
   Ported from the aurora-background component (Framer Motion → CSS keyframes), colours remapped to brand tokens. */
.site__bg::before { z-index: 1; }   /* hero photo above the aurora */
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, var(--brand-teal), var(--brand-gold), var(--brand-cream));
  opacity: .2;
  filter: blur(120px);
}
.aurora__blob {
  position: absolute;
  top: -10%;
  width: var(--aurora-blob);
  height: var(--aurora-blob);
  border-radius: var(--radius-full);
  background: radial-gradient(circle farthest-side, rgba(242, 201, 76, .15), rgba(242, 201, 76, 0));   /* Uplifting Gold glow */
  animation: aurora-rise var(--aurora-rise) var(--ease-in-out) both;
}
.aurora__blob--left  { left: -20%;  animation-delay: 200ms; }
.aurora__blob--right { right: -20%; animation-delay: 500ms; }
@keyframes aurora-rise {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Homepage entrance, staggered after the aurora (as in the component demo): photo, wordmark, then nav + social.
   `translate` (not `transform`) and fill-mode `backwards` so the open-state transforms and fades still apply afterwards. */
.site__bg::before          { animation: hero-enter var(--hero-enter) var(--ease-in-out) 800ms backwards; }
.wordmark                  { animation: hero-enter var(--hero-enter) var(--ease-in-out) 1100ms backwards; }
.social, .primary-nav      { animation: hero-enter var(--hero-enter) var(--ease-in-out) 1400ms backwards; }
@keyframes hero-enter {
  from { opacity: 0; translate: 0 20px; }
  to   { opacity: 1; translate: 0 0; }
}
.site__col {
  position: relative;
  height: 100%;
  width: var(--col);
  margin: 0 auto;
}

/* ==========================================================
   Chrome: wordmark, social, nav (z: chrome)
   ========================================================== */
.wordmark {
  position: absolute;
  z-index: var(--z-chrome);
  left: 0;
  /* puts the first line's cap line at ~8.9vh from the top */
  top: calc(8.9vh + var(--col) * var(--wordmark-k1) * .0615);
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .74;
  letter-spacing: -.01em;
  white-space: nowrap;
  transform-origin: 0 0;
  transition: transform var(--state-duration) var(--ease-out);
}
.wordmark a { display: block; }
/* Two stacked lines, each sized (via --k from app.js) to span the full column */
.wordmark__line { display: block; width: max-content; font-size: calc(var(--col) * var(--k, var(--wordmark-k1))); }
.wordmark__line + .wordmark__line { margin-top: var(--wordmark-line-gap); font-size: calc(var(--col) * var(--k, var(--wordmark-k2))); }

.social {
  position: absolute;
  z-index: var(--z-chrome);
  right: 0;
  top: 3.4vh;
  display: flex;
  gap: var(--icon-gap);
  transition: transform var(--state-duration) var(--ease-out);
}
.social a { position: relative; display: block; width: var(--icon-size); min-width: 16px; aspect-ratio: 1; transition: opacity .2s; }
/* Platform name on hover: a small cream chip under the icon, read from its aria-label */
/* A larger invisible hit area, so the small icons are easy to tap (stays inside the gap between icons) */
.social a::before { content: ""; position: absolute; inset: calc(-1 * var(--space-1)); }
.social a::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
  font: 700 11px / 1.2 var(--font-display);
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% calc(-1 * var(--space-1));
  transition: opacity .2s var(--ease-out), translate .2s var(--ease-out);
}
.social li:last-child a::after { left: auto; right: 0; translate: 0 calc(-1 * var(--space-1)); }   /* keep the last chip inside the column */
.social a:hover::after, .social a:focus-visible::after { opacity: 1; translate: -50% 0; }
.social li:last-child a:hover::after, .social li:last-child a:focus-visible::after { translate: 0 0; }
.social a:hover { color: var(--color-accent); }
.social svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.primary-nav {
  position: absolute;
  z-index: var(--z-chrome);
  left: 0; right: 0;
  bottom: 3.25vh;
}
/* Fixed gap (the spacing seven labels had when spread across the column), so hiding an item
   doesn't stretch the others apart; with all seven shown it still spans the column exactly */
.primary-nav ul { display: flex; justify-content: flex-start; gap: calc(var(--col) * .0238); }
.primary-nav li[data-off] { display: none; }   /* switched-off sections (see index.html) */
.primary-nav a {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--nav-size);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .2s;
}
.primary-nav a:hover { color: var(--color-accent); }
/* Active-section bar above the label */
.primary-nav a::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -.2em;
  height: .09em;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.primary-nav a[aria-current="true"]::before { transform: scaleX(1); }
.primary-nav a[aria-current="true"] { color: var(--color-accent); }

.brand-mark {
  position: absolute;
  z-index: var(--z-chrome);
  left: 0;
  /* the collapsed wordmark's top edge (see the open-state transform below) */
  top: calc(4.4vh + var(--col) * var(--wordmark-k1) * .0615 * var(--logo-scale));
  width: var(--mark-size);
  height: var(--mark-size);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--state-duration) var(--ease-out);
}
.brand-mark img { display: block; width: 100%; height: 100%; }

/* Open state: wordmark collapses to the header logo beside the brand mark, icons drop to align with it */
.site.is-open .wordmark {
  transform: translate(calc(var(--mark-size) + var(--mark-gap)), calc(-4.5vh - var(--col) * var(--wordmark-k1) * .0615 * (1 - var(--logo-scale)))) scale(var(--logo-scale));
}
.site.is-open .brand-mark { opacity: 1; pointer-events: auto; }
.site.is-open .social { transform: translateY(1.7vh); }

/* ==========================================================
   Stage: revealed sections (z: stage)
   ========================================================== */
.stage {
  position: absolute;
  z-index: var(--z-stage);
  left: 0; right: 0;
  top: var(--stage-top);
  bottom: var(--stage-bottom);
  pointer-events: none;
}
.site.is-open .stage { pointer-events: auto; }

.panel {
  position: absolute;
  inset: 0;
  color: var(--color-text);
}
.panel[hidden] { display: none; }
.panel.is-revealing { animation: panel-in var(--state-duration) var(--ease-out) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Music: featured player over a strip of thumbnails ---------- */
.panel--music {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.player { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.player__frame {
  background: var(--color-bg);
  padding: var(--frame-pad);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
}
/* Largest 16:9 that fits the stage once the caption and thumbnail strip are taken out */
.player__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(calc(var(--col) - 2 * var(--frame-pad)),
    calc((100vh - var(--stage-top) - var(--stage-bottom) - var(--thumbs-height) - var(--card-gap)
          - var(--player-caption-height) - 2 * var(--frame-pad)) * 16 / 9));
  background: var(--brand-night);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.player__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__caption {
  width: 0; min-width: 100%;       /* follow the video's width instead of stretching the frame */
  height: var(--player-caption-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--card-pad);
  padding: 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--card-title-size);
  letter-spacing: .03em;
  word-spacing: .1em;
}
.player__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.player__year { flex: none; letter-spacing: .02em; color: var(--color-link); }

.thumbs {
  flex: none;
  display: flex;
  gap: var(--card-gap);
  height: var(--thumbs-height);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.thumb {
  flex: 0 0 var(--thumb-width);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  padding: var(--frame-pad);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.thumb:hover, .thumb[aria-current="true"] { background: var(--color-accent); }
.thumb__img {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: var(--brand-night) center / cover no-repeat;
}
.thumb__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--thumb-title-size);
  line-height: 1.2;
  letter-spacing: .02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Video strips (MUSIC, PRESS live videos): small < > arrows over the edges, as on the PHOTOS slider.
   A Deep Night chip keeps the glyph legible over the cream cards. */
.strip { position: relative; flex: none; }
.strip__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-night) 72%, transparent);
  box-shadow: var(--shadow-float);
  color: var(--color-ink-inverse);
  font: 900 18px / 1 var(--font-display);
  transition: color .2s, background .2s;
}
.strip__arrow:hover { color: var(--color-accent); background: var(--brand-night); }
.strip__arrow[hidden] { display: none; }
.strip__arrow--prev { left: var(--space-2); }
.strip__arrow--next { right: var(--space-2); }

/* ---------- Live: stacked tour-date strips ---------- */
.panel--live { overflow: auto; scrollbar-width: none; overscroll-behavior: contain; }
.dates {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--date-gap);
}
.date-row {
  background: var(--color-bg);
  padding: 0 var(--date-pad);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: calc(var(--date-size) * var(--date-scale, 1));   /* --date-scale: set by app.js so the widest row fits */
  line-height: 1.32;
  letter-spacing: -.01em;
  word-spacing: .15em;
  white-space: nowrap;             /* one line per date; on narrow screens the list scrolls sideways */
}
.date-row__tickets { color: var(--color-link); transition: color .2s; }
a.date-row__tickets:hover { color: var(--color-text); }

/* ---------- Photo: framed slider, one photo at a time ---------- */
.slider {
  height: 100%;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: var(--frame-pad) var(--frame-pad) var(--frame-pad-bottom);
}
.slider__viewport {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  touch-action: pan-y;
  user-select: none;
}
.slider__track { position: absolute; inset: 0; }
.slide {
  position: absolute;
  top: 0; bottom: 0;
  width: var(--slide-width);
  left: calc((100% - var(--slide-width)) / 2);
  transform: translateX(calc(var(--o, 0) * 100%));
  transition: transform var(--slide-duration) var(--ease-out);
}
.slide.is-instant { transition: none; }
.slide[hidden] { display: none; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Portrait shots: shown whole on Deep Night rather than cropped to the landscape frame */
.slide--contain { background: var(--brand-night); }
.slide--contain img { object-fit: contain; }

/* Photo credits: small chip in the bottom-right corner of the picture */
.photo-credit {
  position: absolute;
  right: var(--space-2); bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-night) 62%, transparent);
  color: var(--color-ink-inverse);
  font: 600 10px / 1.2 var(--font-display);
  letter-spacing: .06em;
  pointer-events: none;
}
/* A photo shown whole: a box the size of the visible picture, centred in its frame (container query units) */
.photo-box { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; }
.photo-fit { --ratio: 1.5; position: relative; aspect-ratio: var(--ratio); width: min(100cqw, 100cqh * var(--ratio)); }
.photo-fit img { display: block; width: 100%; height: 100%; }

/* Arrows sit above the slides but inside the stage layer */
.slider__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--nav-size);
  line-height: 1;
  color: var(--color-ink-inverse);
  padding: var(--space-1) var(--space-2);
  transition: color .2s;
}
.slider__arrow:hover { color: var(--color-accent); }
.slider__arrow--prev { left: var(--arrow-inset); }
.slider__arrow--next { right: var(--arrow-inset); }

/* ---------- Bio: white text box, height follows content ---------- */
.bio {
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  background: var(--color-bg);
  padding: var(--bio-pad);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  font-size: var(--font-size-normal);
  line-height: 1.6;
}
.bio p + p { margin-top: var(--bio-para-gap); }
/* Language groups: a teal Montserrat label (as on the style guide's accent labels), gold rule between groups */
.bio__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-small);
  letter-spacing: .12em;
  color: var(--color-link);
}
.bio__lang + .bio__lang { margin-top: var(--section-gap); }
/* Short gold accent instead of a full-width rule, so groups are parted by space, not lines */
.bio__lang + .bio__lang::before,
.epk__section + .epk__section::before {
  content: "";
  display: block;
  width: var(--space-6);
  height: var(--space-1);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-accent);
}
.bio em, .bio blockquote { font-style: italic; }
.bio a { color: var(--color-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }   /* as on PRESS */
.bio a:hover { color: var(--color-text); }

/* ---------- Press: one cream sheet like Bio; full-width titled sections, split by the gold rule ---------- */
.epk {
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  background: var(--color-bg);
  padding: var(--epk-pad);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  font-size: var(--font-size-normal);
  line-height: 1.6;
}
.epk a { color: var(--color-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.epk a:hover { color: var(--color-text); }
.epk p + p { margin-top: var(--bio-para-gap); }
/* Past shows above the live videos: the sheet's body text (Lora, as the bio), one show per line */
.epk__shows { margin-bottom: var(--space-5); }
.epk__shows li + li { margin-top: var(--space-1); }
.epk__section + .epk__section { margin-top: var(--section-gap); }   /* same accent as between the Bio languages */

/* Section titles: Montserrat, as on the newsletter heading */
.epk__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.epk__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: .01em;
  word-spacing: .1em;
}

/* Language toggle: teal labels as on the Bio section, the active one on gold */
.epk__langs { display: flex; gap: var(--space-1); }
.epk__langs button {
  padding: var(--space-2) var(--space-3);
  font: 700 var(--font-size-small) / 1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-link);
  border-radius: var(--radius-md);
  transition: background .2s, color .2s;
}
.epk__langs button:hover { color: var(--color-text); }
.epk__langs button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-text); }
.epk__lang[hidden] { display: none; }
/* Bio photo: floated top right under the header row (the EN / FR toggle stays there), text wrapping on its left */
.epk__summary { display: flow-root; }   /* contains the floated photo when the text is short */
.epk__summary-photo {
  float: right;
  width: min(40%, 20rem);
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 0 var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: var(--brand-night);
}

/* Facts + members: teal Montserrat label over each value */
.epk__rows { margin: 0; }   /* dl is not in the reset */
.epk__rows div + div { margin-top: var(--space-3); }
.epk__rows dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-link);
}
.epk__rows dd { margin: var(--space-1) 0 0; }

.epk__empty { font-style: italic; }

/* Reviews pull quote: Lora italic, the speaker as a teal label */
.epk__quote { margin: 0 0 var(--space-5); }
.epk__quote blockquote { margin: 0; }
.epk__quote p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
}
.epk__quote figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-link);
}
.epk__quote figcaption::before { content: "— "; }

/* Press tiles: night tiles on the cream sheet, gold on hover (as the MUSIC thumbnails) */
.epk__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.epk .epk__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  height: 100%;
  min-height: 9rem;
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: var(--brand-night);
  color: var(--color-ink-inverse);
  text-decoration: none;
  transition: background .2s, color .2s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.epk__tile-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: max(10px, calc(var(--card-title-size) * .75));   /* 25% under the caption size, so long article titles sit lighter; 10px floor */
  line-height: 1.25;
  letter-spacing: .03em;
  word-spacing: .1em;
}
.epk__tile-source {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.epk .epk__tile:hover { background: var(--color-accent); color: var(--color-text); box-shadow: var(--shadow-lift); transform: translateY(calc(-1 * var(--space-1))); }
.epk__tile:hover .epk__tile-source { color: var(--color-text); }

/* Listen: album player. Top: the cover beside a head whose title sits level with the cover's top edge and
   whose "Stream on" links sit level with its bottom edge. Beneath, full width, the player card:
   now playing + transport, progress, then the tracklist with MP3 / WAV per track. */
.listen {
  display: grid;
  grid-template-columns: var(--listen-cover) minmax(0, 1fr);
  grid-template-areas: "cover head" "card card";
  column-gap: var(--space-5);
  --listen-cover: 15rem;           /* 240px, full size: tall enough for the title block and two rows of stream links */
  --listen-muted: color-mix(in srgb, var(--brand-night) 55%, transparent);
  --listen-line: color-mix(in srgb, var(--brand-night) 10%, transparent);
}
.listen__cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--brand-night);
  box-shadow: var(--shadow-soft);
}
.listen__cover { grid-area: cover; }
.listen__head { grid-area: head; display: flex; flex-direction: column; min-width: 0; }
.listen__card, .listen__empty { grid-area: card; }
/* Album title in Lora italic, echoing the script lettering on the cover */
.listen__album {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 32px;
  line-height: 1.15;
}
.listen__artist { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 700; }
.listen__meta, .listen__sub { font-size: var(--font-size-small); color: var(--listen-muted); }
.listen__meta { margin-top: var(--space-1); }

/* Player card: thin low-contrast border, organic corners, inner lines in the same soft tone */
.listen__downloads { margin-top: var(--space-5); }   /* Album Credits + Lyrics tiles under the player */
.listen__card {
  margin-top: var(--space-5);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.listen__now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.listen__now-text { min-width: 0; }
.listen__now-title, .listen__now-text .listen__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.listen__now-title { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-normal); }

.listen__transport { flex: none; display: flex; align-items: center; gap: var(--space-1); }
.listen__transport svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.listen__play {
  width: var(--space-6);
  height: var(--space-6);
  padding: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  transition: background .2s, color .2s, box-shadow .3s var(--ease-out);
}
.listen__play:hover { background: var(--color-text); color: var(--color-accent); box-shadow: var(--shadow-lift); }
.listen__skip {
  width: var(--space-5);
  height: var(--space-5);
  padding: var(--space-2);
  border-radius: var(--radius-full);
  color: var(--color-text);
  transition: color .2s, background .2s;
}
.listen__skip:hover { background: var(--listen-line); color: var(--color-link); }

/* Progress: elapsed · bar · length on one line */
.listen__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--listen-line);
}
.listen__time {
  flex: none;
  min-width: 2.5em;
  font: 700 11px / 1.2 var(--font-display);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--listen-muted);
}
.listen__time:last-child { text-align: right; }
/* Seek bar: soft rounded track, gold fill up to the playhead (--p), Deep Night knob */
.listen__seek {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: var(--space-4);
  background: none;
  cursor: pointer;
}
.listen__seek::-webkit-slider-runnable-track {
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-accent) var(--p, 0%), color-mix(in srgb, var(--brand-night) 14%, transparent) var(--p, 0%));
}
.listen__seek::-moz-range-track {
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-accent) var(--p, 0%), color-mix(in srgb, var(--brand-night) 14%, transparent) var(--p, 0%));
}
.listen__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--space-3);
  height: var(--space-3);
  margin-top: calc((var(--space-1) - var(--space-3)) / 2);
  border-radius: var(--radius-full);
  background: var(--color-text);
  box-shadow: var(--shadow-soft);
}
.listen__seek::-moz-range-thumb {
  width: var(--space-3);
  height: var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-text);
  box-shadow: var(--shadow-soft);
}
.listen__seek:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Tracklist: number · title over credit · MP3 / WAV · length; the current track on a soft gold wash */
.listen__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--space-6);
  align-items: center;
  gap: var(--space-3);
  padding-right: var(--space-4);
  border-top: 1px solid var(--listen-line);
  transition: background .2s;
}
.listen__row:hover { background: color-mix(in srgb, var(--brand-night) 4%, transparent); }
.listen__row[data-current] { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.listen__track {
  display: grid;
  grid-template-columns: var(--space-4) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  text-align: left;
}
.listen__num { font: 700 var(--font-size-small) / 1 var(--font-display); color: var(--color-link); text-align: right; font-variant-numeric: tabular-nums; }
.listen__name { display: flex; flex-direction: column; min-width: 0; }
.listen__title, .listen__name .listen__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.listen__title { font-family: var(--font-display); font-weight: 600; font-size: var(--font-size-normal); }
.listen__row[data-current] .listen__title { font-weight: 700; }

/* Per-track format chips: play this track as MP3 or WAV; the one playing is on gold */
.listen__formats { display: flex; gap: var(--space-1); }
.listen__format {
  padding: var(--space-1) var(--space-2);
  border: var(--border-subtle);
  border-radius: var(--radius-full);
  font: 700 11px / 1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-link);
  transition: background .2s, color .2s, border-color .2s;
}
.listen__format:hover { color: var(--color-text); border-color: var(--color-text); }
.listen__format[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); }
.listen__dur { font: 700 var(--font-size-small) / 1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; color: var(--listen-muted); }

/* Stream on: label + one row of round icon links (the header's platform icons); the name shows on hover */
/* margin-top: auto pins the links to the bottom of the head, level with the cover's bottom edge */
.listen__streams { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); }
.listen__label {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-link);
}
.listen__stream-list { display: flex; gap: var(--space-2); }
.epk .listen__stream {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--space-5);
  height: var(--space-5);
  border: var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--color-text);
  text-decoration: none;
  transition: background .2s, border-color .2s, box-shadow .3s var(--ease-out);
}
.listen__stream svg { width: var(--space-3); height: var(--space-3); fill: currentColor; }
.epk .listen__stream:hover, .epk .listen__stream:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); box-shadow: var(--shadow-soft); }
/* Platform name on hover, as on the header icons: a Deep Night chip above the icon (cream would vanish on the sheet) */
.listen__stream::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--brand-night);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-soft);
  font: 700 11px / 1.2 var(--font-display);
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% var(--space-1);
  transition: opacity .2s var(--ease-out), translate .2s var(--ease-out);
}
.listen__stream:hover::after, .listen__stream:focus-visible::after { opacity: 1; translate: -50% 0; }

/* Galleries (photos, live videos): featured item over a thumbnail grid, as on MUSIC */
.gallery__stage { position: relative; width: 100%; max-height: var(--gallery-stage-max); background: var(--brand-night); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }   /* featured item + a thumbnail row fit the sheet, as on MUSIC */
.gallery--photo .gallery__stage { aspect-ratio: 3 / 2; }
.gallery--video .gallery__stage { aspect-ratio: 16 / 9; }
.gallery__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--card-pad);
  min-height: var(--player-caption-height);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--card-title-size);
  letter-spacing: .03em;
  word-spacing: .1em;
}
.gallery__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* one line, as the MUSIC caption */
.gallery__year { flex: none; letter-spacing: .02em; color: var(--color-link); }
.epk .gallery__download {
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-text);
  font-size: var(--font-size-small);
  letter-spacing: .08em;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background .2s, color .2s;
}
.epk .gallery__download:hover { background: var(--color-text); color: var(--color-accent); }
.gallery__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--card-gap); }
.gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--brand-night) center / cover no-repeat;
  border-radius: var(--radius-sm);
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: outline-color .2s, opacity .2s;
}
.gallery__thumb:hover { opacity: .85; }
.gallery__thumb[aria-current="true"] { outline-color: var(--color-accent); }

/* ---------- Contact: contacts + newsletter form ---------- */
.contact {
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  background: var(--color-bg);
  padding: var(--bio-pad);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  font-size: var(--font-size-normal);
  line-height: 1.6;
}
.contact__list p + p { margin-top: var(--bio-para-gap); }
.contact__email { text-decoration: underline; text-underline-offset: 2px; }   /* underlined for emphasis, deliberately not a link */

.newsletter { margin-top: var(--section-gap); }
.newsletter__heading {
  font-family: var(--font-display);
  font-weight: 800;
  /* one line: 22px, or smaller when the sheet is too narrow (--heading-em = the line's width in ems) */
  --heading-em: 30;
  font-size: min(22px, calc((var(--col) - 2 * var(--bio-pad)) / var(--heading-em)));
  white-space: nowrap;
  line-height: 1.15;
  letter-spacing: .01em;
  word-spacing: .1em;
}
/* Gold underline accent, as on the style guide's section headings */
.newsletter__heading::after {
  content: "";
  display: block;
  width: var(--space-6);
  height: var(--space-1);
  margin-top: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent);
}
.newsletter__note { margin-top: var(--space-2); font-size: var(--font-size-small); font-style: italic; }
.newsletter__fields { display: flex; flex-direction: column; max-width: var(--form-width); margin-top: var(--space-5); }
.newsletter__fields input + label { margin-top: var(--space-3); }
.newsletter input {
  display: block;
  width: 100%;
  height: var(--space-5);
  padding: 0 var(--space-2);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.newsletter input:focus { outline: 2px solid var(--color-link); outline-offset: 0; border-color: transparent; }
.newsletter__status { font-size: var(--font-size-small); min-height: 0; }
.newsletter__status:not(:empty) { margin-top: var(--space-2); }
.newsletter__submit {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  background: var(--color-accent);
  color: var(--color-text);
  font: 800 13px / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: background .2s, color .2s;
}
.newsletter__submit:hover { background: var(--color-text); color: var(--color-accent); }
.newsletter__submit:disabled { opacity: .6; cursor: default; }
.newsletter .newsletter__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .wordmark, .brand-mark, .social, .primary-nav a::before { transition: none; }
  .panel.is-revealing { animation: none; }
  .aurora__blob, .site__bg::before, .wordmark, .social, .primary-nav { animation: none; }
  .epk .epk__tile:hover { transform: none; }
}

/* ==========================================================
   Mobile
   ========================================================== */
/* Portrait screens (phones, upright tablets): hero photo directly under the wordmark, as on desktop,
   instead of floating mid-screen in the extra height */
@media (orientation: portrait) {
  .site__bg::before { top: calc(var(--hero-top) + var(--space-3)); }
}

@media (max-width: 718px) {
  .listen { grid-template-columns: 1fr; grid-template-areas: "cover" "head" "card"; row-gap: var(--space-4); --listen-cover: 15rem; }
  .listen__cover { max-width: var(--listen-cover); }
  .listen__album { font-size: 26px; }
  .listen__row { grid-template-columns: minmax(0, 1fr) auto; padding-right: var(--space-3); }
  .listen__dur { display: none; }   /* room for the format chips on a phone */
  .listen__card { margin-top: var(--space-2); }
  :root {
    --nav-size: 24px;
    --icon-size: 16px;
    --icon-gap: var(--space-2);                                 /* eight icons must clear the header logo */
    --stage-top: 12vh;
    --stage-bottom: 22vh;
    --card-pad: var(--space-3);
    --form-width: 100%;
    --card-title-size: 13px;
    --player-caption-height: 36px;
    --thumb-width: 38vw;
    --thumb-title-size: 10px;
    --date-size: 13.5px;
    --bio-pad: var(--space-4);
    --section-gap: var(--space-6);
    --logo-scale: .351;
    --nav-block: calc(var(--nav-size) * 2 + var(--space-2));   /* nav wraps to two rows */
  }
  .newsletter__heading { font-size: 18px; white-space: normal; }   /* a phone is too narrow for one readable line */
  .primary-nav ul { flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2) var(--space-3); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .epk__tiles { grid-template-columns: 1fr; }
  .player { flex: none; }          /* thumbnails sit right under the player instead of at the stage bottom */
  /* Stream on: label over the icons, which keep their single row */
  .listen__streams { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  /* Too narrow to wrap text beside the photo: it sits full width above the text instead */
  /* Too narrow to wrap text beside the photo: it sits full width above the text, cropped wider */
  .epk__summary-photo { float: none; width: 100%; aspect-ratio: 4 / 3; object-position: 50% 30%; margin: 0 0 var(--space-4); }
  /* Landscape 3:2 frame so band shots show the whole collective instead of a cropped middle slice */
  .slider { height: auto; }
  .slider__viewport { height: auto; aspect-ratio: 3 / 2; }
}