/* ==========================================================================
   Manuel Sanguino — stylesheet
   Theme: "Vercel Remix" (21st.dev): near-white page, black primary, greys.
   Type: Playfair Light for headings, quotes and large titles; Jost for text,
   and for labels in spaced capitals.
   The home hero, video player and photo viewer use the theme's dark palette.
   ========================================================================== */

/* ---------- Fonts --------------------------------------------------------- */
/* Titles take their "&" from Noto Serif Display (upright, light): Playfair's
   own is a decorative, handwritten form. The file holds only that character. */
@font-face {
  font-family: 'Serif Amp';
  src: url('../fonts/serif-amp.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0026;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* "Vercel Remix" theme (21st.dev): near-white background, black primary,
     neutral greys. The theme's oklch tokens, written in hex. */
  --bg:        #fcfcfc;   /* background        oklch(0.99 0 0) */
  --bg-2:      #f5f5f5;   /* muted             oklch(0.97 0 0) */
  --bg-3:      #ebebeb;   /* secondary         oklch(0.94 0 0) */
  --ink:       #000000;   /* foreground        oklch(0 0 0) */
  --wordmark:  #000000;   /* the name: black on light grounds */
  /* text colours by role (after the text hierarchy of Yuja Wang's site) */
  --tx-title:    #1a1816;   /* titles: warm near-black */
  --tx-accent:   #876b32;   /* antique gold: labels, publications, footer headings */
  --tx-bronze:   #6b5326;   /* deep bronze: his own words, concert and piece titles */
  --tx-subtitle: #464b50;   /* subtitles: cool slate */
  --tx-quote:    #5a554f;   /* quotations: warm grey */
  --tx-body:     #4a4642;   /* body text: warm dark grey */
  --tx-meta:     #6e6862;   /* dates, captions, credits */
  --menu-bg:     #efefef;   /* the open menu: a soft neutral grey */
  --ink-2:     rgba(0, 0, 0, 0.78);
  --ink-3:     #525252;   /* muted-foreground  oklch(0.44 0 0) */
  --accent:    #000000;   /* primary */
  --accent-fg: #ffffff;   /* primary-foreground */
  --accent-2:  rgba(0, 0, 0, 0.28);
  --line:      #e4e4e4;   /* border            oklch(0.92 0 0) */
  --line-2:    #cfcfcf;
  --danger:    oklch(0.55 0.19 23.03);   /* destructive, darkened for 4.5:1 text */
  --radius:    0;   /* sharp corners on every box; circles stay round */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.18);

  /* Text in Jost (a Futura revival); headings, quotes and large titles in
     Playfair Light, the serif of MANUEL in the wordmark; labels are Jost in
     spaced capitals. */
  --sans:  'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --serif: 'Serif Amp', 'Playfair', 'Bodoni 72', Didot, Georgia, serif;
  --serif-italic: 'Playfair', 'Bodoni 72', Didot, Georgia, serif;   /* quotes keep Playfair's italic "&" */

  /* Motion: arrivals decelerate (expo out), departures are shorter. */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t1: 0.35s;   /* colour, small state changes */
  --t2: 0.7s;    /* hover sweeps, panels */
  --t3: 1.1s;    /* reveals */
  --t4: 1.6s;    /* photographs */

  --max:     1440px;
  --gutter:  clamp(20px, 4.5vw, 72px);
  --section: clamp(96px, 12vw, 192px);
  --nav-h:   clamp(68px, 7vw, 92px);

  --z-nav: 100;
  --z-menu: 90;
  --z-modal: 200;

  color-scheme: light;
}

/* Areas that sit on photographs or a darkened screen keep the dark palette:
   the home hero, the photographs across the top of the other pages, the
   header while it is over them, the video player, the photo viewer and
   captions laid over pictures. */
:root[data-theme="dark"],
.hero,
.page-hero,
.site-nav.is-on-dark:not(.menu-open),
.modal,
.lightbox,
.photo-card__overlay {
  --bg:        #000000;
  --bg-2:      #0a0a0a;
  --bg-3:      #121212;
  --ink:       #ffffff;
  --ink-2:     rgba(255, 255, 255, 0.82);
  --ink-3:     #a1a1a1;   /* muted-foreground  oklch(0.72 0 0) */
  --wordmark:  #f0e7db;   /* the name: the warm ivory of its artwork */
  --tx-title:    #f3eee7;
  --tx-accent:   #c9ad6f;
  --tx-bronze:   #d6bf8c;
  --tx-subtitle: #bdb7b0;
  --tx-quote:    #e6ded3;
  --tx-body:     #cbc5bd;
  --tx-meta:     #9a948d;
  --accent:    #ffffff;
  --accent-fg: #000000;
  --accent-2:  rgba(255, 255, 255, 0.4);
  --line:      rgba(255, 255, 255, 0.14);
  --line-2:    rgba(255, 255, 255, 0.28);
  --danger:    oklch(0.69 0.2 23.91);
  color-scheme: dark;
  color: var(--ink);
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, picture { display: block; max-width: 100%; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
ul, ol { list-style: none; }
blockquote { quotes: none; }
[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Film grain over the whole stage — one static tile, never repainted. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  display: none;
}

/* ---------- Page transitions (browsers with cross-document view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.38s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in 0.8s var(--ease) both; }
::view-transition-group(site-nav) { animation: none; }
/* desktop only: on phones the menu overlay lives inside the header */
@media (min-width: 901px) { .site-nav { view-transition-name: site-nav; } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(18px); } }
/* switching light/dark: a plain crossfade */
:root.theme-change::view-transition-old(root) { animation: vt-fade-out 0.45s var(--ease-io) both; }
:root.theme-change::view-transition-new(root) { animation: vt-fade-in 0.45s var(--ease-io) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* ---------- Layout -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* a slightly narrower measure: the concert calendar and its listings */
.container--narrow { max-width: min(var(--max), 1240px); }
.section { position: relative; padding: var(--section) 0; }
.section--band { background: var(--bg-2); }
.section--tight { padding-top: clamp(48px, 6vw, 96px); }

/* ---------- Typography ---------------------------------------------------- */
.display-xxl,
.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  font-weight: 300;
  color: var(--tx-title);
  text-wrap: balance;
}
.display-xl { font-size: clamp(60px, 10.8vw, 184px); line-height: 1;    letter-spacing: -0.02em; }
.display-l  { font-size: clamp(52px, 8.1vw, 134px);  line-height: 1.02; letter-spacing: -0.018em; }
.display-m  { font-size: clamp(40px, 5.4vw, 86px);   line-height: 1.06; letter-spacing: -0.014em; }
.display-s  { font-size: clamp(33px, 3.6vw, 54px);   line-height: 1.12; letter-spacing: -0.01em; }
.display-xl em, .display-l em, .display-m em, .display-s em { font-style: normal; color: var(--ink-3); }

.text-body {
  color: var(--tx-body);
  max-width: 62ch;
}
.text-body + .text-body { margin-top: 1.4em; }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.5vw, 37px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tx-body);
  max-width: 30ch;
  text-wrap: pretty;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}

.micro { font-size: 13px; line-height: 1.6; color: var(--tx-meta); }

/* Eyebrow: a small label in spaced capitals above a title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- Links & buttons ----------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t2) var(--ease), border-color var(--t2) var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--ink);
  border-radius: inherit;
  transform: translate3d(0, 101%, 0);
  transition: transform var(--t2) var(--ease);
}
.btn:hover { color: var(--bg); border-color: var(--ink); }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(0.98); }
.btn--solid::before { background: color-mix(in srgb, var(--accent) 78%, var(--bg)); }
.btn--solid:hover { color: var(--accent-fg); border-color: transparent; }

.btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--shadow-sm);
}

/* Arrow drawn in CSS: a line with a chevron head. */
.arr {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--t2) var(--ease), width var(--t2) var(--ease);
}
.arr::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arr, a:hover > .arr { transform: translateX(5px); }

