/* Shared company/guide hero; company is the reference for sizing and rhythm. */
.story main > .editorial-hero {
  min-height:calc(100svh - var(--header-height));
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:24px;
  padding:40px var(--gutter) 0;
}
.story main .editorial-hero .story-hero-head {
  align-self:center;
  align-items:center;
  gap:16px;
  max-width:950px;
}
.story main .editorial-hero .display {
  font-size:clamp(32px,3.6vw,56px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.story main .editorial-hero .caption {
  color:var(--muted);
  letter-spacing:.12em;
}
.story main .editorial-hero .story-hero-body {
  grid-column:auto;
  grid-row:auto;
  align-self:center;
  align-items:center;
  max-width:720px;
  padding:0;
  border:0;
  gap:12px;
}
.story main .editorial-hero .story-hero-body p {
  font-size:16px;
  line-height:1.5;
}
.story main .editorial-hero .story-hero-body .hero-lead {
  font-size:20px;
  font-weight:400;
  line-height:1.4;
}
.story main .editorial-hero .section-actions { margin:30px 0 0; }
.story main .editorial-hero > .plate {
  flex:1 1 180px;
  min-height:160px;
  max-height:240px;
  width:min(800px,100%);
  margin-top:8px;
}
.story main .editorial-hero .plate-media {
  width:100%;
  height:100%;
  min-height:160px;
}
@media(min-width:1440px) {
  .story main > .editorial-hero { padding-inline:var(--content-inset); }
}
@media(max-width:760px) {
  .story main > .editorial-hero { padding-bottom:76px; }
  .story main .editorial-hero .story-hero-body .hero-lead { font-size:18px; }
  .story main .editorial-hero > .plate { flex-basis:160px; }
  .story main .editorial-hero .scroll-cue { bottom:12px; }
}

/* Dark media hero (full-bleed image, video or canvas behind the copy): light type.
   Common modifier for any editorial hero — add .is-on-dark to the section. */
.story main > .editorial-hero.is-on-dark { position:relative; isolation:isolate; overflow:hidden; background:#0b0b0b; color:#f4f4f2; }
.story main .editorial-hero.is-on-dark .display { color:#fff; }
.story main .editorial-hero.is-on-dark .caption,
.story main .editorial-hero.is-on-dark .story-hero-body p { color:rgba(244,244,242,.72); }
.story main .editorial-hero.is-on-dark .story-hero-body b,
.story main .editorial-hero.is-on-dark .story-hero-body strong { color:#fff; }
.story main .editorial-hero.is-on-dark .scroll-cue { color:rgba(244,244,242,.7); }
.story main .editorial-hero.is-on-dark .scroll-cue-next { color:rgba(244,244,242,.5); }
.story main .editorial-hero.is-on-dark .scroll-cue-line { background:rgba(244,244,242,.2); }
.story main .editorial-hero.is-on-dark .scroll-cue-line:after { background:#f4f4f2; }
/* Cinematic black point (common to every dark hero): a black→transparent wash rising from the section's bottom.
   Painted after the background host (both sit at z-index:-1), so it lies over the motion and under the copy and scroll cue. */
.story main > .editorial-hero.is-on-dark::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg,#0b0b0b 0%,rgba(11,11,11,.85) 14%,rgba(11,11,11,0) 48%); }
/* hero-bg-loading — dark hero while its background motion loads: the section colour shows at once,
   a small 1px white ring spins at the centre (only if loading takes longer than .4s), and the motion simply takes over when its first frame is drawn (no fade). */
.story main > .editorial-hero.is-on-dark::before { content:""; position:absolute; left:50%; top:50%; z-index:-1; width:20px; height:20px; margin:-10px 0 0 -10px; pointer-events:none; box-sizing:border-box;
  border:1px solid rgba(255,255,255,.16); border-top-color:#fff; border-radius:50%;
  opacity:0; animation:hero-bg-load-spin .9s linear infinite,hero-bg-load-in .3s ease .4s forwards; }
.story main > .editorial-hero.is-on-dark.is-bg-ready::before { content:none; }
@keyframes hero-bg-load-spin { to { transform:rotate(360deg); } }
@keyframes hero-bg-load-in { to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .story main > .editorial-hero.is-on-dark::before { animation:hero-bg-load-in 0s .4s forwards; }
}