/* ==========================================================================
   Félix Zurstrassen : site stylesheet (homepage, static build before WordPress)

   - One BEM prefix: fz-. Sections reuse the same tokens, container and
     section padding: change a value here, every section follows.
   - Typography of mockup V3 everywhere: Onest 400/500, all uppercase,
     tight display headings. Layouts come from V1 / V2 / V3 (see index.html).
   - Mobile-first. Breakpoints, used the same way in every section:
       768px  tablet   (2 columns become 6/12, header CTA appears)
       1024px desktop  (centred nav replaces the menu button, 12-col layouts)
       1440px large    (wider gutter and gaps)
       1920px wide     (margins frozen at their 24" size, content grows)
   - Black / white / grey (60 / 30 / 10): the photos and videos bring the colour.
   - Everything is visible by default. GSAP sets hidden start states at
     runtime (assets/js/animations.js), never this file.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour + opacity variants (contrast measured on the solid background) */
  --fz-black: #0a0a0a;
  --fz-white: #ffffff;
  --fz-tile-bg: #161616;
  --fz-on-dark-muted: rgb(255 255 255 / 0.68);   /* 9:1 on black */
  --fz-on-dark-soft: rgb(255 255 255 / 0.84);
  --fz-on-light-muted: rgb(10 10 10 / 0.66);     /* 5.6:1 on white */
  --fz-line-dark: rgb(255 255 255 / 0.24);
  --fz-line-light: rgb(10 10 10 / 0.16);
  --fz-glass: rgb(10 10 10 / 0.88);
  --fz-shadow: 0 1.5rem 3rem rgb(10 10 10 / 0.3);
  --fz-radius: 8px;   /* pictures: News cards, About portrait, album covers, Media tiles */

  /* 8-point spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* Type: Major Second on phones -> Perfect Fourth on desktop, fluid (clamp) */
  --fz-font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fz-fs-xs: 0.8125rem;
  --fz-fs-sm: 0.875rem;
  --fz-fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fz-fs-lg: clamp(1.25rem, 1rem + 1vw, 2rem);
  --fz-fs-quote: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  --fz-fs-menu: clamp(2.5rem, 1.5rem + 5vw, 4rem);
  --fz-fs-h2: clamp(2.5rem, 1rem + 6.4vw, 8rem);
  --fz-fs-name: 12.4vw;          /* phones: 2 lines, ZURSTRASSEN fills the width */
  --fz-fs-nova: 24vw;            /* NOVA letters spread across the width (closed in by GSAP) */
  --fz-track-tight: -0.04em;

  /* Layout */
  --fz-container: 90rem;                                   /* 1440px */
  --fz-gutter: var(--space-2);
  --fz-col-gap: var(--space-2);
  --fz-section-pad: clamp(var(--space-10), 2rem + 8vw, var(--space-20));
  --fz-title-gap: clamp(var(--space-5), 1rem + 4vw, var(--space-10));
  --fz-header-h: var(--space-8);
  --fz-mosaic-gap: var(--space-1);
  --fz-play: var(--space-4);
  --fz-np-h: var(--space-8);                 /* now-playing bar height */
  --fz-np-space: var(--fz-np-h);             /* room kept free at the bottom of the page */

  /* Motion reference (aircenter curve, as in mockup V3) */
  --fz-ease: cubic-bezier(0.25, 0.74, 0.22, 0.99);
}

@media (min-width: 768px) {
  :root {
    --fz-gutter: var(--space-3);
    --fz-col-gap: var(--space-3);
    --fz-fs-name: min(8.6vw, 7.75rem);   /* one line, FÉLIX ZURSTRASSEN fills the container */
    --fz-fs-nova: min(20vw, 18rem);      /* smaller letters = wider gaps (aircenter "A I R") */
  }
}

@media (min-width: 1024px) {
  :root {
    --fz-play: var(--space-6);
    --fz-np-space: calc(var(--fz-np-h) + var(--space-2)); /* floating bar, bottom-left */
    --fz-gutter: var(--space-4);
    --fz-header-h: var(--space-10);
    --fz-mosaic-gap: var(--space-2);
  }
}

@media (min-width: 1440px) {
  :root {
    --fz-gutter: var(--space-6);
    --fz-col-gap: var(--space-4);
  }
}

/* Beyond a 24" screen (1920px) the side margins stay at their 24" size
   (240px each side) and the content grows with the screen */
@media (min-width: 1920px) {
  :root { --fz-container: calc(100vw - 30rem); }
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Lenis drives the scroll itself: native smooth scrolling would fight it */
html.lenis { scroll-behavior: auto; }

/* Menu or lightbox open: the page behind stays put */
html:has(dialog[open]) { overflow: hidden; }

.fz-body {
  margin: 0;
  background: var(--fz-black);
  color: var(--fz-white);
  font-family: var(--fz-font);
  font-size: var(--fz-fs-body);
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  padding-block-end: var(--fz-np-space);     /* the now-playing bar never covers the footer */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.fz-body) :is(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.fz-body) :is(h1, h2, h3, p, figure, blockquote, ul, ol) { margin: 0; }

:where(.fz-body) :is(ul, ol) { padding: 0; list-style: none; }

:where(.fz-body) a { color: inherit; }

:where(.fz-body) button { font: inherit; text-transform: inherit; }

.fz-body :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Elements focused by the skip link / anchor handler: no ring around a whole section */
.fz-main:focus,
.fz-scroll-target:focus { outline: none; }

/* Screen-reader only */
.fz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fz-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.fz-skip {
  position: fixed;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--fz-white);
  color: var(--fz-black);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.fz-skip:focus { transform: none; }

/* ---------- 3. Shared components ---------- */
.fz-container {
  width: min(100% - 2 * var(--fz-gutter), var(--fz-container));
  margin-inline: auto;
}

/* Every section after the hero slides over it (sticky hero, z-index 0);
   same z-index for all: the later section in the DOM paints on top */
.fz-section {
  position: relative;
  z-index: 1;
  padding-block: var(--fz-section-pad);
}

.fz-section--light {
  background: var(--fz-white);
  color: var(--fz-black);
}

/* Two white sections meeting at a fractional position: the black page
   shows through as a thin line; the second one covers the seam */
.fz-section--light + .fz-section--light { box-shadow: 0 -1px 0 var(--fz-white); }

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

/* Stacked section (About): NOVA slides over it.
   Class and height set by animations.js, only when motion is allowed.
   Sticks when its BOTTOM reaches the viewport bottom: a tall section is
   fully read before being covered. */
.fz-section--stack {
  position: sticky;
  top: min(0px, calc(100vh - var(--fz-stack-h, 0px)));
  top: min(0px, calc(100svh - var(--fz-stack-h, 0px)));
}

/* Dim layer added by animations.js; its opacity is scrubbed */
.fz-section__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--fz-black);
  opacity: 0;
  pointer-events: none;
}

/* Anchor landing (About): the heading always lands at least 16px below the
   fixed header, where the section padding alone is too short (phones).
   Read by the Lenis anchor handler too (animations.js). */
/* Anchor landing (home sections but Contact): 32px lower than the section
   top, when the heading stays clear of the fixed header (desktop; phones
   keep 0). Read by the Lenis anchor handler too (animations.js). */
.fz-main > :where(.fz-section[id]) {
  scroll-margin-top: max(calc(-1 * var(--space-4)), min(0px, calc(var(--fz-header-h) + var(--space-3) - var(--fz-section-pad))));
}

.fz-main > .fz-about {
  scroll-margin-top: calc(max(calc(-1 * var(--space-4)), calc(var(--fz-header-h) + var(--space-6) - var(--fz-section-pad))) - var(--space-4));
}

/* News, NOVA: 32px further down than the rule above; the News heading
   still stays 16px clear of the fixed header */
.fz-main > .fz-nova {
  scroll-margin-top: calc(max(calc(-1 * var(--space-4)), min(0px, calc(var(--fz-header-h) + var(--space-3) - var(--fz-section-pad)))) - var(--space-4));
}

.fz-main > .fz-news {
  scroll-margin-top: max(calc(max(calc(-1 * var(--space-4)), min(0px, calc(var(--fz-header-h) + var(--space-3) - var(--fz-section-pad)))) - var(--space-4)), calc(var(--fz-header-h) + var(--space-2) - var(--fz-section-pad)));
}

/* Anchor landing (Contact): stop earlier, more room above "Get in touch" */
.fz-main > .fz-contact { scroll-margin-top: var(--space-16); }

/* Display heading (V3 scale) */
.fz-title {
  margin-block-end: var(--fz-title-gap);
  font-size: var(--fz-fs-h2);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: var(--fz-track-tight);
}

.fz-title--center { text-align: center; }

/* Three words on one line at every width: first word left, last word right,
   middle word exactly halfway between them (equal gaps). Capped at 9vw. */
.fz-split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 0.25em;
  margin-block-end: var(--fz-title-gap);
  font-size: min(var(--fz-fs-h2), 9vw);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: var(--fz-track-tight);
}

.fz-split__part { display: inline-block; }

/* Paragraph with first-line indent */
.fz-text {
  max-width: 52ch;
  text-indent: var(--space-8);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-transform: none;   /* reading text in sentence case, as on the inner pages */
}

/* Text link with arrow */
.fz-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-block-start: var(--space-4);
  border-bottom: 1px solid currentColor;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  text-decoration: none;
}

.fz-link::after { content: "\2192"; }

/* Pill buttons */
.fz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.fz-btn--light { background: var(--fz-white); color: var(--fz-black); }
.fz-btn--light:hover { background: transparent; color: var(--fz-white); border-color: var(--fz-white); }
.fz-body .fz-btn--light:focus-visible { outline-color: var(--fz-white); }

.fz-btn--outline { border-color: currentColor; background: transparent; }
.fz-btn--dark { background: var(--fz-black); color: var(--fz-white); }
.fz-btn--dark:hover { border-color: var(--fz-black); background: transparent; color: var(--fz-black); }
.fz-section--light .fz-btn--outline:hover { background: var(--fz-black); border-color: var(--fz-black); color: var(--fz-white); }
.fz-section--dark .fz-btn--outline:hover { background: var(--fz-white); border-color: var(--fz-white); color: var(--fz-black); }

@media (prefers-reduced-motion: no-preference) {
  .fz-btn { transition: background-color 0.3s var(--fz-ease), color 0.3s var(--fz-ease), border-color 0.3s var(--fz-ease); }
  .fz-link::after { transition: transform 0.4s var(--fz-ease); }
  .fz-link:hover::after { transform: translateX(var(--space-1)); }
}

/* Press quote */
.fz-quote__text {
  font-size: var(--fz-fs-quote);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.fz-quote__source {
  margin-block-start: var(--space-3);
  font-size: var(--fz-fs-xs);
  font-weight: 500;
}

/* Social icons (hero, menu, footer): icon-only links, 44px targets */
.fz-social {
  display: flex;
  flex-wrap: wrap;
  /* the 24px icon sits centred in a 44px target: pull the row so the icons
     line up with the text edges */
  margin-inline: calc((1.5rem - 44px) / 2);
}

.fz-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.fz-social__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

@media (hover: hover) {
  .fz-social__link:hover { opacity: 0.68; }
}

/* EN / FR toggle (FR version comes later with Polylang: FR is a placeholder) */
.fz-lang {
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  font-size: var(--fz-fs-xs);
  font-weight: 500;
}

.fz-lang__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}

.fz-lang__item--current { color: var(--fz-black); }

.fz-lang__item--current::before {
  content: "";
  position: absolute;
  inset: var(--space-1) 0.25rem;
  z-index: -1;
  border-radius: 999px;
  background: var(--fz-white);
}

@media (hover: hover) {
  a.fz-lang__item:hover { text-decoration: underline; text-underline-offset: 0.3em; }
}

/* ---------- 4. Header ---------- */
.fz-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--fz-white);
}

/* Clear frosted glass once past the hero (blur only, no dark tint). On a
   pseudo-element so the header never becomes the containing block of
   anything fixed. */
.fz-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
}

.fz-header--solid::before { opacity: 1; }

.fz-header--hidden { transform: translateY(-100%); }

/* Over a light section (main.js): the header turns black */
.fz-header--on-light { color: var(--fz-black); }

@media (prefers-reduced-motion: no-preference) {
  .fz-header { transition: transform 0.6s var(--fz-ease), color 0.3s var(--fz-ease); }
  .fz-header::before { transition: opacity 0.4s var(--fz-ease); }
}

.fz-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  width: min(100% - 2 * var(--fz-gutter), var(--fz-container));
  min-height: var(--fz-header-h);
  margin-inline: auto;
}

.fz-header__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.fz-nav { display: none; }

