/* ---------- Design tokens ---------- */
:root {
  --bg:        #0c0d10;
  --bg-soft:   #14161b;
  --bg-card:   #181b22;
  --line:      #2a2e38;
  --text:      #ece9e2;
  --muted:     #9a9b9f;
  --gold:      #c8a35b;
  --gold-soft: #e3c889;
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, sans-serif;
  --maxw: 1120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Site is dark-only — without this, browsers whose native widgets (date
   picker, scrollbars, etc.) key off the *document's* declared scheme rather
   than each element's (Firefox's date-picker panel does this) still render
   light, even where individual elements also set color-scheme: dark below. */
html { scroll-behavior: smooth; color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* "Opens in a new tab" marker appended after external link text. */
.ext-icon { width: 0.7em; height: 0.7em; margin-left: 0.3em; vertical-align: -0.05em; fill: currentColor; flex-shrink: 0; }

/* ---------- Reveal on scroll ---------- */
.section, .work, .film-summary, .about, .contact {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.is-visible {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .section, .work, .film-summary, .about, .contact { opacity: 1; transform: none; }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 5vw, 3rem);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav--scrolled {
  background: rgba(12, 13, 16, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.nav__brand {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); }
.nav__links a {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.25s;
}
.nav__links a:hover { color: var(--text); }
.nav__cta {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  color: var(--text) !important;
}
.nav__cta:hover { border-color: var(--gold); color: var(--gold) !important; }
.nav__lang {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: var(--gold) !important;
}
.nav__lang:hover { border-color: var(--gold); }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 0 0.8rem;
    background: rgba(12, 13, 16, 0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav--open .nav__links { display: flex; }
  .nav__links a {
    padding: 0.95rem clamp(1.2rem, 5vw, 3rem);
    font-size: 0.9rem;
  }
  .nav__cta {
    border: none !important;
    border-radius: 0 !important;
    color: var(--gold) !important;
    text-align: left;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(200,163,91,0.10), transparent 55%),
    radial-gradient(90% 70% at 80% 90%, rgba(80,90,130,0.18), transparent 60%),
    linear-gradient(180deg, #0a0b0e 0%, #101218 60%, #0c0d10 100%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.5;
}
.hero__inner { position: relative; z-index: 2; padding: 0 1.5rem; }
.hero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  padding-left: 0.5em;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.hero__sub {
  margin-top: 1.2rem;
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  color: var(--muted);
  z-index: 2;
  animation: bob 2.2s var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ---------- Play button ---------- */
.play {
  margin-top: 2.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s, transform 0.3s var(--ease);
}
.play:hover { background: var(--gold); color: #14110a; transform: translateY(-2px); }
.play__icon { font-size: 0.7rem; transform: translateY(0.5px); }
.play__icon--lg { font-size: 1.4rem; }
.play.is-playing .play__icon { content: ""; }

/* ---------- News section (home) ---------- */
/* Uses the shared .section / .section__head / .section__link scaffolding below;
   only its body paragraph needs its own rule. The lighter top padding keeps a
   short news item from feeling cavernous straight after the hero. */
.section--news { padding-top: clamp(3.5rem, 8vw, 6rem); }
.announce__body {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 60ch;
}

/* ---------- Section scaffolding ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 12vw, 9rem) clamp(1.2rem, 5vw, 3rem);
}
.section--film, .section--about, .section--news { max-width: none; background: var(--bg-soft); border-block: 1px solid var(--line); }
.section--film > *, .section--about > *, .section--news > * { max-width: var(--maxw); margin-inline: auto; }
.section__head { margin-bottom: 3rem; }
.section__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* ---------- Section head row (with link) ---------- */
.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.section__link {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: border-color 0.25s;
  white-space: nowrap;
}
.section__link:hover { border-color: var(--gold); }

/* ---------- Standalone page (works.html) ---------- */
.page { padding-top: 4.5rem; }
.nav--solid {
  background: rgba(12, 13, 16, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__links a.is-current { color: var(--text); }
.pagehead {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6rem) clamp(1.2rem, 5vw, 3rem) 0;
}
.pagehead__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0.4rem 0 0.8rem;
}
.pagehead__lead { color: var(--muted); font-size: 1.1rem; max-width: 44ch; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 2.5rem; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.filter-group__label {
  flex: none;
  width: 4.5rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.filter-group__opts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 560px) {
  .filter-group { align-items: flex-start; }
  .filter-group__label { width: auto; flex-basis: 100%; }
}
.filter {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.filter:hover { color: var(--text); border-color: var(--gold); }
.filter.is-active { background: var(--gold); border-color: var(--gold); color: #14110a; }
.catalog__empty { color: var(--muted); padding: 2rem 0; }

/* Community-wall work filter (a single dropdown, in place of the catalog's chips) */
.perf-filter { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.perf-filter__label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* No-JS fallback: the plain native select, styled to match. Once JS enhances it
   into the custom listbox below, it gets .select__native and is visually hidden. */
.perf-filter__select {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 18rem;
  max-width: 100%;
}
.perf-filter__select:focus { outline: none; border-color: var(--gold); }
@media (max-width: 560px) {
  .perf-filter { align-items: flex-start; }
  .perf-filter__label { flex-basis: 100%; }
  .perf-filter__select { width: 100%; }
  .select { width: 100%; }
}

/* ---------- Themed dropdown (custom listbox replacing the native popup) ---------- */
/* text-transform: none — some contexts (e.g. .form label) uppercase their
   descendants; option text should keep its natural case regardless of where
   the widget is nested. */
.select { position: relative; min-width: 18rem; max-width: 100%; text-transform: none; }
/* Native <select> kept for form state + no-JS, hidden once enhanced. */
.select__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.select__trigger:hover { border-color: var(--gold); }
.select__trigger:focus-visible { outline: none; border-color: var(--gold); }
.select__trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.select__trigger:disabled:hover { border-color: var(--line); }
.select.is-open .select__trigger { border-color: var(--gold); }
.select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__chevron {
  width: 1.05rem; height: 1.05rem;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease, stroke 0.15s ease;
}
.select__trigger:hover .select__chevron { stroke: var(--gold); }
.select.is-open .select__chevron { transform: rotate(180deg); stroke: var(--gold); }

.select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  max-height: 18rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.select.is-open .select__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}
.select__option.is-active { background: var(--bg-soft); }
.select__option[aria-selected="true"] { color: var(--gold-soft); }
.select__option[aria-selected="true"]::after {
  content: "";
  width: 0.9rem; height: 0.9rem;
  flex: none;
  background: var(--gold);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E");
}

/* ---------- Work card tag ---------- */
.work__tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.8rem;
}
.work.is-hidden { display: none; }

/* ---------- Works ---------- */
.works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}
/* Catalog: keep empty tracks so filtered results don't stretch the cards
   (which would upscale the card image and look low-res). */
.works--catalog { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.work {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.work:hover,
.work:focus-within { transform: translateY(-6px); border-color: var(--gold); }
.work__art {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(200,163,91,0.25), rgba(40,46,66,0.6)),
    var(--bg-soft);
  position: relative;
}
.work__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    calc(var(--seed) * 37deg),
    rgba(255,255,255,0.05) 0 2px,
    transparent 2px 14px
  );
}
.work__art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* Grade: a folded-corner triangle in the card's bottom-right with the letter */
.work__grade {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 0.45rem 0.3rem 0;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1;
  color: #14110a;
  background: linear-gradient(to top left, var(--gold) 0 50%, transparent 50%);
  pointer-events: none;
}
/* Top-left card flag: expected availability, or "New" for a fresh release */
.work__flag {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  pointer-events: none;
}
.work__flag--soon {
  color: var(--gold);
  background: var(--bg-card);
  border: 1px solid var(--gold);
}
.work__flag--new {
  color: #14110a;
  background: var(--gold);
  font-weight: 700;
}
.work__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.7rem; }
.work__title { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.2; }
.work__link { transition: color 0.25s; }
/* Stretched link: the whole card becomes the click/tap target, but only this
   one real <a> carries the link — valid HTML, accessible, works on mobile. */
.work__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.work__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.work:hover .work__link,
.work:focus-within .work__link { color: var(--gold); }
.work__meta { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.05em; margin: 0.5rem 0 0.8rem; }
.work__desc { color: var(--muted); font-size: 0.92rem; }
.work__play {
  margin-top: 1.2rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.work__play:hover { border-color: var(--gold); color: var(--gold); }
.work__more {
  display: inline-block;
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

/* ---------- Carousel (home Selected Works) ---------- */
.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* room for the cards' hover-lift + focus outline so neither gets clipped */
  padding: 8px 4px;
  margin: -8px -4px;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
/* Click-and-drag panning (pointer devices): grab affordance, and while a drag
   is in progress scroll-snap is off so the track tracks the cursor smoothly. */
@media (hover: hover) and (pointer: fine) {
  .carousel__viewport.is-draggable { cursor: grab; }
  .carousel__viewport.is-dragging { cursor: grabbing; }
}
.carousel__viewport.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
/* Override the .works grid: a single horizontal row of fixed-width cards. */
.works--carousel {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 1.6rem) / 3);
}
/* Carousel cards are always visible: the reveal-on-scroll observer can't see
   cards scrolled horizontally out of the viewport, so they'd stay hidden. */
.works--carousel .work {
  scroll-snap-align: start;
  opacity: 1;
  transform: none;
}
/* Dots: the carousel's indicator and manual control on every breakpoint —
   one dot per card, tap to jump, the current card's dot enlarged. */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.8rem;
}
.carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.carousel__dot:hover { background: var(--muted); }
.carousel__dot.is-active { background: var(--gold); transform: scale(1.7); }
.carousel__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Touch shows one full-width card at a time; desktop keeps three across. */
@media (max-width: 760px) {
  .works--carousel { grid-auto-columns: 100%; }
}

/* ---------- Reel ---------- */
/* ---------- Screen & Stage summary (home) ---------- */
/* Cinematic filmstrip: an asymmetric intro row over two full-width stills. */
.film-summary { display: block; }
.film-summary__lead { font-size: 1.05rem; color: var(--text); margin: 0; max-width: 32ch; }

/* Lead and headline quote share a top row, weighted apart for asymmetry. */
.film-summary__intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-bottom: 1.9rem;
}
@media (max-width: 760px) {
  .film-summary__intro { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .film-summary__lead { max-width: none; }
}

/* The longer quote anchors the intro row. */
.film-quote--main {
  flex: 0 1 auto;
  max-width: 38ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--text);
  padding-left: 1.2rem;
  border-left: 2px solid var(--gold);
  margin: 0;
}

/* Two large winning-entry stills, the short quotes overlaid as captions. */
.film-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .film-strip { grid-template-columns: 1fr; } }
.film-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0e0f13;
}
.film-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 2.75rem 1.2rem 1rem;
  background: linear-gradient(transparent, rgba(8, 9, 12, 0.85));
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--gold-soft);
}
.film-summary .section__link { display: inline-block; margin-top: 1.8rem; }

