/* Portrait and identity refresh */
.hero-identity{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5%;padding-top:26px;isolation:isolate}
.hero-identity h1{font-size:clamp(60px,8.4vw,134px);line-height:1.08;letter-spacing:-.025em;white-space:normal;max-width:6ch;padding:16px 0 32px;overflow-wrap:normal}
.hero-portrait{width:100%;max-width:460px;height:auto;justify-self:center;align-self:end;mix-blend-mode:multiply}
.hero-quote{padding:48px 0 40px}
.wordmark{position:relative;display:block;width:190px;height:48px;flex:0 0 190px;letter-spacing:-1px}
.logo-short,.logo-full{position:absolute;left:0;top:50%;white-space:nowrap;transform:translateY(-50%)}
.logo-short{font-size:43px;animation:logo-short-cycle 8s ease-in-out infinite}
.logo-full{font-size:27px;letter-spacing:-.5px;opacity:0;animation:logo-full-cycle 8s ease-in-out infinite}
@keyframes logo-short-cycle{0%,25%,95%,100%{opacity:1;transform:translateY(-50%)}35%,85%{opacity:0;transform:translateY(-65%)}}
@keyframes logo-full-cycle{0%,25%,95%,100%{opacity:0;transform:translateY(-35%)}35%,85%{opacity:1;transform:translateY(-50%)}}
.wordmark:hover .logo-short,.wordmark:hover .logo-full,.wordmark:focus-visible .logo-short,.wordmark:focus-visible .logo-full{animation-play-state:paused}
@media(max-width:1000px) and (min-width:601px){.header-caption{display:none}}
@media(max-width:600px){
 .wordmark{width:158px;flex-basis:158px;height:42px}
 .logo-short{font-size:36px}.logo-full{font-size:23px}
 .header-caption{display:none}
 .hero-quote{padding:62px 10px 36px}
 .hero-identity{grid-template-columns:1fr;gap:10px;padding-top:24px}
 .hero-identity h1{font-size:clamp(58px,16vw,86px);max-width:6ch;padding:0;line-height:1.04}
 .hero-portrait{width:88%;max-width:330px;justify-self:end}
}
@media(prefers-reduced-motion:reduce){.logo-short{opacity:1;transform:translateY(-50%)}.logo-full{display:none}}