.link-arrow {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}
.link-arrow::after,
.u-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform var(--t2) var(--ease);
}
.link-arrow:hover::after,
.u-link:hover::after { transform: scaleX(1); }
.u-link { position: relative; display: inline-block; }
.u-link::after { transform: scaleX(0); }

/* ---------- Header -------------------------------------------------------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--gutter);
  transition: transform 0.7s var(--ease);
}
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.site-nav.is-scrolled::before { opacity: 1; }
.site-nav.is-hidden { transform: translate3d(0, -100%, 0); }
.site-nav.menu-open::before { opacity: 0; }

.nav-brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  min-height: 44px;
}
/* The name ("Cantabile"): SANGUINO in Playfair Light at its largest optical
   size, MANUEL in Jost capitals, widely spaced, as a quiet running head.
   Stacked in the hero and footer; on one line in the header. */
.wordmark {
  display: inline-block;
  color: var(--wordmark);
  line-height: 1;
  white-space: nowrap;
  font-kerning: normal;
  transition: color var(--t1) var(--ease);
}
.wm-first {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.68em;
}
.wm-last {
  font-family: 'Playfair', 'Bodoni 72', Didot, Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 1200;
  letter-spacing: 0.03em;
}
.wordmark--line { display: inline-flex; align-items: baseline; gap: 0.95em; }
.wordmark--line .wm-first { font-size: 10px; letter-spacing: 0.6em; }
.wordmark--line .wm-last { font-size: clamp(25px, 2.2vw, 32px); }
@media (max-width: 560px) {
  .wordmark--line { gap: 0.8em; }
  .wordmark--line .wm-first { font-size: 8.5px; letter-spacing: 0.5em; }
  .wordmark--line .wm-last { font-size: 22px; }
}
/* stacked: sized from the parent's font size (1em = the old drawing's 1em) */
.wordmark--stack { display: block; }
.wordmark--stack .wm-row,
.wordmark--stack .wm-first,
.wordmark--stack .wm-last { display: block; }
.wordmark--stack .wm-first { font-size: max(10px, 0.132em); margin: 0 0 0.35em 0.3em; }
.wordmark--stack .wm-last { font-size: 1.2em; line-height: 0.74; margin-left: -0.02em; }
.nav-brand { transition: opacity 0.6s var(--ease); }
/* Home: while the large name is on screen, the header does not repeat it */
.js .site-nav.is-name-visible:not(.menu-open) .nav-brand:not(:focus-visible) { opacity: 0; pointer-events: none; }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
}
.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  transition: color var(--t1) var(--ease);
}
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0.22em;
  bottom: 10px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t2) var(--ease);
}
.nav-list a:hover { color: var(--ink); }
.nav-list a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav-list a[aria-current="page"] { color: var(--ink); }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-right: -6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}
.lang-switch > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 44px;
}
.lang-switch [aria-current] { color: var(--ink); }
.lang-switch a { color: var(--ink-3); transition: color var(--t1) var(--ease); }
.lang-switch a:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease), background-color var(--t1) var(--ease);
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; left: 18px; transition: transform 0.6s var(--ease), left 0.4s var(--ease), background-color var(--t1) var(--ease); }
.nav-toggle:hover span:nth-child(2) { left: 11px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { left: 11px; transform: translateY(-3.5px) rotate(-45deg); }

/* Homepage header: a small menu button at every width, opening the full-screen menu */
.site-nav--compact .nav-toggle { display: block; }
.site-nav--compact .nav-list {
  position: fixed;
  inset: 0;
  z-index: -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vh, 14px);
  padding: var(--nav-h) var(--gutter) 48px;
  text-align: center;
  background: var(--menu-bg);   /* a light grey ground, the links centred */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-io), visibility 0s linear 0.7s;
  }
.site-nav--compact .nav-list[data-open="true"] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.9s var(--ease-io), visibility 0s;
  }
.site-nav--compact .nav-list li { overflow: hidden; }
.site-nav--compact .nav-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 0;
  padding: 4px 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.1vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
  transform: translate3d(0, 110%, 0);
  transition: transform 0.5s var(--ease-io), color var(--t1) var(--ease);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  }
.site-nav--compact .nav-list a::after { display: none; }
.site-nav--compact .nav-list a[aria-current="page"] { font-style: normal; color: var(--ink-3); }
.site-nav--compact .nav-list[data-open="true"] a { transform: none; transition: transform 1.1s var(--ease), color var(--t1) var(--ease); }
.site-nav--compact .nav-list[data-open="true"] li:nth-child(1) a { transition-delay: 0.28s; }
.site-nav--compact .nav-list[data-open="true"] li:nth-child(2) a { transition-delay: 0.34s; }
.site-nav--compact .nav-list[data-open="true"] li:nth-child(3) a { transition-delay: 0.40s; }
.site-nav--compact .nav-list[data-open="true"] li:nth-child(4) a { transition-delay: 0.46s; }
.site-nav--compact .nav-list[data-open="true"] li:nth-child(5) a { transition-delay: 0.52s; }
/* the social buttons under the links: a centred row that slides in last */
.site-nav--compact .nav-list__social { margin-top: clamp(16px, 3.5vh, 36px); }
.site-nav--compact .nav-list__social .socials { justify-content: center; gap: 12px; }
.site-nav--compact .nav-list .nav-list__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0;
  color: var(--ink-2);
  border-color: var(--line-2);
  transition: transform 0.5s var(--ease-io), color var(--t1) var(--ease), border-color var(--t1) var(--ease), background-color var(--t1) var(--ease);
}
.site-nav--compact .nav-list[data-open="true"] .nav-list__social a {
  transition: transform 1.1s var(--ease) 0.58s, color var(--t1) var(--ease), border-color var(--t1) var(--ease), background-color var(--t1) var(--ease);
}
.site-nav--compact .nav-list .nav-list__social a:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.site-nav--compact .nav-list__social svg { width: 16px; height: 16px; }

