/* SONDER · sections
   Section-specific layout. All typography, spacing, and buttons follow the
   Hero (HeroStaggerCrowd) vocabulary:
     • Bebas Neue uppercase for display, names, titles
     • Cormorant Garamond italic for editorial quotes / blurbs / "&"
     • JetBrains Mono uppercase 0.22em for eyebrows, labels, micro
     • One accent (--accent gold), used only for ICONS, status, audio-active
     • Buttons: transparent shell + 1px solid border + gold leading icon
*/

/* ── SITE HEADER ──────────────────────────────────
   Lives outside the hero React component so position:fixed is anchored to
   the viewport and var(--bg) flows through cleanly when the user flips moods. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, padding 240ms ease, border-color 240ms ease;
}
.site-header.scrolled {
  background: var(--bg);
  border-bottom-color: var(--rule);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Brand + mood toggle stacked top-left so the user has a single quiet
   "identity" cluster in the corner. */
.sh-brand-block {
  justify-self: start;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
}
/* Logo lockup variants — toggled via [data-logo] on .sh-brand.
   B = stacked, tagline letter-spaced to match SONDER's pixel width.
   C = SONDER. on the left, FILM / MUSIC two-line block on the right.
   ----------------------------------------------------------------- */
.sh-brand {
  text-decoration: none; color: var(--fg);
  font-family: var(--cond);
  text-transform: uppercase; line-height: 1;
  font-weight: 400; white-space: nowrap;
}

/* ── Variant B: stacked, tagline width-matched ── */
.sh-brand[data-logo="B"] {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
}
.sh-brand[data-logo="B"] .sh-brand-row {
  display: inline-flex;
  align-items: baseline;
}
.sh-brand[data-logo="B"] .sh-brand-name {
  font-size: 22px;
  letter-spacing: -0.04em;
}
.sh-brand[data-logo="B"] .sh-brand-dot {
  color: var(--accent);
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.04em;
  cursor: pointer;
  display: inline-block;
}
/* Tagline sized + tracked to match the SONDER. width above (~98px).
   We size the box to match and let letter-spacing distribute the chars. */
.sh-brand[data-logo="B"] .sh-brand-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0;
  padding-top: 2px;
  border-top: 1px solid var(--rule, rgba(255,255,255,0.12));
}
.sh-brand[data-logo="B"] .sh-brand-sub > span {
  letter-spacing: 0.04em;
}

/* ── Variant C: SONDER. on left, FILM / MUSIC stacked on right ── */
.sh-brand[data-logo="C"] {
  display: inline-flex; flex-direction: row; align-items: stretch;
  gap: 10px;
}
.sh-brand[data-logo="C"] .sh-brand-row {
  display: inline-flex;
  align-items: baseline;
}
.sh-brand[data-logo="C"] .sh-brand-name {
  font-size: 26px;
  letter-spacing: -0.01em;
}
.sh-brand[data-logo="C"] .sh-brand-dot {
  color: var(--accent);
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-block;
  transform: translateY(0.035em);
}
.sh-brand[data-logo="C"] .sh-brand-sub {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--rule, rgba(255,255,255,0.18));
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 500;
  line-height: 1.05;
}
.sh-brand[data-logo="C"] .sh-brand-sub > span {
  display: block;
}

.sh-nav {
  justify-self: center;
  display: flex; gap: 32px;
  color: var(--fg-mute);
}
.sh-nav-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding: 4px 0;
}
.sh-nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sh-nav-link:hover { color: var(--fg); }
.sh-nav-link:hover::after { transform: scaleX(1); }

