/* Hero scene. The HTML remains complete without this progressive enhancement. */
.hero-type-block:not(.hero-aside) { position:relative; }
@media(max-width:640px) { .hero-aside.hero-type-block { position:relative; } }
.hero-type-source { display:block;padding-bottom:calc(var(--space-1) / 2); }
.hero .hero-type-visual { display:none;position:absolute;inset:0;pointer-events:none; }
.hero-staging .hero-type-source { opacity:0; }
.hero-staging .hero-type-visual { display:block; }
.hero-type-visual > span { display:inline; }
.hero .hero-type-caret { display:inline-block;width:1px;height:.85em;margin-left:.035em;background:currentColor;vertical-align:baseline; }
.hero-staging { overflow:clip; }
.hero-staging[data-hero-step='0'] .hero-photo { opacity:0; }
.hero-staging:not([data-hero-step='2']) .hero-copy a,
.hero-staging:not([data-hero-step='2']) .scroll-cue { opacity:0; }
.hero-runway-held { height:calc(220svh - var(--hero-header,72px)); }
.hero-runway-held > .hero { position:sticky;top:var(--hero-header,72px); }
@media(prefers-reduced-motion:reduce) {
 .hero-runway-held { height:auto; }
 .hero-runway-held > .hero { position:static; }
 .hero-staging .hero-type-source { opacity:1; }
 .hero-staging .hero-type-visual { display:none; }
 .hero-staging .hero-photo,.hero-staging .hero-copy a,.hero-staging .scroll-cue { opacity:1!important; }
}
@media print {
 .hero-runway-held { height:auto!important; }
 .hero-runway-held > .hero { position:static!important;height:auto!important; }
 .hero-type-source { opacity:1!important; }
 .hero-type-visual { display:none!important; }
 .hero .hero-photo,.hero .hero-copy a,.hero .scroll-cue { opacity:1!important; }
}

/* Reversible phone flow; only items leaving below the reading area collapse. */
.hero-flow .flow-pending { opacity:0;pointer-events:none; }
.hero-staging:not([data-hero-step='2']) .hero-copy a,
.hero-staging:not([data-hero-step='2']) .scroll-cue { pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .hero-flow .flow-pending { opacity:1!important; } }
@media print { .hero-flow .flow-pending { opacity:1!important; } }
/* Reserve the full last mask, including g/р descenders, in the H1 box. */
.hero .hero-title { padding-bottom:.3em; }
.hero { min-height:0; }

/* A very short desktop window uses readable flow, just like a low tablet. */
@media(min-width:901px) and (max-height:599px) {
 .hero { height:auto;min-height:0; }
 .hero-photos { grid-template-columns:minmax(0,1fr);height:auto; }
 .hero-photo { height:auto; }
 .hero-photo-secondary { display:none; }
 .hero-photo img { height:auto;aspect-ratio:auto;object-fit:contain; }
}