/* ---------- Hero (home) --------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #141210;
  background-size: cover;
  background-position: 70% center;
  will-change: transform;
}
.hero__bg::before {
  /* blurred placeholder, shown until the photograph arrives */
  content: '';
  position: absolute;
  inset: -40px;
  background: inherit;
  background-image: var(--lqip);
  background-size: cover;
  background-position: 70% center;
  filter: blur(24px);
}
.hero__bg picture,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__bg img {
  object-fit: cover;
  object-position: 70% center;
  filter: saturate(0.88);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.72) 24%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 18%);
}

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--gutter) clamp(36px, 7vh, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px 48px;
  will-change: transform, opacity;
}
.hero__title-wrap { min-width: 0; container-type: inline-size; }
.hero__name {
  font-size: clamp(56px, 10.4vw, 196px);
  font-size: clamp(44px, min(10.4vw, 21svh), 196px); /* short windows: keep clear of the header */
  font-size: clamp(36px, min(10.4vw, 21svh, 15.6cqi), 196px); /* never wider than its column */
  line-height: 0;
}
/* sized from the font size above: SANGUINO keeps the width the drawn name had (5.5em) */
.hero__name { font-weight: 400; }
.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 0.6vw;
}
.hero__ctas .btn { justify-content: space-between; }
/* outline only over the photograph: no fill, a white contour and white text */
.hero__ctas .btn,
.hero__ctas .btn--solid {
  color: #ffffff;
  background: transparent;
  border-color: #ffffff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero__ctas .btn::before,
.hero__ctas .btn--solid::before { background: rgba(255, 255, 255, 0.14); }
.hero__ctas .btn:hover { color: #ffffff; border-color: #ffffff; }

.hero__meta {
  position: absolute;
  right: calc(var(--gutter) - 6px);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  transform: translateY(-50%);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.hero__meta::after {
  content: '';
  width: 1px;
  height: 72px;
  background: linear-gradient(to bottom, var(--ink-3) 0 50%, transparent 50%) 0 0 / 1px 200%;
  animation: meta-line 2.4s var(--ease-io) infinite;
}
@keyframes meta-line {
  0%   { background-position: 0 100%; }
  100% { background-position: 0 -100%; }
}

/* Hero: the name and the button appear at once, without a fade or a rise,
   as soon as the fonts are in (JS then adds .is-ready) */
.js .hero:not(.is-ready) .hero__name,
.js .hero:not(.is-ready) .hero__ctas { visibility: hidden; }
.js .hero__meta {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.js .hero.is-ready .hero__meta { opacity: 1; transform: translateY(-50%); transition-delay: 1.4s; }

/* each row of the name keeps room for the letters' overshoot */
.hero__name .wm-row { overflow: hidden; padding: 0.12em 0.1em 0.06em; margin: -0.12em -0.1em -0.06em; }
.hero__name .wl { display: inline-block; }

/* ---------- Section headers ----------------------------------------------- */
.section-header {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  margin-bottom: clamp(48px, 6vw, 96px);
}
.section-header--split {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
}
.section-header--split > div:first-child { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }

/* ---------- Biography teaser (home) --------------------------------------- */
.bio-teaser {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.bio-teaser__head {
  grid-column: 7 / -1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.bio-teaser__head { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.bio-teaser__head .display-l { margin-left: 0; }
.bio-teaser__aside {
  grid-column: 1 / 6;
  grid-row: 1 / span 2;
}
.bio-teaser__body {
  grid-column: 7 / -1;
  grid-row: 2;
}
.bio-teaser__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-3);
}
.bio-teaser__portrait img,
.media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bio-teaser__quote {
  margin-top: clamp(28px, 3vw, 44px);
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(25px, 2.1vw, 31px);
  line-height: 1.3;
  color: var(--tx-bronze);
  max-width: 26ch;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.bio-teaser__meta {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.bio-teaser__body .text-body:first-child {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(25px, 2.1vw, 31px);
  line-height: 1.32;
  color: var(--tx-body);
  max-width: 32ch;
  margin-bottom: 1.6em;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.bio-teaser__cta { margin-top: clamp(36px, 4vw, 56px); }

/* ---------- Image frames ---------------------------------------------------- */
/* Photographs and video thumbnails are simply in place as they load: no wipe,
   zoom or fade, here or in the photographs across the top of the pages. */
.media-frame { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--radius); }
.parallax-inner { position: absolute; inset: -8% 0; will-change: transform; }
.parallax-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* Hairline that draws across */
.rule { height: 1px; background: var(--line-2); transform-origin: left center; }
.js .rule[data-reveal] { opacity: 1; transform: scaleX(0); transition: transform 1.6s var(--ease-io); }
.js .rule[data-reveal].is-in { transform: none; }

/* ---------- Event rows (home: upcoming performances) ---------------------- */
.featured-events { border-bottom: 1px solid var(--line); }
.event-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(84px, 9vw, 140px) clamp(120px, 13vw, 190px) minmax(0, 1fr) minmax(0, 0.7fr) auto;
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(26px, 2.6vw, 38px) 0;
  border-top: 1px solid var(--line);
  isolation: isolate;
}
.event-row::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  z-index: -1;
  background: linear-gradient(to right, color-mix(in srgb, var(--ink) 4.5%, transparent), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t2) var(--ease);
}
.event-row:hover::before { transform: none; }
.event-row__date { display: contents; }
.event-row__day {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 6.2vw, 102px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-3);
  transition: color var(--t2) var(--ease);
  font-optical-sizing: auto;
}
.event-row:hover .event-row__day { color: var(--accent); }
.event-row__my {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  line-height: 1.5;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.event-row__wd { color: var(--tx-meta); letter-spacing: 0.18em; }
.event-row__main { min-width: 0; transition: transform var(--t2) var(--ease); }
.event-row:hover .event-row__main { transform: translateX(10px); }
.event-row__type {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  margin-bottom: 8px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.event-row__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 37px);
  line-height: 1.15;
  color: var(--tx-bronze);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.event-row__venue { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-row__hall { font-size: 14px; color: var(--tx-subtitle); }
.event-row__city {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.2;
  color: var(--tx-subtitle);
  letter-spacing: 0.01em;
}
.event-row__country {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.event-row__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.event-row:hover .event-row__action { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Tabs (media) -------------------------------------------------- */
.media-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  margin-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.media-tabs button {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 52px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  transition: color var(--t1) var(--ease);
}
.media-tabs button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t2) var(--ease);
}
.media-tabs button:hover { color: var(--ink); }
.media-tabs button[aria-selected="true"] { color: var(--ink); }
.media-tabs button[aria-selected="true"]::after { transform: none; }


/* ---------- Video cards --------------------------------------------------- */
.video-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  color: var(--ink);
}
.video-card__frame,
.video-card__meta,
.video-card__title,
.video-card__sub { display: block; font-family: var(--sans); font-weight: 500; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
  border-radius: var(--radius);
}
.video-card__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.86);
  transition: transform 1.6s var(--ease), filter var(--t2) var(--ease);
}
.video-card__frame--boxed .video-card__poster { left: -5.56%; width: 111.12%; max-width: none; }
.video-card__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}
.video-card:hover .video-card__poster,
.js .video-card.is-in:hover .video-card__poster { transform: scale(1.045); filter: saturate(1) brightness(0.95); transition-delay: 0s; transition-duration: 1.6s; }

/* Hover (pointer devices): a corner of the picture folds away along a
   diagonal and shows a blurred copy of it underneath — a quiet sign that the
   picture opens. The fold sits top right on films (their titles sit low). */
.video-card { --fold: clamp(56px, 6.5vw, 108px); }
.video-card__blur,
.photo-card .photo-card__blur {
  position: absolute;
  inset: -10%;
  width: 120%;
  max-width: none;
  height: 120%;
  object-fit: cover;
  filter: blur(16px) brightness(1.08) saturate(0.85);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.video-card__poster {
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
  transition: transform 1.6s var(--ease), filter var(--t2) var(--ease), clip-path 0.55s var(--ease);
}
.js .video-card.is-in:hover .video-card__poster,
.video-card:hover .video-card__poster { transition: transform 1.6s var(--ease), filter var(--t2) var(--ease), clip-path 0.55s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .video-card:hover .video-card__poster,
  .video-card:focus-visible .video-card__poster {
    clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
  }
  .video-card:hover .video-card__blur,
  .video-card:focus-visible .video-card__blur { opacity: 1; }
}
.video-card__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}
/* only a white play triangle on the film, no circle; a soft shadow keeps it
   legible over lighter frames */
.video-card__play-icon {
  display: grid;
  place-items: center;
  color: #ffffff;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.35));
  transition: transform var(--t2) var(--ease);
}
.video-card__play-icon svg { width: clamp(40px, 3.6vw, 56px); height: auto; }
.video-card:hover .video-card__play-icon { transform: scale(1.12); }
.video-card__meta { padding-top: 18px; }
.video-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 29px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  color: var(--tx-bronze);
}
.video-card__sub {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-meta);
  font-family: var(--sans);
}
.video-card__sub:empty { display: none; }
.video-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--ink-3);
}
.video-card__pending-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Home: one large film, its title on a panel over the lower right corner */
.home-video .video-card__title { font-size: clamp(24px, 3vw, 46px); line-height: 1.1; max-width: 30ch; }
.home-video .video-card__frame { aspect-ratio: 16 / 8; }
@media (min-width: 901px) {
  .home-video .video-card {
    --H: clamp(40px, 5vw, 80px);                 /* how far the panel hangs below the film */
    --vx-o: clamp(8px, 0.9vw, 14px);
    --vx-w: clamp(5px, 0.55vw, 8px);
    --vx-line: color-mix(in srgb, var(--tx-accent) 16%, transparent);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    align-items: end;
  }
  .home-video .video-card__frame { grid-column: 1 / 11; grid-row: 1; }
  .home-video .video-card__meta {
    position: relative;
    grid-column: 8 / 13;
    grid-row: 1;
    z-index: 1;
    margin-bottom: calc(-1 * var(--H));
    padding: clamp(24px, 2.6vw, 40px) 0 0 clamp(24px, 2.6vw, 40px);
    background: var(--bg);
  }
  /* where the panel is cut into the film, a fine gold line follows the cut
     (as on the Media page) */
  .home-video .video-card__meta::before,
  .home-video .video-card__meta::after {
    content: '';
    position: absolute;
    left: var(--vx-o);
    top: var(--vx-o);
    background: var(--vx-line);
    pointer-events: none;
    transition: background-color 0.6s var(--ease);
  }
  .home-video .video-card__meta::before { width: 56%; height: var(--vx-w); }
  .home-video .video-card__meta::after { width: var(--vx-w); height: calc(100% - var(--H) - var(--vx-o)); }
}
/* With a mouse, as on the Media page: at rest the title panel sits just below
   the film, leaving the picture whole; pointing at the film or its title slides
   the panel up into the film's corner and the gold line draws in along the cut.
   Only the film and the title respond, not the space around them. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .home-video { padding-bottom: clamp(70px, 6.5vw, 90px); }   /* room for the panel resting below the film */
  .home-video .video-card { pointer-events: none; }
  .home-video .video-card__frame,
  .home-video .video-card__meta { pointer-events: auto; }
  .home-video .video-card__meta {
    transform: translateY(calc(100% - var(--H)));
    transition: transform 0.8s var(--ease);
  }
  .home-video .video-card__meta::before,
  .home-video .video-card__meta::after { opacity: 0; transition: opacity 0.5s var(--ease), background-color 0.6s var(--ease); }
  .home-video .video-card:hover,
  .home-video .video-card:focus-visible { --vx-line: color-mix(in srgb, var(--tx-accent) 30%, transparent); }
  .home-video .video-card:hover .video-card__meta,
  .home-video .video-card:focus-visible .video-card__meta { transform: none; }
  .home-video .video-card:hover .video-card__meta::before, .home-video .video-card:hover .video-card__meta::after,
  .home-video .video-card:focus-visible .video-card__meta::before, .home-video .video-card:focus-visible .video-card__meta::after { opacity: 1; transition-delay: 0.25s; }
}

