html.home-route{scroll-snap-type:y proximity;scroll-behavior:smooth}
.home-route body{overflow-x:clip}
.home-route body>header{position:absolute;inset:0 0 auto;z-index:10;height:88px;padding:22px 32px}
.home-route .intro.custom-home{height:100svh;min-height:0;max-height:none;aspect-ratio:auto;margin:0;isolation:isolate;scroll-snap-align:start;scroll-snap-stop:always;overflow:clip}
.intro-stage{--frame-ratio:1.8823529412;--safe-edge:88px;position:absolute;left:50%;top:50%;width:min(calc(100% - 64px),calc((100svh - var(--safe-edge)*2)*var(--frame-ratio)));aspect-ratio:1280/680;transform:translate(-50%,-50%);transform-origin:center;will-change:transform,opacity}
.intro .intro-stage h1{inset:50% 5% auto;transform:translateY(-50%);margin:0}
.intro-stage .fragment img,.intro-stage .fragment video{transition:none!important;transform:none!important}
.intro.is-arriving .reframe-wordmark{animation:wordmark-arrive 1200ms cubic-bezier(.2,.7,.2,1) both}
.intro.is-arriving .fragment{animation:photo-arrive 1050ms cubic-bezier(.18,.75,.25,1) var(--arrival-delay,180ms) both}
.intro-next{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:40px;height:40px;display:grid;place-items:center;opacity:var(--scroll-fade,1);z-index:4}
.intro-next svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.intro.is-arriving .intro-next svg{animation:cue-arrive 800ms ease 1100ms both}
.home-route .archive{scroll-snap-align:start;min-height:100svh;padding-top:12px;padding-bottom:32px}
.home-route .preview-bar{position:fixed;bottom:12px;left:12px;z-index:30;background:#f3f3efed;border:1px solid #ddd;font-size:10px;padding:8px 12px}
@keyframes wordmark-arrive{from{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes photo-arrive{from{opacity:0;transform:translateY(18px) scale(.88)}to{opacity:1;transform:none}}
@keyframes cue-arrive{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.project-cover.project-card{position:relative;overflow:hidden;isolation:isolate}
.project-cover.project-card img,.project-cover.project-card video,.project-cover.project-card:hover img,.project-cover.project-card:hover video,.project-cover.project-card:focus-visible img{transform:none!important;transition:none!important}
.project-card::after{content:'';position:absolute;inset:0;background:#000;opacity:0;transition:opacity 260ms ease;pointer-events:none;z-index:1}
.project-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:clamp(18px,2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:#fff;opacity:0;transition:opacity 260ms ease;pointer-events:none;z-index:2}
@media(hover:hover) and (pointer:fine){.project-card:hover::after{opacity:.48}.project-card:hover .project-title{opacity:1}body,body a,body button,body [role=button],body .project-media img,body .project-media video{cursor:url('/branding/reframe-cursor.svg') 9 8,auto}}
.project-card:focus-visible::after,.project-card:active::after{opacity:.48}.project-card:focus-visible .project-title,.project-card:active .project-title{opacity:1}
.project-card.will-reveal{opacity:0;transform:translateY(26px);transition:opacity 700ms ease var(--reveal-delay,0ms),transform 700ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.project-card.will-reveal.is-revealed{opacity:1;transform:none}
@media(max-width:800px){.home-route body>header{height:80px;padding:20px 24px}.intro-stage{--frame-ratio:1.0628571429;--safe-edge:80px;width:min(calc(100% - 40px),calc((100svh - var(--safe-edge)*2)*var(--frame-ratio)));aspect-ratio:744/700}.intro .intro-stage h1{left:0;right:0}.home-route .archive{padding-top:8px}}
@media(max-width:480px){.home-route body>header{height:72px;padding:18px 20px}.intro-stage{--frame-ratio:.6;--safe-edge:72px;width:min(calc(100% - 32px),calc((100svh - var(--safe-edge)*2)*var(--frame-ratio)));aspect-ratio:390/650}.intro-next{bottom:12px}.project-title{font-size:18px;padding:14px}}
@media(max-height:500px) and (min-width:481px){.home-route body>header{height:56px;padding:12px 22px}.home-route .brand img{width:32px;height:29px}.intro-stage{--safe-edge:58px}.intro-next{bottom:5px;height:32px}.intro-next svg{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){html.home-route{scroll-behavior:auto;scroll-snap-type:none}.intro.is-arriving .reframe-wordmark,.intro.is-arriving .fragment,.intro.is-arriving .intro-next svg{animation:none!important}.intro-stage{will-change:auto}.project-card::after,.project-title{transition:none}.project-card.will-reveal{opacity:1;transform:none;transition:none}}

html.home-route.restoring-work{scroll-behavior:auto!important;scroll-snap-type:none!important}