.fz-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-3);
}

.fz-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* olivervdb.com: the underline grows from the left on hover / focus */
.fz-nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 var(--space-1);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}

.fz-nav__link:hover::after,
.fz-nav__link:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  .fz-nav__link::after { transition: transform 0.4s var(--fz-ease); }
}

.fz-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fz-header__lang,
.fz-header__cta { display: none; }

.fz-header__cta {
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--fz-white);
  border-radius: 999px;
  background: var(--fz-white);
  color: var(--fz-black);
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  text-decoration: none;
}

.fz-header__cta:hover { background: transparent; color: var(--fz-white); }
.fz-body .fz-header__cta:focus-visible { outline-color: var(--fz-white); }

/* Over a light section: Contact button and current language invert */
.fz-header--on-light .fz-header__cta { border-color: var(--fz-black); background: var(--fz-black); color: var(--fz-white); }
.fz-header--on-light .fz-header__cta:hover { background: transparent; color: var(--fz-black); }
.fz-body .fz-header--on-light .fz-header__cta:focus-visible { outline-color: var(--fz-black); }
.fz-header--on-light .fz-lang__item--current { color: var(--fz-white); }
.fz-header--on-light .fz-lang__item--current::before { background: var(--fz-black); }

@media (prefers-reduced-motion: no-preference) {
  .fz-header__cta { transition: background-color 0.3s var(--fz-ease), color 0.3s var(--fz-ease), border-color 0.3s var(--fz-ease); }
  .fz-header .fz-lang__item--current { transition: color 0.3s var(--fz-ease); }
  .fz-header .fz-lang__item--current::before { transition: background-color 0.3s var(--fz-ease); }
}

.fz-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  cursor: pointer;
}

/* Three bars (menu button), shared by the header button and the menu's
   Close button, which sits in the same place: when the menu opens its bars
   fold into a cross (fz-menu--open, main.js) and unfold when it closes */
.fz-bars {
  position: relative;
  display: block;
  width: var(--space-3);
  height: 14px;
}

.fz-bars__line {
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.fz-bars__line:nth-child(1) { top: 0; }
.fz-bars__line:nth-child(2) { top: 6px; }
.fz-bars__line:nth-child(3) { top: 12px; }

.fz-menu--open .fz-menu__bars .fz-bars__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fz-menu--open .fz-menu__bars .fz-bars__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.fz-menu--open .fz-menu__bars .fz-bars__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  .fz-bars__line {
    transition:
      transform 0.5s cubic-bezier(0.77, 0, 0.18, 1),
      opacity 0.3s var(--fz-ease);
  }

  /* Opening: the cross folds just after the menu appears */
  .fz-menu--open .fz-menu__bars .fz-bars__line { transition-delay: 0.1s; }
}

@media (min-width: 768px) {
  .fz-header__lang,
  .fz-header__cta { display: inline-flex; }
}

@media (min-width: 1024px) {
  .fz-header__inner { grid-template-columns: 1fr auto 1fr; }
  .fz-nav { display: block; }
  .fz-header__toggle { display: none; }
}

@media (min-width: 1440px) {
  .fz-nav__list { column-gap: var(--space-4); }
}

/* ---------- 5. Mobile menu (V2 layout, V3 type), native <dialog> ---------- */
.fz-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--fz-black);
  color: var(--fz-white);
  overflow: hidden auto;
}

.fz-menu::backdrop { background: var(--fz-black); }

.fz-menu__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% top;
  opacity: 0.3;                     /* dimmed portrait: white text stays > 7:1 */
}

.fz-body .fz-menu__bg { height: 100%; }

.fz-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 var(--fz-gutter) var(--space-4);
}

.fz-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--fz-header-h);
}

.fz-menu__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.fz-menu__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  cursor: pointer;
}

.fz-lightbox__close-icon {
  position: relative;
  width: var(--space-3);
  height: var(--space-3);
}

.fz-lightbox__close-icon::before,
.fz-lightbox__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transform: rotate(45deg);
}

.fz-lightbox__close-icon::after { transform: rotate(-45deg); }

.fz-menu__nav {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-4);
}

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

.fz-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fz-fs-menu);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--fz-track-tight);
  text-decoration: none;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 2px;
}

.fz-menu__link:hover { text-decoration-line: underline; }

.fz-menu__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* ---------- 6. Hero (V3), sticky: the sections slide over it (V2) ---------- */
.fz-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--fz-black);
  color: var(--fz-white);
}

.fz-hero__media {
  position: absolute;
  inset: 0;
}

.fz-body .fz-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(10 10 10 / 0.55) 0%, rgb(10 10 10 / 0) 22%),
    linear-gradient(to top, rgb(10 10 10 / 0.88) 0%, rgb(10 10 10 / 0.4) 45%, rgb(10 10 10 / 0) 70%);
}

.fz-hero__content {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding-block-end: calc(var(--fz-np-space) + var(--space-3));
}

.fz-hero__title { font-weight: 500; }

/* Giant name: letters spread across the container */
.fz-hero__name {
  display: flex;
  flex-direction: column;
  font-size: var(--fz-fs-name);
  line-height: 0.82;
  letter-spacing: var(--fz-track-tight);
}

.fz-hero__word {
  display: flex;
  justify-content: space-between;
}

.fz-hero__letter { display: inline-block; }

.fz-hero__gap { display: none; }

.fz-hero__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.fz-hero__tagline {
  max-width: 36ch;
  font-size: var(--fz-fs-sm);
  line-height: 1.45;
  color: var(--fz-on-dark-soft);
}

@media (min-width: 768px) {
  .fz-hero__content { padding-block-end: calc(var(--fz-np-space) + var(--space-4)); }

  .fz-hero__name {
    flex-direction: row;
    justify-content: space-between;
  }

  .fz-hero__word { display: contents; }

  .fz-hero__gap {
    display: inline-block;
    width: 0.2em;
  }
}

/* ---------- 6b. News: 3D carousel ----------
   UI Initiative "Carousel Slider" (Swiper effect, assets/vendor). The effect
   sets each slide's transform / z-index and the opacity of
   .swiper-carousel-animate-opacity; here: the card itself (image, gradient,
   text over it, like the original demo). Slow autoplay (main.js). */

/* A little more black under the carousel on every screen; from 1024px the
   section is at least one screen tall (content on top, the extra space
   below: the most on large screens, 24" and 27") */
.fz-news { padding-block-end: calc(var(--fz-section-pad) + var(--space-6)); }

@media (min-width: 1024px) {
  .fz-news {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* Arrows: under the carousel on phones, on both sides of it from 768px */
.fz-news__stage { position: relative; }

.fz-news__arrows {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

@media (min-width: 768px) {
  .fz-news__arrows {
    position: absolute;
    inset: 50% var(--fz-gutter) auto;
    z-index: 20;   /* above the slides (the effect sets z-index up to the slide count) */
    justify-content: space-between;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .fz-news__arrow { pointer-events: auto; }

  /* Home news: right at the outer edges of the side cards (they reach
     0.9 card width from the centre), 16px clear of them, not over them */
  .fz-news .fz-news__arrows {
    inset-inline: max(var(--fz-gutter), 50% - 0.9 * min(40rem, 100% - 3 * var(--fz-gutter)) - 4rem);
  }
}

.fz-news__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgb(10 10 10 / 0.6);   /* readable over a side card (desktop) */
  color: inherit;
  cursor: pointer;
}

.fz-news__arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}

.fz-news__arrow--prev::before { transform: translateX(2px) rotate(-135deg); }

.fz-news__arrow:hover { background: var(--fz-white); border-color: var(--fz-white); color: var(--fz-black); }

@media (prefers-reduced-motion: no-preference) {
  .fz-news__arrow { transition: background-color 0.3s var(--fz-ease), color 0.3s var(--fz-ease); }
}

.fz-news__carousel {
  position: relative;
  max-width: 100%;
  padding-block: var(--space-1) var(--space-2);
  overflow: hidden;
}

@media (pointer: fine) {
  .fz-news__carousel { cursor: grab; }
}

.fz-news__slide {
  width: min(40rem, 100% - 3 * var(--fz-gutter));
  aspect-ratio: 4 / 5;
  max-height: 80svh;
}

@media (min-width: 768px) {
  .fz-news__slide { aspect-ratio: 4 / 3; }
}

/* Discography page: the albums in the news carousel (three on screen),
   cover + title + artist + link, on the light background */
.fz-albums__carousel { padding-block: var(--space-2) var(--space-4); }

.fz-albums__slide { width: min(28rem, 70vw); }

/* Phones: the news phone carousel (one card almost full width, the side
   ones just peeking, arrows under it), with the album cards */
@media (max-width: 767.98px) {
  .fz-albums__slide { width: calc(100% - 3 * var(--fz-gutter)); }
}

/* Side covers overlap: only the centred album shows its title and link */
.fz-albums__slide:not(.swiper-slide-active) :is(.fz-album__title, .fz-album__meta, .fz-album__link) {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .fz-albums__slide :is(.fz-album__title, .fz-album__meta, .fz-album__link) {
    transition: opacity 0.4s var(--fz-ease), visibility 0.4s;
  }
}

.fz-section--light .fz-news__arrow { background: rgb(255 255 255 / 0.8); }
.fz-section--light .fz-news__arrow:hover { background: var(--fz-black); border-color: var(--fz-black); color: var(--fz-white); }

@media (min-width: 768px) {
  /* Level with the covers, not with the whole card */
  .fz-albums .fz-news__arrows {
    top: calc(min(28rem, 70vw) / 2 + var(--space-5));   /* level with the side covers beside them */
    inset-inline: max(var(--fz-gutter), 50% - 35rem);   /* just outside the three covers */
  }
}

.fz-news__card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--fz-radius);
  background: var(--fz-tile-bg);
}

.fz-body .fz-news__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-body .fz-news__img--cover { object-position: center 70%; }

/* Text over the picture, on a dark gradient (white text >= 4.5:1 over it) */
.fz-news__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-8) var(--space-3) var(--space-2);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.85) 55%);
}

@media (min-width: 768px) {
  .fz-news__body { padding: var(--space-10) var(--space-4) var(--space-3); }
}

/* Read more on the left, date on the right */
.fz-news__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Close under the text (the site link's top margin and 44px height are for
   standalone links; 32px still clears the 24px target size) */
.fz-news__link {
  min-height: 32px;
  margin-block-start: var(--space-1);
}

.fz-news__date {
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  color: var(--fz-on-dark-muted);
}

.fz-news__title {
  margin-block-end: var(--space-1);
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fz-news__text {
  display: -webkit-box;
  max-width: 44ch;
  overflow: hidden;
  font-size: var(--fz-fs-sm);
  line-height: 1.45;
  color: var(--fz-on-dark-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---------- 7. About (V2 Biography layout) ---------- */
.fz-about__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.fz-about__lead {
  max-width: 28ch;
  margin-block-end: var(--space-3);
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fz-about__photo {
  overflow: hidden;
  max-width: 30rem;
  border-radius: var(--fz-radius);
}

.fz-about__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
}

@media (min-width: 1024px) {
  .fz-about__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--fz-col-gap);
  }

  .fz-about__body { grid-column: 1 / span 7; }

  .fz-about__photo {
    grid-column: 9 / -1;
    justify-self: end;
    width: 100%;
  }
}

/* ---------- 8. NOVA (V3) ---------- */
/* Short black band above the faded top of the photo (same as below) */
.fz-nova { padding-block-start: var(--space-10); }

/* Wordmark + intro + line-up share one video background, in one screen */
.fz-nova__screen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--fz-header-h) var(--space-6);
}

/* Background photo in its original colours (no blur, no desaturation); a
   black veil over it, darker under the text: white letters and the muted
   roles keep AA contrast over it. */
.fz-nova__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  container-type: size;
  /* Soft edges: the picture melts into the black section (dark to dark) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.fz-nova__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(10 10 10 / 0.6) 0%, rgb(10 10 10 / 0.62) 40%, rgb(10 10 10 / 0.8) 65%, rgb(10 10 10 / 0.8) 85%, rgb(10 10 10 / 0.65) 100%);
}

/* The band photo (2.044:1), as tall as the larger side of the screen (same
   framing as the square clip it replaces), top-weighted so Félix (bass,
   behind the sax) stays in; animations.js pans it along its width. */
.fz-body .fz-nova__pan {
  position: absolute;
  left: 0;
  top: calc((100cqh - max(100cqh, 100cqw)) * 0.12);
  width: auto;
  max-width: none;
  height: max(100cqh, 100cqw);
  will-change: transform;
}

.fz-nova__title { font-weight: 500; }