.sh-right {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 18px;
  color: var(--fg-mute);
}
.sh-toggles {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 11px;
}
.sh-toggles .sh-mood-btn,
.sh-toggles .sh-lang-btn {
  font-size: 11px;
  letter-spacing: 0.24em;
}
.sh-mood,
.sh-lang {
  display: inline-flex; align-items: center; gap: 6px;
}
.sh-mood-btn,
.sh-lang-btn {
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sh-mood-btn.is-active,
.sh-lang-btn.is-active { color: var(--fg); font-weight: 700; }
.sh-sep { opacity: 0.5; }

/* ── MOBILE NAVIGATION ───────────────────────────────
   Hamburger button (hidden on desktop). On mobile it toggles a full-screen
   nav overlay. The .sh-nav itself becomes the overlay via position:fixed. */
.sh-menu-btn {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 28px; height: 28px;
  cursor: pointer; background: transparent; border: none; padding: 0;
  margin-left: 12px; color: var(--fg);
}
.sh-menu-btn span {
  display: block; width: 20px; height: 1px; background: currentColor;
  transition: transform 240ms ease, opacity 240ms ease;
}

@media (max-width: 768px) {
  .site-header { grid-template-columns: 1fr auto; padding: 14px 24px; }
  .sh-right { display: inline-flex; align-items: center; }
  .sh-menu-btn { display: inline-flex; }

  /* Hamburger → X when overlay is open */
  .site-header.mobile-open .sh-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.mobile-open .sh-menu-btn span:nth-child(2) { opacity: 0; }
  .site-header.mobile-open .sh-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Nav overlay — full-screen, large links */
  .sh-nav {
    position: fixed; inset: 0;
    display: none;
    flex-direction: column; justify-content: center; align-items: center;
    gap: clamp(2rem, 7vw, 3.5rem);
    background: var(--bg);
    z-index: 99;
    padding-bottom: 8vh;
  }
  .site-header.mobile-open .sh-nav { display: flex; }
  .sh-nav .sh-nav-link {
    font-family: var(--cond);
    font-size: clamp(3rem, 10vw, 4.5rem);
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    padding: 0;
  }
  .sh-nav .sh-nav-link::after { display: none; }
  .sh-nav .sh-nav-link:hover,
  .sh-nav .sh-nav-link:focus { color: var(--accent); }
}

/* ── HERO SHELL ───────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  background: var(--bg);
}
#hero-mount { position: absolute; inset: 0; }
#hero-mount > * { width: 100%; height: 100%; }

/* Hero CTA hover — used by hero.jsx for #showreel */
.hero-cta { position: relative; }
.hero-cta:hover {
  color: var(--accent, #c8a14a) !important;
  transform: translateX(2px);
}
.hero-cta-primary:hover {
  color: var(--bg) !important;
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.hero-cta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
}
.hero-cta-meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 400;
  line-height: 1;
}
.hero-cta:hover .hero-cta-meta { color: var(--accent, #c8a14a); }

/* ── SECTION-LEVEL TYPOGRAPHY ─────────────────────
   Every section opens with the same head pattern:
     N° XX / LABEL                              (mono micro, top-right)
     BIG BEBAS TITLE — UPPERCASE
     mono meta line under it                    (0.66rem, 0.22em)
*/
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 0.95;
  text-transform: none;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.section-head .section-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  align-self: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.section-head .section-meta {
  grid-column: 1;
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 700px) {
  .section-head { grid-template-columns: 1fr; gap: 14px; }
  .section-head .section-num { grid-column: 1; }
}

/* ═══ SELECTED WORK ════════════════════════════════ */

.featured {
  display: flex; flex-direction: column;
  gap: clamp(5rem, 9vw, 9rem);
}
.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.feat:nth-child(even) .feat-text { order: 2; }

.feat-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.feat-num::after {
  content: ""; flex: 1; height: 1px;
  background: var(--rule);
  margin-left: 8px;
}
.feat-text {
  display: flex; flex-direction: column;
  gap: 20px;
  padding-top: 6px;
}
.feat h3 {
  font-family: var(--cond);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  letter-spacing: 0.005em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.feat-title-clickable { cursor: pointer; transition: color var(--t-base); }
.feat-title-clickable:hover { color: var(--accent); }

/* Credits — structured: year/format line, then director and production as label+name pairs */
.feat-credits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feat-credits-line {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 4px;
}
.feat-credits-person {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.feat-credits-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-mute);
  min-width: 76px;
  flex-shrink: 0;
}
.feat-credits-name {
  font-family: var(--cond);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1;
}

/* Blurb — Cormorant italic, like the hero definition */
.feat-blurb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--fg);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  max-width: 42ch;
  text-wrap: pretty;
}

/* ── ACTION ROW: Listen + Watch — both use the canonical button. */
.feat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  align-items: center;
}

