/* Scene images (2026-10-17): an AI-made scene behind the hero, under a dark wash so the words stay readable
   (WCAG AA), and a wide mood band between sections. Pages add <div class="hero-photo"> as the hero's first child. */
.hero.has-photo { isolation: isolate; --text-muted: #A3A3A3; } /* the small grey lines stay readable over a scene */
.hero-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: center 55%; filter: brightness(1.15) saturate(1.1); }
/* The scene is the hero's main visual: only a light wash over it, a fade into the page at the bottom, and a soft dark
   pool directly behind the text column (::before on the content box) so every line keeps WCAG AA. */
.hero-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.28) 0%, rgba(15,15,15,0.06) 28%, rgba(15,15,15,0.06) 78%, var(--dark, #0F0F0F) 100%); }
.hero.has-photo::before { z-index: 1; }
.hero.has-photo > :not(.hero-photo) { position: relative; z-index: 2; }
.hero.has-photo :is(.hero-content, .hero-inner)::before { content: ''; position: absolute; z-index: -1; pointer-events: none; }
/* Centred heroes: an oval pool the size of the words. */
.hero.has-photo .hero-content::before { inset: -14% -16%;
  background: radial-gradient(ellipse 58% 64% at 50% 50%, rgba(15,15,15,0.90) 0%, rgba(15,15,15,0.86) 72%, rgba(15,15,15,0.45) 88%, rgba(15,15,15,0) 100%); }
/* Left-aligned heroes: dark under the words on the left, the right of the scene almost unshaded. */
.hero.has-photo .hero-inner::before { top: -3rem; bottom: -3rem; left: -50vw; width: calc(50vw + 860px);
  background: linear-gradient(90deg, rgba(15,15,15,0.90) 0%, rgba(15,15,15,0.90) calc(100% - 200px), rgba(15,15,15,0) 100%); }
@media (max-width: 680px) {
  .hero-photo::after { background: linear-gradient(180deg, rgba(15,15,15,0.25) 0%, rgba(15,15,15,0.15) 40%, var(--dark, #0F0F0F) 100%); }
  .hero.has-photo :is(.hero-content, .hero-inner)::before { inset: -2.5rem -1.25rem;
    background: linear-gradient(180deg, rgba(15,15,15,0) 0%, rgba(15,15,15,0.86) 2.5rem, rgba(15,15,15,0.86) calc(100% - 2.5rem), rgba(15,15,15,0) 100%); }
}
.hero.has-photo :is(h1, p, .lede, .hero-label) { text-shadow: 0 1px 14px rgba(0,0,0,0.65); }

.mood-band { position: relative; margin: 0; padding: 0; height: clamp(220px, 38vw, 460px); overflow: hidden; }
.mood-band picture, .mood-band img { display: block; width: 100%; height: 100%; }
.mood-band img { object-fit: cover; object-position: center 60%; }
.mood-band::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--dark, #0F0F0F) 0%, rgba(15,15,15,0) 22%, rgba(15,15,15,0) 78%, var(--dark, #0F0F0F) 100%); }
.mood-band figcaption { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1; width: min(860px, calc(100% - 2.5rem));
  color: var(--text-primary, #F5F5F5); font-size: clamp(1.05rem, 2.6vw, 1.4rem); font-weight: 600; text-align: center; text-shadow: 0 1px 12px rgba(0,0,0,0.85); }

/* Left-aligned heroes on wide screens: tall enough that the scene reads as the hero, with the words centred in it
   (about 440px of picture below the fixed nav). Phones keep their natural height. */
@media (min-width: 681px) {
  .hero.has-photo.photo-left { min-height: calc(9rem + 300px); display: flex; flex-direction: column; justify-content: center; }
  .hero.has-photo.photo-left > .hero-inner { width: 100%; }
}