.fz-nova__word {
  display: flex;
  justify-content: space-between;
  font-size: var(--fz-fs-nova);
  line-height: 0.8;
  letter-spacing: var(--fz-track-tight);
}

.fz-nova__letter { display: inline-block; }

.fz-nova__body {
  display: grid;
  gap: var(--space-4);
  padding-block-start: clamp(var(--space-3), 3vw, var(--space-6));
}

/* Stepped lead (V3 caption, smaller): each line starts a step further
   right; the block sits at the bottom right of the photo screen, with
   "Discover NOVA" under it as one more step. --fz-lead-fs sets
   both the lead size and the steps. */
.fz-nova__lead-wrap {
  --fz-lead-fs: 1.5rem;   /* phones: the NOVA page lead size */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Phones: one plain paragraph (as the NOVA page lead). From 768px: stepped
   lines, each one starting a step further right */
.fz-nova__lead {
  font-size: var(--fz-lead-fs);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.fz-body .fz-nova__lead-link { margin-block-start: var(--space-3); }

@media (min-width: 768px) {
  .fz-nova__intro { display: flex; justify-content: flex-end; }
  .fz-nova__lead-wrap {
    --fz-lead-fs: clamp(2rem, 0.8rem + 3vw, 3.75rem);
    --fz-lead-step: 1.6;
  }

  .fz-nova__lead {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
  }

  .fz-nova__lead span:nth-child(2) { padding-inline-start: calc(var(--fz-lead-step) * 1em); }

  .fz-body .fz-nova__lead-link {
    margin-inline-start: calc(var(--fz-lead-step) * 2 * var(--fz-lead-fs));   /* one more step down the stair (2-line lead) */
  }
}

/* Phones: the whole section is one screen tall; the photo area takes the
   free space, title + lead centred in it, the story close under it */
@media (max-width: 767.98px) {
  /* lvh, not svh: on iPhone Safari the toolbars fold while scrolling, the
     screen then gets taller than svh and the section looked short */
  .fz-nova {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100lvh;
    padding-block: var(--space-5) var(--space-10);   /* black bands; more room under the story */
  }

  /* Content at the bottom of the photo area (extra height goes above the
     title), so "Discover NOVA" stays close to the story on every phone */
  .fz-body .fz-nova__screen {
    flex: 1;
    justify-content: flex-end;
    min-height: 0;
    padding-block: var(--fz-header-h) var(--space-1);
  }

  .fz-nova__body { padding-block-start: var(--space-8); }   /* room under NOVA */
  .fz-nova__after:has(> *) { padding-block-start: 0; }
}

/* From 768px: title in the upper middle, lead pushed to the bottom of the
   screen, clear of the now-playing bar (fixed at the bottom) */
@media (min-width: 768px) {
  .fz-nova__stage { margin-block: auto; }
  .fz-nova__body { margin-block-start: auto; }
  .fz-nova__screen { padding-block-end: var(--space-12); }
}

/* The story, under the photo, in the black band (where the quote was).
   From 768px it continues the lead's stair (--fz-story-x, main.js) */
.fz-nova__story { max-width: 40rem; }

@media (min-width: 768px) {
  .fz-nova__story { margin-inline-start: var(--fz-story-x, calc(100% / 6)); }
}
.fz-nova__story .fz-link { margin-block-start: var(--space-3); }

/* Line-up: commented out in index.html for now, styles kept for later use */
.fz-nova__lineup { border-bottom: 1px solid var(--fz-line-dark); }

.fz-nova__member {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding-block: var(--space-2);
  border-top: 1px solid var(--fz-line-dark);
  font-weight: 500;
}

.fz-nova__role { color: var(--fz-on-dark-muted); font-weight: 400; }

.fz-nova__after:has(> *) { padding-block-start: var(--space-2); }   /* empty when the story is commented out */
/* Nothing under the photo (story commented out): a short black band under
   the faded bottom of the photo, then Discography */
.fz-nova:not(:has(.fz-nova__after > *)) { padding-block-end: var(--space-10); }

.fz-nova__quote .fz-quote__text { max-width: 24em; }
.fz-nova__quote .fz-quote__source { color: var(--fz-on-dark-muted); }

@media (min-width: 1024px) {
  .fz-nova__body {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--fz-col-gap);
  }

  .fz-nova__intro { grid-column: 1 / -1; }
  .fz-nova__lineup { grid-column: 8 / -1; align-self: start; }
  .fz-nova__quote { margin-inline-start: calc(100% / 6); }
}

/* ---------- 9. Discography (V1 Music: album fan) ---------- */
.fz-disco { overflow: hidden; }   /* the GSAP fan rotates covers outside their box */

.fz-disco__fan {
  display: grid;
  gap: var(--space-8);
  max-width: 26rem;
  margin-inline: auto;
}

.fz-album {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  text-align: center;
}

.fz-album__cover-wrap {
  position: relative;
  width: 100%;
  margin-block-end: var(--space-2);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--fz-radius);
  box-shadow: var(--fz-shadow);
}

.fz-body .fz-album__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-album__play {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--fz-white);
  border-radius: 50%;
  background: var(--fz-black);
  color: var(--fz-white);
  cursor: pointer;
}

.fz-album__play:hover { background: var(--fz-white); border-color: var(--fz-black); color: var(--fz-black); }
.fz-body .fz-album__play:focus-visible { outline-color: var(--fz-white); }

@media (prefers-reduced-motion: no-preference) {
  .fz-album__play { transition: background-color 0.3s var(--fz-ease), color 0.3s var(--fz-ease); }
}

/* Play / pause glyph shared by the cover buttons and the bar toggle */
.fz-album__play-icon,
.fz-np__toggle-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-block: 8px solid transparent;
  border-inline-start: 13px solid currentColor;
}

.fz-album__play[aria-pressed="true"] .fz-album__play-icon,
.fz-np__toggle[aria-pressed="true"] .fz-np__toggle-icon {
  width: 13px;
  height: 15px;
  margin-left: 0;
  border-block: 0;
  border-inline: 4px solid currentColor;
}

.fz-album__title {
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.fz-album__meta {
  font-size: var(--fz-fs-sm);
  color: var(--fz-on-light-muted);
}

/* On a dark band (press kit albums) */
.fz-section--dark .fz-album__meta { color: var(--fz-on-dark-soft); }

.fz-album__link { margin-block-start: var(--space-2); }

@media (min-width: 768px) {
  .fz-disco__fan {
    grid-template-columns: 1fr 1.25fr 1fr;
    align-items: end;
    gap: var(--fz-col-gap);
    max-width: min(72rem, 92%);   /* room for the rotated side covers */
  }

  /* Featured album sits on top of the hand of cards */
  .fz-album--featured { position: relative; z-index: 1; }
}

/* Phones: 3D slicer (UI Initiative "Swiper 3D Slicer", built by main.js).
   Four Swipers in cube effect, one per horizontal quarter of the cover; the
   first one takes the swipes, the others follow it with a growing lag. Each
   slice shows its quarter of the cover through an <img> 4 slices tall
   (object-fit: cover, any cover ratio). The album list sits in the same grid
   cell: only the album on screen is shown, its play button over the slicer. */
@media (max-width: 767px) {
  .fz-disco__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* the Swipers' content must not size the column */
    max-width: 26rem;
    margin-inline: auto;
  }

  .fz-disco__stage > * { grid-area: 1 / 1; }

  /* Discography page: the albums stage becomes the same grid cell */
  .fz-albums--slicer .fz-news__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
    margin-inline: auto;
    padding-inline: var(--fz-gutter);
    box-sizing: content-box;
  }

  .fz-albums--slicer .fz-news__stage > * { grid-area: 1 / 1; }
  .fz-albums--slicer .fz-news__arrows { display: none; }   /* swipe + dots */
}

.fz-slicer {
  position: relative;
  aspect-ratio: 1;
  perspective: 1200px;
  background: var(--fz-black);   /* no white seams between the slices while they turn */
}

.fz-slicer .swiper {
  position: absolute;
  left: 0;
  width: 100%;
  height: 25%;
  perspective: none;
  transform-style: preserve-3d;
}

/* The first Swiper covers the whole cover (touch area), its slides one quarter */
.fz-slicer .swiper:nth-child(1) { top: 0; height: 100%; }
.fz-slicer .swiper:nth-child(1) .swiper-wrapper { height: 25%; }
.fz-slicer .swiper:nth-child(2) { top: 25%; }
.fz-slicer .swiper:nth-child(3) { top: 50%; }
.fz-slicer .swiper:nth-child(4) { top: 75%; }

.fz-slicer .swiper:nth-child(n + 2),
.fz-slicer .swiper:nth-child(n + 2) .swiper-slide { pointer-events: none; }

.fz-slicer .swiper-slide {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fz-body .fz-slicer__img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  height: 400%;
  object-fit: cover;
}

.fz-slicer .swiper:nth-child(1) .fz-slicer__img { top: 0; }
.fz-slicer .swiper:nth-child(2) .fz-slicer__img { top: -100%; }
.fz-slicer .swiper:nth-child(3) .fz-slicer__img { top: -200%; }
.fz-slicer .swiper:nth-child(4) .fz-slicer__img { top: -300%; }

/* Dots under the slicer: 10px, 24px apart (target spacing, WCAG 2.5.8) */
.fz-slicer__dots {
  align-self: start;
  display: flex;
  justify-content: center;
  margin-block-start: calc(100% + var(--space-3));   /* % of the width = under the square slicer */
  --swiper-pagination-color: var(--fz-black);
  --swiper-pagination-bullet-inactive-color: var(--fz-black);
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 7px;
}

.fz-section--dark .fz-slicer__dots {   /* press kit albums */
  --swiper-pagination-color: var(--fz-white);
  --swiper-pagination-bullet-inactive-color: var(--fz-white);
}

.fz-body .fz-section--dark .fz-slicer__dots .swiper-pagination-bullet:focus-visible { outline-color: var(--fz-white); }

.fz-body .fz-slicer__dots .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--fz-black);
  outline-offset: 3px;
}

/* Many albums (Discography page): Swiper's dynamic dots, centred */
.fz-body .fz-slicer__dots.swiper-pagination-horizontal.swiper-pagination-bullets-dynamic {   /* beats Swiper's own centring */
  justify-self: center;
  justify-content: flex-start;   /* Swiper offsets the bullets itself */
  left: auto;
  transform: none;
}

.fz-slicer__dots.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { flex-shrink: 0; }

/* The list over the slicer: one album at a time, cross-fading */
.fz-albums--slicer .fz-news__carousel {
  width: 100%;   /* as wide as the slicer, so the title starts under its dots */
  overflow: visible;
  padding: 0;
}

.fz-albums--slicer .fz-news__carousel > .swiper-wrapper {   /* not the slicer's own wrappers */
  display: grid;
  transform: none;
}

.fz-albums--slicer .fz-albums__slide { width: 100%; }

.fz-albums--slicer .fz-albums__slide :is(.fz-album__title, .fz-album__meta, .fz-album__link) {
  visibility: visible;
  opacity: 1;
}

:is(.fz-disco--slicer .fz-disco__fan, .fz-albums--slicer .fz-news__carousel) {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  max-width: none;
  pointer-events: none;
}

:is(.fz-disco--slicer .fz-album, .fz-albums--slicer .fz-albums__slide) {
  grid-area: 1 / 1;
  align-content: start;
}

.fz-disco--slicer .fz-album:not(.is-current),
.fz-albums--slicer .fz-albums__slide:not(:has(.is-current)) { visibility: hidden; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  :is(.fz-disco--slicer .fz-album, .fz-albums--slicer .fz-albums__slide) { transition: opacity 0.4s var(--fz-ease), visibility 0.4s; }
}

:is(.fz-disco--slicer, .fz-albums--slicer) .fz-album__cover-wrap { box-shadow: none; }
:is(.fz-disco--slicer, .fz-albums--slicer) .fz-album__cover { opacity: 0; }   /* kept for its alt text */
:is(.fz-disco--slicer, .fz-albums--slicer) .fz-album > :not(.fz-album__cover-wrap),
:is(.fz-disco--slicer, .fz-albums--slicer) .fz-album__play { pointer-events: auto; }

/* Room for the dots between the cover and the album title */
:is(.fz-disco--slicer, .fz-albums--slicer) .fz-album__cover-wrap { margin-block-end: calc(var(--space-3) + 10px + var(--space-3)); }

/* ---------- 10. Media: framed bento mosaic ---------- */
/* Phones: two columns, each tile keeps the shape of its clip */
.fz-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "l1 l1"
    "v1 v2"
    "l2 l2"
    "s1 s2"
    "l3 l4";
  gap: var(--fz-mosaic-gap);
}

