/* Keep birthday copy grouped below the portrait on every screen size. */
.hero-copy{position:absolute;z-index:5;inset:auto 24px 17%;text-align:center}
.hero-copy h1{display:block;width:auto;font-size:clamp(4.5rem,12vw,8rem);line-height:1.18;letter-spacing:0;margin:8px auto 10px;padding:4px 12px}
.hero-copy>.eyebrow{font-size:.875rem;line-height:1.6;letter-spacing:.18em}
.hero-date{font-size:1rem;line-height:1.65}
.hero-date>span{font-size:.875rem;margin-top:2px}
.hero-shade{z-index:1;background:linear-gradient(180deg,#233d3222 0%,#233d3210 35%,#233d3299 57%,#233d32ee 82%,#233d32f5 100%)}
.hero-photo{animation:hero-living 15s ease-in-out infinite alternate!important}
.hero-copy h1{animation:none!important}
.welcome-photo{background-size:cover;background-position:50% 35%}
@media(max-width:600px){.hero{min-height:640px}.hero-copy{inset:auto 18px 17%}.hero-copy h1{font-size:clamp(4.25rem,19vw,6rem)}.hero-copy>.eyebrow{font-size:.875rem}.music-intro{margin-top:8px}.scroll-cue{bottom:80px}}
@media(max-height:700px){.hero-copy{bottom:15%}.hero-copy h1{font-size:4.25rem;margin:4px auto}.music-intro{margin-top:4px}.scroll-cue{bottom:72px}}
@media(prefers-reduced-motion:reduce){.hero-photo{animation:none!important}}