:root { --ink:#171713; --paper:#f1f0ec; --accent:#9b493c; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; }
body { overflow:hidden; background:var(--paper); color:var(--ink); font-family:"Songti SC","STSong","Iowan Old Style",Georgia,serif; }
a { color:inherit; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:10px 14px; background:var(--ink); color:#fff; opacity:0; transform:translateY(-150%); transition:transform 180ms ease,opacity 180ms ease; }
.skip-link:focus { opacity:1; transform:translateY(0); }
.page-scroll { width:100vw; height:100vh; height:100svh; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scroll-behavior:smooth; scroll-snap-type:y mandatory; scrollbar-width:none; }
.page-scroll::-webkit-scrollbar { display:none; }
.scene { position:relative; width:100vw; height:100vh; height:100svh; min-height:560px; overflow:hidden; isolation:isolate; background-color:var(--paper); background-image:radial-gradient(circle,rgba(23,23,19,.14) 1.2px,transparent 1.35px); background-size:20px 20px; scroll-snap-align:start; scroll-snap-stop:always; }
.scene::before { position:absolute; inset:0; z-index:-1; content:""; pointer-events:none; background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.9),rgba(241,240,236,0) 44%); }
.hero-copy { position:absolute; top:clamp(68px,9.5vh,112px); left:50%; z-index:20; width:min(950px,90vw); transform:translateX(-50%); text-align:center; pointer-events:none; }
.eyebrow,.project-number { margin:0 0 14px; color:rgba(23,23,19,.58); font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; }
.hero-copy h1 { margin:0; font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:clamp(48px,5.5vw,98px); font-weight:500; line-height:.92; letter-spacing:-.05em; }
.hero-copy h1 em { color:var(--accent); font-style:italic; }
.hero-lede { max-width:420px; margin:24px auto 0; font-size:16px; line-height:1.55; }
.corridor { position:absolute; top:21%; left:0; z-index:10; width:100%; height:58%; perspective:850px; perspective-origin:50% 50%; pointer-events:none; }
.corridor-glow { position:absolute; top:50%; left:50%; width:34vw; height:22vw; border-radius:50%; background:rgba(255,255,255,.52); filter:blur(55px); transform:translate(-50%,-50%); }
.center-aperture { --open:0; position:absolute; top:50%; left:50%; z-index:5; width:clamp(190px,15vw,288px); height:clamp(52px,5.6vw,108px); border-radius:8px; background:#171715; opacity:0; transform:translate(-50%,-50%) scaleX(var(--open)); will-change:transform,opacity; }
.color-card { --x:0px; --scale:.27; --rotate:0deg; --birth:0; --base-shift:-50%; --origin-x:50%; position:absolute; top:50%; left:50%; width:clamp(168px,12.5vw,240px); aspect-ratio:3/4; border-radius:8px; background:#171715 center/cover no-repeat; opacity:0; transform:translate3d(calc(var(--base-shift) + var(--x)),-50%,0) rotateY(var(--rotate)) scale(var(--scale)) scale(var(--birth)); transform-origin:var(--origin-x) 50%; backface-visibility:hidden; transition:filter 280ms ease-out,opacity 180ms ease-out; will-change:transform,opacity; }
.color-card.is-preview { filter:blur(8px) saturate(.82); }
.color-card.is-loaded { filter:blur(0) saturate(1); }
.scroll-prompt { position:absolute; bottom:max(30px,calc(3.5vh + env(safe-area-inset-bottom))); left:50%; z-index:20; display:flex; align-items:center; gap:10px; transform:translateX(-50%); color:rgba(23,23,19,.62); font-family:"SFMono-Regular",Consolas,monospace; font-size:11px; letter-spacing:.1em; white-space:nowrap; }
.scroll-prompt svg,.project-action svg { width:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.shared-card-stage { position:fixed; top:var(--stage-top,0px); left:var(--stage-left,0px); width:var(--stage-width,100vw); height:var(--stage-height,100svh); z-index:30; overflow:hidden; opacity:1; visibility:visible; pointer-events:none; transition:opacity 220ms ease-out,visibility 0s linear; }
.shared-card-stage.is-hidden { opacity:0; visibility:hidden; transition:opacity 180ms ease-out,visibility 0s linear 180ms; }
.shared-card { display:block; position:absolute; top:50%; left:50%; width:var(--shared-card-width,300px); height:var(--shared-card-height,450px); object-fit:contain; opacity:1; transform:translate(-50%,-50%); will-change:transform,opacity; }
.shared-card-stage.is-second .shared-card { animation:card-enter 1050ms var(--ease) var(--delay) both; }
.shared-card-stage.is-third .shared-card { animation:card-third 850ms var(--ease) var(--delay) both; }
.shared-card-stage.is-fourth .shared-card { transform:translate(-50%,-50%); }
.shared-card-stage.is-fourth .shared-card:not(:last-child) { opacity:0; }
.shared-card-stage.is-fourth .shared-card:last-child { animation:card-fourth 800ms var(--ease) both; }
.shared-card-stage.is-single .shared-card { display:none; animation:none; }
.shared-card-stage.is-single .shared-card:last-child { display:block; transform:translate(-50%,-50%); animation:card-fourth 800ms var(--ease) both; }
@keyframes card-enter { from { transform:translate(-50%,calc(-50% + 62vh)) scale(1.06); } to { transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rotate)); } }
@keyframes card-third { from { transform:translate(-50%,-50%); } to { transform:translate(calc(-50% + var(--third-x)),calc(-50% + var(--third-y))) rotate(var(--third-rotate)); } }
@keyframes card-fourth { from { transform:translate(-50%,-50%) scale(.82); } to { transform:translate(-50%,-50%) scale(1); } }
.project-scene { min-height:0; isolation:auto; display:flex; align-items:flex-start; padding:clamp(82px,14vh,150px) clamp(24px,9vw,174px); }
.project-copy { position:relative; z-index:40; max-width:min(700px,64vw); opacity:0; transform:translateY(34px); }
.project-scene.is-active .project-copy { animation:copy-in 650ms var(--ease) 180ms both; }
.project-number { color:var(--accent); }
.project-copy h2 { margin:0; font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:clamp(62px,6.4vw,118px); font-weight:500; line-height:.86; letter-spacing:-.06em; }
.project-action { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; min-height: 44px; margin-top:30px; padding:12px 16px 12px 18px; border:1px solid var(--ink); background:var(--ink); color:#fff; font-family:"SFMono-Regular",Consolas,monospace; font-size:13px; letter-spacing:.06em; text-decoration:none; touch-action:manipulation; transition:background-color 180ms ease,color 180ms ease,transform 180ms ease; }
.project-action:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.project-action:active { transform:translateY(0) scale(.98); }
.project-action:focus-visible { outline:3px solid #2563eb; outline-offset:4px; }
@keyframes copy-in { to { opacity:1; transform:translateY(0); } }
@media (max-width: 760px) { .scene { min-height:540px; background-size:16px 16px; } .hero-copy { top:max(56px,env(safe-area-inset-top)); width:90vw; } .hero-copy h1 { font-size:clamp(46px,12vw,68px); line-height:.94; } .hero-lede { max-width:300px; margin-top:20px; font-size:15px; } .corridor { top:27%; height:51%; } .color-card { width:clamp(132px,38vw,205px); } .project-scene { min-height:0; align-items:flex-start; padding:clamp(94px,18vh,150px) 24px; } .project-copy { max-width:92vw; } .project-copy h2 { font-size:clamp(58px,15vw,84px); } .project-action { margin-top:26px; padding-top:11px; padding-bottom:11px; } }
@media (max-height:600px) { .project-scene { padding-block:24px; } .project-number { margin-bottom:8px; } .project-copy h2 { font-size:clamp(32px,6vw,58px); } .project-action { margin-top:14px; } }
@media (max-height:640px) and (min-width:761px) { .hero-copy { top:46px; } .hero-copy h1 { font-size:clamp(44px,5vw,70px); } .hero-lede { margin-top:14px; } .corridor { top:19%; height:64%; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .shared-card,.project-copy { animation-delay:0s !important; } }
@media (prefers-reduced-transparency: reduce) { .scene::before { background:transparent; } .corridor-glow { display:none; } }