/* Watch button — canonical hero button, scaled mid */
.feat-watch-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  font-family: var(--cond);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
.feat-watch-btn:hover { background: var(--fg); color: var(--bg); }

/* Listen to cue — same row as Watch, but accent-bordered */
.feat-listen-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--rule);
  font-family: var(--cond);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  transition: color var(--t-base), border-color var(--t-base);
}
.feat-listen-btn:hover { color: var(--accent); border-color: var(--accent); }
.feat-listen-btn .ico,
.feat-listen-btn > svg { color: var(--accent); transition: color var(--t-base); }
.feat.playing .feat-listen-btn { color: var(--accent); border-color: var(--accent); }

.feat-watch-btn .ico,
.feat-watch-btn > svg {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: color var(--t-base);
}
.feat-watch-btn:hover .ico,
.feat-watch-btn:hover > svg { color: var(--bg); }
.feat-watch-btn svg { width: 11px; height: 13px; }

/* Composer's note — appears beneath actions when the cue plays */
.feat-note {
  margin-top: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 600ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 400ms ease, margin-top 400ms ease;
}
.feat.playing .feat-note {
  max-height: 320px;
  opacity: 1;
  margin-top: 18px;
}
.feat-note-label {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.feat-note-dash { color: var(--accent); }
.feat-note p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
}

/* MEDIA */
.feat-media {
  position: relative;
  /* Container background — token so it adapts to mood (was a hard #050403,
     which read as an ugly dark block in warm mode). */
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
  max-height: 500px;
}
/* In dark mode keep the very deep near-black so posters pop against it;
   warm mode falls back to the lighter cream surface above. */
html[data-mood="dark"]   .feat-media.is-still { background: #050403; }
html[data-mood="candle"] .feat-media.is-still { background: #2a1c0c; }
/* Posters always sit on a transparent background — no dark/cream block visible
   around the artwork in any mood. */
html .feat-media.is-poster { background: transparent !important; }
.feat-media.is-poster { aspect-ratio: unset; height: clamp(280px, 46vh, 440px); background: transparent; }
.feat-media.is-still  { aspect-ratio: 16/9; }
.feat-media img {
  width: 100%; height: 100%;
  filter: contrast(1.05) saturate(0.85);
  transition: transform 0.9s cubic-bezier(0.2,0.8,0.2,1), filter 0.9s ease;
}
.feat-media.is-poster img { width: auto; height: 100%; max-width: 100%; object-fit: unset; display: block; margin: 0 auto; }
.feat-media.is-still img  { object-fit: cover; }
.feat-media:hover img { transform: scale(1.03); filter: contrast(1.1) saturate(0.95); }

.feat-trailer-label {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(13,12,9,0.7);
  padding: 6px 10px;
  z-index: 2;
}

.feat-play-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Default transparent in every mood; the hover tint is set mood-specifically
     below so warm mode never gets a dark blob over a cream poster. */
  background: transparent;
  transition: background var(--t-base);
  z-index: 1;
}
/* Hover-Tints nur auf Stills — Plakate bleiben immer transparent, weil ein
   Container drumherum die Plakat-Komposition kaputtmacht. */
html[data-mood="dark"]   .feat-media.is-still:hover .feat-play-overlay { background: rgba(13,12,9,0.40); }
html[data-mood="candle"] .feat-media.is-still:hover .feat-play-overlay { background: rgba(13,12,9,0.40); }
html[data-mood="warm"]   .feat-media.is-still:hover .feat-play-overlay { background: rgba(232,220,193,0.32); }
.feat-media.is-poster:hover .feat-play-overlay { background: transparent !important; }
.feat-play-overlay svg {
  width: 44px; height: 44px;
  color: var(--accent);
  opacity: 0.18;
  transform: scale(0.92);
  transition: opacity var(--t-base), transform var(--t-base);
}
.feat-media:hover .feat-play-overlay svg { opacity: 1; transform: scale(1); }
.feat-media.no-action { cursor: default; }

@media (max-width: 820px) {
  .feat { grid-template-columns: 1fr; gap: 24px; }
  .feat:nth-child(even) .feat-text { order: 1; }
  .feat-media.is-poster, .feat-media.is-still { max-height: 60vh; }
}

/* ── FEATURED TRACKLIST — "Serif · luftig" ──────────
   Airy, type-led list of up to three cues per Selected-Work item. No box,
   no chunky buttons: Cormorant-italic titles, a quiet hover ▸ that becomes a
   pulsing gold dot on the active track, real durations, and a hairline
   progress line while playing. */
.feat-tracks { margin-top: 10px; }
.feat-tracks-label {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 12px;
}
.feat-tracks-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); opacity: 0.55; }