.fz-mosaic__item { min-width: 0; min-height: 0; aspect-ratio: 16 / 9; }
.fz-mosaic__item--l1 { grid-area: l1; }
.fz-mosaic__item--l2 { grid-area: l2; }
.fz-mosaic__item--l3 { grid-area: l3; }
.fz-mosaic__item--l4 { grid-area: l4; }
.fz-mosaic__item--v1 { grid-area: v1; aspect-ratio: 9 / 16; }
.fz-mosaic__item--v2 { grid-area: v2; aspect-ratio: 9 / 16; }
.fz-mosaic__item--s1 { grid-area: s1; aspect-ratio: 1; }
.fz-mosaic__item--s2 { grid-area: s2; aspect-ratio: 1; }

/* Tablet and up: 6 columns, fixed placement, tiles close to their clip shape */
@media (min-width: 768px) {
  .fz-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 8fr 8fr 10fr;
    grid-template-areas:
      "v1 l1 l1 l1 s1 v2"
      "v1 l1 l1 l1 s2 v2"
      "l2 l2 l3 l3 l4 l4";
    aspect-ratio: 2.1;
  }

  .fz-mosaic .fz-mosaic__item { aspect-ratio: auto; }
}

.fz-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--fz-radius);
  overflow: hidden;
  background: var(--fz-tile-bg);
  color: var(--fz-white);
  text-align: left;
  cursor: pointer;
}

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

@media (prefers-reduced-motion: no-preference) {
  .fz-body .fz-tile__video { transition: transform 0.6s var(--fz-ease); }
  .fz-tile:hover .fz-tile__video { transform: scale(1.03); }
}

.fz-tile__play {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: var(--fz-play);
  height: var(--fz-play);
  border: 1px solid var(--fz-white);
  border-radius: 50%;
  background: var(--fz-glass);
}

.fz-tile__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-block: 0.375rem solid transparent;
  border-inline-start: 0.625rem solid var(--fz-white);
  transform: translate(-50%, -50%);
}

/* Caption always visible, bottom left, over a dark gradient */
.fz-tile__caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-5) var(--space-1) var(--space-1);
  background: linear-gradient(to top, rgb(10 10 10 / 0.88) 0%, rgb(10 10 10 / 0.6) 50%, rgb(10 10 10 / 0) 100%);
}

.fz-tile__title {
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.fz-tile__meta {
  font-size: var(--fz-fs-xs);
  line-height: 1.3;
  color: var(--fz-on-dark-soft);
}

@media (min-width: 768px) {
  .fz-tile__play { top: var(--space-2); right: var(--space-2); }

  .fz-tile__play::after {
    border-block-width: 0.5rem;
    border-inline-start-width: 0.875rem;
  }

  .fz-tile__caption { padding: var(--space-6) var(--space-2) var(--space-2); }
}

/* Tablet: the narrow tiles (vertical, square) are only ~110px wide:
   tighter caption, title only (the full name stays in the button label) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .fz-tile__play { top: var(--space-1); right: var(--space-1); }

  :is(.fz-mosaic__item--v1, .fz-mosaic__item--v2, .fz-mosaic__item--s1, .fz-mosaic__item--s2) .fz-tile__caption {
    padding: var(--space-4) var(--space-1) var(--space-1);
  }

  :is(.fz-mosaic__item--v1, .fz-mosaic__item--v2, .fz-mosaic__item--s1, .fz-mosaic__item--s2) .fz-tile__title { font-size: var(--fz-fs-xs); }

  :is(.fz-mosaic__item--v1, .fz-mosaic__item--v2, .fz-mosaic__item--s1, .fz-mosaic__item--s2) .fz-tile__meta { display: none; }
}

/* Lightbox (<dialog>): larger clip + link to the full video */
.fz-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--fz-gutter);
  border: 0;
  background: rgb(10 10 10 / 0.94);
  color: var(--fz-white);
  overflow: auto;
}

.fz-lightbox[open] {
  display: grid;
  place-items: center;
}

.fz-lightbox::backdrop { background: rgb(10 10 10 / 0.6); }

.fz-lightbox__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: min(100%, 80rem);
}

.fz-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
}

.fz-lightbox__title {
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fz-lightbox__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  cursor: pointer;
}

/* Player: 16:9, 9:16 or 1:1, never taller than 80svh (minus the bar and the link) */
.fz-lightbox__frame {
  --fz-player-h: min(80vh, 100vh - 10rem);
  --fz-player-h: min(80svh, 100svh - 10rem);
  width: min(100%, var(--fz-player-h) * 16 / 9);
  aspect-ratio: 16 / 9;
  background: var(--fz-black);
}

.fz-lightbox__frame[data-shape="portrait"] {
  width: min(100%, var(--fz-player-h) * 9 / 16);
  aspect-ratio: 9 / 16;
}

.fz-lightbox__frame[data-shape="square"] {
  width: min(100%, var(--fz-player-h));
  aspect-ratio: 1;
}

.fz-body .fz-lightbox__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Home lightbox, YouTube tile: the player fills the 16:9 frame */
.fz-lightbox__frame:has(.fz-lightbox__yt) { position: relative; }

.fz-body .fz-lightbox__yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.fz-lightbox__link { margin-block-start: 0; }

/* ---------- 10b. Media page: organic masonry wall ---------- */
/* Filters: pills, the pressed one filled, all as wide as the widest (equal
   columns of a grid sized to its content): 2 by 2 on phones, one row wider */
.fz-wall__filters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  width: fit-content;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

@media (min-width: 600px) {
  .fz-wall__filters { grid-template-columns: repeat(4, 1fr); }
}

.fz-wall__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--fz-on-dark-muted);
  border-radius: 999px;
  background: none;
  color: var(--fz-white);
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.fz-wall__filter:hover { border-color: var(--fz-white); }

.fz-wall__filter[aria-pressed="true"] {
  border-color: var(--fz-white);
  background: var(--fz-white);
  color: var(--fz-black);
}

.fz-wall__count {
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-soft);
}

.fz-wall__filter[aria-pressed="true"] .fz-wall__count { color: var(--fz-on-light-muted); }

@media (prefers-reduced-motion: no-preference) {
  .fz-wall__filter { transition: background-color 0.3s var(--fz-ease), border-color 0.3s var(--fz-ease), color 0.3s var(--fz-ease); }
}

/* Columns built by main.js (2 / 3 / 4, each tile goes to the shortest);
   without JavaScript, the single list flows in CSS columns */
.fz-wall {
  display: flex;
  align-items: flex-start;
  gap: var(--fz-mosaic-gap);
}

.fz-wall__col {
  display: grid;
  flex: 1 1 0;
  gap: var(--fz-mosaic-gap);
  min-width: 0;
}

.fz-wall__col:only-child {
  display: block;
  columns: 2;
  column-gap: var(--fz-mosaic-gap);
}

.fz-wall__col:only-child > .fz-wall__item {
  margin-block-end: var(--fz-mosaic-gap);
  break-inside: avoid;
}

@media (min-width: 768px) {
  .fz-wall__col:only-child { columns: 3; }
}

@media (min-width: 1024px) {
  .fz-wall__col:only-child { columns: 4; }
}

.fz-wall__item { aspect-ratio: 3 / 2; }
.fz-wall__item--wide { aspect-ratio: 16 / 9; }
.fz-wall__item--portrait { aspect-ratio: 2 / 3; }
.fz-wall__item--vertical { aspect-ratio: 9 / 16; }
.fz-wall__item--square { aspect-ratio: 1; }

/* Phones: tiles are ~170px wide, title only (place and year stay in the
   button label and the lightbox); albums keep their SoundCloud link */
@media (max-width: 767.98px) {
  .fz-wall__item:not([data-type="audio"]) .fz-tile__meta { display: none; }
  .fz-wall .fz-tile__caption { padding: var(--space-4) var(--space-1) var(--space-1); }
  .fz-wall .fz-tile__title { font-size: var(--fz-fs-xs); }
}

/* Batches rise in as they are added */
.fz-wall--js .fz-wall__item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--fz-ease), transform 0.8s var(--fz-ease);
  transition-delay: calc(var(--fz-i, 0) * 70ms);
}

.fz-wall--js .fz-wall__item.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fz-wall--js .fz-wall__item { transform: none; transition: none; }
}

/* Photo and YouTube tiles: a picture instead of a clip */
.fz-body .fz-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .fz-body .fz-tile__img { transition: transform 0.6s var(--fz-ease); }
  .fz-tile:hover .fz-tile__img { transform: scale(1.03); }
}

/* Album tile: the cover, a play button, then the SoundCloud player in place */
.fz-tile--audio { cursor: default; }

.fz-tile__listen {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.fz-tile__link { color: inherit; }

/* Opened: the tile takes the player's height (its whole track list) */
.fz-wall__item--player { aspect-ratio: auto; }
.fz-wall__item--player .fz-tile { height: auto; background: var(--fz-white); }

.fz-body .fz-tile__frame {
  display: block;
  width: 100%;
  height: 450px;   /* until the track count is known (main.js) */
  border: 0;
}

.fz-wall__more { height: 1px; }

.fz-wall__end {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-10);
}

.fz-wall__end-title {
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-dark-soft);
}

/* The footer's social icons, larger (Media page end) */
.fz-social--large {
  justify-content: center;
  gap: var(--space-3);
  margin-inline: 0;
}

.fz-social--large .fz-social__link { min-width: 64px; min-height: 64px; }
.fz-social--large .fz-social__icon { width: 2.5rem; height: 2.5rem; }

/* Lightbox of the Media page: the frame takes the ratio of what it shows */
.fz-lightbox__frame--free {
  --fz-ratio: 16 / 9;
  width: min(100%, var(--fz-player-h) * (var(--fz-ratio)));
  aspect-ratio: var(--fz-ratio);
}

.fz-body .fz-lightbox__frame--free > * {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.fz-lightbox__note {
  min-height: 1.5em;
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-soft);
  text-transform: none;
}

/* ---------- 11. Tour (V1 ticket rows) ---------- */
/* clip, not hidden: the background loop stays sticky inside the section */
.fz-tour {
  isolation: isolate;
  overflow: clip;
}

.fz-tour__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fz-black);
}

/* Veil: opaque black at both ends (melts into the dark neighbours), 82% in between */
.fz-tour__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--fz-black) 0%, rgb(10 10 10 / 0.82) 25%, rgb(10 10 10 / 0.82) 75%, var(--fz-black) 100%);
}

/* Hidden on phones (data, crisp rows). From 768px the clip stays at
   viewport height while the list scrolls over it. */
.fz-tour__video { display: none; }

@media (min-width: 768px) {
  .fz-body .fz-tour__video {
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100svh;
    object-fit: cover;
    opacity: 0.5;
  }
}

.fz-tour .fz-title { margin-block-end: var(--space-3); }

.fz-tour__intro {
  margin-block-end: var(--fz-title-gap);
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--fz-on-dark-muted);
}

.fz-tour__list {
  display: grid;
  gap: var(--space-2);
  max-width: 72rem;
  margin-inline: auto;
}

.fz-ticket {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--fz-line-dark);
}

.fz-ticket__date {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding-block-end: var(--space-2);
  border-bottom: 1px dashed var(--fz-line-dark);
}

.fz-ticket__day {
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.fz-ticket__month { font-weight: 500; }

.fz-ticket__weekday {
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
}

.fz-ticket__info { display: grid; gap: 0.25rem; }

.fz-ticket__project {
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fz-ticket__venue,
.fz-ticket__city {
  font-size: var(--fz-fs-sm);
  color: var(--fz-on-dark-muted);
}

.fz-ticket__btn { width: 100%; }

@media (min-width: 1024px) {
  .fz-tour__list {
    gap: 0;
    border-top: 1px solid var(--fz-line-dark);
  }

  .fz-ticket {
    grid-template-columns: 9rem 1fr 13rem auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2);
    border-width: 0 0 1px;
  }

  @media (hover: hover) {
    .fz-ticket:hover { background: rgb(255 255 255 / 0.04); }
  }

  /* Ticket stub: dashed perforation between the date and the details */
  .fz-ticket__date {
    flex-wrap: wrap;
    align-self: stretch;
    align-content: center;
    padding: 0 var(--space-4) 0 0;
    border-bottom: 0;
    border-right: 1px dashed var(--fz-line-dark);
  }

  .fz-ticket__weekday { flex-basis: 100%; }

  .fz-ticket__btn { width: auto; min-width: 9rem; }
}

/* Tour page: no dates yet message, then the past concerts, quieter */
.fz-tour__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
  text-transform: none;
}

.fz-tour__past-title {
  max-width: 72rem;
  margin: var(--space-16) auto var(--space-4);
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-dark-muted);
}