/* ---------- Photo cards --------------------------------------------------- */
.photo-card {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-3);
  border-radius: var(--radius);
}
.photo-card picture { position: absolute; inset: 0; }
.photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease), filter var(--t2) var(--ease);
}
.photo-card:hover img,
.js .photo-card.is-in:hover img { transform: scale(1.045); transition-delay: 0s; transition-duration: 1.6s; }
.photo-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 48px 20px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.photo-card:hover .photo-card__overlay,
.photo-card:focus-visible .photo-card__overlay { opacity: 1; transform: none; }
.photo-card__category { color: var(--tx-accent); }
.photo-card__credit { color: var(--tx-meta); letter-spacing: 0.12em; text-transform: none; }
.photo-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.photo-card__overlay { z-index: 1; padding-right: calc(var(--fold) + 8px); }

/* Hover (pointer devices): the lower right corner folds away along a diagonal,
   showing a blurred copy of the photograph and the sign that it opens larger. */
.photo-card { --fold: clamp(52px, 6vw, 96px); }
.photo-card picture img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}
.photo-card picture img,
.js .photo-card.is-in:hover picture img,
.photo-card:hover picture img { transition: transform 1.6s var(--ease), filter var(--t2) var(--ease), clip-path 0.55s var(--ease); }
.photo-card__zoom {
  /* the folded corner: frosted, with the sign that the photograph opens */
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  place-items: end;
  width: var(--fold);
  height: var(--fold);
  padding: calc(var(--fold) * 0.13);
  color: #000;
  background: rgba(252, 252, 252, 0.55);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.photo-card__zoom svg { transform: translate3d(4px, 4px, 0); transition: transform 0.55s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .photo-card:hover picture img,
  .photo-card:focus-visible picture img {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%);
  }
  .photo-card:hover .photo-card__blur,
  .photo-card:focus-visible .photo-card__blur { opacity: 1; }
  .photo-card:hover .photo-card__zoom,
  .photo-card:focus-visible .photo-card__zoom { opacity: 1; }
  .photo-card:hover .photo-card__zoom svg,
  .photo-card:focus-visible .photo-card__zoom svg { transform: none; }
  /* the fold replaces the zoom on these photographs, so its edge stays exact */
  .photo-card:hover picture img,
  .js .photo-card.is-in:hover picture img { transform: none; }
}

/* Home gallery: tall portrait + three landscapes */
.home-gallery {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(10px, 1.2vw, 18px);
}
.home-gallery .photo-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.home-gallery .photo-card:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; aspect-ratio: 16 / 9; }
.home-gallery .photo-card:nth-child(3),
.home-gallery .photo-card:nth-child(4) { aspect-ratio: 16 / 9; }

/* ---------- Contact preview band ------------------------------------------ */
.contact-band { position: relative; overflow: hidden; background: var(--bg-2); isolation: isolate; }
.contact-band__media {
  overflow: hidden;
  position: absolute;
  inset: 0 0 0 auto;
  width: min(54%, 860px);
  z-index: -1;
  --fade: var(--bg-2);
}
.contact-band .contact-band__media::after {
  background:
    linear-gradient(to right, var(--fade) 0%, var(--fade) 2%, transparent 55%),
    linear-gradient(to top, var(--fade) 0%, transparent 22%);   /* no fade at the top */
}
.contact-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  opacity: 1;
}
.contact-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  align-items: end;
  gap: 48px clamp(40px, 6vw, 120px);
}
.contact-preview__title { margin-top: clamp(22px, 2.4vw, 32px); max-width: 20ch; font-size: clamp(34px, 4vw, 60px); line-height: 1.1; }
.contact-preview .text-body { margin-top: 28px; max-width: 44ch; }
.contact-preview__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
/* Over a photograph the actions sit under the text, leaving the picture clear. */
.contact-band .contact-preview { grid-template-columns: minmax(0, 760px); }
.contact-band .contact-preview__aside { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 32px; }

/* ---------- Socials ------------------------------------------------------- */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease), background-color var(--t1) var(--ease), transform var(--t2) var(--ease);
}
.socials a:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }

/* ---------- Footer --------------------------------------------------------
   Laid out after the shadcn "footer-section" component: four columns (a
   contact block, links, booking, follow + light/dark switch), outline icon
   buttons with tooltips, and a base row with copyright and languages. */
