/* Palette sampled from the existing artwork; all media assets stay unchanged. */
:root {
  --bg: #111c22;
  --ink: #f4eee2;
  --muted: #b6bab7;
  --gold: #e9b365;
  --line: #e9b36524;
  --petrol: #0d2a38;
  --ember: #501713;
}

body {
  background:
    radial-gradient(ellipse 90% 1100px at 0 0, #0d2a38cc, transparent 76%),
    radial-gradient(ellipse 85% 1000px at 100% 0, #501713a6, transparent 78%),
    var(--bg);
}

/* The same cached illustration supplies broad, unrecognizable colour light. */
.hero-film {
  isolation: isolate;
  background: transparent;
}
.hero-film::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -90px -70px 0;
  pointer-events: none;
  background: url('assets/hero-clean-centered-v2.png') center / 100% 100% no-repeat;
  filter: blur(clamp(42px, 7vw, 110px)) saturate(.78);
  opacity: .56;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* A close halo carries the colours at each image edge into the broad backdrop. */
.hero-film .hero-art { isolation: isolate; }
.hero-film .hero-art::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -10px -32px 0;
  background: url('assets/hero-clean-centered-v2.png') center / 100% 100% no-repeat;
  filter: blur(28px) saturate(.85);
  opacity: .62;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, #000 85%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* One shared edge mask keeps the still and the film perfectly aligned. */
.hero-film .cover-stage {
  background: transparent;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, #000 94%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mask-repeat: no-repeat;
}
.hero-film .cover-stage img,
.hero-film .cover-stage video {
  filter: none;
}

/* Controls and reading surfaces continue the artwork's restrained colours. */
.film-toolbar { background: transparent; }
.film-controls button {
  background: #0d2a38;
  border-color: #e9b36566;
  color: var(--ink);
}
.film-controls button:hover { background: #153847; }
.primary { color: #172127; }
.primary:hover { background: #f2c586; }
.nav-cta { border-color: #e9b36566; }
nav > a { color: #c9cbc4; }
.masthead { border-bottom-color: #e9b36524; }
.hero-lead { color: #c2c5c1; }
h2 em { color: #aab8bb; }
.sound-note, .theme-foot { color: #a9b4b5; }
.section-rule { color: #a6b5b8; }
.themes article { border-top-color: #68b4d080; }
.themes article:nth-child(2) { border-top-color: #d2765880; }
.themes article:nth-child(3) { border-top-color: #e9b36580; }
.theme-number { color: #a4c6d1; }
.themes article:nth-child(2) .theme-number { color: #e0a38f; }
footer { color: #a9b4b5; }
footer a { color: #dfc6a1; }

@media (max-width: 700px) {
  .hero-film::before {
    inset: -45px -35px 0;
    filter: blur(42px) saturate(.78);
    opacity: .48;
  }
}

@media (forced-colors: active) {
  .hero-film::before, .hero-film .hero-art::before { display: none; }
  .hero-film .cover-stage { -webkit-mask-image: none; mask-image: none; }
}

/* The sound replay remains available during the silent opening sequence. */
@media (max-width: 700px) {
  .hero-film .hero-art {
    width: min(100%, calc((100svh - 136px) * 969 / 1623));
  }
  .film-toolbar { min-height: 136px; align-content: center; }
  .film-toolbar.is-playing #play,
  .film-toolbar.is-playing .film-next { display: inline-flex; }
  .film-toolbar .film-controls { flex-basis: 100%; }
}