.feat-tracklist { list-style: none; margin: 0; padding: 0; }
.feat-track {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.feat-track:last-child { border-bottom: 0; }

.feat-track-mark { position: relative; width: 16px; height: 16px; }
.feat-track-mark::before {
  content: "\25B8";  /* ▸ */
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 9px; line-height: 1;
  opacity: 0; transition: opacity var(--t-base);
}
.feat-track:hover .feat-track-mark::before { opacity: 0.9; }
.feat-track-dot {
  position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  opacity: 0; transition: opacity var(--t-base);
}

.feat-track-title {
  font-family: var(--serif); font-style: italic;
  font-size: 1.2rem; letter-spacing: 0.01em; line-height: 1.2;
  color: var(--fg-dim);
  transition: color var(--t-base);
}
.feat-track:hover .feat-track-title { color: var(--fg); }

.feat-track-dur {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--fg-mute); font-variant-numeric: tabular-nums;
}
.feat-track-pending {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-faint);
}

.feat-track-bar {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--accent); transition: width 0.25s linear;
}

/* active / playing */
.feat-track.playing .feat-track-title { color: var(--fg); }
.feat-track.playing .feat-track-mark::before { opacity: 0; }
.feat-track.playing .feat-track-dot { opacity: 1; animation: trackDotPulse 2.4s ease-in-out infinite; }
@keyframes trackDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* pending — not yet playable */
.feat-track.is-pending { cursor: default; }
.feat-track.is-pending .feat-track-title,
.feat-track.is-pending:hover .feat-track-title { color: var(--fg-mute); }

@media (prefers-reduced-motion: reduce) {
  .feat-track-bar { transition: none; }
  .feat-track.playing .feat-track-dot { animation: none; }
}

/* composer's note — a quiet liner note under the tracklist */
.feat-note-static { margin-top: 22px; }
.feat-note-static .feat-note-label {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.feat-note-static .feat-note-dash { color: var(--accent); }
.feat-note-static p {
  font-family: var(--serif); font-style: italic;
  font-size: 1.08rem; line-height: 1.55; color: var(--fg-dim);
  margin: 0; max-width: 48ch; text-wrap: pretty;
}

/* ═══ AWARDS ═══════════════════════════════════════ */

.awards-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.award-row {
  /* horizontal padding so the hover indicator line on the left does not
     collide visually with the film title. */
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem) clamp(18px, 1.6vw, 28px);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 64px minmax(0, 1.6fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  transition: box-shadow var(--t-base), padding-left var(--t-base);
}
.award-row:hover {
  box-shadow: inset 3px 0 0 var(--accent);
  /* nudge the content slightly further in on hover so the gold line sits
     clearly separate from the title rather than glued to it. */
  padding-left: clamp(26px, 2.4vw, 40px);
}

/* Film name — same size as filmography titles */
.award-film {
  font-family: var(--cond);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg);
}

.award-laurel {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: start;
}
.award-laurel img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.55) sepia(0.5) saturate(2.2) hue-rotate(-12deg);
  transition: filter var(--t-base);
}
.award-row:hover .award-laurel img {
  filter: brightness(0) invert(1) opacity(0.95) sepia(0.55) saturate(3) hue-rotate(-12deg);
}