.site-footer {
  position: relative;
  padding: clamp(64px, 7vw, 112px) var(--gutter) 28px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
}
.footer-brand { position: relative; }
.footer-brand__title {
  margin-bottom: 16px;
  font-size: 33px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tx-title);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.footer-brand__note { max-width: 34ch; margin-bottom: 24px; font-size: 15px; line-height: 1.6; color: var(--tx-body); }
.footer-brand__glow {
  position: absolute;
  top: 0;
  right: -16px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  filter: blur(40px);
  pointer-events: none;
}
:root[data-theme="dark"] { --menu-bg: #161616; }
:root[data-theme="dark"] .footer-brand__glow { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.footer-col__title {
  margin-bottom: 14px;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--tx-accent);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 14px;
  color: var(--ink-2);
  transition: color var(--t1) var(--ease);
}
.footer-col a:hover { color: var(--ink); }
.footer-contact__general { margin-bottom: 14px; }
.footer-contact { display: grid; gap: 14px; font-style: normal; }
.footer-contact > div { display: flex; flex-direction: column; gap: 2px; }
.footer-contact__label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.footer-contact a { min-height: 28px; overflow-wrap: anywhere; }

.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.footer-social a {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--ink);
  transition: background-color var(--t1) var(--ease), transform var(--t2) var(--ease);
}
.footer-social a:hover { background: var(--bg-3); }
.footer-social a:active { transform: scale(0.95); }
.footer-social svg { width: 16px; height: 16px; }
/* tooltip with the network's name */
.footer-social a::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px) scale(0.95);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.footer-social a:hover::after,
.footer-social a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* light / dark switch: sun · track · moon, one button */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink-2);
}
.theme-switch svg { width: 16px; height: 16px; }
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--bg-3);
  transition: background-color var(--t1) var(--ease);
}
.switch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform var(--t2) var(--ease);
}
.theme-switch[aria-checked="true"] .switch { background: var(--accent); }
.theme-switch[aria-checked="true"] .switch::before { transform: translateX(20px); }

.footer-wordmark {
  max-width: var(--max);
  margin: clamp(56px, 7vw, 104px) auto 0;
}
/* the stacked name across the full width: SANGUINO is 4.57× its font size wide */
.footer-wordmark { container-type: inline-size; }
.footer-wordmark .wordmark { font-size: 18.2cqi; }
.footer-base {
  max-width: var(--max);
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--tx-meta);
}
.footer-lang { display: flex; gap: 20px; }
.footer-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-2);
  transition: color var(--t1) var(--ease);
}
.footer-lang a:hover,
.footer-lang a[aria-current="true"] { color: var(--ink); }
.footer-lang a[aria-current="true"] { font-weight: 500; }

/* ---------- Page hero (inner pages) ---------------------------------------
   A photograph across the full width of the top of the page, edge to edge.
   Each page sets its own height and crop (focal point on the <img>) to suit
   its picture; the title sits low on the left, in the picture's shadow. */
.page-hero {
  --ph: max(560px, 100svh);   /* the whole screen; taller only where the text needs it */
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(560px, 100vh);
  min-height: var(--ph);
  padding: calc(var(--nav-h) + 48px) 0 clamp(96px, 7vw, 112px);   /* the foot keeps room for the scroll sign */
  overflow: hidden;
  isolation: isolate;
  background: #0b0b0b;
}
/* biography: the face sits right of centre, so the quote keeps a shorter measure on the left */
@media (min-width: 901px) {
  .page-hero--bio .page-hero__quote blockquote { max-width: 10.5em; font-size: clamp(30px, 3.3vw, 52px); }
  /* on very wide screens the quote keeps to the page margin (in line with the logo), clear of the face */
  .page-hero--bio .page-hero__inner { max-width: none; }
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.page-hero__media img { opacity: 1; }
/* wide screens: the contact photograph has its face left of centre and its
   shadow on the right, so there the title takes the right-hand side */
@media (min-width: 901px) {
  .page-hero--contact .page-hero__inner { padding-left: max(var(--gutter), 63%); }
  .page-hero--contact .page-hero__media::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 24%),
      linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.5) 28%, rgba(0, 0, 0, 0) 58%),
      linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
  }
}
/* shade under the header, behind the title and along the side the text runs */
.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.5) 28%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 55%);
}

/* A portrait photograph stands whole beside a blurred, darkened copy of itself
   that carries the width, so the face and the score both stay in the frame. */
.page-hero__field {
  position: absolute;
  inset: -8%;
  width: 116%;
  max-width: none;
  height: 116%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: blur(40px) brightness(0.5) saturate(0.85);
}
.page-hero--portrait { --pw: calc((var(--ph) - var(--nav-h)) * 1331 / 2000); }
.page-hero__portrait {
  position: absolute;
  top: var(--nav-h);
  right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  width: var(--pw);
  height: calc(var(--ph) - var(--nav-h));
}
.page-hero__portrait picture,
.page-hero__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-hero__media--portrait::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 20%); }
.page-hero--portrait .page-hero__inner > * {
  max-width: calc(100vw - var(--pw) - 2 * max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) - 56px);
}

.page-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-hero__inner > * { max-width: min(100%, 900px); }
.page-hero__inner .display-xl,
.page-hero__inner .display-l { margin-top: clamp(22px, 2.6vw, 36px); }
.page-hero .display-xl { font-size: clamp(44px, 6vw, 100px); color: var(--ink); }   /* page titles keep white and grey */
/* The scroll sign at the foot of a page banner: a single fine chevron, gently
   rising and falling; a link to the content below */
.page-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2.6vh, 28px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 64px;
  margin-left: -22px;
  color: var(--ink);
  opacity: 0.78;
  transition: opacity var(--t2) var(--ease);
}
.page-hero__scroll:hover { opacity: 1; }
.page-hero__scroll:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 2px; }
.page-hero__arrow {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-drift 2.4s var(--ease-io) infinite;
}
@keyframes scroll-drift {
  0%, 100% { transform: translateY(-5px) rotate(45deg); opacity: 0.55; }
  50%      { transform: translateY(4px) rotate(45deg); opacity: 1; }
}
.page-hero__sub {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 40ch;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--tx-subtitle);
}
.page-hero__quote blockquote {
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 4.2vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: clamp(22px, 2.6vw, 36px);
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  color: var(--tx-quote);
}
.page-hero__quote figcaption {
  margin-top: clamp(24px, 3vw, 40px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-style: normal;
}
.page-hero__credit {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: 24px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--tx-meta);
}
/* on the portrait, the credit runs up its left edge */
.page-hero__portrait .page-hero__credit {
  right: calc(100% + 12px);
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* the image in the contact band fades into its band */
.contact-band__media::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
}
@media (min-width: 901px) {
  .contact-band__media .parallax-inner { left: 1.2%; }
}

