:root{font-family:Arial,Helvetica,sans-serif;background:#080b0d;color:#f3f1eb;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid white;outline-offset:5px}.film,.shade{position:fixed;inset:0;pointer-events:none}.film{overflow:hidden;background:radial-gradient(ellipse at 65% 50%,#293b43,#080b0d 70%)}video{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.12);will-change:transform;transition:filter .8s}.shade{background:linear-gradient(90deg,#03070bbf,transparent 85%),linear-gradient(0deg,#03070b88,transparent 30%,transparent 70%,#03070b66)}header{position:fixed;z-index:5;left:5%;right:5%;top:32px;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:17px;font:30px Georgia,serif}.logo span{font:11px/1.6 Arial;letter-spacing:.12em}.logo small{font-size:8px;color:#c3cace}nav{display:flex;background:#09101480;border:1px solid #ffffff30;border-radius:40px;padding:5px;backdrop-filter:blur(12px)}nav button{border:0;background:transparent;border-radius:30px;min-height:40px;padding:10px 20px;font-size:12px}nav button[aria-current=page]{background:#eceee9;color:#101518}main{height:100%;touch-action:pan-y}.screen{position:absolute;inset:0;display:flex;align-items:center;padding:130px 8% 110px;opacity:0;visibility:hidden;transform:translateX(85px);transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s,visibility .8s}.screen.active{opacity:1;visibility:visible;transform:translateX(0)}.screen.before{transform:translateX(-85px)}.intro{margin-top:50px}.eyebrow{font:11px/1.5 'Courier New',monospace;letter-spacing:.2em;color:#d2dce0}h1{font:clamp(64px,10vw,155px)/.9 Arial;letter-spacing:-.075em;margin:27px 0}em{font-family:Georgia,serif;font-weight:400}h2{font:clamp(40px,5vw,75px)/1.05 Arial;letter-spacing:-.045em;margin:24px 0 35px}.summary{font-size:16px;line-height:1.7;color:#d0d8db}.enter{margin-top:22px;background:#eff0e9;color:#0b1013;border:0;border-radius:40px;padding:18px 27px;min-height:52px;font-size:13px}.enter span{margin-left:55px}.side{position:absolute;right:4%;writing-mode:vertical-rl;font:10px 'Courier New';letter-spacing:.15em;color:#c9d4db}.content{width:min(100%,1050px);max-height:100%;overflow:auto;padding:10px 5px}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.projects a{position:relative;border:1px solid #ffffff40;background:#0a1117b5;backdrop-filter:blur(14px);padding:25px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s,transform .3s}.projects a:hover{background:#263943d9;transform:translateY(-7px)}.projects span{font:9px/1.7 'Courier New';letter-spacing:.1em;color:#b5c6ce}.projects strong{font:28px/1.1 Georgia;max-width:230px;padding-right:10px}.projects i{position:absolute;bottom:20px;right:20px;font-style:normal}.note{font-size:11px;color:#c8d0d6}.about{max-width:760px}.about>p:not(.eyebrow){font-size:17px;line-height:1.7;max-width:580px;color:#d0d8dd}footer{position:fixed;left:5%;right:5%;bottom:25px;z-index:5;display:flex;justify-content:space-between;align-items:center;font:10px 'Courier New';letter-spacing:.1em}.controls{display:flex;gap:17px;align-items:center}footer button{min-width:44px;min-height:44px;border:1px solid #ffffff40;background:#0c141a88;border-radius:30px;padding:10px 16px;font-size:11px}footer button:disabled{opacity:.3;cursor:default}#video-status{position:fixed;bottom:80px;right:5%;font-size:11px;color:#d2dce0;max-width:280px}body[data-page="1"] video,body[data-page="2"] video{filter:brightness(.55)}@media(max-width:700px){header{top:20px;align-items:start}.logo{font-size:26px}.logo span{font-size:10px}.logo small{display:none}nav button{padding:9px 12px;font-size:11px}.screen{padding:110px 7% 110px}.intro{margin-top:0}h1{font-size:clamp(60px,15vw,105px)}.summary{font-size:14px}.side{display:none}.projects{grid-template-columns:1fr}.projects a{min-height:120px;padding:18px;gap:20px}.projects strong{font-size:25px}.content h2{font-size:38px}.about>p:not(.eyebrow){font-size:15px}#hint{display:none}.logo{gap:8px}footer{left:6%;right:6%}#video-status{bottom:80px;left:7%;right:7%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}video{transform:none;will-change:auto}}
/* Video time and scene progress share the same gesture-driven timeline. */
.screen{transition:none!important}
main{touch-action:none}
.content{touch-action:pan-y}
video{transform:scale(1.04);filter:none!important;transition:none;will-change:auto}
#hint{max-width:320px;text-align:center;line-height:1.6}
@media(prefers-reduced-motion:reduce){video{transform:none}}

@media(min-width:701px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.projects a{min-height:150px}}
/* Keep the entire hero title typographically consistent. */
#home-title em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
/* Give the unified hero title more breathing room. */
#home-title{letter-spacing:-.025em;line-height:1.08}
/* A quiet, full-screen opening, with a slowly typed invitation. */
body[data-page="0"] header,body[data-page="0"] footer{visibility:hidden;pointer-events:none}
#home{justify-content:center;text-align:center;padding:100px 6%}
.welcome{width:100%;margin:0}
#home-title{font-family:'Courier New',monospace;font-size:clamp(23px,4.3vw,64px);font-weight:400;letter-spacing:.045em;line-height:1.35;margin:0 auto 30px;white-space:nowrap}
#home-title span{display:inline-block;clip-path:inset(0 100% 0 0);animation:welcome-type 3.8s steps(19,end) .6s forwards}
.welcome-hint{background:none;border:0;color:#fff;font:11px/1.6 Arial,Helvetica,sans-serif;letter-spacing:.18em;padding:16px 20px;opacity:0;animation:welcome-hint 1s ease 4.4s forwards}
.welcome-hint:focus-visible{opacity:1}
@keyframes welcome-type{to{clip-path:inset(0 0 0 0)}}
@keyframes welcome-hint{to{opacity:.85}}
@media(prefers-reduced-motion:reduce){#home-title span{clip-path:none}.welcome-hint{opacity:.85}}
/* Keep the marked interface chrome hidden throughout the journey. */
header,footer{display:none!important}
#projects .eyebrow{display:none}
#projects-title span{display:block;font-family:inherit;font-style:normal;font-weight:inherit;opacity:0;transform:translateY(20px)}
#projects .projects a{opacity:0;transform:translateY(24px);visibility:hidden}
body[data-page="2"] #projects-title span{animation:project-arrive 1.4s ease forwards}
body[data-page="2"] #projects-title span:nth-child(2){animation-delay:.55s}
body[data-page="2"] #projects .projects a{animation:project-arrive 1.25s ease forwards}
body[data-page="2"] #projects .projects a:nth-child(1){animation-delay:1.8s}
body[data-page="2"] #projects .projects a:nth-child(2){animation-delay:2.15s}
body[data-page="2"] #projects .projects a:nth-child(3){animation-delay:2.5s}
body[data-page="2"] #projects .projects a:nth-child(4){animation-delay:2.85s}
@keyframes project-arrive{from{opacity:0;transform:translateY(24px);visibility:visible}to{opacity:1;transform:translateY(0);visibility:visible}}
@media(prefers-reduced-motion:reduce){#projects-title span,#projects .projects a{opacity:1;transform:none;visibility:visible}}
/* Match the opening typography and center the project selection. */
#projects{justify-content:center;align-items:flex-start;padding:23vh 6% 7vh}
#projects .content{width:min(100%,940px);margin:0 auto;text-align:center;padding:8px}
#projects-title{font-family:'Courier New',monospace;font-size:clamp(21px,4.3vw,64px);font-weight:400;letter-spacing:.045em;line-height:1.35;white-space:nowrap;margin:0 0 52px}
#projects-title span{font:inherit;letter-spacing:inherit}
#projects .projects{width:min(100%,780px);margin:0 auto;text-align:left}
@media(max-width:700px){#projects{padding:18vh 5% 5vh}#projects-title{font-size:clamp(18px,4.1vw,29px);margin-bottom:32px}#projects .projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#projects .projects a{min-height:145px;padding:16px}#projects .projects strong{font-size:clamp(19px,4.5vw,26px)}}
@media(max-height:550px){#projects{padding-top:12vh}#projects-title{margin-bottom:24px}}
/* Spacious project choices in the same type family as the opening. */
#projects .content{scrollbar-width:none;-ms-overflow-style:none}
#projects .content::-webkit-scrollbar{display:none}
#projects .projects{width:min(100%,860px);gap:28px 36px}
#projects .projects a{padding:28px;min-height:165px;gap:24px}
#projects .projects strong{font-family:'Courier New',monospace;font-weight:400;font-size:clamp(23px,2.5vw,31px);line-height:1.4;letter-spacing:.055em;max-width:none;padding-right:12px}
#projects .projects span{font-family:'Courier New',monospace;letter-spacing:.14em;line-height:1.8}
@media(max-width:700px){#projects .projects{gap:20px}#projects .projects a{padding:20px;min-height:155px}#projects .projects strong{font-size:clamp(17px,3.8vw,24px);letter-spacing:.04em}#projects .projects span{font-size:8px;letter-spacing:.1em}}
@media(max-width:380px){#projects .projects{grid-template-columns:1fr;gap:22px}}
/* Final screen uses the same typography and restraint as the opening. */
#about{justify-content:center;text-align:center;padding:16vh 7% 8vh}
#about .content{width:min(100%,900px);margin:auto;scrollbar-width:none}
#about .content::-webkit-scrollbar{display:none}
#about .eyebrow{display:none}
#about-title,#about-title em{font-family:'Courier New',monospace;font-weight:400;font-style:normal;font-size:clamp(28px,4.3vw,64px);letter-spacing:.045em;line-height:1.35}
#about .about>p:not(.eyebrow){font-family:'Courier New',monospace;font-size:clamp(14px,1.5vw,18px);letter-spacing:.045em;line-height:1.95;max-width:740px;margin:28px auto}
/* Improve legibility without changing the visual identity. */
.shade{background:linear-gradient(180deg,rgba(3,7,11,.48),rgba(3,7,11,.32) 42%,rgba(3,7,11,.62)),linear-gradient(90deg,rgba(3,7,11,.22),rgba(3,7,11,.08))}
#home-title,#projects-title,#about-title{color:#fff;text-shadow:0 2px 6px #000b,0 0 28px #0008}
.welcome-hint{font-size:13px;text-shadow:0 2px 5px #000}
#projects .projects a{background:rgba(7,14,19,.9);border-color:#b8cbd14d;backdrop-filter:blur(16px)}
#projects .projects a:hover,#projects .projects a:focus-visible{background:rgba(24,40,49,.97);border-color:#d9e8ec99}
#projects .projects strong{color:#fff;font-weight:500;text-shadow:0 1px 3px #0008}
#projects .projects span{color:#dae5e9;font-size:11px;line-height:1.85}
#about .content{background:rgba(7,14,19,.84);border:1px solid #b8cbd12e;border-radius:16px;padding:clamp(22px,4vw,48px);backdrop-filter:blur(16px)}
#about .about>p:not(.eyebrow){color:#edf1f2;font-size:clamp(16px,1.6vw,19px)}
@media(max-width:700px){#projects .projects span{font-size:10px;letter-spacing:.07em}}

/* Preserve the film's brightness; contrast is concentrated behind the copy. */
.shade{background:linear-gradient(180deg,rgba(3,7,11,.13),rgba(3,7,11,.04) 45%,rgba(3,7,11,.2))}
#home-title,#projects-title,#about-title{color:#fff;text-shadow:0 2px 4px #000,0 0 10px #000b,0 0 22px #0006}
#projects .projects a{background:rgba(7,14,19,.78)}
#about .content{background:rgba(7,14,19,.66)}