.award-items { display: flex; flex-direction: column; gap: 14px; }
.award-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 8px 24px;
  align-items: baseline;
  padding: 4px 0;
}
.award-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.award-status.win { color: var(--accent); }
.award-status.nom { color: var(--fg-mute); }

/* Event name — Cormorant italic for editorial weight */
.award-event {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--fg);
  line-height: 1.35;
}
.award-event .mute {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-left: 6px;
}
.award-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

@media (max-width: 700px) {
  .award-row { grid-template-columns: 1fr; gap: 16px; }
  .award-laurel { width: 44px; height: 44px; }
  .award-item { grid-template-columns: 50px 1fr; }
  .award-cat { grid-column: 2; }
}

/* ═══ FILMOGRAPHY ══════════════════════════════════ */

.filmo-controls {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px; margin-bottom: 2rem; flex-wrap: wrap;
}
.filmo-filters {
  display: flex; gap: 28px; flex-wrap: wrap;
}
.filmo-filter {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
}
.filmo-filter:hover { color: var(--fg); }
.filmo-filter.active { color: var(--fg); border-bottom-color: var(--accent); }

.filmo-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

.filmo-list { display: flex; flex-direction: column; }

.year-group { margin-bottom: 8px; }
.year-header {
  font-family: var(--cond);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  text-transform: uppercase;
  padding: 24px 0 10px;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.filmo-row {
  position: relative;
  width: 100%; text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 110px 160px 28px;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: box-shadow var(--t-base), background var(--t-base);
}
.filmo-row:hover { box-shadow: inset 3px 0 0 var(--accent); }
.filmo-row.playing {
  background: linear-gradient(90deg, rgba(200,161,74,0.06), transparent);
}

/* Title — Bebas uppercase, like the credit block in the hero (was italic serif) */
.filmo-row .col-title {
  font-family: var(--cond);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.filmo-row .col-laurel {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.2em;
  color: var(--accent);
  opacity: 1;
  transform: translateY(0);
}
.filmo-row .col-laurel svg {
  width: 100%;
  height: 100%;
  display: block;
}
.filmo-row .col-title-text { display: inline; }
.filmo-row:hover .col-title,
.filmo-row.playing .col-title { color: var(--fg); }

.filmo-row .col-listen {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  justify-self: end;
  transition: color var(--t-base);
}
.filmo-row .col-listen::before {
  content: "▶";
  font-size: 7px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  padding-left: 1px;
}
.filmo-row.has-audio:hover .col-listen,
.filmo-row.has-audio.playing .col-listen { color: var(--accent); }
.filmo-row:not(.has-audio) .col-listen { visibility: hidden; }

.filmo-row .col-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.filmo-row .col-arrow {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-mute);
  transition: transform var(--t-base), color var(--t-base);
  font-family: var(--mono);
  font-size: 1.2rem;
}
.filmo-row:hover .col-arrow { color: var(--fg); }
.filmo-row.open .col-arrow { transform: rotate(90deg); color: var(--accent); }

@media (max-width: 820px) {
  .filmo-row {
    grid-template-columns: minmax(0, 1fr) auto 28px;
    gap: 6px 16px;
    padding: 16px 0;
  }
  .filmo-row .col-title { grid-column: 1; grid-row: 1; }
  .filmo-row .col-cat { grid-column: 1; grid-row: 2; }
  .filmo-row .col-listen { grid-column: 2; grid-row: 1; }
  .filmo-row .col-arrow { grid-column: 3; grid-row: 1 / span 2; }
}

/* expanded detail */
.filmo-detail {
  overflow: hidden;
  height: 0;
  transition: height var(--t-slow);
  border-bottom: 1px solid var(--rule);
}
.filmo-detail-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 28px 0 36px;
  align-items: start;
}
.filmo-detail-poster {
  aspect-ratio: 2/3;
  background: var(--bg-3);
  position: relative; overflow: hidden;
}
.filmo-detail-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(0.85);
}
.filmo-detail-poster.no-poster {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  display: flex; align-items: center; justify-content: center;
}
/* Placeholder text is now rendered as a real span by main.js
   (.filmo-detail-poster-pending) so it can be localised from content.js. */