/* ---------- Performances list (work detail page) ---------- */
.performances { list-style: none; }
.performances .perf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.performances .perf:last-child { border-bottom: 1px solid var(--line); }
.perf__who { color: var(--text); font-size: 1rem; }
.perf__cond { color: var(--muted); }
.perf__badge {
  align-self: center;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #14110a;
  background: var(--gold);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}
.perf--premiere .perf__who { color: var(--gold); }
.perf__partner { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.perf__partner:hover { text-decoration-color: var(--gold); }
.perf__soloists { flex-basis: 100%; color: var(--gold); font-size: 0.82rem; }
.perf__choirs { flex-basis: 100%; color: var(--text); font-size: 1rem; }
.perf__meta { color: var(--muted); font-size: 0.82rem; }
.perf__link {
  margin-left: auto;
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.perf__link:hover { border-color: var(--gold); }
.perf__link--todo { color: var(--muted); }

/* ---------- Community: performance grid ---------- */
/* Performance wall — a horizontal scroll-snap carousel. Mobile: one card per
   swipe (the next card peeks to signal swipeability). Desktop: a 3-row strip
   that scrolls sideways, paged by the flanking arrow buttons (see main.js). */
.perf-carousel { position: relative; }
/* Edge fades: cards dissolve into the page background at the sides to signal
   there's more to scroll. Toggled by scroll position (see main.js) so the left
   fade only appears once scrolled and the right fade only while more remains. */
.perf-carousel::before,
.perf-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 5vw, 4rem);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.perf-carousel::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.perf-carousel::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.perf-carousel--fade-start::before { opacity: 1; }
.perf-carousel--fade-end::after { opacity: 1; }
/* On mobile the strip is a single card with a narrow peek, so a wide fade would
   swallow the peeking neighbour. Keep the fade at full strength (so the edge
   still dissolves cleanly into the black gutter) but make the region small. */
@media (max-width: 719px) {
  .perf-carousel::before,
  .perf-carousel::after { width: 1rem; }
}
.perf-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  grid-template-rows: 1fr;
  gap: 1.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Room so the hover lift and the scrollbar aren't clipped by overflow-y. */
  padding: 0.5rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.perf-grid::-webkit-scrollbar { height: 8px; }
.perf-grid::-webkit-scrollbar-track { background: transparent; }
.perf-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.perf-grid::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.perf-grid:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Prev/next arrows: hidden on mobile (swipe instead) and whenever the strip
   doesn't overflow. Shown on desktop, where a mouse has no swipe gesture. */
.perf-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  /* Translucent so the arrows read as floating over the strip's edges rather
     than reserving layout space (which would indent the wall from the page). */
  background: rgba(20, 22, 27, 0.82);
  backdrop-filter: blur(4px);
  color: var(--text);
  cursor: pointer;
  place-items: center;
  transition: border-color 0.25s, color 0.25s, opacity 0.25s;
}
/* Straddle the wall's edge — most of the button hangs into the page gutter, a
   sliver overlaps the cards. (Half the 44px width is 22px; nudged 6px further out.) */