.fz-ticket--past { color: var(--fz-on-dark-soft); }

/* ---------- 11b. Press kit page ---------- */
.fz-kit__intro {
  display: grid;
  gap: var(--space-4);
  max-width: 48rem;
}

.fz-kit__intro .fz-subtitle { margin: 0; }

.fz-kit__intro { margin-block-end: var(--space-10); }

.fz-kit__lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  text-transform: none;
}

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

.fz-kit__size {
  margin-inline-start: var(--space-1);
  font-size: var(--fz-fs-xs);
  opacity: 0.7;
}

/* One column at every width (the NOVA facts go three across); no margin
   above, so its top line is level with the one under "Biography" */
.fz-story__facts.fz-kit__facts { grid-template-columns: 1fr; margin: 0; }

/* Key facts above the biographies, then beside them (right) from 1024px */
.fz-kit__bio-layout {
  display: grid;
  gap: var(--space-10) var(--fz-col-gap);
  align-items: start;
}

.fz-kit__bio-layout > .fz-kit__bio-title { margin: 0; }

@media (min-width: 1024px) {
  .fz-kit__bio-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    row-gap: var(--space-6);
  }
  .fz-kit__bio-layout > .fz-kit__bio-title { grid-column: 1; grid-row: 1; }
  .fz-kit__bio-layout > .fz-kit__bio { grid-column: 1; grid-row: 2; }
  .fz-kit__bio-layout > .fz-kit__facts { grid-column: 2; grid-row: 2; }
  .fz-kit__bio-layout > .fz-kit__bio-long { grid-column: 1 / -1; grid-row: 3; }
}

/* Biographies */

.fz-kit__bio { display: grid; gap: var(--space-6); max-width: 48rem; }

.fz-kit__bio-block {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-top: 1px solid var(--fz-line-light);
}

.fz-kit__label {
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-light-muted);
}

.fz-section--dark .fz-kit__label { color: var(--fz-on-dark-muted); }

.fz-kit__more > summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.fz-kit__more > summary::-webkit-details-marker { display: none; }
.fz-kit__more > summary::after { content: "+"; font-size: var(--fz-fs-sm); }
.fz-kit__more[open] > summary::after { content: "\2212"; }

.fz-kit__bio-text { text-transform: none; }
.fz-kit__bio-text p + p { margin-block-start: var(--space-2); }

.fz-kit__bio-heading {
  margin-block: var(--space-4) var(--space-1);
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* A closed long biography is only its label (no gap for the hidden text) */
.fz-kit__bio-long:not([open]) { gap: 0; }

/* Quotes follow the biographies in the same white band: only the
   biographies' bottom padding between them, not two section paddings */
.fz-kit + .fz-press { padding-block-start: 0; }

/* The long biography in two columns on desktop (a heading never left at
   the foot of a column) */
@media (min-width: 1024px) {
  .fz-kit__bio-text--columns {
    max-width: none;
    columns: 2;
    column-gap: var(--fz-col-gap);
  }
  .fz-kit__bio-text--columns .fz-kit__bio-heading { break-after: avoid; text-indent: 0; }
  .fz-kit__bio-text--columns > :first-child { margin-block-start: 0; }
}

/* Photos and covers: thumbnail, title, credit and size, download */
.fz-kit__note {
  margin-block: calc(-1 * var(--space-3)) var(--space-6);
  color: var(--fz-on-dark-soft);
  text-transform: none;
}

.fz-kit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-6) var(--fz-mosaic-gap);
}

.fz-kit__grid--covers { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

/* Albums follow the photos in the same dark band: only the photos'
   bottom padding between them, not two section paddings */
.fz-kit--covers { padding-block-start: 0; }

/* Title, then credit and size, then the button(s), level across a row */
.fz-kit__photo,
.fz-kit__cover {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: start;
  gap: var(--space-1);
}

.fz-body .fz-kit__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-block-end: var(--space-1);
  object-fit: cover;
  object-position: center 25%;   /* portraits keep the head in frame */
  border-radius: var(--fz-radius);
  background: var(--fz-tile-bg);
}

.fz-body .fz-kit__cover .fz-kit__thumb { aspect-ratio: 1; }

.fz-kit__photo-title {
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  line-height: 1.2;
}

.fz-kit__photo-meta {
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-soft);
  text-transform: none;
}

.fz-kit__download { margin-block-start: var(--space-1); }

.fz-kit__all { margin-block-start: var(--space-6); }

.fz-kit__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

.fz-kit__links .fz-kit__download { margin: 0; }

/* Listen / watch / rider / contact */
.fz-kit__columns {
  display: grid;
  gap: var(--space-6) var(--fz-col-gap);
}

@media (min-width: 768px) {
  .fz-kit__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .fz-kit__columns { grid-template-columns: repeat(3, 1fr); }
}

.fz-kit__column {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  border-top: 1px solid var(--fz-line-light);
}

.fz-kit__list .fz-link { margin-block-start: 0; }

.fz-kit__text { text-transform: none; }

/* ---------- 11c. Pro space (secret NOVA portfolio): the press kit's
   blocks, plus the SoundCloud players, the five musicians and their
   folded biographies ---------- */
.fz-pro__players {
  display: grid;
  gap: var(--space-6) var(--fz-col-gap);
}

@media (min-width: 1024px) {
  .fz-pro__players { grid-template-columns: repeat(2, 1fr); }

  /* The key facts start level with "The project" (not with its text) */
  .fz-pro__layout { grid-template-rows: auto 1fr; }
  .fz-pro__layout > .fz-kit__facts { grid-row: 1 / span 2; }
}

.fz-pro__players .fz-kit__column { justify-items: stretch; border-color: var(--fz-line-dark); }

.fz-pro__player {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  border-radius: var(--fz-radius);
}

/* Portraits, 2:3 (Félix's and the four musicians' photos) */
.fz-body .fz-pro__band .fz-kit__thumb { aspect-ratio: 2 / 3; }

/* Sideways rows (main.js 6c, [data-row]): pro musicians, quotes, press
   photos. --fz-row-lg cards in view from 1024px, --fz-row-md from 768px,
   one at full width on phones; the rest by swipe, trackpad or
   arrows (hidden while the row fits) */
.fz-row {
  --fz-row-gap: var(--fz-mosaic-gap);
  --fz-row-md: 3;
  --fz-row-lg: 4;
  display: flex;
  column-gap: var(--fz-row-gap);
  overflow-x: auto;
  overflow-y: hidden;                /* never scrolls up and down inside (it slid under its edge on phones) */
  padding-block-end: var(--space-4);               /* room for the items rising in (32px below at the start) */
  margin-block-end: calc(-1 * var(--space-4));     /* ...without changing the layout */
  overscroll-behavior-x: contain;   /* no browser "back" at the ends of a trackpad swipe */
  touch-action: pan-x pan-y pinch-zoom;   /* both axes native: the browser locks the axis (main.js 6c) */
  scrollbar-width: none;            /* the arrows show the way */
}

.fz-row::-webkit-scrollbar { display: none; }

.fz-body .fz-row:focus-visible { outline-offset: -2px; }

.fz-row > * { flex: 0 0 82%; }

@media (min-width: 768px) {
  .fz-row > * { flex-basis: calc((100% - (var(--fz-row-md) - 1) * var(--fz-row-gap)) / var(--fz-row-md)); }
}

@media (min-width: 1024px) {
  .fz-row > * { flex-basis: calc((100% - (var(--fz-row-lg) - 1) * var(--fz-row-gap)) / var(--fz-row-lg)); }
}

.fz-row__arrows[hidden] { display: none; }

.fz-section--light .fz-row__arrows .fz-timeline__swipe { color: var(--fz-on-light-muted); }

/* Quotes (pro page, press kit): 3 in view, 2 on tablets */
.fz-press__row {
  --fz-row-gap: var(--fz-col-gap);
  --fz-row-md: 2;
  --fz-row-lg: 3;
}

/* Phones: one card at full width (quote, musician, press photo), nothing cut
   off peeking at the side (Oliver) */
@media (max-width: 767.98px) {
  .fz-row > * { flex-basis: 100%; }
}

/* Phones: each quote keeps its own height; the row follows the one on screen
   (main.js), so the arrows sit right under its text */
@media (max-width: 767.98px) {
  .fz-press__row { align-items: flex-start; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .fz-press__row { transition: height 0.35s var(--fz-ease); }
}

/* Phones: a swipe turns exactly one card (quote, portrait, photo). The row
   follows the finger and turns in main.js (native snapping depended on the
   swipe's momentum: too far, not far enough); vertical stays native. */
@media (max-width: 767.98px) {
  .fz-row { touch-action: pan-y pinch-zoom; }
}

.fz-pro__band .fz-kit__photo-meta { color: var(--fz-on-light-muted); }

.fz-pro__band .fz-kit__photo { grid-template-rows: none; align-content: start; }

.fz-pro__bios-title { margin-block: var(--space-12) var(--space-2); }

.fz-pro__bios { display: grid; max-width: 48rem; }

/* Each one's place in the band: beside the biographies on desktop only */
.fz-pro__roles { display: none; }

@media (min-width: 1024px) {
  .fz-pro__bios-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: var(--fz-col-gap);
    align-items: start;
  }
  .fz-pro__roles { display: block; }
}

.fz-pro__roles-list { border-top: 1px solid var(--fz-line-light); }

.fz-pro__roles-list > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--fz-line-light);
}

.fz-pro__roles-list dt { font-size: var(--fz-fs-sm); font-weight: 500; }

.fz-pro__roles-list dd {
  margin: 0;
  font-size: var(--fz-fs-sm);
  line-height: 1.45;
  color: var(--fz-on-light-muted);
  text-transform: none;
}

.fz-pro__bios .fz-kit__bio-text { padding-block-end: var(--space-4); }

.fz-pro__bio-link { margin-block-start: var(--space-4); }

.fz-pro__contact { margin-block-start: var(--space-12); }

/* Addresses one under the other, as written (no capitals) */
.fz-pro__contact .fz-link { margin-block-start: 0; text-transform: none; }

/* A closed biography is only its name (no gap for the hidden text) */
.fz-pro__bios .fz-kit__more:not([open]) { gap: 0; }

.fz-pro__credits {
  margin-block-start: var(--space-6);
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-light-muted);
  text-transform: none;
}

/* ---------- 12. Contact + newsletter (V3) ---------- */
/* At least one screen tall: Contact + footer used to be shorter than the
   viewport, so an anchor jump was clamped by the page end and the heading
   landed low. Now the section top can reach the top like every other one. */
.fz-contact { overflow: hidden; }

/* Desktop only: on phones the stacked content is tall enough, and a full
   screen left a big empty gap above the footer */
@media (min-width: 1024px) {
  .fz-contact {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Text + newsletter centred vertically in the space under the heading */
  .fz-contact__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .fz-contact__grid { margin-block: auto; }
}

.fz-body .fz-contact__bg {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  opacity: 0.4;
}

/* Melt from the Tour black into the photo (dark to dark) */
.fz-contact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: var(--fz-section-pad);
  background: linear-gradient(to bottom, var(--fz-black), rgb(10 10 10 / 0));
  pointer-events: none;
}

.fz-contact__inner { position: relative; z-index: 2; }

.fz-contact__grid {
  display: grid;
  gap: var(--space-8);
}

.fz-contact__btn { margin-block-start: var(--space-4); }

.fz-form__title {
  margin-block-end: var(--space-3);
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.fz-form__label {
  display: block;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
}

.fz-form__hint {
  margin-block: var(--space-1) var(--space-2);
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
}

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

.fz-form__input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-2);
  border: 1px solid var(--fz-on-dark-muted);
  border-radius: var(--fz-radius);   /* slightly rounded, as the site's pictures and tiles */
  background: rgb(10 10 10 / 0.4);
  color: var(--fz-white);
  font: inherit;
  text-transform: none;
}

.fz-form__input[aria-invalid="true"] { border-color: var(--fz-white); border-width: 2px; }

.fz-form__btn {
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--fz-white);
  border-radius: 999px;
  background: var(--fz-white);
  color: var(--fz-black);
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  cursor: pointer;
}

.fz-form__btn:hover { background: transparent; color: var(--fz-white); }
.fz-body .fz-form__btn:focus-visible { outline-color: var(--fz-white); }

.fz-form__status {
  min-height: 1.5em;
  margin-block-start: var(--space-2);
  font-size: var(--fz-fs-sm);
}

@media (min-width: 1024px) {
  .fz-contact__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--fz-col-gap);
  }

  .fz-contact__col:first-child { grid-column: 1 / span 5; }
  .fz-contact__col:last-child { grid-column: 7 / -1; }
}

