/* Screen-sized pages. The original design's type, rules and blue accent remain. */
:root{--signal:#0055ff;--header-height:88px}
html,body{width:100%;height:100%;overflow:hidden;scroll-behavior:auto}
body{height:100dvh}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-header{position:fixed;top:20px;inset-inline:20px;z-index:50;display:flex;justify-content:center;pointer-events:none}
.page-nav{position:relative;display:flex;align-items:center;gap:4px;padding:5px;border:0;background:transparent;pointer-events:auto}
.page-link{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 21px;color:#67676f;white-space:nowrap;transition:color .25s}
.page-link[aria-current="page"]{color:#0a0a0a}
.page-link:hover{color:var(--signal)}
.nav-indicator{position:absolute;top:5px;left:0;height:calc(100% - 10px);border:1px solid rgba(0,85,255,.10);border-radius:99px;background:linear-gradient(135deg,rgba(0,85,255,.055),rgba(0,85,255,.13));box-shadow:inset 0 1px 2px rgba(255,255,255,.95),0 2px 5px rgba(0,85,255,.04);transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1);pointer-events:none}
.page-viewport{position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden;outline:none}
.page-track{display:flex;width:100%;height:100%;transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}
.page{flex:0 0 100%;position:relative;height:100%;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#dedee2 transparent;touch-action:pan-y}
.page-content{padding-top:calc(var(--header-height) + 3rem);padding-bottom:5rem}
.page .reveal{opacity:1;transform:none;will-change:auto;transition:none}
.home-page{overflow:hidden}
.home-portrait{position:absolute;left:0;bottom:0;height:100%;width:auto;max-width:none;object-fit:contain;object-position:left bottom;user-select:none;pointer-events:none}
.home-copy{position:absolute;left:28%;right:4%;top:43%;transform:translateY(-50%);z-index:1}
.home-kicker{color:#67676f;margin-bottom:1.5rem}
.home-copy h1{font-size:clamp(4rem,8.6vw,10rem);line-height:.96;letter-spacing:-.055em;white-space:nowrap;font-weight:600;outline:none;margin-inline-start:-.045em}
.home-description{margin-inline-start:-.025em;margin-top:1.75rem;color:#67676f;font-size:clamp(1.35rem,2.15vw,2.25rem);line-height:1.3;letter-spacing:-.025em}
.home-roles{display:flex;flex-direction:column;gap:.5rem;margin-top:2.5rem;color:#67676f;font-size:.625rem;letter-spacing:.10em}
.home-domain{position:absolute;right:4%;bottom:1.25rem;color:#8a8a91;font-size:.625rem}
.project-page .project{padding-top:0}
.project-page .project h2{margin-top:2rem;max-width:55rem;font-size:clamp(2.6rem,5.4vw,5rem);line-height:1;letter-spacing:-.04em}
.project-page .figure{max-width:58rem;margin-top:2.5rem}
.project-page .project-detail{margin-top:2.5rem}
.project-page .caption{margin-top:2rem}
.about-page .about-now .now{margin-top:4rem}
.about-approach{margin-top:6rem}
.about-approach .principles{margin-top:3rem}
.contact.page{background:#fff;color:#0a0a0a}
.contact .contact-inner{padding-top:calc(var(--header-height) + 3.5rem);padding-bottom:3rem}
.contact .colophon{margin-top:3rem}
.no-script-note{text-align:center;font-size:.8rem}
@media(max-width:899px){
 .home-copy{left:42%;right:4%;top:39%}
 .home-copy h1{white-space:normal;font-size:clamp(3.25rem,10vw,6rem);max-width:5em}
 .home-portrait{height:85%}
 .home-roles{font-size:.5625rem;line-height:1.7;max-width:18rem;margin-top:2rem}
 .home-description{font-size:clamp(1.15rem,2.8vw,1.8rem)}
 .home-kicker{font-size:.5625rem;line-height:1.6}
}
@media(max-width:599px){
 :root{--header-height:78px}
 .page-header{top:12px;inset-inline:8px}
 .page-nav{width:100%;max-width:440px;gap:0;padding:4px}
 .page-link{min-height:44px;flex:1;padding:7px 3px;font-size:.625rem;letter-spacing:.015em}
 .page-link:first-of-type{flex:1.8}
 .page-link[href="#research"]{flex:1.2}
 .page-link[href="#contact"]{flex:1.1}
 .page-link[href="#cv"]{flex:.55}
 .nav-indicator{top:4px;height:calc(100% - 8px)}
 .home-portrait{height:72%}
 .home-copy{left:46%;right:4%;top:max(17rem,32%)}
 .home-copy h1{font-size:clamp(2.6rem,13vw,4.5rem);line-height:.98;letter-spacing:-.05em}
 .home-kicker{margin-bottom:1rem;font-size:.625rem;letter-spacing:.035em;max-width:12rem}
 .home-description{font-size:clamp(1.2rem,5.5vw,1.5rem);margin-top:1.2rem}
 .home-roles{margin-top:1.6rem;font-size:clamp(.625rem,2.8vw,.75rem);line-height:1.7;letter-spacing:.015em}
 .home-domain{display:none}
 .page-content{padding-top:calc(var(--header-height) + 1.5rem);padding-bottom:3rem}
 .project-page .project h2{font-size:2.75rem}
 .project-page .project-summary{font-size:1.125rem}
 .contact .contact-inner{padding-top:calc(var(--header-height) + 2rem)}
 .contact h2{margin-top:1.5rem}
}
@media(max-height:570px) and (min-width:600px){
 :root{--header-height:66px}
 .page-header{top:8px}
 .home-copy{top:45%;left:27%}.home-copy h1{font-size:8vw;white-space:nowrap;max-width:none}
 .home-kicker{margin-bottom:.6rem}.home-description{margin-top:.8rem;font-size:1.2rem}.home-roles{margin-top:1rem;gap:.25rem;font-size:.5rem}
}
@media(prefers-reduced-motion:reduce){.page-track,.nav-indicator{transition:none}}

/* Contact uses the same white canvas, with the name's blue as its accent. */
.contact .label{color:var(--signal)}
.contact .contact-body{color:#67676f}
.contact .btn-primary{background:var(--signal);color:#fff}
.contact .btn-primary:hover{background:#0044cc;color:#fff}
.contact .btn-secondary{border-color:#dce6ff;color:var(--signal)}
.contact .btn-secondary:hover{border-color:var(--signal);background:#edf3ff;color:var(--signal)}
.contact .emails a{color:#67676f}
.contact .emails a:hover,.contact .colophon a:hover{color:var(--signal)}
.contact .colophon{border-top-color:#e4e4e7;color:#67676f}
.cv-label{color:var(--signal)}
.cv-title{margin-top:1.75rem;font-size:clamp(2.5rem,5.4vw,5rem);line-height:1;letter-spacing:-.04em}
.cv-sections{margin-top:3.5rem}
.cv-row{display:grid;grid-template-columns:1fr 2fr;gap:2.5rem;padding-block:2rem}
.cv-row h3{font-weight:400}
.cv-row h4{margin:0;font-size:1.25rem;font-weight:500;letter-spacing:-.02em}
.cv-row p,.cv-list{max-width:38rem;margin-top:1rem;color:#67676f;font-size:1rem;line-height:1.75}
.cv-row .cv-subtitle{margin-top:.4rem;color:#0a0a0a}
.cv-list li{position:relative;padding-left:1rem}
.cv-list li+li{margin-top:.5rem}
.cv-list li::before{content:"";position:absolute;left:0;top:.75em;width:4px;height:4px;background:var(--signal);border-radius:50%}
.cv-contact{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.5rem;color:var(--signal)}
.cv-contact:hover{text-decoration:underline}
@media(max-width:599px){.cv-row{grid-template-columns:1fr;gap:1rem}.cv-sections{margin-top:2.5rem}}

/* Give phone-sized screens a more readable type scale. */
@media(max-width:599px){
 .page .lede,.page .intro-body p,.page .problem .body,.page .what-i-do li,
 .page .principle-body .text,.page .contact-body,.page .cv-row p,.page .cv-list{font-size:1.125rem}
 .page .h2{font-size:2.2rem}
 .page .mono-label:not(.home-kicker):not(.home-roles){font-size:.75rem}
 .contact h2{font-size:2.3rem}
 .cv-title{font-size:2.75rem}
 .page .btn{font-size:1rem}
}