.filmo-detail-poster-pending {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.filmo-detail-info { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.filmo-detail-info dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 10px;
}
.filmo-detail-info dd {
  margin: 0;
  font-family: var(--cond);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.1;
}
.filmo-detail-desc {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Awards in expanded filmography detail */
.filmo-detail-awards {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.filmo-award-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.filmo-award-status {
  flex-shrink: 0;
  font-size: 11px;
}
.filmo-award-status.win  { color: var(--accent); }
.filmo-award-status.nom  { color: var(--fg-faint); }

/* Show all — same canonical button vocabulary */
.filmo-show-more {
  display: inline-flex;
  margin: 3rem auto 0;
  padding: 18px 28px;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font-family: var(--cond);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
.filmo-show-more:hover { background: var(--fg); color: var(--bg); }
/* Wrapper for centering the button under the list */
#filmography .container { display: flex; flex-direction: column; }
#filmography .filmo-show-more { align-self: center; }

@media (max-width: 700px) {
  .filmo-detail-inner { grid-template-columns: 1fr; gap: 24px; }
  .filmo-detail-poster { max-width: 200px; }
}

/* ═══ ABOUT ════════════════════════════════════════
   Re-tuned so the entire About section fits inside one viewport on a
   typical laptop (≈900–1000px tall). Three changes from the previous
   layout: (a) intro and bio text now use the same font-size for a more
   harmonic hierarchy, (b) photos are smaller and sit to the LEFT of the
   bio text rather than on top of it, (c) the section's vertical padding
   is tightened. Mobile gracefully falls back to a single column with
   the photo back above the text. */

#about { padding: clamp(3rem, 6vw, 5rem) var(--pad); }

.about-body {
  display: flex;
  flex-direction: column;
  padding-top: clamp(0.4rem, 0.8vw, 0.8rem);
}

/* Intro: still 2-column on desktop, but tighter line-height and a smaller
   bottom margin so the bios can sit closer underneath. */
.about-intro {
  column-count: 2;
  column-gap: clamp(2.2rem, 4vw, 3.4rem);
  margin-bottom: clamp(1.6rem, 2.4vw, 2.2rem);
  padding-bottom: clamp(1.4rem, 1.8vw, 1.8rem);
  border-bottom: 1px solid var(--rule);
}
.about-intro p {
  font-family: var(--serif);
  /* Was clamp(1.05rem, 1.35vw, 1.18rem) — matched to bio-text below so the
     hierarchy reads as one body voice. */
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  color: var(--fg-dim);
  margin: 0 0 0.9em;
  break-inside: avoid;
}
.about-intro p:last-child { margin-bottom: 0; }

/* Two-bio grid stays 1fr 1fr. Inside each .bio we now lay photo + text
   horizontally so each card is shorter and the whole section fits. */
.about-bios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3.2vw, 3rem);
  align-items: start;
}

.bio {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  align-items: start;
}

/* Compact fixed-height photo — both cards identical height, balanced. The
   smaller absolute height (vs. the old clamp(260,28vw,420)) is what lets
   the entire section fit in a viewport. */
.bio-photo {
  width: 100%;
  height: clamp(200px, 18vw, 280px);
  overflow: hidden;
  position: relative;
  background: var(--bg-3);
  margin-bottom: 0;
}
.bio-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: contrast(1.02);
  transition: transform 0.9s ease;
}
.bio-photo:hover img { transform: scale(1.03); }

.bio-content {
  display: flex;
  flex-direction: column;
  min-width: 0;  /* allow text to wrap inside the grid track */
}

.bio-name {
  font-family: var(--cond);
  /* Slightly smaller than before so the horizontal photo+text card stays
     compact while keeping the brand-cond display weight. */
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  letter-spacing: 0.005em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 8px;
}
.bio-role {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 12px;
}
.bio-text {
  font-family: var(--serif);
  /* Matched to .about-intro p — same body voice. */
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--fg-dim);
  text-wrap: pretty;
}

