
:root{--bg:#000;--accent:#ff4b24}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:white;font-family:'Sora',Arial,sans-serif;font-weight:300}a{color:inherit;text-decoration:none}header{position:sticky;top:0;z-index:10;background:#000c;backdrop-filter:blur(16px);padding:32px 4vw;display:flex;justify-content:space-between;align-items:center;gap:24px}header a{font-size:12px;text-transform:uppercase;transition:color .2s}header .name{font-weight:500}nav{display:flex;gap:28px}nav a{position:relative;padding:12px 0}nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}a:hover{color:var(--accent)}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.page-title{padding:35px 4vw 80px}.page-title h1{font-size:clamp(70px,10.6vw,162px);font-weight:450;line-height:1.04;letter-spacing:-.055em;margin:0}.page-title h1 span{display:block}.page-title .script{position:relative;z-index:1;font-family:Faculty Glyphic,cursive;color:var(--accent);font-size:2.2em;font-weight:400;letter-spacing:0;line-height:1;margin-bottom:-.16em}.about-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8vw;padding:10px 4vw 100px;align-items:start}.portrait{margin:0}.portrait img{display:block;width:100%;height:auto}.biography p{font-size:16px;line-height:1.8;margin:0 0 26px;max-width:650px}.experience{margin-top:60px}.experience h2{font-size:24px;font-weight:450;letter-spacing:-.03em;margin:0 0 30px}.role{padding:24px 0;border-top:1px solid #ffffff24}.role h3{font-size:18px;font-weight:400;margin:0 0 12px}.role p{font-size:14px;margin:0;display:flex;justify-content:space-between;gap:20px}.role time{color:#aaa}.contact-main{min-height:calc(100svh - 150px);display:flex;flex-direction:column;justify-content:center}.contact-main .page-title{padding-top:0;padding-bottom:70px}.contact-links{padding:0 4vw 90px;display:flex;gap:7vw;flex-wrap:wrap}.contact-item{display:flex;flex-direction:column;gap:14px;font-size:16px}.contact-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#aaa}.contact-item a{position:relative;padding-bottom:6px;overflow-wrap:anywhere}footer{padding:0 4vw 28px;font-size:12px;color:#aaa}@media(hover:hover) and (pointer:fine){html,body,body *{cursor:url('../cursor-blue.png') 0 0,auto}}@media(max-width:700px){header{padding:20px 6vw}.name{max-width:110px}nav{gap:16px}.page-title{padding:40px 6vw 55px}.page-title h1{font-size:clamp(44px,10vw,70px)}.about-content{grid-template-columns:1fr;padding:0 6vw 65px;gap:38px}.portrait{max-width:480px}.experience{margin-top:45px}.role p{flex-wrap:wrap;gap:8px}.contact-main .page-title{padding-top:35px;padding-bottom:55px}.contact-links{padding:0 6vw 60px;flex-direction:column;gap:32px}footer{padding-left:6vw}}@media(prefers-reduced-motion:reduce){a,nav a::after{transition:none}}

.contact-label{display:flex;align-items:center;gap:10px}.contact-icon{width:18px;height:18px;flex-shrink:0;color:var(--accent)}.contact-item a,.contact-item a:hover{text-decoration:none}.contact-item a{transition:color .2s}

/* The script follows the white line and rises over its lower edge. */
.page-title .script{margin-top:-.30em;margin-bottom:0;line-height:.85}



body{overflow:hidden}header{position:fixed;top:0;left:0;width:100%}
.snap-pages{height:100svh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.page-screen{height:100svh;scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.page-title{display:flex;align-items:center;padding:130px 4vw 80px}
.page-title h1{font-size:clamp(44px,6.5vw,100px);width:100%}
.page-title .script{font-size:2.2em}
.detail-screen{padding:120px 0 0}
.detail-scroll{height:100%;overflow-y:auto;overscroll-behavior-y:contain;display:flex;flex-direction:column}
.about-content{padding-top:24px;padding-bottom:60px}
.detail-scroll footer{margin-top:auto;padding-top:30px}
.detail-screen .contact-links{margin:auto 0;padding-top:35px;padding-bottom:35px}
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);border:0;background:none;width:48px;height:48px;display:grid;place-items:center}
.scroll-cue span{display:block;width:12px;height:7px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%);animation:soft-bounce 2.5s ease-in-out infinite}
.scroll-cue:hover span{background:white}.scroll-cue:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes soft-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(max-width:700px){.page-title{padding:110px 6vw 70px}.page-title h1{font-size:clamp(30px,7vw,48px)}.about-title .script{font-size:1.4em;white-space:nowrap}.detail-screen{padding-top:100px}.about-content{padding-top:10px}.scroll-cue{bottom:12px}}
@media(prefers-reduced-motion:reduce){.snap-pages{scroll-behavior:auto}.scroll-cue span{animation:none}}

.page-title .script{font-size:1.15em;line-height:1;margin-top:-.12em;font-family:Faculty Glyphic,sans-serif}.about-title h1{font-size:clamp(30px,5.2vw,80px)}@media(max-width:700px){.about-title h1{font-size:clamp(22px,5.3vw,37px)}.about-title .script{font-size:1.15em}}

h1,h2,h3,h4,.script,.signature,.subtitle,.next-project strong,.contact-label{font-family:Faculty Glyphic,Arial,sans-serif}

/* About and Contact share identical responsive title sizing. */
.page-title h1,.about-title h1{font-size:clamp(30px,5.2vw,80px)}
.page-title .script,.about-title .script{font-size:1.15em}
@media(max-width:700px){.page-title h1,.about-title h1{font-size:clamp(22px,5.3vw,37px)}}