/* ---------- 12b. Contact page: the form as a letter ---------- */
.fz-reach__inner {
  display: grid;
  gap: var(--space-6);
  max-width: 72rem;
}

.fz-reach__kicker { color: var(--fz-on-dark-soft); }
.fz-reach__link { color: inherit; text-underline-offset: 0.2em; }

.fz-letter {
  display: grid;
  gap: var(--space-4);
  --fz-letter-size: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);
}

/* The sentence: large type, one flowing text; the fields and the choices
   are pills inside it, never pushed onto lines of their own */
.fz-letter__text {
  font-size: var(--fz-letter-size);
  font-weight: 500;
  line-height: 1.7;   /* room for the pills between the lines */
  letter-spacing: -0.02em;
  text-transform: none;
}

.fz-letter__line { display: inline; margin: 0; }
.fz-letter__line:last-child { display: block; }   /* "You can answer me at": a line of its own */
.fz-letter__keep { white-space: nowrap; }

.fz-letter__input,
.fz-letter__message {
  border: 1px solid var(--fz-on-dark-muted);
  background: rgb(255 255 255 / 0.04);
  color: var(--fz-white);
  font: inherit;
  letter-spacing: inherit;
}

/* As tall as the subject pills: smaller type, same pill */
.fz-letter__input {
  display: inline-block;
  min-height: 1.6em;
  padding: 0 0.6em;
  border-radius: 999px;
  font-size: 0.72em;
  line-height: 1.2;
  text-align: center;   /* placeholder and text centred in the pill */
  vertical-align: 0.15em;
}

/* As wide as their text (placeholder, then what is typed), from a minimum;
   a fixed width where field-sizing is not supported */
.fz-letter__input--name { width: 7.5em; max-width: 100%; }
.fz-letter__input--email { width: 8.5em; max-width: 100%; }

@supports (field-sizing: content) {
  .fz-letter__input--name,
  .fz-letter__input--email {
    width: auto;
    min-width: 6em;
    field-sizing: content;
  }
}

.fz-letter__input::placeholder,
.fz-letter__message::placeholder { color: var(--fz-on-dark-muted); opacity: 1; }

.fz-letter__input:hover,
.fz-letter__message:hover { border-color: var(--fz-white); }

.fz-letter__input:focus,
.fz-letter__message:focus {
  border-color: var(--fz-white);
  background: rgb(255 255 255 / 0.1);
}

.fz-letter__input[aria-invalid="true"],
.fz-letter__message[aria-invalid="true"] { border-width: 2px; border-color: var(--fz-white); border-style: dashed; }

/* Subject: pills like the Media filters, the chosen one filled */
/* contents: the choices flow in the sentence one by one (a fieldset stays
   one block, even inline) */
.fz-letter__choices {
  display: contents;
}

.fz-letter__choice {
  position: relative;
  display: inline-block;
  margin-inline-end: 0.15em;
  font-size: 0.72em;
  line-height: 1.2;
  vertical-align: 0.15em;
}

.fz-letter__choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fz-letter__choice span {
  display: inline-flex;
  align-items: center;
  min-height: 1.6em;
  padding: 0 0.6em;
  border: 1px solid var(--fz-on-dark-muted);
  border-radius: 999px;
  cursor: pointer;
}

.fz-letter__choice:hover span { border-color: var(--fz-white); }

.fz-letter__choice input:checked + span {
  border-color: var(--fz-white);
  background: var(--fz-white);
  color: var(--fz-black);
}

.fz-letter__choice input:focus-visible + span {
  outline: 2px solid var(--fz-white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .fz-letter__input,
  .fz-letter__message,
  .fz-letter__choice span { transition: background-color 0.3s var(--fz-ease), border-color 0.3s var(--fz-ease), color 0.3s var(--fz-ease); }
}

.fz-letter__message {
  width: 100%;
  min-height: 12rem;
  margin-block-start: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: 2rem;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  text-transform: none;
  resize: vertical;
}

.fz-letter__errors { display: none; }
.fz-letter__errors:has(.fz-form__error:not(:empty)) { display: grid; gap: var(--space-1); }

/* Send: a large pill, the note beside it */
.fz-letter__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-block-start: var(--space-2);
}

.fz-letter__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 64px;
  padding: 0 var(--space-6);
  border: 1px solid var(--fz-white);
  border-radius: 999px;
  background: var(--fz-white);
  color: var(--fz-black);
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.fz-letter__btn:hover { background: transparent; color: var(--fz-white); }
.fz-body .fz-letter__btn:focus-visible { outline-color: var(--fz-white); }

@media (prefers-reduced-motion: no-preference) {
  .fz-letter__btn { transition: background-color 0.3s var(--fz-ease), color 0.3s var(--fz-ease); }
  .fz-letter__btn span { transition: transform 0.4s var(--fz-ease); }
  .fz-letter__btn:hover span { transform: translateX(var(--space-1)); }
}

.fz-letter__note {
  max-width: 28rem;
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
  text-transform: none;
}

.fz-letter__status { text-transform: none; }

.fz-form__error {
  min-height: 0;
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  text-transform: none;
}

.fz-form__error:empty { display: none; }

/* Honeypot: out of sight for people, still in the form for bots */
.fz-form__trap {
  position: absolute;
  left: -9999px;
}

/* ---------- 13. Footer (V3, compact) ---------- */
.fz-footer {
  position: relative;
  z-index: 1;
  padding-block: var(--space-4);
  border-top: 1px solid var(--fz-line-dark);
  background: var(--fz-black);
  color: var(--fz-white);
}

.fz-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.fz-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
}

/* From 768px the meta lines sit against the right edge */
@media (min-width: 768px) {
  .fz-footer__meta {
    justify-content: flex-end;
    margin-inline-start: auto;
    text-align: end;
  }
}

/* Designer credit, discreet: own line, link without underline */
.fz-footer__credit { flex-basis: 100%; }

.fz-footer__credit a { color: inherit; text-decoration: none; }

.fz-footer__credit a:hover { color: var(--fz-white); }

@media (prefers-reduced-motion: no-preference) {
  .fz-footer__credit a { transition: color 0.3s var(--fz-ease); }
}

/* ---------- 14. Now playing bar (V4 behaviour, site theme) ----------
   Phones / tablets: full-width bar at the bottom. Desktop: compact
   floating player bottom-left. Black glass + hairline: distinct over the
   white sections and over the black ones. Body padding (--fz-np-space)
   keeps the end of the page clear. */
.fz-np__sc {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 300px;
  block-size: 166px;
  border: 0;
  pointer-events: none;
}

.fz-np {
  position: fixed;
  inset: auto 0 0;
  z-index: 55;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-1);
  height: var(--fz-np-h);
  padding-inline: var(--space-1);
  border-top: 1px solid var(--fz-line-dark);
  background: var(--fz-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--fz-white);
}

@media (min-width: 768px) {
  .fz-np {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    padding-inline: var(--space-2);
  }
}

@media (min-width: 1024px) {
  .fz-np {
    right: auto;
    left: var(--space-2);
    bottom: var(--space-2);
    width: min(36rem, 100% - 2 * var(--space-2));
    border: 1px solid var(--fz-line-dark);
    border-radius: var(--space-1);
    overflow: hidden;
  }
}

/* Playlist mode (SoundCloud): previous / next between the title and the link */
.fz-np__skip {
  display: inline-flex;
  align-items: center;
}

.fz-np__skip[hidden] { display: none; }

.fz-np__skip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fz-white);
  cursor: pointer;
}

.fz-np__skip-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.fz-body .fz-np__skip-btn:focus-visible { outline-color: var(--fz-white); }

.fz-np.fz-np--playlist { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.fz-np--playlist .fz-np__link { display: none; }   /* phones: the room goes to the title */

@media (min-width: 768px) {
  .fz-np.fz-np--playlist { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; }
  .fz-np--playlist .fz-np__link { display: inline-flex; }
}

.fz-np.fz-np--collapsed {
  right: auto;
  grid-template-columns: repeat(2, auto);
  border-right: 1px solid var(--fz-line-dark);
}

@media (min-width: 1024px) {
  .fz-np.fz-np--collapsed { width: auto; }
}

.fz-np--collapsed .fz-np__info,
.fz-np--collapsed .fz-np__skip,
.fz-np--collapsed .fz-np__link,
.fz-body .fz-np--collapsed .fz-np__cover { display: none; }   /* folded: play + arrow only */

.fz-body .fz-np__cover {
  display: none;               /* phones: the room goes to the title */
  width: var(--space-6);
  height: var(--space-6);
  object-fit: cover;
}

@media (min-width: 768px) {
  .fz-body .fz-np__cover { display: block; }
}

.fz-np__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fz-white);
  color: var(--fz-black);
  cursor: pointer;
}

.fz-body .fz-np__toggle:focus-visible { outline-color: var(--fz-white); }

.fz-np__toggle-icon {
  margin-left: 3px;
  border-block-width: 7px;
  border-inline-start-width: 11px;
}

.fz-np__toggle[aria-pressed="true"] .fz-np__toggle-icon {
  width: 12px;
  height: 14px;
}

.fz-np__info { min-width: 0; }

.fz-np__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fz-fs-xs);
  line-height: 1.3;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--fz-on-dark-muted);
}

.fz-np__title {
  overflow: hidden;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Equaliser: static bars; GSAP animates them while playing (motion only) */
.fz-np__eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  color: var(--fz-white);
}

.fz-np__eq-bar {
  width: 3px;
  height: 40%;
  background: currentColor;
  transform-origin: bottom;
}

.fz-np__eq-bar:nth-child(2) { height: 100%; }
.fz-np__eq-bar:nth-child(3) { height: 70%; }

.fz-np__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-1);
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.fz-np__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fz-on-dark-muted);
  border-radius: 50%;
  background: transparent;
  color: var(--fz-white);
  cursor: pointer;
}

.fz-np__collapse-icon {
  width: 10px;
  height: 10px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}

.fz-np__collapse[aria-expanded="false"] .fz-np__collapse-icon {
  transform: translateX(-2px) rotate(-135deg);
}

/* Progress line (main.js sets --fz-progress from 0 to 1) */
.fz-np__progress {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--fz-line-dark);
}

.fz-np__progress-fill {
  display: block;
  height: 100%;
  background: var(--fz-white);
  transform: scaleX(var(--fz-progress, 0));
  transform-origin: left;
}

/* ---------- 15. Inner pages (News article, Biography) ----------
   Same type, colours and rhythm as the home, calmer: no sticky layers, no
   timed sequences, only the heading / picture fades and the ticket rows.
   Long reading text is in sentence case (.fz-story__text); leads,
   headings and labels keep the site's capitals. */
.fz-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.fz-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin-block-end: var(--space-3);
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-dark-muted);
}

.fz-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--fz-white);
  text-decoration: none;
}

.fz-back::before { content: "\2190"; }

/* Breadcrumb links after Home (the trail on the page headers) */
.fz-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fz-white);
  text-decoration: none;
}

.fz-crumb:hover { text-decoration: underline; text-underline-offset: 0.3em; }

@media (prefers-reduced-motion: no-preference) {
  .fz-back::before { transition: transform 0.4s var(--fz-ease); }
  .fz-back:hover::before { transform: translateX(calc(-1 * var(--space-1))); }
}

.fz-page-title {
  max-width: 16ch;
  font-size: clamp(2.5rem, 1rem + 5.4vw, 7rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: var(--fz-track-tight);
}

.fz-page-title--xl { max-width: none; font-size: var(--fz-fs-h2); }

.fz-caption {
  margin-block-start: var(--space-1);
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
  text-transform: none;
}

.fz-section--light .fz-caption { color: var(--fz-on-light-muted); }

/* News article: full-screen picture with the title inside (as the home hero) */
.fz-article-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--fz-header-h) + var(--space-6)) calc(var(--fz-np-space) + var(--space-4));   /* clear of the player */
  overflow: hidden;
  background: var(--fz-black);
}

.fz-body .fz-article-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pro space group photo: starts under the menu bar (the heads clear it),
   its top melting into the black */
