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 .fragment,.intro.is-arriving .intro-next svg{opacity:0}
.intro.is-arriving.is-opening .fragment{animation:photo-arrive 900ms ease var(--arrival-delay,1900ms) 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.is-opening .intro-next svg{animation:cue-arrive 800ms ease 2500ms both}
.home-route .archive{scroll-snap-align:start;min-height:100svh;padding-top:calc(var(--site-header-height,52px) + var(--feed-top-gap,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 photo-arrive{from{opacity:0}to{opacity:1}}
@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{opacity:.48}.project-card:focus-visible .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}}
@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}

/* The media canvas fills the viewport; the wordmark keeps its original stage. */
.intro.custom-home{container-type:inline-size}
.intro-media{position:absolute;left:50%;top:0;transform:translateX(-50%);width:calc(100cqw - 48px);height:100%;z-index:2}
@media(max-width:800px){.intro-media{width:calc(100cqw - 28px)}}
.project-media.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-media.will-reveal.is-revealed{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.project-media.will-reveal{opacity:1;transform:none;transition:none}}

/* Letters rise into an enlarged wordmark, which settles before the posts appear. */
.reframe-wordmark{position:relative}
.reframe-wordmark.is-letter-reveal{color:transparent}
.wordmark-letters{position:absolute;inset:0;color:var(--page-ink,#141414);pointer-events:none;transform-origin:center;animation:wordmark-settle 550ms cubic-bezier(.22,.68,0,1) 1250ms both}
.wordmark-letter{position:absolute;top:0;animation:letter-rise 600ms cubic-bezier(.22,.68,0,1) var(--letter-delay,0ms) both}
@keyframes letter-rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:translateY(0)}}
@keyframes wordmark-settle{from{transform:scale(var(--intro-scale,1.18))}to{transform:scale(1)}}
.intro .fragment{translate:var(--depth-x,0px) var(--depth-y,0px);transition:translate 650ms cubic-bezier(.2,.7,.2,1)}
.page-text-reveal{animation:page-text-fade 800ms ease var(--text-delay,0ms) both}
.page-photo-reveal{animation:page-text-fade 800ms ease 130ms both}
@media(prefers-reduced-motion:reduce){.page-photo-reveal{animation:none;opacity:1}}
.project-transitioning .page-text-reveal{animation-play-state:paused}
@keyframes page-text-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.intro .fragment{translate:none!important;transition:none!important}.reframe-wordmark.is-letter-reveal{color:inherit}.wordmark-letters{display:none}.intro.is-arriving .fragment,.intro.is-arriving .intro-next svg{opacity:1}.page-text-reveal{animation:none;opacity:1}}

.wordmark-letters.is-measuring,.wordmark-letters.is-measuring .wordmark-letter{animation:none!important;transform:none!important;visibility:hidden}

.wordmark-letters.is-settled{animation:none;transform:scale(1)}
.wordmark-letters.is-settled .wordmark-letter{animation:none;transform:translateY(0);opacity:1}

/* Atomic inline cards keep Safari column starts flush, without carried block margins. */
.archive{font-size:0;line-height:0}
.archive .project-card{display:inline-block;width:100%;vertical-align:top;line-height:normal}
@media(max-width:480px){
 .home-route body>header .brand img,.single-page body>header .brand img,body>header .brand img{width:18px;height:18px}
 body>header .brand{display:flex;align-items:center;min-width:32px;min-height:44px}
}

/* Touch scrolling must not compete with snap positioning or cover fade layers. */
.archive .project-card>img,.archive .project-card>video{pointer-events:none}
@media(hover:none),(pointer:coarse){
 html.home-route{scroll-snap-type:none}
 .archive .project-card{opacity:1;transform:none;transition:none;isolation:auto;z-index:0}
 .project-card::after,.project-title{transition:none}
}

/* Touch devices keep covers clear, including any emulated hover/focus state. */
@media(hover:none),(pointer:coarse){.archive .project-card::after,.archive .project-card .project-title{display:none!important;opacity:0!important}}

html.intro-scroll-locked,html.intro-scroll-locked body{overflow:hidden!important;overscroll-behavior:none}
html.intro-scroll-locked .intro-next{pointer-events:none}

/* Reveal a returning homepage only after its saved position is restored. */
html.restoring-work main,html.restoring-work body>header,html.restoring-work #owner-tools{visibility:hidden!important;pointer-events:none!important}

/* Keep both overlay layers present so scrolling crossfades in either direction. */
@media(max-width:480px){
 .archive .project-card::after{display:block!important;transition:opacity 550ms cubic-bezier(.22,.61,.36,1)}
 .archive .project-card .project-title{display:flex!important;transition:opacity 550ms cubic-bezier(.22,.61,.36,1)}
 .archive .project-card.phone-centred::after{opacity:.42!important}
 .archive .project-card.phone-centred .project-title{opacity:1!important}
}
@media(max-width:480px) and (prefers-reduced-motion:reduce){.archive .project-card::after,.archive .project-card .project-title{transition:none}}