/* Tablet: collapse intro to 1 column, drop bio to photo-above-text */
@media (max-width: 960px) {
  .about-intro { column-count: 1; }
  .bio {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .bio-photo { height: clamp(220px, 26vw, 300px); }
  .bio-name  { font-size: clamp(1.8rem, 4vw, 2.4rem); }
}
/* Mobile */
@media (max-width: 540px) {
  .about-bios { grid-template-columns: 1fr; }
}

/* ═══ CONTACT ══════════════════════════════════════ */

/* Big mailto — the section's gravitational center.
   Styled like the hero's wordmark: Bebas Neue, gigantic, with a small
   eyebrow above and an arrow chevron after, all wrapped in a single link. */
.contact-mailto {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  transition: color var(--t-base), padding var(--t-base);
}
.contact-mailto:hover {
  color: var(--accent);
  padding-left: 16px;
}
.contact-mailto-eyebrow {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 14px;
}
.contact-mailto-addr {
  grid-column: 1;
  display: block;
  font-family: var(--cond);
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  word-break: break-word;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  align-self: start;
}
.contact-mailto-arrow {
  grid-column: 2;
  align-self: end;
  display: inline-flex;
  color: var(--accent);
  transition: transform var(--t-base);
  margin-bottom: 12px;
}
.contact-mailto:hover .contact-mailto-arrow {
  transform: translateX(8px);
}
.contact-mailto-arrow svg { display: block; }

.contact-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 56ch;
  margin: 0 0 clamp(2rem, 3vw, 2.5rem);
  text-wrap: pretty;
}

/* Practical block: small, supporting — sits below the mailto */
.contact-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.contact-meta-block {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 2;
}
.contact-meta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.contact-meta-link {
  display: inline-block;
  color: var(--fg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), color var(--t-base);
}
.contact-meta-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 700px) {
  .contact-mailto { grid-template-columns: 1fr; }
  .contact-mailto-arrow { grid-column: 1; align-self: start; margin-top: 8px; }
  .contact-meta { grid-template-columns: 1fr; gap: 24px; }
}

/* ═══ NEWSLETTER ══════════════════════════════════ */

.newsletter {
  padding: clamp(5rem, 9vw, 8rem) var(--pad);
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.newsletter-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
}
.newsletter h2 {
  font-family: var(--cond);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  color: var(--fg);
}
.newsletter p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  max-width: 36ch;
  line-height: 1.8;
  margin: 0;
}
.newsletter-form {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--fg-mute);
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--fg);
  padding: 0.9rem 0;
  font-size: 1rem;
  outline: none;
  font-family: inherit;
}
.newsletter-form input::placeholder { color: var(--fg-mute); }
.newsletter-form button {
  padding: 0 0 0 1.25rem;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-family: var(--mono);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--t-base);
}
.newsletter-form button:hover { color: var(--accent); }
@media (max-width: 700px) { .newsletter-inner { grid-template-columns: 1fr; } }

/* ═══ FOOTER ═══════════════════════════════════════ */

footer {
  padding: 5rem var(--pad) 1.75rem;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.footer-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.footer-col-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

/* LEFT col — brand */
.footer-col--brand .footer-brand {
  font-family: var(--cond);
  font-size: 2.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  line-height: 1;
  display: inline-flex; align-items: stretch;
  margin-bottom: 4px;
}
.footer-col--brand .footer-brand .brand-dot {
  color: var(--accent);
  margin-left: 0.02em;
  margin-right: 0.04em;
}
.footer-tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.8;
  max-width: 38ch;
  margin: 0;
}
.footer-studio {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.9;
  margin: 0;
}

/* MIDDLE col — sitemap */
.footer-nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.footer-nav a {
  font-family: var(--cond);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color var(--t-base), padding-left 200ms ease;
  display: inline-block;
}
.footer-nav a:hover { color: var(--accent); padding-left: 4px; }

