/* Desktop workspace: one screen, one selected section. */
:root{--sidebar:clamp(195px,17vw,250px)}
html,body{height:100%;scroll-behavior:auto}body{min-width:0;overflow:hidden}
.sidebar{position:fixed;width:var(--sidebar);height:100dvh;min-height:0;overflow-y:auto;padding:clamp(18px,3vh,32px) 22px 12px;display:flex;flex-direction:column}
.brand{padding-bottom:clamp(14px,2.5vh,26px)}.brand>span{font-size:clamp(44px,4vw,62px);letter-spacing:-4px;line-height:1}.brand small{font-size:20px;margin-top:10px}
.nav-link{padding:clamp(9px,1.65vh,18px) 7px;gap:12px}.nav-link span{font-size:14px}.nav-link small{font-size:10px}.sidebar-quote{font-size:23px;margin:24px 0}.sidebar-foot{margin-top:auto;padding:12px 0}.sidebar-admin{font:11px var(--sans);padding:9px;border-top:1px solid var(--line);color:var(--muted)}
main{margin-left:var(--sidebar);height:100dvh;display:flex;flex-direction:column;min-width:0}
.topbar{position:absolute;left:var(--sidebar);height:56px;padding:0 28px;z-index:5}
.hero{flex:1;min-height:0;height:auto;width:100%;padding:0;overflow:hidden;background-position:center;background-size:cover}
.hero:after{display:none}.hero-content{position:relative;z-index:2;height:100%;width:64%;max-width:850px;padding:clamp(80px,12vh,140px) 0 40px clamp(30px,5vw,90px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.eyebrow{font-size:clamp(30px,4.5vh,52px);margin-bottom:12px}.hero h1{font-size:clamp(54px,min(7vw,12vh),132px);line-height:1.03;letter-spacing:-5px}
.hero-description{font-size:clamp(12px,1.7vh,16px);line-height:1.9;margin:clamp(12px,2.4vh,25px) 0 18px}.hero-cta{font-size:clamp(20px,3vh,30px);padding:9px 22px;gap:24px}
.hero-note{bottom:auto;margin:clamp(17px,3vh,35px) 0 0 5px;font-size:clamp(19px,2.7vh,29px);padding:12px 20px;max-width:95%;flex-shrink:0}
.hero-character{position:absolute;right:0;bottom:0;width:clamp(200px,31vw,490px);max-height:70%;aspect-ratio:1193/1319;margin:0;background:url('../assets/uncle-soft.png') center bottom/contain no-repeat;mix-blend-mode:normal;mask-image:radial-gradient(ellipse 66% 65% at 50% 56%,#000 58%,transparent 83%);-webkit-mask-image:radial-gradient(ellipse 66% 65% at 50% 56%,#000 58%,transparent 83%);z-index:1;pointer-events:none}
.hero-caption{right:24px;bottom:16px;z-index:3;font-size:8px}
.workspace{flex:1;min-height:0;overflow:hidden;display:block;width:100%;max-width:none;padding:88px clamp(25px,4vw,70px) 24px;margin:0}.main-column{height:100%;min-height:0}.main-column>.section{height:100%;overflow:auto;overscroll-behavior:contain;padding:0 6px 20px 0;margin:0;border:0}.desk-notes{display:none}
.section-heading{margin-bottom:25px}.section-heading h2{font-size:clamp(28px,3vw,43px);line-height:1.4}.section-heading h2>span{display:block;font-size:13px;margin:5px 0 0}.section-kicker{font-size:10px}.project-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.journal-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}.card-copy h3{font-size:17px}.card-copy p{font-size:13px}.journal-copy h3{font-size:14px}.journal-copy small{font-size:11px}.empty-state{padding:70px 20px;font-size:14px}.about{align-items:center;gap:35px}.about h2{font-size:clamp(25px,3vw,44px)}.about p:not(.section-kicker){font-size:15px}.about-stamp{width:110px;height:110px}
footer{flex:0 0 46px;padding:10px 25px;gap:14px;flex-wrap:nowrap}footer>small,footer>p,footer>a span{display:none}footer>div{margin-left:auto;font-size:10px}footer>a{font-size:12px}
body[data-view="home"] .workspace{display:none}body:not([data-view="home"]) .hero{display:none}body:not([data-view="home"]) .topbar{background:#173d2f;color:#eee9dc}
@media(max-height:680px){.sidebar-quote{font-size:19px;margin:12px 0}.brand>span{font-size:43px}.brand small{font-size:17px}.hero-content{padding-top:70px;padding-bottom:24px}.hero h1{font-size:clamp(48px,10vh,70px)}.hero-description{margin:12px 0;font-size:12px}.hero-note{font-size:19px;margin-top:18px;padding:9px 15px}.hero-cta{font-size:20px;padding:7px 18px}.hero-character{max-height:65%}.nav-link{padding:8px 5px}}
@media(max-width:1000px){.hero-content{width:72%;padding-left:30px}.hero-character{width:235px;max-height:52%;opacity:.9}.hero h1{font-size:clamp(50px,7vw,75px)}}
.hero-character{mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%)}