/* ---------- Biography page ------------------------------------------------ */
.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 128px);
  align-items: start;
}
.bio-aside { position: sticky; top: calc(var(--nav-h) + 32px); }
.bio-aside__portrait { aspect-ratio: 4 / 5; }
.bio-aside__portrait img { object-position: 38% center; }
.bio-aside__caption {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--tx-meta);
}
.bio-body .lede { margin-bottom: clamp(40px, 4vw, 64px); max-width: 24ch; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.22; }
.bio-body .text-body { max-width: 60ch; }
.bio-pullquote {
  position: relative;
  margin: clamp(56px, 6vw, 96px) 0;
  padding: clamp(28px, 3vw, 44px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(31px, 3.3vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tx-bronze);
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.bio-body__heading {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: clamp(72px, 8vw, 128px) 0 clamp(28px, 3vw, 40px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  color: var(--tx-title);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fact {
  padding: 26px 24px 28px 0;
  transition: background-color var(--t2) var(--ease);
}
.fact:nth-child(odd) { border-right: 1px solid var(--line); }
.fact:nth-child(even) { padding-left: 24px; }
.fact__label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-accent);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.fact__value {
  margin-top: 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.2;
  color: var(--tx-subtitle);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.masterclass-list {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.masterclass-list li {
  padding: 18px 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2.1vw, 31px);
  line-height: 1.2;
  color: var(--tx-subtitle);
  transition: color var(--t1) var(--ease), padding var(--t2) var(--ease);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.masterclass-list li:nth-child(odd) { padding-right: 20px; }
.masterclass-list li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.masterclass-list li:hover { color: var(--ink-3); }
.bio-ctas {
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Performances page --------------------------------------------- */
.view-toggle,
.events-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.view-toggle button,
.events-filter button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  transition: color var(--t1) var(--ease), background-color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.view-toggle button:hover,
.events-filter button:hover { color: var(--ink); border-color: var(--ink-3); }
.view-toggle button[aria-pressed="true"],
.events-filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.events-filter { margin-bottom: clamp(32px, 4vw, 56px); }

.events-list { border-bottom: 1px solid var(--line); }
.event-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(150px, 17vw, 260px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
  padding: clamp(30px, 3vw, 44px) 0;
  border-top: 1px solid var(--line);
  isolation: isolate;
  scroll-margin-top: calc(var(--nav-h) + 40px);
}
.event-item::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  z-index: -1;
  background: linear-gradient(to right, color-mix(in srgb, var(--ink) 4%, transparent), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t2) var(--ease);
}
.event-item:hover::before { transform: none; }
.event-item.is-target::before { transform: none; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.event-item__date {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(42px, 4.2vw, 66px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums tabular-nums;
}
.event-item__date small {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.event-item__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.15;
  color: var(--tx-bronze);
  transition: transform var(--t2) var(--ease);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.event-item:hover .event-item__body h3 { transform: translateX(8px); }
.event-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--tx-body);
}
.event-item__meta span + span::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 22px;
  border-radius: 50%;
  background: var(--line-2);
  vertical-align: middle;
  transform: translateY(-1px);
}
.event-item__meta strong { font-weight: 500; color: var(--tx-subtitle); }
.event-item__program { margin-top: 14px; color: var(--tx-body); font-size: 15px; }
.event-item__program li + li { margin-top: 4px; }
.event-item__action {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
a.event-item__action:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.event-item__action--past { border-color: var(--line); color: var(--ink-3); }
.events-list--past .event-item__date { color: var(--ink-3); }
.events-list--past .event-item__body h3 { color: var(--tx-bronze); }

/* Calendar */
.calendar__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.calendar__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 3.8vw, 58px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  color: var(--tx-title);
}
.calendar__title span { font-style: normal; color: var(--ink-3); }
.calendar__nav { display: flex; gap: 8px; }
.calendar__nav button {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink-2);
  transition: color var(--t1) var(--ease), background-color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.calendar__nav button:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.calendar__dayhead {
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.calendar__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: clamp(76px, 9vw, 124px);
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  transition: background-color var(--t1) var(--ease);
}
.calendar__cell--empty { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.calendar__cell--today .calendar__cell-num { color: var(--bg); background: var(--ink); }
.calendar__cell-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.calendar__cell--has-event { color: var(--ink); background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.calendar__cell--has-event:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.calendar__event {
  display: block;
  padding: 3px 7px;
  border-left: 1px solid var(--accent);
  font-size: 11px;
  line-height: 1.35;
  color: var(--tx-bronze);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tx-meta);
}
.calendar__legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-left: 1px solid var(--accent);
  background: color-mix(in srgb, var(--ink) 12.5%, transparent);
  vertical-align: -1px;
}

/* Booking band */
.booking-band .contact-preview__title { max-width: 22ch; }

/* ---------- Media page ---------------------------------------------------- */
/* Listen & watch: four compositions in turn rather than a grid of equal
   cards — (a) a wide film with its title on a panel over its corner, (b) a
   film on the right with the title beside it, (c) a smaller film set in
   from the left, (d) a panoramic film with its panel on the left. */
.videos-grid { display: grid; gap: clamp(64px, 8vw, 140px); }
@media (min-width: 901px) {
  .videos-grid > .video-card {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
  }
  .videos-grid .video-card__frame,
  .videos-grid .video-card__meta { grid-row: 1; }
  .videos-grid .video-card__meta { z-index: 1; padding-top: 0; }
  .videos-grid .video-card__title { font-size: clamp(22px, 2vw, 32px); line-height: 1.15; }

  .video-card--a { align-items: end; }
  .video-card--a .video-card__frame { grid-column: 1 / 10; }
  .video-card--a .video-card__meta {
    grid-column: 8 / 13;
    margin-bottom: calc(-1 * clamp(36px, 4.5vw, 72px));
    padding: clamp(24px, 2.6vw, 40px) 0 0 clamp(24px, 2.6vw, 40px);
    background: var(--bg);
  }
  .video-card--a .video-card__title { font-size: clamp(26px, 2.8vw, 44px); line-height: 1.08; }

  .video-card--b { align-items: center; }
  .video-card--b .video-card__frame { grid-column: 6 / 13; aspect-ratio: 4 / 3; }
  .video-card--b .video-card__meta { grid-column: 2 / 6; padding-right: clamp(8px, 1.5vw, 24px); }

  .video-card--c { align-items: start; }
  .video-card--c .video-card__frame { grid-column: 2 / 8; aspect-ratio: 3 / 2; }
  .video-card--c .video-card__meta { grid-column: 9 / 13; margin-top: clamp(40px, 7vw, 120px); }

  .video-card--d { align-items: end; }
  .video-card--d .video-card__frame { grid-column: 4 / 13; aspect-ratio: 21 / 10; }
  .video-card--d .video-card__meta {
    grid-column: 1 / 6;
    margin-bottom: calc(-1 * clamp(36px, 4.5vw, 72px));
    padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 40px) 0 0;
    background: var(--bg);
  }
}

/* Media page photographs: masonry columns, as in the shared-element gallery
   component. Every photograph keeps its own shape (nothing is cropped):
   1 column on phones, 2 from 640px, 3 from 768px, 4 from 1024px. */
.photos-masonry { columns: 1; column-gap: 16px; }
@media (min-width: 640px)  { .photos-masonry { columns: 2; } }
@media (min-width: 768px)  { .photos-masonry { columns: 3; } }
@media (min-width: 1024px) { .photos-masonry { columns: 4; } }
.photos-masonry .photo-card {
  display: block;
  margin: 0 0 16px;
  break-inside: avoid;
  transition: transform 0.45s var(--spring, var(--ease));
}
/* the component's hover: the photograph gives a little under a soft veil, a press gives a little more */
.photos-masonry .photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .photos-masonry .photo-card:hover,
  .js .photos-masonry .photo-card.is-in:hover { transform: scale(0.98); }
  .photos-masonry .photo-card:hover::after { opacity: 1; }
  .photos-masonry .photo-card:hover picture img,
  .photos-masonry .photo-card:focus-visible picture img { clip-path: none; }
}
.photos-masonry .photo-card:active,
.js .photos-masonry .photo-card.is-in:active { transform: scale(0.95); }
.photos-masonry .photo-card:active::after { opacity: 1; }
/* here the veil replaces the folded corner used on the other photographs */
.photos-masonry .photo-card__blur,
.photos-masonry .photo-card__zoom { display: none; }
.photos-masonry .photo-card__overlay { padding-right: 20px; }

/* Reviews & features: an editorial sequence. Headlines step across the page
   at different sizes and widths, each under its own short rule; a feature
   with a clipping shows the page large beside its headline. */
.press-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(64px, 8vw, 128px);
}
.press-item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: inherit;
  align-items: center;
}
.press-item__text {
  grid-row: 1;
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--line-2);
}
.press-item--a .press-item__text { grid-column: 1 / 9; }
.press-item--b .press-item__text { grid-column: 6 / 13; }
.press-item--c .press-item__text { grid-column: 3 / 10; }
.press-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.press-item__publication { color: var(--tx-accent); }
.press-item__date { color: var(--tx-meta); letter-spacing: 0.08em; }
.press-item__title {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 3.1vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--tx-title);
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
blockquote.press-item__title { color: var(--tx-quote); }   /* a quoted review */
.press-item--a .press-item__title,
.press-item--feature .press-item__title { font-size: clamp(30px, 3.6vw, 56px); line-height: 1.05; }
.press-item--c .press-item__title { font-size: clamp(24px, 2.4vw, 36px); }
.press-item__sub { margin-top: 12px; font-size: 15px; color: var(--tx-body); }
.press-item__author { margin-top: 12px; font-size: 14px; color: var(--tx-meta); }
.press-item .press-row__link { margin-top: clamp(22px, 2.4vw, 32px); }