.perf-nav--prev { left: -28px; }
.perf-nav--next { right: -28px; }
.perf-nav__icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perf-nav:hover { border-color: var(--gold); color: var(--gold); }
.perf-nav:disabled { opacity: 0.3; cursor: default; }
.perf-nav:disabled:hover { border-color: var(--line); color: var(--text); }

@media (min-width: 720px) {
  .perf-grid {
    grid-auto-columns: clamp(260px, 30vw, 320px);
    gap: 1.4rem;
    scroll-snap-type: x proximity;
  }
  /* The wall scrolls sideways through a fixed number of rows, so the row count
     is really a vertical budget: cap it by viewport height so the wall never
     grows taller than the screen. 2 rows is the default — it suits laptops and
     an iPad in landscape; the height queries below add a third row on tall
     screens (desktop monitors, iPad portrait) and fall back to one on short
     ones (e.g. a phone in landscape). Scoped away from the home strip, which
     reuses .perf-grid but lays out as a single row of three (see below). */
  .perf-grid:not(.perf-grid--home) { grid-template-rows: repeat(2, auto); }
  .perf-nav { display: grid; }
  .perf-carousel--static .perf-nav { display: none; }
  /* Home page's recent-performances: three cards on a single row (no scroll),
     rather than the wall's sideways strip. Mobile keeps the shared
     swipeable single-card behaviour above. */
  .perf-grid--home {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    overflow: visible;
  }
}
@media (min-width: 720px) and (min-height: 950px) {
  .perf-grid:not(.perf-grid--home) { grid-template-rows: repeat(3, auto); }
}
@media (min-width: 720px) and (max-height: 620px) {
  .perf-grid:not(.perf-grid--home) { grid-template-rows: repeat(1, auto); }
}
.perf-card {
  display: block;
  /* Center the snapped card so a sliver of the previous and next card peeks on
     both sides (a swipe/scroll hint). The browser clamps the first/last card to
     the ends, so those only peek on their inward side. */
  scroll-snap-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  scroll-margin-top: 6rem;
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
/* Briefly highlight a card when linked to from a work's detail page */
.perf-card:target { border-color: var(--gold); }
a.perf-card:hover { transform: translateY(-6px); border-color: var(--gold); }
/* Premiere performances get a gold accent and a ribbon */
.perf-card--premiere { border-color: var(--gold); }
.perf-card__badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #14110a;
  background: var(--gold);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
}
.perf-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, #1b1e26, #0d0e12);
}
.perf-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perf-card__play {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(12, 13, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  transition: background 0.25s, transform 0.25s var(--ease);
}
a.perf-card:hover .perf-card__play { background: var(--gold); color: #14110a; border-color: var(--gold); transform: scale(1.05); }
.perf-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.25rem; }
.perf-card__work { font-family: var(--serif); font-size: 1.1rem; color: var(--text); }
.perf-card__who { color: var(--text); font-size: 0.9rem; }
.perf-card__cond { color: var(--muted); }
.perf-card__soloists { color: var(--muted); font-size: 0.84rem; }
.perf-card__choirs { color: var(--text); font-size: 0.9rem; }
.perf-card__movement { color: var(--muted); font-size: 0.84rem; font-style: italic; }
.perf-card__meta { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.04em; }
.perf-card.is-hidden { display: none; }

/* ---------- Community: upcoming agenda ---------- */
.upcoming { padding-bottom: 0; }
.agenda { list-style: none; max-width: 760px; margin: 0; padding: 0; }
.agenda__item {
  position: relative;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.agenda__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.agenda__item:last-child { border-bottom: 1px solid var(--line); }
.agenda__date {
  flex: none;
  width: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding: 0.45rem 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.agenda__mon { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.agenda__day { font-family: var(--serif); font-size: 1.55rem; color: var(--text); }
.agenda__year { color: var(--muted); font-size: 0.7rem; }
.agenda__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.agenda__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.agenda__badge {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #14110a;
  background: var(--gold);
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
  white-space: nowrap;
}
.agenda__item--premiere .agenda__date { border-color: var(--gold); }
.agenda__item--premiere .agenda__work { color: var(--gold); }
.agenda__work {
  align-self: flex-start;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.agenda__work:hover { border-color: var(--gold); }
.agenda__who { color: var(--text); font-size: 0.9rem; }
.agenda__where { color: var(--muted); font-size: 0.82rem; }
.agenda__link {
  display: block;
  margin-top: 0.35rem;
  text-align: right;
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.agenda__link:hover { border-color: var(--gold); }
/* Enough width from here for the title to sit on one line, so the link can
   move up into the top-right corner without risking overlap with it. */
@media (min-width: 640px) {
  .agenda__link { position: absolute; top: 1rem; right: 0; margin-top: 0; }
}
.home-upcoming { margin-bottom: 2.5rem; }
.home-upcoming .agenda { max-width: none; }
.section__eyebrow--sub { margin-bottom: 1rem; }

/* ---------- Partners page ---------- */
.partner-list { display: flex; flex-direction: column; }
.partner {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3.5vw, 2.4rem);
  padding: clamp(1.8rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.partner:first-child { border-top: none; padding-top: 0; }
/* Logo sits on a soft light plate so multi-coloured / dark logos stay legible on
   the dark page. The plate hugs each logo's natural aspect ratio (fixed height,
   width grows to a cap) rather than forcing a square, so wide wordmarks and square
   emblems both sit cleanly on one baseline. */
.partner__logo {
  flex: 0 0 auto;
  order: 2;
  margin-left: auto;
  box-sizing: border-box;
  height: 84px;
  max-width: clamp(150px, 22vw, 200px);
  padding: 12px 16px;
  border-radius: 10px;
  background: #f4f2ec;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 640px) {
  .partner { flex-direction: column; align-items: flex-start; }
  .partner__logo { order: 0; margin-left: 0; }
}
/* Larger logos on desktop; the mobile size above is left untouched. */
@media (min-width: 641px) {
  .partner__logo { height: 108px; max-width: clamp(180px, 24vw, 244px); }
}
.partner__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
/* No logo yet: keep a dark bordered placeholder for the initials instead of the plate. */
.partner__logo--empty { background: var(--bg-soft); border: 1px solid var(--line); min-width: 84px; }
.partner__logo-fallback { font-family: var(--serif); font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: 0.04em; color: var(--muted); }
.partner__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; max-width: 60ch; }
.partner__name { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.45rem); font-weight: 400; color: var(--text); line-height: 1.25; }
.partner__name a { color: inherit; }
.partner__name a:hover { color: var(--gold); }
.partner__meta { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.partner__desc { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0.4rem 0; }
/* Commissioned works as chips */
.partner__works { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.partner__works-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 0.15rem; }
.partner__chip {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--gold);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  line-height: 1.3;
  transition: border-color 0.3s, color 0.3s;
}
a.partner__chip:hover { border-color: var(--gold); color: var(--gold-soft); }
.partner__chip-v { color: var(--muted); font-size: 0.92em; }
.partner__site { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.02em; margin-top: 0.5rem; }
.partner__site:hover { color: var(--gold); }

/* ---------- Film page ---------- */
.film-entries { max-width: var(--maxw); margin: 0 auto; }
.film-entry {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-areas: "media info" "media quote";
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 0;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}
.film-entry:first-child { border-top: none; padding-top: 0; }
/* Alternate sides on desktop */
.film-entry:nth-child(even) {
  grid-template-columns: 1fr 1.5fr;
  grid-template-areas: "info media" "quote media";
}
.film-entry__media { grid-area: media; align-self: center; }
.film-entry__media-group { grid-area: media; align-self: center; }
.film-entry__media-group .film-entry__media { grid-area: auto; }
.film-entry__credit { color: var(--muted); font-size: 0.78rem; margin: 0.6rem 0 0; }
.film-entry__info { grid-area: info; }
.film-entry__quotes {
  grid-area: quote;
  align-self: start;
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.film-entry__quotes .film-quote { margin-top: 0; }
.film-entry__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
.film-entry__media iframe,
.film-entry__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
/* Mobile: summary → video → jury quote, single column */
@media (max-width: 820px) {
  .film-entry,
  .film-entry:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas: "info" "media" "quote";
    row-gap: 1.8rem;
  }
  .film-entry__quotes { margin-top: 0; }
}
.film-badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #14110a;
  background: var(--gold);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.film-badge--second,
.film-badge--neutral { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.film-entry__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; }
.film-entry__meta { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.06em; margin: 0.6rem 0 1rem; }
.film-entry__desc { color: var(--muted); font-size: 1.02rem; max-width: 48ch; }
.film-quote {
  margin-top: 1.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.film-quote--lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
}
.film-quote--lead .film-quote__text::before,
.film-quote--lead .film-quote__text::after {
  font-family: var(--serif);
  font-size: 2.8em;
  line-height: 0;
  color: var(--gold);
  opacity: 0.5;
}
.film-quote--lead .film-quote__text::before {
  content: "\201C";
  vertical-align: -0.25em;
  margin-right: 0.06em;
}
.film-quote--lead .film-quote__text::after {
  content: "\201D";
  vertical-align: -0.7em;
  margin-left: 0.00em;
}
.film-quote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Demo reel — stylistic range */
.demo__lead { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin-top: 1rem; }
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.demo-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.demo-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.demo-card__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.demo-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--text); }
.demo-card__tag { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.demo-card__desc { color: var(--muted); font-size: 0.95rem; flex: 1; }
.demo-card__audio { width: 100%; margin-top: 0.5rem; }

/* Collaboration call-out */
.collab { text-align: center; padding-top: clamp(2rem, 5vw, 3rem); position: relative; }
/* Divider before the CTA, inset to the content width so it lines up with the
   film-entry dividers rather than running wider at the section edge. */
.collab::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.2rem, 5vw, 3rem);
  right: clamp(1.2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}
/* Avoid the section-above + collab-above paddings compounding into a huge gap. */
.section:has(+ .collab) { padding-bottom: clamp(2rem, 5vw, 3rem); }
.collab__inner { max-width: 640px; margin: 0 auto; }
/* Slim variant: a secondary CTA that sits high on the page (e.g. the rehearsal
   invite by the agenda), kept visually lighter than the full closing CTA so it
   doesn't compete with the section heading above it. */
.collab--slim .section__title { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.collab--slim .collab__lead { font-size: 1rem; margin-bottom: 1.5rem; }
/* This CTA groups with the agenda above it, so its divider belongs BELOW it —
   closing off the forward-looking block before the past-performance wall,
   rather than the default line that would separate it from the agenda. */
.collab--slim::before { content: none; }
.collab--slim::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: clamp(1.2rem, 5vw, 3rem);
  right: clamp(1.2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}
.collab__lead { color: var(--muted); font-size: 1.1rem; margin: 1rem 0 2rem; }
.collab__lead:has(+ .collab__detail) { margin-bottom: 1rem; }
.collab__detail { color: var(--muted); font-size: 0.95rem; line-height: 1.6; max-width: 560px; margin: 0 auto 2rem; }
.collab__actions { display: flex; gap: 1.4rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.collab__email {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--gold-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
  transition: border-color 0.25s;
}
.collab__email:hover { border-color: var(--gold); }
.collab__btn {
  background: var(--gold);
  color: #14110a;
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), background 0.25s;
}
.collab__btn:hover { transform: translateY(-2px); background: var(--gold-soft); }

/* "Share a performance" disclosure: the form collapses behind the summary button. */
.collab__disclosure { text-align: center; }
.collab__disclosure > summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  border: none;
}
.collab__disclosure > summary::-webkit-details-marker { display: none; }
.collab__disclosure[open] > summary { display: none; }
.collab__disclosure .form { text-align: left; width: 100%; }
.collab__disclosure .form__submit { justify-self: center; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }
.about__photo {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(200,163,91,0.18), transparent 55%),
    linear-gradient(#1a1d24, #0e0f13);
  position: sticky;
  top: 6rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Single column on mobile → the portrait must scroll with the page (no sticky).
   `relative` (not `static`) so it still anchors the fade overlay below. This has
   to come after the base rule: position values have equal specificity, so source
   order decides, and an earlier override would lose to `position: sticky`. */
@media (max-width: 760px) {
  .about__photo { position: relative; top: auto; }
}
/* The portrait fills the 4:5 frame; overflow:hidden on .about__photo clips it to
   the rounded corners. Kept in colour, just dimmed a touch so the bright studio
   background sits more comfortably against the dark theme. */
.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92);
}
/* Fade the foot of the portrait into the dark page so it doesn't sit as a hard
   bright rectangle. */
.about__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, #0c0d10);
}
/* Photographer credit, tucked into the darkened foot of the frame (above the
   fade). Language-neutral, so it needs no translation. */
.about__credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.55rem;
  z-index: 3;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(236, 233, 226, 0.55);
}
/* Placeholder monogram (kept as a fallback if the <img> is ever removed). */
.about__monogram {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 9vw, 6rem);
  letter-spacing: 0.06em;
  color: var(--gold);
  opacity: 0.22;
}
.about__text p { color: var(--muted); margin-top: 1.1rem; max-width: 46ch; }
.about__text .section__eyebrow, .about__text .section__title { color: var(--gold); }
.about__text .section__title { color: var(--text); margin-bottom: 0.5rem; }
.about__text .about__intro {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 60ch;
  margin-top: 0.6rem;
}

