:root { --blue:#738dc7; --ink:#0643ad; --paper:#f2f0e9; --reveal-duration:3.4s; }
* { box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; }
html,body { width:100%; height:100%; min-height:100%; margin:0; overflow:hidden; -webkit-text-size-adjust:100%; }
body { background:var(--paper); font-family:Arial,Helvetica,sans-serif; }
.home { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; overflow:hidden; background:linear-gradient(#7894c91d 1px,transparent 1px),linear-gradient(90deg,#7894c91d 1px,transparent 1px),radial-gradient(#8ca7d661 .8px,transparent 1px),var(--paper); background-size:168px 168px,168px 168px,9px 9px,auto; }
.hero-copy,.entered-copy { position:fixed; z-index:10; left:5.2vw; top:6vh; pointer-events:none; transition:opacity .55s ease,transform .55s ease; }
.hero-copy strong,.hero-copy span,.entered-copy strong,.entered-copy span { display:block; margin-top:0; font-size:clamp(24px,2.45vw,50px); font-weight:300; line-height:.95; letter-spacing:0; }
.hero-copy span,.entered-copy span { margin-top:7px; }
.hero-copy strong { color:#fff; text-shadow:0 9px 12px #c9c4b788; }
.hero-copy span { color:var(--ink); }
.entered-copy { opacity:0; transform:translateY(18px); }
.entered-copy strong,.entered-copy span { color:#41454a; }
.entering .hero-copy,.entered .hero-copy { opacity:0; transform:translateY(-18px); }
.entered .entered-copy { opacity:1; transform:translateY(0); }
.rail-stage,.rail-layer { position:absolute; inset:0; }
.rail-stage { z-index:5; transition:opacity .35s ease; }
#card-track { z-index:1; }
.paper-card { position:absolute; left:0; top:0; width:clamp(250px,21vw,420px); transform-origin:center; will-change:transform; }
.paper-card img { display:block; width:100%; height:auto; }
.paper-sheet { position:relative; width:100%; animation:paperIntro .9s cubic-bezier(.18,.72,.2,1) both; animation-delay:var(--intro-delay,0ms); }
@keyframes paperIntro { from { opacity:0; transform:translate(-82px,82px) scale(.94); } to { opacity:1; transform:translate(0,0) scale(1); } }
.photo-layer { position:absolute; z-index:2; inset:0; clip-path:circle(0 at 50% 50%); pointer-events:none; cursor:pointer; }
.reveal-complete .photo-layer { clip-path:none !important; pointer-events:auto; }
.flat-grid { position:fixed; z-index:15; inset:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:42px; padding:7vh 8vw 12vh; overflow-y:auto; visibility:hidden; opacity:0; transform:translateY(24px); background:var(--paper) radial-gradient(#8ca7d661 .8px,transparent 1px) 0 0/9px 9px; transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s; }
.flat-grid figure { margin:0; padding:0; background:transparent; }
.flat-grid img { display:block; width:100%; height:auto; object-fit:contain; }
.flat-view .flat-grid { visibility:visible; opacity:1; transform:none; transition-delay:0s; }
.flat-view .rail-stage,.flat-view .hero-copy,.flat-view .entered-copy { opacity:0; pointer-events:none; }
.project-view { position:fixed; z-index:60; inset:0; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .55s ease,visibility 0s linear .55s; }
.project-open .project-view { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
.project-open .rail-stage,.project-open .entered-copy,.project-open .view-toggle { opacity:0; pointer-events:none; }
.project-gallery { --gallery-edge:8vw; --gallery-fade:32px; --gallery-fade-75:24px; --gallery-fade-50:16px; --gallery-fade-25:8px; position:absolute; z-index:1; inset:0 0 22vh; display:flex; align-items:center; gap:4vw; overflow-x:auto; overflow-y:hidden; padding:5vh var(--gallery-edge) 8vh; scroll-padding-inline:var(--gallery-edge); overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x pinch-zoom; -webkit-mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--gallery-edge) - var(--gallery-fade)),rgba(0,0,0,.08) calc(var(--gallery-edge) - var(--gallery-fade-75)),rgba(0,0,0,.32) calc(var(--gallery-edge) - var(--gallery-fade-50)),rgba(0,0,0,.7) calc(var(--gallery-edge) - var(--gallery-fade-25)),#000 var(--gallery-edge),#000 calc(100% - var(--gallery-edge)),rgba(0,0,0,.7) calc(100% - var(--gallery-edge) + var(--gallery-fade-25)),rgba(0,0,0,.32) calc(100% - var(--gallery-edge) + var(--gallery-fade-50)),rgba(0,0,0,.08) calc(100% - var(--gallery-edge) + var(--gallery-fade-75)),transparent calc(100% - var(--gallery-edge) + var(--gallery-fade)),transparent 100%); mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--gallery-edge) - var(--gallery-fade)),rgba(0,0,0,.08) calc(var(--gallery-edge) - var(--gallery-fade-75)),rgba(0,0,0,.32) calc(var(--gallery-edge) - var(--gallery-fade-50)),rgba(0,0,0,.7) calc(var(--gallery-edge) - var(--gallery-fade-25)),#000 var(--gallery-edge),#000 calc(100% - var(--gallery-edge)),rgba(0,0,0,.7) calc(100% - var(--gallery-edge) + var(--gallery-fade-25)),rgba(0,0,0,.32) calc(100% - var(--gallery-edge) + var(--gallery-fade-50)),rgba(0,0,0,.08) calc(100% - var(--gallery-edge) + var(--gallery-fade-75)),transparent calc(100% - var(--gallery-edge) + var(--gallery-fade)),transparent 100%); opacity:0; transform:translateY(24px) scale(.96); transition:opacity .65s ease,transform .75s cubic-bezier(.18,.72,.2,1); }
.project-gallery::-webkit-scrollbar { display:none; }
.project-open .project-gallery { opacity:1; transform:none; }
.project-gallery figure { flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:62vh; margin:0; }
.project-gallery img { display:block; width:auto; height:auto; max-width:76vw; max-height:60vh; object-fit:contain; box-shadow:0 18px 48px rgba(46,50,58,.16); }
.project-info { position:absolute; z-index:3; left:0; right:0; bottom:0; height:25vh; padding:calc(38px + 1.4vh) 8vw 2vh; color:#41454a; font-family:Arial,Helvetica,sans-serif; background:linear-gradient(to bottom,rgba(242,240,233,0) 0,rgba(242,240,233,.96) 38px,var(--paper) 39px,var(--paper) 100%); }
.project-info h2 { margin:0 0 10px; color:#0643ad; font-size:clamp(22px,1.55vw,32px); font-weight:400; line-height:1.1; }
.project-info p { max-width:72ch; margin:0; font-size:clamp(12px,.9vw,17px); line-height:1.65; white-space:pre-wrap; }
.project-close { position:fixed; z-index:5; top:24px; right:28px; width:42px; height:42px; border:1px solid #5b6067; border-radius:50%; color:#41454a; background:rgba(242,240,233,.84); font:300 28px/36px Arial,sans-serif; cursor:pointer; }
.view-toggle { position:fixed; z-index:30; right:1.3vw; top:46%; width:clamp(34px,2.35vw,48px); height:clamp(108px,15.2vh,154px); padding:0; border:2px solid #4c6fb8; border-radius:999px; background:#ffffffd0; }
.view-toggle button { position:relative; z-index:2; display:block; width:100%; height:50%; border:0; background:transparent; cursor:pointer; }
.toggle-knob { position:absolute; z-index:1; left:13%; top:4%; width:74%; height:44%; border-radius:999px; background:var(--blue); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.flat-view .toggle-knob { transform:translateY(109%); }
.loader { position:fixed; inset:0; z-index:100; }
.loader.ready { cursor:pointer; }
.cursor { position:fixed; z-index:110; left:50vw; top:50vh; width:60px; height:60px; border:2px solid transparent; border-radius:50%; background:var(--blue); color:#fff; transform:translate(-50%,-50%); font-size:10px; transition:width var(--reveal-duration) cubic-bezier(.45,0,.2,1),height var(--reveal-duration) cubic-bezier(.45,0,.2,1),background-color .36s ease,border-color .36s ease,color .28s ease,opacity .4s ease 2.75s; }
.cursor.ready { cursor:pointer; border-color:transparent; background:var(--blue); color:#fff; }
.cursor.expanding { width:var(--cursor-diameter); height:var(--cursor-diameter); background:rgba(115,141,199,.035); opacity:0; }
.noscript-warning { position:fixed; z-index:200; left:20px; bottom:20px; padding:12px; color:var(--ink); background:#fff; }
@media(max-width:700px){.hero-copy,.entered-copy{left:6vw;top:max(5vh,calc(env(safe-area-inset-top) + 12px))}.hero-copy span,.entered-copy span{margin-top:5px}.paper-card{width:46vw}.flat-grid{grid-template-columns:1fr;gap:24px;padding:7vh 18px calc(12vh + env(safe-area-inset-bottom))}.view-toggle{right:max(8px,env(safe-area-inset-right))}.project-gallery{--gallery-edge:max(7vw,calc(env(safe-area-inset-left) + 16px));--gallery-fade:20px;--gallery-fade-75:15px;--gallery-fade-50:10px;--gallery-fade-25:5px;padding-top:max(7vh,calc(env(safe-area-inset-top) + 48px));padding-bottom:9vh}.project-gallery figure{height:58dvh}.project-gallery img{max-width:82vw;max-height:54dvh}.project-info{height:27dvh;padding-left:max(7vw,calc(env(safe-area-inset-left) + 16px));padding-right:max(7vw,calc(env(safe-area-inset-right) + 16px));padding-bottom:calc(2vh + env(safe-area-inset-bottom))}.project-close{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}}
@media(max-height:500px) and (orientation:landscape){.project-gallery{inset-bottom:28dvh;padding-top:calc(env(safe-area-inset-top) + 18px);padding-bottom:4vh}.project-gallery figure{height:60dvh}.project-gallery img{max-height:56dvh}.project-info{height:30dvh;padding-top:32px}.project-info h2{font-size:18px}.project-info p{font-size:12px;line-height:1.4}}