/* the feature: the clipping (opens in the photo viewer) and its headline */
.press-item--feature .press-item__clip { grid-column: 1 / 6; grid-row: 1; aspect-ratio: 4 / 5; }
.press-item--feature .press-item__text { grid-column: 7 / 13; }
.press-item--flip .press-item__clip { grid-column: 8 / 13; }
.press-item--flip .press-item__text { grid-column: 1 / 7; }
.press-item__clip { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, 0.5); }
/* a page on another website: the thumbnail is a link to the article */
.press-item__clip--page { display: block; cursor: pointer; }

.press-row__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.press-row__link:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.press-kit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(56px, 6vw, 96px);
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: var(--radius);
}
.press-kit__title {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  color: var(--tx-title);
}

/* ---------- Contact page -------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.contact-info__item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.contact-info__label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-accent);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.contact-info__value {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 33px);
  line-height: 1.2;
  overflow-wrap: anywhere;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  color: var(--tx-subtitle);
}
.contact-info__value a { color: var(--ink); }   /* links keep their colour */
.contact-info__value a { position: relative; }
.contact-info__value a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform var(--t2) var(--ease);
}
.contact-info__value a:hover::after { transform: none; }

.form-title { margin: 14px 0 clamp(36px, 4vw, 56px); }
.contact-form { display: flex; flex-direction: column; gap: 30px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-meta);
  transition: color var(--t1) var(--ease);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.field:focus-within label { color: var(--ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--t1) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.field select {
  cursor: pointer;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.field select option { background: var(--bg-2); color: var(--ink); }
:root[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E");
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
.field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t2) var(--ease);
  pointer-events: none;
}
.field:focus-within::after { transform: none; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
}
.form-status { font-size: 14px; color: var(--ink-2); }
.form-status.error { color: var(--danger); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Empty states -------------------------------------------------- */
.empty-state {
  padding: clamp(48px, 6vw, 88px) 24px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.empty-state__icon { font-size: 28px; color: var(--ink-3); }
.empty-state h3 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; font-optical-sizing: auto; font-variant-numeric: lining-nums; color: var(--tx-title); }
.empty-state p { margin: 10px auto 0; max-width: 46ch; color: var(--tx-body); }

/* ---------- Video modal ---------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 80px);
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease), visibility 0s;
}
.modal__inner {
  position: relative;
  width: min(1200px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  transform: scale(0.96) translateY(16px);
  transition: transform 0.4s var(--ease);
}
.modal[aria-hidden="false"] .modal__inner { transform: none; transition-duration: 0.9s; }
.modal__inner iframe { width: 100%; height: 100%; border: 0; }
.modal__close,
.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.6);
  transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease), transform var(--t2) var(--ease);
}
.modal__close { top: -64px; right: 0; }
.modal__close:hover,
.lightbox.is-open .lightbox__close:hover { background: var(--ink); color: var(--bg); transform: rotate(90deg); }

/* ---------- Photo viewer: shared-element gallery ---------------------------
   The photo flies from its place on the page to full size and back (see
   site.js). Only the backdrop fades, so the picture itself stays solid while
   it travels. Drag it up or down to close it. */
.lightbox {
  --lb-pad: clamp(16px, 5vw, 80px);
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--lb-pad);
  visibility: hidden;
}
.lightbox[aria-hidden="false"],
.lightbox.is-closing { visibility: visible; }
.lightbox.is-closing { pointer-events: none; }
.lightbox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.lightbox.is-open::before { opacity: var(--lb-dim, 1); }
.lightbox.is-dragging::before,
.lightbox.is-dragging .lightbox__caption { transition: none; }
.lightbox__close {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
              background-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.lightbox.is-open .lightbox__close {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s var(--ease) 0.1s, transform 0.2s var(--ease) 0.1s,
              background-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.lightbox.is-open .lightbox__close:hover { transition-delay: 0s; transition-duration: var(--t1), var(--t2), var(--t1), var(--t1); }
.lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__inner img {
  /* the photo's own shape, as large as the screen allows above the caption */
  width: min(1400px, calc(100vw - 2 * var(--lb-pad)), calc((100vh - 170px) * var(--ar, 1.5)));
  width: min(1400px, calc(100vw - 2 * var(--lb-pad)), calc((100svh - 170px) * var(--ar, 1.5)));
  height: auto;
  aspect-ratio: var(--ar, 1.5);
  object-fit: cover;
  border-radius: var(--radius);
  transform-origin: 0 0;
  cursor: zoom-out;
  touch-action: pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-body);
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.lightbox.is-open .lightbox__caption { opacity: var(--lb-dim, 1); transition: opacity 0.5s var(--ease) 0.25s; }
.lightbox__category { color: var(--tx-accent); }
.lightbox__credit { color: var(--tx-meta); letter-spacing: 0.12em; text-transform: none; }

/* Reading a newspaper clipping: the whole page first; a click shows it at
   reading width (--rw, never beyond the file's own size) and the page scrolls
   inside the viewer, under its fixed backdrop and close button */
.lightbox.can-read .lightbox__inner img { cursor: zoom-in; }
.lightbox.is-reading .lightbox__inner {
  align-self: stretch;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.lightbox.is-reading .lightbox__inner img {
  flex: none;
  width: min(var(--rw, 1100px), calc(100vw - 2 * var(--lb-pad)));
  cursor: zoom-out;
  touch-action: pan-y pinch-zoom;
}

/* the photo's place on the page stays empty while it is open */
.photo-card.is-lifted > * { visibility: hidden; }
/* a small press as a photo is tapped */
.photo-card { transition: transform 0.45s var(--ease); }
.photo-card:active,
.js .photo-card.is-in:active { transform: scale(0.98); transition-duration: 0.15s; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1100px) {
  .event-row { grid-template-columns: clamp(76px, 10vw, 110px) minmax(0, 1fr) minmax(0, 0.8fr) auto; }
  .event-row__my { grid-column: 2; grid-row: 1; }
  .event-row__date { display: contents; }
  .event-row__day { grid-row: 1 / span 2; }
  .event-row__main { grid-column: 2; grid-row: 2; }
  .event-row__venue { grid-column: 3; grid-row: 1 / span 2; }
  .event-row__action { grid-column: 4; grid-row: 1 / span 2; }
  .event-row { row-gap: 10px; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }

  .nav-toggle { display: block; }
  .lang-switch { order: 2; margin-right: 0; }
  .nav-toggle { order: 3; }
  nav[aria-label="Primary"] { order: 1; }
  .nav-list {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: var(--nav-h) var(--gutter) 48px;
    background: var(--bg);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.7s var(--ease-io), visibility 0s linear 0.7s;
  }
  .nav-list[data-open="true"] {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 0.9s var(--ease-io), visibility 0s;
  }
  .nav-list li { overflow: hidden; }
  .nav-list a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-height: 0;
    padding: 4px 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(40px, 11vw, 64px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ink);
    transform: translate3d(0, 110%, 0);
    transition: transform 0.5s var(--ease-io), color var(--t1) var(--ease);
    font-optical-sizing: auto;
    font-variant-numeric: lining-nums;
  }
  .nav-list a::after { display: none; }
  .nav-list a[aria-current="page"] { font-style: normal; color: var(--ink-3); }
  .nav-list[data-open="true"] a { transform: none; transition: transform 1.1s var(--ease), color var(--t1) var(--ease); }
  .nav-list[data-open="true"] li:nth-child(1) a { transition-delay: 0.28s; }
  .nav-list[data-open="true"] li:nth-child(2) a { transition-delay: 0.34s; }
  .nav-list[data-open="true"] li:nth-child(3) a { transition-delay: 0.40s; }
  .nav-list[data-open="true"] li:nth-child(4) a { transition-delay: 0.46s; }
  .nav-list[data-open="true"] li:nth-child(5) a { transition-delay: 0.52s; }

  .hero__content { grid-template-columns: 1fr; }
  .hero__name { font-size: clamp(44px, 15.6vw, 120px); font-size: clamp(34px, min(15.6vw, 19svh, 15.6cqi), 120px); }
  .hero__ctas { flex-direction: row; flex-wrap: wrap; padding-bottom: 0; }
  .hero__ctas .btn { flex: 1 1 220px; }
  .hero__meta { top: auto; bottom: auto; top: calc(var(--nav-h) + 40px); transform: none; right: calc(var(--gutter) - 8px); }
  .js .hero.is-ready .hero__meta { transform: none; }
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.2) 56%, rgba(0, 0, 0, 0) 72%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 20%);
  }

  .bio-teaser { display: flex; flex-direction: column; }
  .bio-teaser__head { margin-bottom: 40px; }
  .bio-teaser__head .display-l { margin-left: 0; }
  .bio-teaser__aside { width: 100%; margin-bottom: 48px; }
  .bio-teaser__portrait { aspect-ratio: 4 / 5; }

  .event-row {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
    align-items: start;
    padding: 26px 0;
  }
  .event-row__day { grid-column: 1; grid-row: 1 / span 4; font-size: 52px; }
  .event-row__my { grid-column: 2; grid-row: 1; flex-direction: row; flex-wrap: wrap; gap: 0 12px; font-size: 10px; }
  .event-row__main { grid-column: 2; grid-row: 2; }
  .event-row__venue { grid-column: 2; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .event-row__action { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 10px; min-width: 0; }
  .event-row:hover .event-row__main { transform: none; }

  .home-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-gallery .photo-card:nth-child(1) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; }
  .home-gallery .photo-card:nth-child(2) { grid-column: 1 / -1; grid-row: auto; }
  .home-video .video-card__frame { aspect-ratio: 4 / 3; }

  /* the photograph sits on top of the band as a picture of its own */
  .contact-band { padding-top: 0; }
  .contact-band__media {
    position: relative;
    inset: auto;
    width: auto;
    height: clamp(300px, 72vw, 520px);
    margin-bottom: clamp(40px, 8vw, 64px);
  }
  .contact-band .contact-band__media::after { background: linear-gradient(to top, var(--fade) 0%, transparent 30%); }
  .contact-preview,
  .booking-band .contact-preview { grid-template-columns: 1fr; align-items: start; }

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

  /* the photograph runs edge to edge under the header, then fades into the
     dark band that carries the title, so no face is covered by text; the
     photograph grows until the two together fill the screen */
  .page-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 0 clamp(92px, 24vw, 112px);
  }
  .page-hero__media {
    position: relative;
    inset: auto;
    flex: 1 0 auto;
    height: clamp(340px, 64svh, 620px);
  }
  .page-hero__media::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 26%),
      linear-gradient(to top, #0b0b0b 0%, rgba(11, 11, 11, 0.6) 16%, rgba(11, 11, 11, 0) 40%);
  }
  .page-hero__inner { margin-top: -48px; }
  .page-hero__inner > *,
  .page-hero--portrait .page-hero__inner > * { max-width: 100%; }
  /* the contact photograph is lying down: a squarer frame keeps the face clear of the fade */
  .page-hero--contact .page-hero__media { height: min(100vw, 64svh); }
  .page-hero--contact .page-hero__media::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 26%),
      linear-gradient(to top, #0b0b0b 0%, rgba(11, 11, 11, 0) 16%);
  }
  .page-hero--contact .page-hero__inner { margin-top: -12px; }
  /* the portrait on its own, whole width; its blurred copy is not needed */
  .page-hero--portrait .page-hero__media { height: auto; }
  .page-hero__field { display: none; }
  .page-hero__portrait { position: relative; top: auto; right: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 82svh; }
  .page-hero__portrait .page-hero__credit { right: var(--gutter); bottom: 14px; writing-mode: horizontal-tb; transform: none; }
  .page-hero__media--portrait::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%),
      linear-gradient(to top, #0b0b0b 0%, rgba(11, 11, 11, 0) 22%);
  }

  .bio-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .bio-aside { position: static; }
  .bio-aside__portrait { aspect-ratio: 4 / 5; }

  .event-item { grid-template-columns: 1fr; gap: 14px; }
  .event-item__date { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; font-size: 40px; }
  .event-item__date small { margin-top: 0; }
  .event-item__action { justify-self: start; margin-top: 6px; }
  .event-item:hover .event-item__body h3 { transform: none; }

  /* Listen & watch on small screens: one column, set in from alternate sides */
  .videos-grid > .video-card:nth-child(odd) { padding-right: 8%; }
  .videos-grid > .video-card:nth-child(even) { padding-left: 8%; }

  /* Reviews & features on small screens: one column, headlines set in from alternate sides */
  .press-list { grid-template-columns: 1fr; row-gap: 56px; }
  .press-item { grid-template-columns: 1fr; row-gap: 28px; }
  .press-item .press-item__text,
  .press-item--feature .press-item__clip { grid-column: 1; grid-row: auto; }
  .press-item--b .press-item__text { padding-left: 10%; }
  .press-item--c .press-item__text { padding-left: 5%; }
  .press-item--feature .press-item__clip { width: min(78%, 420px); }
  .press-item--flip .press-item__clip { justify-self: end; }

  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .facts-grid,
  .masterclass-list { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { border-right: 0; }
  .fact:nth-child(even) { padding-left: 0; }
  .masterclass-list li:nth-child(even) { padding-left: 0; border-left: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .calendar__dayhead { padding: 8px 4px; font-size: 9px; letter-spacing: 0.1em; text-align: center; }
  .calendar__cell { min-height: 58px; padding: 4px; font-size: 11px; }
  .calendar__event { font-size: 0; padding: 0; height: 3px; border-left: 0; background: var(--accent); }
  .hero__ctas .btn { flex-basis: 100%; }
}

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .rule[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js .hero__meta { opacity: 1 !important; }
  .parallax-inner, .hero__bg, .hero__content { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}