:root{ --hp-tint:27,13,21; --hp-accent:#E9A8C3 }

/* ══════════════════════════════════════════════════════════════════════════
   HERO PHOTOGRAPH — what the card film dissolves into
   ──────────────────────────────────────────────────────────────────────────
   Loaded LAST, after the theme file, because each theme paints its own
   .hero-plate (pale wash / blush / navy panel) and would otherwise win.
   Everything below is deliberately a full override of that.

   The photographs are black tuxedo and black gown, so the page is dark here in
   every colourway; the colourway shows in the TINT of the scrim and in the
   accent colour. Type is ivory and sits LOW, over the black clothing, so it
   never crosses a face.
   ══════════════════════════════════════════════════════════════════════════ */

.opening-scene .hero-plate{
  align-items:flex-end;
  /* what shows for the instant before the photograph decodes */
  background:rgb(var(--hp-tint));
  /* clears the scroll cue and the bottom nav */
  padding-bottom:clamp(6.5rem,16vh,9.5rem);
}

.hero-photo{
  position:absolute; inset:0; z-index:0; display:block; overflow:hidden; margin:0;
}
.hero-photo img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  /* keep heads in frame on a wide, short window */
  object-position:50% 9%;
  transform-origin:50% 28%;
  animation:heroDrift 30s cubic-bezier(.22,.6,.3,1) both;
}
@keyframes heroDrift{ from{ transform:scale(1.02) } to{ transform:scale(1.085) } }

/* Legibility is engineered here, not hoped for: the photograph is graded down
   from the bottom (where the type lives) and softly vignetted, and the top is
   darkened a touch so the nav and the dissolve edge sit calmly. */
.hero-photo-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--hp-tint),.5) 0%, rgba(var(--hp-tint),0) 22%),
    linear-gradient(0deg,
      rgba(var(--hp-tint),.95) 0%, rgba(var(--hp-tint),.86) 24%,
      rgba(var(--hp-tint),.44) 50%, rgba(var(--hp-tint),0) 72%),
    radial-gradient(130% 95% at 50% 36%, rgba(var(--hp-tint),0) 54%, rgba(var(--hp-tint),.42) 100%);
}
/* a whisper of grain: it hides the softness of upscaling a 720px source and
   stops the dark gradient banding */
.hero-photo-scrim::after{
  content:""; position:absolute; inset:0; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* the themes' own frames around the type have no place over a photograph */
.opening-scene .hero-plate .hero-type{
  background:none; box-shadow:none; border:0;
}
.opening-scene .hero-plate .hero-type::before,
.opening-scene .hero-plate .hero-type::after{ display:none }

/* ivory type, tinted accents */
.opening-scene .hero-plate .hero-lead{ color:rgba(248,242,233,.94) }
.opening-scene .hero-plate .hero-place{ color:rgba(248,242,233,.82) }
.opening-scene .hero-plate .hero-name{ color:var(--hp-accent) }
.opening-scene .hero-plate .hero-names .hn-one,
.opening-scene .hero-plate .hero-names .hn-two{
  color:#FBF6EE;
  text-shadow:0 2px 30px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.3);
}
.opening-scene .hero-plate .hero-names .hn-amp{ color:var(--hp-accent) }
.opening-scene .hero-plate .hero-dates{
  color:#FBF6EE; text-shadow:0 1px 16px rgba(0,0,0,.6);
}
/* the crest keeps its own artwork; only the plain hairlines are recoloured */
.opening-scene .hero-plate .hair:not(.hair--crest){
  background:var(--hp-accent); opacity:.85;
}

/* the cue that arrives after the dissolve */
.opening-scene .scroll-hint,
.opening-scene .scroll-hint span{ color:rgba(248,242,233,.82) }
.opening-scene .scroll-hint i{ background:rgba(248,242,233,.55) }

/* ── DESKTOP: an editorial lockup, bottom-left ───────────────────────────────
   On a wide screen the couple fill the CENTRE of the frame, so centred type
   lands across her neckline and shoulders — and a heavier scrim cannot fix a
   layout problem. Instead the type is left-aligned and anchored low-left, where
   the frame is dark lawn and black clothing, and both faces are left alone. */
@media (min-aspect-ratio: 1/1){
  .opening-scene .hero-plate{
    justify-content:flex-start;
    padding-left:clamp(2rem,6vw,6.5rem);
    /* The floating 'Now playing' pill pins to the bottom-left of the screen -
       the very corner this lockup lives in - so the lockup has to sit above it.
       Measured: the pill tops out ~118px from the bottom edge. */
    padding-bottom:clamp(7.75rem,17vh,9.5rem);
  }
  .opening-scene .hero-plate .hero-type{
    align-items:flex-start; text-align:left;
    max-width:min(44rem,62vw); padding:0;
  }
  /* text-indent exists to re-centre letter-spaced caps; left-aligned it just
     pushes the first letter off the edge */
  .opening-scene .hero-plate .hero-lead,
  .opening-scene .hero-plate .hero-dates,
  .opening-scene .hero-plate .hero-place,
  .opening-scene .hero-plate .hero-name{ text-indent:0 }
  .opening-scene .hero-plate .hero-lead{ margin-bottom:.4rem }
  .opening-scene .hero-plate .hero-names{
    flex-direction:row; align-items:baseline; justify-content:flex-start;
    gap:clamp(.7rem,1.8vw,1.3rem);
  }
  .opening-scene .hero-plate .hero-names .hn-one,
  .opening-scene .hero-plate .hero-names .hn-two{
    font-size:clamp(3rem,5.4vw,5.6rem); padding-left:0;
  }
  .opening-scene .hero-plate .hair--crest,
  .opening-scene .hero-plate .hero-mono{ display:none }
  .opening-scene .hero-plate .hero-type .hair:not(.hair--crest){ margin:1.1rem 0 1rem }
  .opening-scene .hero-plate .hero-place{ margin-top:.45rem }
  /* extra weight in the corner the type lives in */
  .hero-photo-scrim{
    background:
      radial-gradient(85% 75% at 0% 100%, rgba(var(--hp-tint),.9) 0%, rgba(var(--hp-tint),.55) 45%, rgba(var(--hp-tint),0) 78%),
      linear-gradient(180deg, rgba(var(--hp-tint),.5) 0%, rgba(var(--hp-tint),0) 22%),
      linear-gradient(0deg, rgba(var(--hp-tint),.9) 0%, rgba(var(--hp-tint),.5) 26%, rgba(var(--hp-tint),0) 54%),
      radial-gradient(130% 95% at 50% 36%, rgba(var(--hp-tint),0) 56%, rgba(var(--hp-tint),.4) 100%);
  }
}

/* short phones: the stack has to fit beneath the faces */
@media (max-height:720px){
  .opening-scene .hero-plate{ padding-bottom:clamp(5rem,13vh,7rem) }
  .opening-scene .hero-plate .hair--crest{ display:none }
  .opening-scene .hero-plate .hero-type .hair:not(.hair--crest){ margin:1.1rem auto 1rem }
  .opening-scene .hero-plate .hero-mono{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .hero-photo img{ animation:none; transform:scale(1.03) }
}