/* Milestone timeline — a gold spine with a dot per event. The continuous line is
   the items' shared left border; each dot straddles it via ::before. */
.timeline { list-style: none; margin: 2rem 0 0; padding: 0; }
.timeline__item {
  position: relative;
  margin-left: 0.4rem;
  padding: 0 0 1.6rem 1.8rem;
  border-left: 2px solid var(--line);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0.1rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg-soft);
}
.timeline__year {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.about__text .timeline__desc { margin-top: 0.3rem; }

/* ---------- Listen ---------- */

/* ---------- Contact ---------- */
.section--contact { border-top: 1px solid var(--line); }
.contact { display: grid; gap: 3rem; text-align: center; }
.contact__head { max-width: 620px; margin: 0 auto; }
.contact__lead { color: var(--muted); margin: 1rem 0 1.6rem; }
.contact__email {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
  transition: border-color 0.25s;
}
.contact__email:hover { border-color: var(--gold); }
.form { display: grid; gap: 1.1rem; }
.form label { display: grid; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.form input, .form select, .form textarea {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.95rem;
  resize: vertical;
  min-width: 0;
  width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); }
.form__submit {
  justify-self: start;
  background: var(--gold);
  color: #14110a;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s;
}
.form__submit:hover { transform: translateY(-2px); background: var(--gold-soft); }
/* Performance-enquiry form (community.html) */
.form--enquiry { max-width: 640px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
/* Keep form controls at their natural height even if a sibling label wraps to
   two lines (e.g. "Version / instrumentation"), so paired selects match. */
.form select { align-self: start; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
/* Honeypot — visually hidden but still reachable by bots that ignore CSS */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form__status { min-height: 1.2em; margin: 0; font-size: 0.85rem; color: var(--muted); }
.form__status.is-ok { color: var(--gold); }
.form__status.is-err { color: #d97a6c; }
/* "Prefer email?" fallback under the form */
.collab__alt { margin-top: 1.6rem; font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* ---------- Work detail page ---------- */
.detail {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6rem) clamp(1.2rem, 5vw, 3rem) 0;
}
.detail__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.detail__back {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.25s;
}
.detail__back:hover { color: var(--gold); }
/* Share button — native share sheet on mobile (WhatsApp etc.), copy-link fallback elsewhere */
.detail__share {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.detail__share:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.detail__share svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.detail__share.is-copied { color: var(--gold); border-color: var(--gold); }
.detail__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.detail__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.detail__art {
  margin-top: 2.5rem;
  aspect-ratio: 21 / 9;
  border-radius: 16px;
  border: 1px solid var(--line);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(200,163,91,0.22), transparent 60%),
    radial-gradient(80% 80% at 90% 100%, rgba(80,90,130,0.25), transparent 60%),
    linear-gradient(160deg, #1b1e26, #0d0e12);
}
.detail__art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* layout: prose + sticky facts */
.detail__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas: "note facts";
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 0;
  padding-block: clamp(3rem, 7vw, 5rem);
  align-items: start;
}
/* With performances, they sit under the note in the left column on desktop;
   facts span both rows on the right. */
.detail__layout.has-perf { grid-template-areas: "note facts" "perf facts"; }
.detail__note { grid-area: note; }
.facts { grid-area: facts; }
.detail__perf { grid-area: perf; margin-top: 2rem; }
@media (max-width: 820px) {
  .detail__layout { grid-template-columns: 1fr; grid-template-areas: "note" "facts"; row-gap: clamp(2rem, 6vw, 3rem); }
  /* Single column: performances drop below the facts card. */
  .detail__layout.has-perf { grid-template-areas: "note" "facts" "perf"; }
  .detail__perf { margin-top: 0; }
}

.detail__note p { color: var(--muted); margin-bottom: 1.2rem; max-width: 60ch; font-size: 1.05rem; }
.detail__note .detail__lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 1.8rem;
}
.detail__note-flag {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  opacity: 0.8;
}
.detail__subhead {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 3rem 0 1.4rem;
}

/* movements */
.movements { list-style: none; counter-reset: mv; }
.movements li {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.movements li:last-child { border-bottom: 1px solid var(--line); }
.movements__num {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.95rem;
  min-width: 2.5em;
  letter-spacing: 0.05em;
}
.movements__text { display: flex; flex-direction: column; gap: 0.35rem; }
.movements__name { font-size: 1.05rem; color: var(--text); }
.movements__note { color: var(--muted); font-size: 0.92rem; line-height: 1.55; max-width: 60ch; }

/* detail-list: titled list of name + note pairs (e.g. characters, themes) */
.detail-list { list-style: none; }
.detail-list li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.detail-list li:last-child { border-bottom: 1px solid var(--line); }
.detail-list__name { font-family: var(--serif); font-size: 1.1rem; color: var(--gold); }
.detail-list__note { color: var(--muted); font-size: 0.92rem; line-height: 1.55; max-width: 60ch; }

/* audio-frags: downloadable audio clips, each an inline player + download link */
.audio-frags { list-style: none; max-width: 60ch; }
.audio-frags__note { color: var(--muted); margin-bottom: 1.4rem; }
.audio-frag {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.audio-frag:last-child { border-bottom: 1px solid var(--line); }
.audio-frag__label {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gold);
  min-width: 6.5em;
  flex-shrink: 0;
}
.audio-frag__player { height: 34px; flex: 1; min-width: 0; }
.audio-frag__dl {
  display: inline-flex;
  color: var(--gold);
  flex-shrink: 0;
  transition: color 0.25s, transform 0.25s var(--ease);
}
.audio-frag__dl:hover { color: var(--gold-soft); transform: translateY(-2px); }
.audio-frag__dl svg { width: 26px; height: 26px; fill: currentColor; display: block; }
@media (max-width: 560px) {
  .audio-frag { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .audio-frag__player { flex-basis: 100%; order: 3; }
}

/* facts sidebar */
.facts {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.6rem;
  position: sticky;
  top: 6rem;
}
/* On mobile the layout is a single column (note → facts → perf); the card must
   not stay pinned, or the performances below scroll behind it. This override
   sits after the base rule so it wins at equal specificity. */
@media (max-width: 820px) {
  .facts { position: static; top: auto; }
}
.facts dl { display: grid; gap: 0.1rem; }
.facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
}
.facts dt:first-child { margin-top: 0; }
.facts dd { font-size: 1rem; color: var(--text); }
.facts__link { color: var(--gold); }
.facts__link:hover { text-decoration: underline; }
.facts__cta {
  display: block;
  text-align: center;
  margin-top: 1.8rem;
  background: var(--gold);
  color: #14110a;
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), background 0.25s;
}
.facts__cta:hover { transform: translateY(-2px); background: var(--gold-soft); }
/* Commission call-to-action card in the facts sidebar */
.facts__commission {
  margin-top: 1.8rem;
  padding: 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: rgba(200, 163, 91, 0.06);
}
.facts__commission-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.facts__commission-text {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 0.8rem;
}
.facts__commission-text:last-of-type { margin-bottom: 0; }
.facts__commission .facts__cta { margin-top: 1.3rem; }
/* Availability callout for a work that isn't published yet — a single "expected"
   line, or (undated) a short note plus an "email me" button */
.facts__availability {
  margin-top: 1.8rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: rgba(200, 163, 91, 0.06);
}
.facts__availability-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.facts__availability-text {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.facts__availability .facts__cta { margin-top: 0.9rem; }
/* Clickable icon links (Spotify recording, mini-score PDF) */
.facts__icon {
  display: inline-flex;
  transition: color 0.25s, transform 0.25s var(--ease);
}
.facts__icon:hover { transform: translateY(-2px); }
.facts__icon svg { width: 34px; height: 34px; fill: currentColor; display: block; }
.facts__icon--spotify { color: #1db954; }
.facts__icon--spotify:hover { color: #1ed760; }
.facts__icon--soundcloud { color: #ff5500; }
.facts__icon--soundcloud:hover { color: #ff7700; }
.facts__icon--score { color: var(--gold); }
.facts__icon--score:hover { color: var(--gold-soft); }
.facts__icon--score-video { color: #ff0000; }
.facts__icon--score-video:hover { color: #ff3333; }
/* Instrumentation block — one row per scoring, links inline to the right */
.facts__scorings { margin-top: 1.8rem; }
.facts__scorings-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.facts__scoring {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.facts__scoring:last-child { padding-bottom: 0; }
.facts__scoring-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.facts__scoring-info { display: flex; flex-direction: column; gap: 0.15rem; }
.facts__scoring-name { font-size: 1rem; color: var(--text); }
.facts__scoring-grade {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Less-prominent credit for a partner who commissioned only this version */
.facts__scoring-credit { font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
.facts__scoring-credit a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.15em; }
.facts__scoring-credit a:hover { color: var(--gold); }
.facts__scoring-actions {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.9rem;
  margin-top: 0.3rem;
}
.facts__scoring-actions-right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
}
.facts__scoring-actions .facts__icon svg { width: 26px; height: 26px; }
/* Per-scoring buy button: full-width CTA below the name/icons row */
.facts__cta--scoring { margin-top: 0.9rem; padding: 0.7rem 1.2rem; font-size: 0.76rem; }

/* ---------- Footer ---------- */
.footer {
  padding: 1.3rem clamp(1.2rem, 5vw, 3rem) 2.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* Monogram sits on its own line above the copyright row (forced by the
   full-width basis); object-fit keeps it centred and aspect-correct. */
.footer__mark {
  width: 100%;
  height: 46px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 1.1rem;
  opacity: 0.85;
}