.fz-body .fz-article-hero__img--low {
  inset: var(--fz-header-h) 0 auto;
  height: calc(100% - var(--fz-header-h));
  object-position: center top;
  mask-image: linear-gradient(to bottom, transparent, #000 12%);
}

/* Phones: the NOVA group photo centred on Félix (light grey jumper, 72% of
   the width), not on the middle of the band */
@media (max-width: 767.98px) {
  .fz-body .fz-article-hero__img--low { object-position: 83% top; }
}

/* Phones: the Contact photo (Leuven, with Jeff Ballard) centred on Félix,
   on the far left of the picture (18% of the width) */
@media (max-width: 767.98px) {
  .fz-body .fz-article-hero__img--contact { object-position: 3% center; }
}

/* The horizon at the very bottom of the photo (Discography tree, Félix
   23/10/2026): less sky, the foot of the tree and the horizon stay in view.
   Darkened from the left (the title) instead of the bottom (the horizon).
   Phones: the photo stops above the title, its lower edge fading out. */
.fz-body .fz-article-hero__img--ground {
  object-position: center bottom;
  transform: scale(1.2);          /* zoomed on the ground: even less sky */
  transform-origin: center bottom;
}

.fz-article-hero:has(.fz-article-hero__img--ground)::after {
  background:
    linear-gradient(to bottom, rgb(10 10 10 / 0.5) 0%, rgb(10 10 10 / 0) 20%),
    linear-gradient(to right, rgb(10 10 10 / 0.7) 0%, rgb(10 10 10 / 0) 70%);
}

@media (max-width: 767.98px) {
  .fz-body .fz-article-hero__img--ground {
    height: 68%;
    mask-image: linear-gradient(to bottom, #000 92%, transparent);
  }
}

/* Dark at the bottom (title) and under the header */
.fz-article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(10 10 10 / 0.5) 0%, rgb(10 10 10 / 0) 20%, rgb(10 10 10 / 0.3) 45%, rgb(10 10 10 / 0.9) 100%);
}

.fz-article-hero__content {
  position: relative;
  z-index: 1;
}

.fz-article-hero .fz-kicker { color: var(--fz-on-dark-soft); }

/* No photo credit under the title (Biography): keep its room, so the
   title stops at the same height as on the news page */
.fz-article-hero--no-credit {
  padding-block-end: calc(var(--fz-np-space) + var(--space-4) + var(--space-3) + var(--fz-fs-xs) * 1.5);
}

.fz-article-hero__credit {
  margin-block-start: var(--space-3);
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
  text-transform: none;
}

/* News article lead screen: full-screen picture (slides over the title
   picture, animations.js stacking), lead stepped like the NOVA lead at the
   bottom right. The picture drifts slowly (parallax). */
.fz-article-lead {
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--fz-header-h) var(--space-8);
  overflow: hidden;
}

.fz-body .fz-article-lead__img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.fz-article-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(10 10 10 / 0.35) 0%, rgb(10 10 10 / 0.2) 40%, rgb(10 10 10 / 0.85) 100%);
}

.fz-article-lead__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Phones / tablets: one plain paragraph. From 1024px: stepped lines, each
   one starting a step further right */
.fz-stair {
  font-size: clamp(1.5rem, 0.6rem + 2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Right, under the stair: bottom left is the now playing bar's place */
.fz-article-lead__credit {
  align-self: stretch;
  margin-block-start: var(--space-4);
  text-align: end;
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
  text-transform: none;
}

/* Source of a quoted stair: next step down, small spaced capitals (the
   outer span keeps the stair size so the step matches, the inner text is small) */
.fz-stair__source {
  display: block;
  margin-block-start: var(--space-2);
  line-height: 1;
}

.fz-stair__source small {
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-dark-soft);
}

@media (min-width: 1024px) {
  .fz-stair {
    --fz-stair-step: 1.2em;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
  }

  .fz-stair > span:nth-child(2) { padding-inline-start: var(--fz-stair-step); }
  .fz-stair > span:nth-child(3) { padding-inline-start: calc(2 * var(--fz-stair-step)); }
  .fz-stair > span:nth-child(4) { padding-inline-start: calc(3 * var(--fz-stair-step)); }
}


/* News article story: editorial layout (magazine features). Large lead,
   (the lead is on the screen above), key facts, numbered chapters with their label in the margin, a full-width
   picture, picture + text side by side, big pull quote.
   Paragraphs keep the site's first-line indent (.fz-text). */
.fz-story__grid {
  display: grid;
  row-gap: var(--space-10);
}

.fz-story__facts {
  display: grid;
  border-top: 1px solid var(--fz-line-light);
}

.fz-story__fact {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--fz-line-light);
}

.fz-story__fact dt,
.fz-story__note-title {
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-light-muted);
}

.fz-story__fact dd {
  margin: 0;
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fz-story__facts--figures .fz-story__fact dd {
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  letter-spacing: var(--fz-track-tight);
}

.fz-story__facts--figures .fz-story__fact { align-content: start; }

/* Key figures inside a chapter (About 01): above the text on phones,
   stacked on its left on desktop, in place of a picture */
.fz-story__facts--side { margin-block-end: var(--space-6); }

.fz-story__media.fz-story__media--portrait img { aspect-ratio: 4 / 5; object-position: center top; }

/* Phones / tablets: vertical pictures keep their height (as much as the
   screen allows) instead of a cropped landscape strip */
@media (max-width: 1023.98px) {
  /* A fixed ratio (the three portraits are ~778 x 1200), not auto: the
     room is kept before the lazy picture loads, so the stacked section
     never grows after ScrollTrigger has measured it */
  .fz-story__media.fz-story__media--tall img {
    aspect-ratio: 13 / 20;
    height: auto;
    max-height: 85svh;
    object-position: center top;
  }
}

/* Both of Félix's portraits are cropped from the top: the head stays in frame */
.fz-story__pair-media img { object-position: center top; }

.fz-story__chapter {
  display: grid;
  gap: var(--space-4);
}

.fz-story__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
  border-top: 1px solid currentColor;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Left column holding a chapter label and more (SoundCloud players) */
.fz-story__margin {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

/* NOVA chapter 04: the Elusive cover (plays in the now playing bar), left-aligned */
.fz-album--story {
  justify-items: start;
  max-width: 22rem;
  text-align: start;
}

/* Two chapters on the left, each with its picture or album on the right,
   level with its title line */
.fz-story__pair {
  display: grid;
  gap: var(--space-8);
}

.fz-story__pair-chapter,
.fz-story__pair-media {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.fz-story__num {
  font-size: var(--fz-fs-lg);
  line-height: 1;
  letter-spacing: -0.02em;
}

.fz-story__text {
  max-width: 38rem;
  text-transform: none;
}

.fz-story__text p {
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  text-indent: var(--space-5);
}

.fz-story__text p + p { margin-block-start: var(--space-3); }

/* Beyond 24" the columns keep growing (section 1): the text grows with
   them (21px at 1920 → 26px at 2560), lines stay about 65 characters */
@media (min-width: 1920px) {
  .fz-story__text { max-width: none; }

  .fz-story__text p {
    max-width: 30em;
    font-size: clamp(1.3125rem, 0.375rem + 0.78vw, 1.75rem);
  }
}

.fz-story__note ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  font-size: var(--fz-fs-sm);
  font-weight: 500;
}

.fz-story__note li span {
  display: block;
  font-weight: 400;
  color: var(--fz-on-light-muted);
  text-transform: none;
}

.fz-story__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--fz-radius);
}

.fz-story__side {
  display: grid;
  gap: var(--space-4);
  align-content: center;
}

/* Giant quote marks hung on the quote text: the opening one above its
   top-left corner, the closing one (the same mark turned half round) below
   its bottom-right corner, at the same distance: exactly mirrored */
.fz-story__quote {
  --fz-mark: clamp(6rem, 3rem + 10vw, 14rem);
  --fz-mark-gap: var(--space-2);
  margin: 0;
  padding-block: calc(var(--fz-mark) * 0.5 + var(--fz-mark-gap)) calc(var(--fz-mark) * 0.5 + var(--fz-mark-gap) - var(--space-6));
}

.fz-story__quote p { position: relative; }

.fz-story__quote p::before,
.fz-story__quote p::after {
  content: "\201C";
  position: absolute;
  height: 0.5em;
  font-size: var(--fz-mark);
  line-height: 1;
}

.fz-story__quote p::before { bottom: calc(100% + var(--fz-mark-gap)); left: 0; }

.fz-story__quote p::after {
  top: calc(100% + var(--fz-mark-gap));
  right: 0;
  transform: rotate(180deg);
}

.fz-story__quote p {
  font-size: var(--fz-fs-quote);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.fz-story__quote footer {
  margin-block-start: var(--space-3);
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-light-muted);
}

@media (min-width: 768px) {
  .fz-story__text p { text-indent: var(--space-8); }

  .fz-story__facts { grid-template-columns: repeat(3, 1fr); column-gap: var(--fz-col-gap); }
}

@media (min-width: 1024px) {
  .fz-story__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--fz-col-gap);
    row-gap: var(--space-12);
  }

  .fz-story__grid > * { grid-column: 1 / -1; }

  .fz-story__chapter {
    grid-template-columns: subgrid;
    align-items: start;
  }

  .fz-story__chapter > .fz-story__label { grid-column: 1 / span 3; }
  /* Label in a 4-column margin; the text keeps the same room on both sides (gap + 64px), before the
     line-up in columns 11-12 */
  .fz-story__chapter > .fz-story__margin { grid-column: 1 / span 4; }
  .fz-story__chapter:has(> .fz-story__margin) > .fz-story__text {
    grid-column: 5 / span 6;
    margin-inline: var(--space-8);
  }

  /* Each picture comes after its chapter in the HTML (under it on
     phones, Félix 23/10/2026): explicit columns put it on the right */
  .fz-story__pair {
    grid-template-columns: subgrid;
    grid-auto-flow: dense;
    align-items: start;
    row-gap: var(--space-10);
  }
  .fz-story__pair-chapter { grid-column: 1 / span 6; }
  .fz-story__pair-media { grid-column: 8 / span 5; }
  .fz-story__chapter > .fz-story__text { grid-column: 5 / span 6; }
  .fz-story__chapter > .fz-story__note { grid-column: 11 / span 2; }
  .fz-story__note ul { grid-template-columns: 1fr; }

  /* the picture starts at the title line; it comes after the text in the
     HTML (under it on phones): dense placement puts it back on the left */
  .fz-story__chapter--split { align-items: start; grid-auto-flow: dense; }
  .fz-story__media--side { grid-column: 1 / span 6; }
  .fz-story__media--portrait { grid-column: 1 / span 5; }
  .fz-story__side { grid-column: 8 / span 5; }
  .fz-story__facts--side { grid-column: 1 / span 5; grid-template-columns: 1fr; margin: 0; }

  /* A portrait beside a chapter is as tall as its text: the figure stretches
     to the row, the picture fills it (height 0: only the text sizes the row).
     Landscape pictures keep their 3:2 frame, never cropped into a tall one
     (Félix, 23/10/2026) */
  .fz-story__media--tall {
    display: flex;
    flex-direction: column;
    gap: 0;                /* the caption keeps its own small margin */
    align-self: stretch;
  }

  /* A landscape picture beside a longer text stays in view while it is read */
  .fz-story__chapter--split > .fz-story__media:not(.fz-story__media--tall) {
    position: sticky;
    top: calc(var(--fz-header-h) + var(--space-4));
  }

  .fz-story__media.fz-story__media--tall img {
    flex: 1 1 auto;
    height: 0;
    min-height: 20rem;
    aspect-ratio: auto;
  }

  .fz-story__quote { grid-column: 2 / span 10; }
}

/* Smaller section heading than the home's giant titles */
.fz-subtitle {
  margin-block-end: var(--space-6);
  font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: var(--fz-track-tight);
}

/* Concerts on a page: plain list, no background loop */
.fz-tour__list--page { margin-inline: 0; max-width: none; }

/* More news, then the concert dates (same black: no second top padding) */
.fz-more + .fz-section--dark { padding-block-start: 0; }

.fz-more__all {
  margin-block-start: var(--space-4);
  text-align: center;
}

.fz-more__all--far { margin-block-start: var(--space-8); }   /* under a long list */

/* More room under the Biography list titles */
.fz-title--roomy { margin-block-end: calc(var(--fz-title-gap) * 1.6); }

/* Hover photo (animations.js, mouse only): covers the item and its text
   while hovered, bleeding a little into the gaps */
.fz-hover-photo {
  position: absolute;
  inset: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
  z-index: 1;
  overflow: hidden;
  border-radius: var(--fz-radius);
  visibility: hidden;
}

.fz-hover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

[data-hover-photo] {
  position: relative;
  isolation: isolate;
}

/* Biography: main groups, full width */
.fz-groups {
  display: grid;
  gap: var(--space-8) var(--fz-col-gap);
}

.fz-groups__item {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding-block-start: var(--space-3);
  border-top: 1px solid var(--fz-line-dark);
}

.fz-groups__name {
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* The whole square links to the band's site (stretched link, above the
   hover picture) */
.fz-groups__link {
  color: inherit;
  text-decoration: none;
}

.fz-groups__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.fz-groups__item:has(.fz-groups__link) { position: relative; }
.fz-body .fz-groups__link:focus-visible { outline: none; }