/* RIGHT col — contact + social */
.footer-email {
  font-family: var(--cond);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color var(--t-base), border-color var(--t-base);
}
.footer-email:hover { color: var(--accent); border-color: var(--accent); }
.footer-phone {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.footer-socials {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.footer-social:hover {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

/* BOTTOM — thin legal strip */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.footer-copy { font-variant-numeric: tabular-nums; }
.footer-legal {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 24px;
}
.footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-base);
}
.footer-legal a:hover { color: var(--fg); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  footer { padding: 3rem var(--pad) 1.25rem; }
  .footer-inner { gap: 2.25rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-col--brand .footer-brand { font-size: 2.2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ═══ SHOWREEL ════════════════════════════════════
   Cinema-bridge between Selected Work and Awards.
   The whole cover is one big button — clicking anywhere
   on the image opens the showreel modal. The cover
   intentionally keeps its own dark "cinema island"
   colors (cream play button, dark veil) regardless of
   the page mood, since the image itself is a film still.
   The surrounding heading/caption follow mood tokens. */

.showreel-block {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: stretch;
}

.showreel-cover {
  --reel-fg: #e8dcc1;
  --reel-veil-edge: rgba(13,12,9,0.62);
  --reel-veil-mid:  rgba(13,12,9,0.18);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 800 / 520;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0d0c09;
  color: var(--reel-fg);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 480ms cubic-bezier(0.2,0.8,0.2,1);
}

.showreel-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(0.2,0.8,0.2,1), filter 480ms ease;
  filter: brightness(0.78) contrast(1.05);
}

.showreel-cover-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%,
      var(--reel-veil-mid) 0%,
      var(--reel-veil-edge) 80%);
  transition: opacity 480ms ease;
}

.showreel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--reel-fg);
  pointer-events: none;
  filter: drop-shadow(0 4px 28px rgba(0,0,0,0.55));
  transition: color 320ms ease, transform 480ms cubic-bezier(0.2,0.8,0.2,1);
}

.showreel-cover:hover .showreel-play,
.showreel-cover:focus-visible .showreel-play {
  color: var(--accent, #c8a14a);
  transform: translate(-50%, -50%) scale(1.06);
}
.showreel-cover:hover .showreel-cover-img,
.showreel-cover:focus-visible .showreel-cover-img {
  transform: scale(1.02);
  filter: brightness(0.86) contrast(1.05);
}
.showreel-cover:hover .showreel-cover-veil,
.showreel-cover:focus-visible .showreel-cover-veil {
  opacity: 0.72;
}
.showreel-cover:focus-visible {
  outline: 1px solid var(--accent, #c8a14a);
  outline-offset: 4px;
}

.showreel-duration {
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 22px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--reel-fg);
  background: rgba(13,12,9,0.55);
  padding: 6px 10px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.showreel-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.8;
  text-align: center;
  max-width: 62ch;
  margin: 0 auto;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .showreel-duration { font-size: 9px; padding: 5px 8px; }
  .showreel-caption  { font-size: 10px; letter-spacing: 0.18em; }
}

/* The Showreel section uses the same .section-head pattern as the other
   sections, but the top-right slot holds eyebrow text instead of an N°
   number. Same typography, same grid placement — no visual surprise. */
.section-num.section-num--eyebrow {
  color: var(--fg-mute);
}

/* ═══ CONTENT-VISIBILITY ══════════════════════════════
   Skip off-screen render work for the heaviest sections.
   The browser still tracks their position for IntersectionObserver;
   contain-intrinsic-size provides a stable placeholder height. */
#showreel    { content-visibility: auto; contain-intrinsic-size: 0 760px; }
#filmography { content-visibility: auto; contain-intrinsic-size: 0 900px; }
#about       { content-visibility: auto; contain-intrinsic-size: 0 520px; }
#contact     { content-visibility: auto; contain-intrinsic-size: 0 500px; }

/* ═══ AUDIO-REACTIVE WARMTH ═══════════════════════════
   When audio plays, the page subtly warms up — the same gold tint as the
   hero accent, but spread across the whole viewport. */

html:not([data-mood="candle"]) body.now-playing::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 98;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(200,161,74,0.08), transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(200,161,74,0.04), transparent 40%);
  transition: opacity 1.6s ease;
}