body.home-page{height:100vh;height:100dvh;overflow:hidden;background:var(--cosmic)}
body.home-page,body.home-page *{cursor:default!important}
body.home-page button:not(:disabled),body.home-page a[href]{cursor:pointer!important}
.home-shell{position:relative;height:100%;overflow:hidden;isolation:isolate;background:var(--cosmic);touch-action:pan-y}
.home-wallpaper{position:absolute;inset:0;z-index:0;width:100%;height:100%;border:0;pointer-events:none;transform:translate3d(0,0,0) scale(1.1);transition:transform 900ms var(--ease);will-change:transform}
.home-shell[data-state="onboarding"] .home-wallpaper{transform:translate3d(-2.2%,0,0) scale(1.1)}
.home-shell[data-state="camera"] .home-wallpaper{transform:translate3d(-4.4%,0,0) scale(1.1)}
.home-shell[data-state="slice"] .home-wallpaper{transform:translate3d(-6.6%,0,0) scale(1.1)}
.home-state{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity var(--motion-deck) var(--ease),visibility var(--motion-deck)}
.home-shell[data-state="home"] .home-state[data-view="home"],.home-shell[data-state="onboarding"] .home-state[data-view="onboarding"],.home-shell[data-state="camera"] .home-state[data-view="camera"],.home-shell[data-state="slice"] .home-state[data-view="slice"]{opacity:1;visibility:visible}
.home-intro{pointer-events:none;--portrait-left:50%;--portrait-top:auto;--portrait-bottom:-13.2vh;--portrait-width:min(72.6vw,1232px);--portrait-height:110vh}
.home-portrait,.home-intro::after{position:absolute;left:var(--portrait-left);top:var(--portrait-top);bottom:var(--portrait-bottom);transform:translateX(-50%);width:var(--portrait-width);max-width:none;height:var(--portrait-height);object-fit:contain;object-position:center bottom}
.home-portrait{z-index:1;mix-blend-mode:luminosity;filter:grayscale(1) contrast(1.08) brightness(.96);opacity:.86}
.home-intro::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 54%,rgba(126,70,199,.26),rgba(14,5,32,.02) 54%),linear-gradient(180deg,rgba(41,17,78,.18),rgba(14,5,32,.08));pointer-events:none}
.home-intro::after{content:"";z-index:1;background:#9258d5;opacity:.28;mix-blend-mode:normal;pointer-events:none;-webkit-mask:url("../assets/home/homepage-portrait2.webp") center bottom/contain no-repeat;mask:url("../assets/home/homepage-portrait2.webp") center bottom/contain no-repeat}
.home-identity{position:absolute;z-index:2;left:50%;top:79%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:12px;width:min(70vw,620px)}
.home-wordmark{width:min(39vw,520px);height:auto}.home-tagline{font:400 clamp(14px,1.05vw,20px)/1.2 var(--font-display);color:var(--brand-lilac)}
.home-project{background:#181112}.home-project::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.24) 48%,rgba(0,0,0,.98) 100%)}
.home-project-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.home-project[data-view="onboarding"]{background:var(--onboarding-hero)}
.home-project[data-view="onboarding"] .home-project-media{object-fit:cover;object-position:center}.home-project[data-view="camera"] .home-project-media{object-position:center 52%}.home-project[data-view="slice"]{background:var(--slice-deep)}
.home-shell[data-direction="next"][data-state="onboarding"] .home-project[data-view="onboarding"] .home-project-media,.home-shell[data-direction="next"][data-state="camera"] .home-project[data-view="camera"] .home-project-media,.home-shell[data-direction="next"][data-state="slice"] .home-project[data-view="slice"] .home-project-media{animation:home-background-enter-next 900ms var(--ease) both}
.home-shell[data-direction="prev"][data-state="onboarding"] .home-project[data-view="onboarding"] .home-project-media,.home-shell[data-direction="prev"][data-state="camera"] .home-project[data-view="camera"] .home-project-media,.home-shell[data-direction="prev"][data-state="slice"] .home-project[data-view="slice"] .home-project-media{animation:home-background-enter-prev 900ms var(--ease) both}
.home-identity{opacity:0}
.home-project-copy,.home-project-action{opacity:0;transform:translateY(28px)}
.home-shell[data-state="home"] .home-identity{animation:home-identity-enter 720ms var(--ease) 80ms both}
.home-shell[data-state="onboarding"] .home-project[data-view="onboarding"]::after,.home-shell[data-state="camera"] .home-project[data-view="camera"]::after,.home-shell[data-state="slice"] .home-project[data-view="slice"]::after{animation:home-gradient-enter 820ms var(--ease) both}
.home-shell[data-state="onboarding"] .home-project[data-view="onboarding"] .home-project-copy,.home-shell[data-state="camera"] .home-project[data-view="camera"] .home-project-copy,.home-shell[data-state="slice"] .home-project[data-view="slice"] .home-project-copy{animation:home-text-enter 700ms var(--ease) 120ms both}
.home-shell[data-state="onboarding"] .home-project[data-view="onboarding"] .home-project-action,.home-shell[data-state="camera"] .home-project[data-view="camera"] .home-project-action,.home-shell[data-state="slice"] .home-project[data-view="slice"] .home-project-action{animation:home-text-enter 700ms var(--ease) 210ms both}
@keyframes home-identity-enter{from{opacity:0;transform:translate(-50%,calc(-50% + 28px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes home-text-enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes home-gradient-enter{from{opacity:0}to{opacity:1}}
@keyframes home-background-enter-next{from{opacity:0;transform:translate3d(4%,0,0) scale(1.045)}to{opacity:1;transform:none}}
@keyframes home-background-enter-prev{from{opacity:0;transform:translate3d(-4%,0,0) scale(1.045)}to{opacity:1;transform:none}}
.home-project-copy{position:absolute;z-index:2;left:clamp(24px,5.2vw,100px);bottom:clamp(56px,8.5vh,92px);display:grid;gap:10px}.home-project-copy h2{margin:0;font:700 var(--fs-hero)/1 var(--font-display)}
.home-project-copy p{margin:0;font:700 var(--fs-eye)/1.25 var(--font-display);color:#fff}.home-project-action{position:absolute;z-index:2;right:clamp(24px,5.2vw,100px);bottom:clamp(56px,8.5vh,92px);display:grid;justify-items:end;gap:34px;max-width:520px;text-align:right;font:700 var(--fs-eye)/1.2 var(--font-body)}.home-project-action p{margin:0;color:rgba(255,255,255,.78)}.home-project-action span{font-family:var(--font-display)}.home-project-action kbd{padding:8px 11px;border:1px solid #fff;border-radius:var(--radius-control);font:inherit;background:transparent}
.home-nav{position:absolute;z-index:20;top:clamp(18px,5.1vh,55px);left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:clamp(14px,3.12vw,60px)}
.home-tile{--size:clamp(58px,7.08vw,136px);width:var(--size);height:var(--size);padding:0;display:grid;place-items:center;border-radius:clamp(16px,1.875vw,36px);background:rgba(0,0,0,.8);box-shadow:0 10px 34px rgba(0,0,0,.34);transition:width var(--motion-standard) var(--ease),height var(--motion-standard) var(--ease),background var(--motion-standard),transform var(--motion-fast)}
.home-tile:hover{transform:translateY(-3px)}.home-tile img{width:62%;height:62%;object-fit:contain}.home-tile img:last-child{display:none}.home-tile.is-active{--size:clamp(72px,9.375vw,180px);background:#fff}.home-tile.is-active img:first-child{display:none}.home-tile.is-active img:last-child{display:block}.home-tile:first-child{cursor:default}.home-menu{z-index:24}
.home-tile:nth-child(2):not(.is-active) img:first-child{filter:brightness(0) invert(1)}
.home-hint{position:absolute;z-index:22;left:50%;bottom:clamp(24px,6.5vh,70px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;font:400 clamp(10px,.83vw,16px)/1 var(--font-display);color:rgba(255,255,255,.72)}.home-hint .keycap{height:26px;min-width:26px;padding:0 7px;border:1px solid rgba(255,255,255,.72);border-radius:var(--radius-control);background:transparent;color:inherit;font:inherit;cursor:pointer}.home-hint .keycap:hover{border-color:#fff;color:#fff}.home-hint .keycap:active{transform:translateY(1px)}.home-hint .keycap:disabled{opacity:.38;cursor:default}
.home-shell:not([data-state="home"]) .home-hint{display:none}
.home-menu{top:max(clamp(18px,4.45vh,48px),env(safe-area-inset-top));right:max(var(--edge),env(safe-area-inset-right))}
@media(min-width:768px) and (max-width:1180px){.home-intro{--portrait-bottom:-12vh;--portrait-width:min(84vw,1120px);--portrait-height:114vh}.home-identity{top:80%}}
@media(min-width:1181px) and (max-height:1100px){.home-tile{--size:clamp(58px,5.31vw,102px)}.home-tile.is-active{--size:clamp(72px,7.03vw,135px)}.home-nav{top:clamp(18px,3.8vh,41px);gap:clamp(14px,2.35vw,45px)}}
@media(min-width:768px) and (max-aspect-ratio:4/3){.home-intro{--portrait-bottom:-11vh;--portrait-width:min(92vw,1380px);--portrait-height:118vh}.home-identity{top:80%}}
@media(max-width:767px){.home-intro{--portrait-top:25%;--portrait-bottom:auto;--portrait-width:158vw;--portrait-height:158vw}.home-portrait,.home-intro::after{object-position:center top}.home-identity{top:18%;width:92vw;gap:9px}.home-wordmark{width:90vw;max-width:408px}.home-tagline{font-size:16px}.home-nav{top:auto;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));gap:14px;align-items:flex-end;transform:translateX(-48px)}.home-shell[data-state="onboarding"] .home-nav{transform:translateX(-134px)}.home-shell[data-state="camera"] .home-nav{transform:translateX(-220px)}.home-shell[data-state="slice"] .home-nav{transform:translateX(-306px)}.home-tile{--size:72px;border-radius:21px}.home-tile.is-active{--size:96px;border-radius:27px}.home-hint{display:none!important}.home-project-copy{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(132px,calc(env(safe-area-inset-bottom) + 126px));text-align:center;justify-items:center}.home-project-copy h2{font-size:34px}.home-project-copy p{font-size:14px}.home-project-action{display:none}.home-project[data-view="onboarding"] .home-project-media,.home-project[data-view="camera"] .home-project-media,.home-project[data-view="slice"] .home-project-media{object-position:center}}
@media(max-width:390px){.home-nav{gap:12px}.home-tile{--size:68px}.home-tile.is-active{--size:92px}.home-shell[data-state="home"] .home-nav{transform:translateX(-46px)}.home-shell[data-state="onboarding"] .home-nav{transform:translateX(-126px)}.home-shell[data-state="camera"] .home-nav{transform:translateX(-206px)}.home-shell[data-state="slice"] .home-nav{transform:translateX(-286px)}}
@media(prefers-reduced-motion:reduce){.home-wallpaper{transition:none}.home-tile:hover{transform:none}.home-shell[data-state][data-direction] .home-project-media{animation:none}.home-identity,.home-project-copy,.home-project-action{opacity:1;transform:none}.home-identity{transform:translate(-50%,-50%)}.home-shell[data-state] .home-identity,.home-shell[data-state] .home-project::after,.home-shell[data-state] .home-project-copy,.home-shell[data-state] .home-project-action{animation:none}.home-project::after{opacity:1}}

/* Follow-up: project summaries are body copy, not display-weight labels. */
.home-project-action,.home-project-action p{font-weight:400}
.home-project-action span{font-weight:700}
@media(max-width:767px){.home-intro::after{display:none}}

/* 2026-09-05 follow-up 2: mobile composition uses authored portrait assets. */
@media(max-width:767px){
  .home-intro{--portrait-top:auto;--portrait-bottom:0;--portrait-width:180vw;--portrait-height:auto}
  .home-portrait{object-position:center bottom}
  .home-identity{z-index:12;top:21%}
  .home-nav{bottom:max(48px,calc(env(safe-area-inset-bottom) + 40px))}
  .home-project[data-view="onboarding"] .home-project-media,
  .home-project[data-view="camera"] .home-project-media,
  .home-project[data-view="slice"] .home-project-media{object-fit:cover;object-position:center bottom}
}

.home-nav{transition:transform 520ms var(--ease),gap 520ms var(--ease)}
.home-swipe-hint{display:none}
@media(max-width:767px){
 .home-shell{--mobile-nav-bottom:max(40px,calc(env(safe-area-inset-bottom) + 28px));touch-action:none}
 .home-intro{--portrait-left:44%}
 .home-nav{bottom:var(--mobile-nav-bottom)}
 .home-swipe-hint{position:absolute;z-index:21;display:block;left:16px;right:16px;bottom:calc(var(--mobile-nav-bottom) + 112px);margin:0;text-align:center;font:400 11px/1.3 var(--font-display);color:rgba(255,255,255,.75);pointer-events:none}
 .home-project-copy{bottom:calc(var(--mobile-nav-bottom) + 152px)}
 .home-project-copy h2{font-size:clamp(26px,8vw,34px)}
 .home-project-copy p{font-size:clamp(11px,3.4vw,14px)}
}
.home-tile{transition:width 520ms var(--ease),height 520ms var(--ease),border-radius 520ms var(--ease),background 320ms,transform 520ms var(--ease)}
@media(min-width:768px){.home-intro{--portrait-bottom:-20vh}}
@media(prefers-reduced-motion:reduce){.home-nav,.home-tile{transition:none}}