.fz-groups__link:focus-visible::after {
  outline: 2px solid var(--fz-white);
  outline-offset: 4px;
  border-radius: var(--fz-radius);
}

.fz-groups__with {
  font-size: var(--fz-fs-sm);
  color: var(--fz-on-dark-muted);
  text-transform: none;
}

/* Concert loop behind the names, as Tour: dark, from 768px only */
.fz-shared { overflow: hidden; }

.fz-shared__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fz-black);
}

.fz-shared__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--fz-black) 0%, rgb(10 10 10 / 0.82) 25%, rgb(10 10 10 / 0.82) 75%, var(--fz-black) 100%);
}

.fz-shared__video { display: none; }

@media (min-width: 768px) {
  .fz-body .fz-shared__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
  }
}

/* Biography: names in a downward triangle (each line shorter, centred),
   from 1024px; the size follows the container so the top line always fits.
   Phones and tablets: one centred paragraph, names separated by dots. */
.fz-names {
  font-size: clamp(1.25rem, 0.5rem + 1.3vw, 2rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
  text-align: center;
}

/* Dot between the lines when they flow (kept on the name before it) */
.fz-names > span:not(:last-child)::after { content: "\00A0\00B7"; }

.fz-names__more { color: var(--fz-on-dark-muted); }

/* A name (and "and many others") never breaks across two lines */
.fz-names__name,
.fz-names__more { white-space: nowrap; }

/* Below 1024px (main.js): two names per line, each line sized to the full
   width, a perfect rectangle */
.fz-names--fit { line-height: 1.15; }

.fz-names.fz-names--fit > span::after { content: none; }   /* no dot at the line ends */

.fz-names__line {
  display: block;
  width: max-content;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .fz-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: min(2.2vw, var(--fz-container) / 42);
    line-height: 1.6;
    white-space: nowrap;
  }

  .fz-names > span:not(:last-child)::after { content: none; }
}

@media (min-width: 768px) {
  .fz-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop: five equal squares; the hover picture fills its square exactly
   (a thumbnail of the band) instead of bleeding into the gaps */
@media (min-width: 1024px) {
  .fz-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fz-groups__name { font-size: clamp(1.125rem, 0.4rem + 1vw, 1.75rem); }
  .fz-groups__item { aspect-ratio: 1; }
  .fz-groups .fz-hover-photo { inset: 0; }
}

/* Biography: discography */
.fz-discs { border-top: 1px solid var(--fz-line-light); }

.fz-discs__row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.25rem var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--fz-line-light);
}

.fz-discs__year {
  grid-row: span 3;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
  color: var(--fz-on-light-muted);
}

.fz-discs__title {
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* The whole row is the link */
a.fz-discs__title::after { content: ""; position: absolute; inset: 0; }
a.fz-discs__title::before { content: "\2197"; float: right; margin-inline-start: var(--space-2); font-size: var(--fz-fs-body); }

.fz-discs__artist,
.fz-discs__label { font-size: var(--fz-fs-sm); }

.fz-discs__label { color: var(--fz-on-light-muted); }

@media (hover: hover) {
  .fz-discs__row:has(a):hover { background: rgb(10 10 10 / 0.04); }
}

@media (min-width: 768px) {
  .fz-discs__row {
    grid-template-columns: 5rem 1.2fr 1fr 12rem 1.5rem;
    align-items: baseline;
    padding-inline: var(--space-1);
  }

  .fz-discs__year { grid-row: auto; }
  a.fz-discs__title::before { position: absolute; top: 50%; right: var(--space-1); float: none; transform: translateY(-50%); }
}

/* ---------- 16. NOVA page ----------
   Header: the home NOVA opening (section 8) full screen on a video loop;
   then the inner-page story layout (section 15), videos, a sideways
   timeline, press and the latest album. */
.fz-nova--page { padding-block: 0; }

.fz-nova--page { display: block; min-height: 0; }

/* One screen tall on phones too (the home NOVA phone layout is not used) */
.fz-body .fz-nova--page .fz-nova__screen {
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--fz-header-h);
}

/* Breadcrumb at the bottom left of the screen (the title sits higher) */
.fz-nova__crumbs {
  position: absolute;
  inset: auto 0 calc(var(--fz-np-space) + var(--space-4));   /* clear of the player */
  z-index: 2;
  margin-inline: auto;
}

.fz-nova__crumbs .fz-kicker { margin-block-end: 0; color: var(--fz-on-dark-soft); }

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

/* Videos: YouTube on click; the first one large */
.fz-videos__grid { gap: var(--space-6) var(--fz-col-gap); }

.fz-yt__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--fz-radius);
  background: var(--fz-tile-bg);
  color: var(--fz-white);
  cursor: pointer;
}

.fz-yt__play img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.fz-yt__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--fz-radius);
}

/* Play button: white ring with a triangle */
.fz-yt__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-10);
  height: var(--space-10);
  border: 1px solid var(--fz-white);
  border-radius: 50%;
  background: rgb(10 10 10 / 0.35);
  transform: translate(-50%, -50%);
}

.fz-yt__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-block: 0.6rem solid transparent;
  border-inline-start: 1rem solid var(--fz-white);
  transform: translate(-50%, -50%);
}

.fz-yt__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-block-start: var(--space-2);
}

.fz-yt__title {
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fz-yt__meta {
  font-size: var(--fz-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fz-on-dark-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .fz-yt__play img { transition: transform 0.6s var(--fz-ease); }
  .fz-yt__icon { transition: background-color 0.3s var(--fz-ease); }
}

@media (hover: hover) {
  .fz-yt__play:hover img { transform: scale(1.03); }
  .fz-yt__play:hover .fz-yt__icon { background: rgb(10 10 10 / 0.6); }
}

/* Phones: a sideways row (.fz-row), one video at a time. From 768px back to
   the grid: the first one large, the others under it */
.fz-videos__row { --fz-row-gap: var(--fz-col-gap); }

@media (min-width: 768px) {
  .fz-videos__grid.fz-row {
    display: grid;
    overflow: visible;
    padding-block-end: 0;
    margin-block-end: 0;
    touch-action: auto;
  }

  .fz-videos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fz-yt--feature { grid-column: 1 / -1; }
  .fz-yt--feature .fz-yt__title { font-size: var(--fz-fs-quote); }
}

/* Timeline: a sideways scroller (swipe, trackpad, arrows under it; main.js).
   The former "scroll down to move it" version: tools/archive/timeline-vertical-scroll.md */
.fz-timeline {
  --fz-tl-year: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --fz-tl-dot: 0.875rem;
}

/* Room between the title and the track; the block is centred, so the
   title also sits higher */
.fz-timeline__title { margin-block-end: clamp(var(--space-10), 14vh, var(--space-20)); }

.fz-timeline__viewport {
  overflow-x: auto;
  overflow-y: hidden;                /* never scrolls up and down inside (it slid under its edge on phones) */
  padding-block-end: var(--space-4);               /* room for the items rising in (32px below at the start) */
  margin-block-end: calc(-1 * var(--space-4));     /* ...without changing the layout */
  overscroll-behavior-x: contain;   /* no browser "back" at the ends of a trackpad swipe */
  touch-action: pan-x pan-y pinch-zoom;   /* both axes native: the browser locks the axis (main.js 6c) */
  scrollbar-width: none;            /* the arrows and the progress line show the way */
}

.fz-timeline__viewport::-webkit-scrollbar { display: none; }

.fz-body .fz-timeline__viewport:focus-visible { outline-offset: -2px; }

.fz-timeline__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}

/* "Swipe" between the arrows: a fingertip dot sweeps right to left */
.fz-timeline__swipe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 6.5rem;
  justify-content: center;
  margin: 0;                      /* level with the arrows (.fz-kicker has a bottom margin) */
  color: var(--fz-on-dark-soft);
}

.fz-timeline__swipe::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .fz-timeline__swipe::before { animation: fz-swipe 2.2s var(--fz-ease) infinite; }
}

@keyframes fz-swipe {
  0% { opacity: 0; transform: translateX(14px); }
  25% { opacity: 1; }
  70% { opacity: 1; transform: translateX(-14px); }
  100% { opacity: 0; transform: translateX(-14px); }
}

.fz-timeline__arrows [aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.fz-timeline__track {
  position: relative;
  width: max-content;
  padding-inline: max(var(--fz-gutter), (100vw - var(--fz-container)) / 2);
}

.fz-timeline__steps { display: flex; }

.fz-timeline__step {
  width: clamp(15rem, 22vw, 21rem);
  padding-inline-end: var(--space-4);
}

/* Phones: a swipe moves on to the next step, one at a time, as the other
   sideways rows (off while an arrow glide runs, main.js 6c) */
@media (max-width: 767.98px) {
  .fz-timeline__viewport {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--fz-gutter);   /* steps line up with the page's gutter */
  }

  .fz-timeline__step {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

.fz-timeline__year {
  margin-block-end: var(--space-3);
  font-size: var(--fz-tl-year);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--fz-track-tight);
}

/* Line through the dots, under them; its white progress fills from the left */
.fz-timeline__line {
  position: absolute;
  top: calc(var(--fz-tl-year) + var(--space-3) + var(--fz-tl-dot) / 2);
  right: max(var(--fz-gutter), (100vw - var(--fz-container)) / 2);
  left: max(var(--fz-gutter), (100vw - var(--fz-container)) / 2);
  height: 1px;
  background: var(--fz-line-dark);
}

.fz-timeline__progress {
  position: absolute;
  inset: 0;
  background: var(--fz-white);
  transform-origin: left center;
}

.fz-timeline__dot {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--fz-tl-dot);
  height: var(--fz-tl-dot);
  margin-block-end: var(--space-4);
  border: 1px solid var(--fz-white);
  border-radius: 50%;
  background: var(--fz-black);
}

.fz-timeline__dot.is-reached { background: var(--fz-white); }

@media (prefers-reduced-motion: no-preference) {
  .fz-timeline__dot { transition: background-color 0.4s var(--fz-ease), transform 0.4s var(--fz-ease); }
  .fz-timeline__dot.is-reached { transform: scale(1.3); }
}

.fz-timeline__events {
  display: grid;
  gap: var(--space-2);
  max-width: 17rem;
  font-size: var(--fz-fs-sm);
  line-height: 1.45;
  color: var(--fz-on-dark-muted);
  text-transform: none;
}

.fz-timeline__events strong {
  font-weight: 500;
  color: var(--fz-white);
}

/* Press: three reviews */
.fz-press__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  border-top: 1px solid var(--fz-line-light);
}

.fz-press__stars { letter-spacing: 0.15em; }

.fz-press__quote p {
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  text-transform: none;
}

.fz-press__source {
  display: grid;
  gap: 0.25rem;
  font-size: var(--fz-fs-sm);
  font-weight: 500;
}

.fz-press__source span { font-weight: 400; color: var(--fz-on-light-muted); }

/* Latest album */
.fz-latest__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.fz-latest__cover {
  overflow: hidden;
  max-width: 32rem;
  border-radius: var(--fz-radius);
}

.fz-latest__cover img { width: 100%; }

.fz-latest__title {
  margin-block-end: var(--space-3);
  font-size: var(--fz-fs-h2);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: var(--fz-track-tight);
}

.fz-latest__text {
  max-width: 34ch;
  font-size: var(--fz-fs-lg);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fz-latest__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.fz-latest__credit {
  margin-block-start: var(--space-6);
  font-size: var(--fz-fs-xs);
  color: var(--fz-on-dark-muted);
  text-transform: none;
}

@media (min-width: 768px) {
  .fz-latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fz-col-gap); }
}

/* ---------- Wide screens (> 24", 1920px) ----------
   Blocks capped in rem keep the proportions they have at 1920px instead of
   stopping at their cap (container: section 1) */
@media (min-width: 1920px) {
  .fz-news__slide { width: calc(100vw / 3); }          /* 640px at 1920 */
  .fz-news .fz-news__arrows { inset-inline: calc(50% - 0.3 * 100vw - 4rem); }
  .fz-about__photo { max-width: none; }                /* fills its 4 columns */
  .fz-disco__fan { max-width: 80%; }                   /* 72rem of 90rem at 1920 */
  .fz-tour__list { max-width: 80%; }
}

/* ==========================================================================
   Framing chosen in the admin ("Cadrage de la photo", WordPress): only an
   explicit choice overrides the framing set above for each picture
   ========================================================================== */
.fz-body img.fz-crop.fz-crop--top { object-position: center top; }
.fz-body img.fz-crop.fz-crop--center { object-position: center center; }
.fz-body img.fz-crop.fz-crop--bottom { object-position: center bottom; }