/* Keep the campus photography present throughout the school-life collage. */
.home-hero-track { --home-stage-height: calc(100svh - 5rem); position: relative; background: #262626; }
.hero-story { position: relative; isolation: isolate; height: var(--home-stage-height); min-height: 640px; overflow: clip; background: #262626; }
.home-hero-track.is-pinned { height: calc(var(--home-stage-height) + var(--home-pin-distance)); }
.home-hero-track.is-pinned .hero-story { position: sticky; top: var(--home-header-height); min-height: 0; }
.hero-story-campus { position: absolute; inset: 0; z-index: -2; }
.hero-story-campus img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero-story-campus::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #17171766, #171717b8 48%, #171717d6); }
.hero-story-cover { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.hero-story-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero-story-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #17171740 0%, #171717a6 42%, #171717bf 75%, #171717d6 100%); }
.hero-cover-caption { position: absolute; z-index: 1; top: 28px; left: 32px; color: #ffffff; font-size: .65rem; font-weight: 600; letter-spacing: .14em; text-shadow: 0 1px 12px #0009; }
.hero-cover-title { display: none; position: absolute; z-index: 1; top: 65%; left: 15%; right: 15%; color: #fff; text-align: center; font-size: clamp(2rem, 3.35vw, 4rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.13; }
.has-motion .hero-cover-title { display: block; }
.hero-story-foreground { position: absolute; z-index: 3; top: 35%; left: 25%; width: 50%; text-align: center; color: #ffffff; }
.hero-story-eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px; color: #e5e5e5; font-size: .65rem; font-weight: 700; letter-spacing: .22em; }
.hero-story-eyebrow::before, .hero-story-eyebrow::after { content: ''; width: 28px; height: 1px; flex-shrink: 0; background: currentColor; opacity: .65; }
.hero-story h1 { margin: 0; font-size: clamp(2.75rem, 5.2vw, 5.5rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.04; text-wrap: balance; color: inherit; }
.hero-story-intro { margin: 24px auto 0; max-width: 410px; color: #f5f5f5; font-size: .95rem; line-height: 1.8; text-wrap: pretty; }
.hero-story-discover { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 14px 24px; margin-top: 24px; border: 1px solid transparent; border-radius: 6px; background: #ffffff; color: #262626; font-size: .8rem; font-weight: 700; transition: background .2s, transform .2s; }
.hero-story-discover:hover { background: #eeeeee; transform: translateY(-2px); }
.hero-story-discover:focus-visible, .home-hero-visit:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.hero-story-photos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-story-photo { position: absolute; margin: 0; border: 5px solid #ffffff; border-radius: 4px; background: #ffffff; box-shadow: 0 14px 40px #0003; overflow: hidden; }
.hero-story-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-story-photo figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero-photo-1 { top: 27%; left: -8%; width: 17%; height: 33%; }
.hero-photo-2 { top: 27%; right: -8%; width: 17%; height: 33%; }
.hero-photo-3 { top: 72%; left: 2%; width: 19%; height: 30%; }
.hero-photo-4 { top: 72%; right: 2%; width: 19%; height: 30%; }
.hero-photo-5 { top: 112%; left: 8%; width: 20%; height: 32%; }
.hero-photo-6 { top: 112%; right: 8%; width: 20%; height: 32%; }
.hero-story-footnote { position: absolute; z-index: 4; bottom: 26px; left: 27%; right: 27%; display: flex; justify-content: space-between; gap: 16px; color: #e5e5e5; font-size: .55rem; letter-spacing: .13em; }
.hero-scroll-label > span { padding-left: 8px; font-size: 1rem; }
.home-hero-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #ffffff20; }
.home-hero-progress > span { display: block; height: 100%; background: #ffffff; transform: scaleX(var(--home-scroll, 0)); transform-origin: left; }
.has-motion .hero-story-cover { opacity: calc(1 - var(--home-reveal, 0)); transform: scale(calc(1 + var(--home-motion, 0) * .045)); will-change: opacity, transform; }
.has-motion .hero-story-foreground { transform: translateY(calc(var(--home-motion, 0) * -48px)); }
.has-motion .hero-cover-caption { opacity: calc(1 - var(--home-reveal, 0)); }
.has-motion .hero-photo-1, .has-motion .hero-photo-2 { transform: translateY(calc(var(--home-motion, 0) * -160%)); }
.has-motion .hero-photo-3, .has-motion .hero-photo-4 { transform: translateY(calc(var(--home-motion, 0) * -225%)); }
.has-motion .hero-photo-5, .has-motion .hero-photo-6 { transform: translateY(calc(var(--home-motion, 0) * -130%)); }
.hero-story:not(.has-motion) .hero-photo-5, .hero-story:not(.has-motion) .hero-photo-6 { display: none; }
.hero-story:not(.has-motion) .hero-story-footnote { display: none; }
@media (max-width: 767px), (max-height: 600px) {
    .hero-story { height: auto; min-height: 0; padding: 0 16px 22px; }
    .hero-story-campus { display: none; }
    .hero-story-cover { inset: 12px 12px auto; height: 440px; }
    .hero-cover-caption { top: 20px; left: 20px; font-size: .55rem; }
    .hero-story-foreground { position: relative; top: auto; left: auto; width: 100%; min-height: 452px; padding: 155px 20px 36px; }
    .hero-story h1 { max-width: 520px; margin-inline: auto; font-size: clamp(2rem, 7vw, 3rem); }
    .hero-story-eyebrow { font-size: .6rem; }
    .hero-story-intro { margin-top: 16px; font-size: .8rem; }
    .hero-story-discover { margin-top: 18px; }
    .hero-story-photos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: -16px; z-index: 4; }
    .hero-story-photo { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1.05; border-width: 3px; }
    .hero-story:not(.has-motion) .hero-photo-5, .hero-story:not(.has-motion) .hero-photo-6 { display: block; }
    .hero-story-footnote, .home-hero-progress { display: none; }
}
@media (max-width: 767px) {
    .hero-story-photos { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-story-discover { transition: none; }
    .hero-story-discover:hover { transform: none; }
}