/* A single fixed film surface carries the entire portfolio. */
main{overflow-x:clip}
.world{position:fixed;inset:0;z-index:-1;background:#080c0e;pointer-events:none;overflow:hidden}
.world video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity}
.world #typing{z-index:1;opacity:1}
.world video:not(#typing):not(#closing-typing){filter:saturate(.65) brightness(.8) contrast(1.08)}
.world #golden-gate{filter:saturate(.72) brightness(.88) contrast(1.05)}
.world #closing-typing{object-position:65% center}
.world #golden-gate{object-position:58% center}.world #ferry-building{object-position:50% center}.world #sf-skyline{object-position:55% center}
.world:after{content:"";position:absolute;z-index:4;inset:0;background:linear-gradient(90deg,rgba(4,8,10,.9),rgba(4,8,10,.06) 72%),linear-gradient(0deg,rgba(4,8,10,.45),transparent 35%);opacity:var(--shade,.73)}
body{background:transparent;isolation:isolate}html{background:#080c0e}
.hero-media,.map-stage,.contact-orbit,.scroll-cue{display:none}
.hero{min-height:94svh;background:none;padding-top:130px;align-items:center;overflow:visible}
.hero h1{font-size:88px;line-height:1.03;font-weight:400}.hero h1 span:last-child{font-style:normal}
.hero-copy{max-width:780px}.hero-role{margin-top:28px}.hero-actions{margin-top:32px}
.chapter{border:0;background:transparent;padding:100px 7%;scroll-margin-top:76px}
.about{min-height:115svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:16vh}
.about-grid{max-width:780px;display:block;margin-top:35px}.about blockquote{font-size:48px;line-height:1.2}.about-copy{max-width:660px;font-size:18px;padding-top:32px;color:#c2ccce}
.trail{overflow:visible;isolation:auto;padding-top:100px;padding-bottom:80px}
.section-head{display:block;margin-bottom:80px}.section-head h2{font-size:68px;line-height:1.08;max-width:850px;margin-top:26px}
.section-label{font-size:14px;letter-spacing:0;color:#d7a582}.section-label span:first-child:after{display:none}
.timeline{margin-left:0;max-width:780px}.timeline-entry{min-height:65svh;padding-bottom:110px;align-content:center}.timeline-entry:before{top:calc(50% - 55px)}
.timeline h3{font-size:44px}.timeline-entry p:last-child{font-size:18px;color:#d3dcdd;text-shadow:0 2px 16px #000}.timeline-meta{font-size:13px}.company{font-size:14px;letter-spacing:0}
.work{overflow:visible;padding-top:100px}.projects{display:block;border:0}.project{border:0;padding:60px 0 120px;min-height:105svh;overflow:visible;background:none!important;display:grid;grid-template-columns:1fr 1.5fr;gap:24px 64px;align-content:center;align-items:center}
.project:before{display:none}.project-index{position:static;grid-column:1;font:14px var(--mono);color:var(--copper)}
.project-type{grid-column:1;font-size:14px;letter-spacing:0}.project h3{grid-column:1;margin:0;font-size:46px}.project p{grid-column:1;font-size:18px;color:#c2ccce;margin:0}.project ul{position:static;grid-column:1;margin-top:8px}.project li{font-size:12px;letter-spacing:0;background:rgba(6,12,15,.7)}
.screen{grid-column:2;grid-row:1/7;margin:0;position:relative;perspective:1200px}.screen button{display:block;padding:0;width:100%;background:#0a1116;border:1px solid rgba(210,160,117,.5);border-radius:6px;overflow:hidden;cursor:zoom-in;box-shadow:0 40px 90px #0009;transform:rotateY(-5deg) rotateX(3deg);transition:transform .4s}
.screen button:hover{transform:rotateY(0) rotateX(0)}.screen img{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain}.screen figcaption{font:12px var(--mono);color:#aeb8b8;margin-top:16px}
.screen-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid #ffffff15;color:#bac8c9;font:10px var(--mono)}.screen-bar i{width:5px;height:5px;border-radius:50%;background:#bd845d}.screen-bar span{margin-left:8px}
.contact{min-height:100svh;align-items:flex-start;text-align:left}.contact h2{font-size:88px}.contact-kicker{font-size:14px}.domain{font-size:13px}
.reveal{filter:none;opacity:1;transform:none;transition:none}.eyebrow{font-size:14px;letter-spacing:0}.nav nav a,.resume-link{font-size:12px;letter-spacing:0}.button{letter-spacing:0;font-size:13px}
.hero h1 span{padding-bottom:.08em;margin-bottom:-.08em}
.nav nav a{position:relative;padding:12px 0}.nav nav a:after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .4s}.nav nav a:hover:after,.nav nav a.active:after{transform:scaleX(1)}
.screen button{transform:perspective(1200px) rotateY(var(--screen-angle,-5deg));transition:transform .55s,border-color .4s,box-shadow .4s}.screen button:hover{transform:perspective(1200px) rotateY(0);border-color:#e1b893;box-shadow:0 35px 90px #000b,0 0 30px #b97b4315}
#motion-graphics{position:fixed;z-index:4;bottom:26px;right:84px;width:300px;pointer-events:none;mix-blend-mode:screen}.signal-label{display:flex;justify-content:space-between;font:12px var(--mono);color:#cca686;letter-spacing:0;text-transform:uppercase}.signal-label span{animation:place-in .8s ease both}@keyframes place-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.domain{display:flex;gap:24px}.domain a{color:#a6a9aa;text-transform:none}.domain a:hover{color:#d8b08f}
#motion-control{position:fixed;right:25px;bottom:25px;z-index:950}#motion-control button{width:40px;height:40px;display:grid;place-items:center;background:#090d11bd;color:#dfba96;border:1px solid #bf936857;border-radius:50%;cursor:pointer;backdrop-filter:blur(10px)}#motion-control button:hover{border-color:#dfba96;background:#171a1e}#motion-control button:focus-visible{outline:2px solid #f0d5b4;outline-offset:4px}
.playback-blocked #motion-control button{border-color:#f0d5b4}
body :focus-visible{outline:2px solid #e0ad83;outline-offset:5px}*{letter-spacing:0!important}
[data-motion="paused"] *{animation-play-state:paused!important}
@media(max-width:560px){#motion-graphics{width:180px;right:70px;bottom:23px}.signal-label{font-size:9px}.signal-label span:last-child{display:none}#motion-control{right:18px;bottom:18px}.world:after{background:linear-gradient(0deg,#04080aed,transparent 85%),linear-gradient(90deg,#04080a30,#04080a08)}.hero{min-height:94svh;padding-bottom:80px}.about{min-height:140svh}.hero h1{font-size:56px}.hero-role{font-size:16px}.screen button{transform:none}}
.lightbox{background:#080c10f5;color:#fff;border:1px solid #9c7759;width:min(94vw,1500px);max-height:94vh;padding:45px 15px 15px}.lightbox::backdrop{background:#000c;backdrop-filter:blur(12px)}.lightbox img{display:block;width:100%;max-height:80vh;object-fit:contain}.lightbox button{position:absolute;right:12px;top:8px;background:transparent;color:#fff;border:0;font-size:28px;cursor:pointer}
@media(min-width:1600px){.hero h1{font-size:112px}.hero-copy{max-width:920px}}
@media(max-width:1000px){.project{grid-template-columns:1fr;min-height:auto;padding:50px 0 100px}.screen{grid-column:1;grid-row:auto;margin-top:20px}.screen button{transform:none}.section-head h2{font-size:52px}.hero h1{font-size:76px}}
@media(max-width:560px){.world video{object-position:66% center}.hero{align-items:flex-end;padding:120px 22px 80px}.hero h1{font-size:56px}.hero-copy{width:100%}.hero-role{font-size:16px}.chapter{padding-left:22px;padding-right:22px}.about blockquote{font-size:34px}.about{min-height:115svh}.section-head h2{font-size:42px}.timeline h3{font-size:32px}.timeline-entry{min-height:75svh;padding-bottom:80px}.timeline-entry:before{top:calc(50% - 40px)}.project h3{font-size:36px}.contact h2{font-size:60px}.nav nav{display:flex;gap:14px}.nav nav a{font-size:11px}.nav nav a:first-child,.resume-link{display:none}.screen img{max-height:none}.world:after{background:linear-gradient(90deg,#04080ac9,#04080a60),linear-gradient(0deg,#04080a80,transparent)}}
@media(prefers-reduced-motion:reduce){.screen button{transform:none;transition:none}}
@media(max-width:560px){#motion-graphics{display:none}.domain{font-size:12px;gap:14px}.contact .domain{bottom:24px;align-self:flex-start}}
@media(max-width:360px){.hero h1{font-size:48px}.hero-role{font-size:14px}.hero-role .divider{width:10px}.hero-actions .button{font-size:11px}.contact h2{font-size:50px}}
@media(max-width:560px){.contact{justify-content:flex-end;padding-bottom:110px}.contact h2{font-size:56px}.world #closing-typing{object-position:70% center}.contact .contact-kicker{margin-top:26px}}