/* Portrait meets the section edge. All poses retain their original aspect ratio. */
.hero{padding-bottom:34px}.portrait-stage{left:35%;right:5%;top:0;bottom:-5px;height:auto;overflow:visible}.portrait-stage #hero-portrait{height:100%;width:100%;object-fit:contain;object-position:center bottom;bottom:0}.hero-detail,.current-role{position:relative;width:max-content;max-width:95%;background:linear-gradient(90deg,var(--paper) 80%,transparent);padding-right:16px}.portrait-stamp{right:15%;bottom:70px}.colour-slab{bottom:35px}.scroll-cue{z-index:5;background:var(--paper);padding:5px}.hand-note{cursor:pointer;transition:rotate .25s,color .25s}.hand-note:hover,.hand-note:focus-visible{rotate:5deg;color:#5526ce}
/* Stable navigation hit areas; personality lives inside them. */
header nav{gap:14px}header nav a{position:relative;min-width:82px;min-height:40px;display:flex;align-items:center;justify-content:center;gap:7px;isolation:isolate}header nav a i{font-style:normal;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;font-size:16px}header nav a:hover,header nav a:focus-visible{box-shadow:none}header nav a:hover i,header nav a:focus-visible i{opacity:1;transform:translateY(0)}header nav a::before{content:'';position:absolute;inset:4px -2px;background:var(--acid);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .22s}header nav a:hover::before,header nav a:focus-visible::before{transform:scaleX(1)}header nav a::after{content:attr(data-hint);position:absolute;top:41px;left:50%;translate:-50% 0;white-space:nowrap;font-family:var(--body);font-size:11px;letter-spacing:0;font-weight:500;padding:6px 9px;background:var(--ink);color:var(--paper);opacity:0;pointer-events:none;transition:opacity .2s}header nav a:hover::after,header nav a:focus-visible::after{opacity:1}.nav-work:hover span,.nav-work:focus-visible span{font-family:monospace;letter-spacing:1px}.nav-lab:hover span,.nav-lab:focus-visible span{font-family:'Caveat',cursive;font-size:25px;transform:rotate(-9deg)}.nav-story:hover span,.nav-story:focus-visible span{font-family:Georgia,serif;font-style:italic;font-size:18px}.nav-now:hover span,.nav-now:focus-visible span{letter-spacing:3px}
.contact-nav,.gallery-nav button,.archive-call>a,.send-button,#copy-message,.timeline-tools button,.mode-panel button[data-mode]{transition:translate .18s ease-out,background .2s,color .2s,box-shadow .2s}.contact-nav:hover,.send-button:hover{box-shadow:4px 4px 0 var(--ink)}.contact-nav:hover{background:var(--acid)}.send-button:hover{background:var(--paper);color:var(--ink)}
.section-heading h2,.lab h2,.leadership h2,.archive-call h2,.contact h2{transition:text-shadow .3s}.section-heading h2:hover,.lab h2:hover,.leadership h2:hover{text-shadow:3px 3px 0 var(--acid)}.story .section-heading h2:hover,.archive-call h2:hover{color:var(--acid)}.contact h2:hover .serif{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}.serif{transition:color .2s}footer .identity{transition:letter-spacing .25s}footer .identity:hover{letter-spacing:1px}footer>a:last-child:hover{color:var(--acid)}.reading-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
/* Deliberately framed motion for case studies. */
dialog[open]{animation:dialogIn .32s cubic-bezier(.2,.8,.2,1) both}dialog[open]::backdrop{animation:backdropIn .25s ease both}dialog.dialog-closing{animation:dialogOut .17s ease both}dialog.dialog-closing::backdrop{animation:backdropOut .17s ease both}.story-enter{animation:storyIn .32s ease both}.close-dialog:hover{background:var(--acid);color:var(--ink)}.dialog-footer a:hover{box-shadow:4px 4px var(--ink)}
@keyframes dialogIn{from{opacity:0;transform:translateY(35px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dialogOut{to{opacity:0;transform:translateY(18px) scale(.98)}}@keyframes backdropIn{from{opacity:0}to{opacity:1}}@keyframes backdropOut{to{opacity:0}}@keyframes storyIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* Seven posters with meaningful room to travel on wide screens. */
.project{flex-basis:clamp(290px,29vw,460px)}.project-track{cursor:grab;touch-action:pan-x pan-y}.project-track.dragging{scroll-snap-type:none;cursor:grabbing}.dragging *{cursor:grabbing!important;user-select:none}.astro .poster{background:#0c65ed}.astro .poster h3 i{color:#aafaed}.astro .poster img{height:47%;object-fit:contain;background:#f4f3ed;transform:rotate(5deg) scale(1.05)}.podcast .poster{background:#ffcf33;color:#151716}.podcast .poster h3{font-size:clamp(42px,4vw,62px)}.podcast .poster img{height:47%;object-fit:cover;transform:rotate(-5deg) scale(1.1)}.project-caption{font-size:14px}.lab-ai{color:var(--ink);font:inherit;border:0;cursor:pointer}.lab-ai:hover .lab-action{transform:translateX(5px)}.lab-action{transition:transform .2s}
/* Continuous year rail. Empty years provide space for future entries. */
.timeline-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:35px 0 24px}.timeline-tools>span{font-size:12px;letter-spacing:.5px;color:#c6ccca}.timeline-tools button{background:transparent;border:1px solid #89918e;color:var(--paper);width:44px;height:40px;font-size:22px}.timeline-tools button:hover{background:var(--acid);color:var(--ink)}.timeline#career-rail{display:block;overflow-x:auto;margin:0 0 25px;padding:12px 0 16px;scrollbar-width:thin;scrollbar-color:var(--acid) #454b49;cursor:grab;touch-action:pan-x pan-y}.timeline-ruler{display:flex;width:max-content;min-width:100%;padding:0 3px}.year-cell{width:140px;flex:0 0 140px;border-top:1px solid #7e8682;position:relative;padding:20px 12px 0 0;min-height:160px;display:flex;flex-direction:column;gap:12px}.year-cell::before{content:'';position:absolute;height:8px;width:1px;background:#7e8682;top:0;left:0}.year-tick{font-size:17px;font-weight:600;color:#8b9590}.timeline .career-marker{border:1px solid #757f79;background:#ffffff08;color:var(--paper);padding:10px 9px;font-size:13px;line-height:1.4;min-height:60px;position:relative;transition:background .2s,color .2s;text-align:left}.timeline .career-marker::before{display:none}.timeline .career-marker.active,.timeline .career-marker:hover,.timeline .career-marker:focus-visible{background:var(--acid);color:var(--ink);border-color:var(--acid)}.timeline.dragging{cursor:grabbing}.timeline-detail{min-height:230px}
/* A concise enquiry form. Delivery is explicitly through the visitor's email app. */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start;padding:15px 0 35px}.contact-layout h2{font-size:clamp(66px,6.5vw,112px);margin-top:5px}.contact-intro{font-size:18px;line-height:1.5;max-width:350px}.contact-layout>div>p:last-child{font-size:14px;line-height:1.6}.contact form{padding-top:10px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact label{display:flex;flex-direction:column;gap:9px;font-size:14px;font-weight:600;margin-bottom:22px}.contact input,.contact select,.contact textarea{width:100%;max-width:100%;border:0;border-bottom:1px solid #10131580;background:#ffffff28;border-radius:0;padding:12px;font:400 16px var(--body);color:var(--ink)}.contact input::placeholder,.contact textarea::placeholder{color:#363b38;opacity:.85}.contact textarea{resize:vertical;min-height:140px}.contact input:focus,.contact select:focus,.contact textarea:focus{background:#ffffff70;outline:2px solid var(--ink);outline-offset:3px}.form-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center}.send-button{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:16px 18px;font-size:12px;line-height:1.5;text-align:left;font-weight:700}.send-button span{margin-left:15px;font-size:18px}#copy-message{background:transparent;border-bottom:1px solid;font-size:12px;padding:7px 0}.form-note,#form-status{font-size:12px;line-height:1.6;max-width:470px}.contact-bottom{clear:both}.form-note{opacity:.85}
@media(min-width:1500px){.project{flex-basis:clamp(360px,28vw,490px)}}
@media(max-width:1050px) and (min-width:701px){.portrait-stage{left:37%;right:-6%;top:0;height:auto;bottom:-5px}.contact-layout{gap:5%}.contact-layout h2{font-size:65px}.form-row{grid-template-columns:1fr;gap:0}header nav{gap:3px}header nav a{min-width:70px}.hero-detail{font-size:14px}.portrait-stamp{right:16%}}
@media(max-width:700px){header nav a{min-width:46px;font-size:12px}header nav a i{display:none}header nav a::after{display:none}header nav{gap:8px}.nav-lab:hover span{font-size:19px}.hero{padding-bottom:460px;min-height:0}.hero-statement{margin-top:26px}.hero-detail,.current-role{background:none;max-width:100%;width:auto}.portrait-stage{left:13%;right:-8%;top:auto;bottom:-4px;height:455px;overflow:visible}.portrait-stage #hero-portrait{object-position:center bottom}.colour-slab{inset:32px 18% 10px 10%}.mode-panel{top:auto;bottom:170px;left:5%;right:auto;width:125px}.portrait-stamp{right:17%;bottom:50px;font-size:17px}.hand-note{top:8px;left:20%;font-size:21px}.type-outline{right:10%;top:40px}.scroll-cue{bottom:12px;left:5%;right:auto;background:var(--paper)}.project{flex-basis:82%;min-width:265px;max-width:350px}.section-heading h2:hover,.lab h2:hover,.leadership h2:hover{text-shadow:none}.timeline-tools{align-items:start;margin:25px 0 18px}.timeline-tools>span{font-size:11px;max-width:200px;line-height:1.6}.timeline-tools>div{display:flex;gap:5px}.timeline-tools button{width:36px;height:36px}.year-cell{width:130px;flex-basis:130px}.timeline .career-marker{min-height:65px;font-size:13px}.contact-layout{grid-template-columns:1fr;gap:25px}.contact-layout h2{font-size:clamp(64px,15vw,94px)}.form-row{grid-template-columns:1fr;gap:0}.contact label{margin-bottom:20px}.send-button{width:100%;display:flex;justify-content:space-between}.form-note,#form-status{font-size:13px}.contact-intro{font-size:17px}.contact-bottom{gap:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.contact-nav,.gallery-nav button,.archive-call>a,.send-button,#copy-message,.timeline-tools button,.mode-panel button[data-mode]{translate:none!important}.reading-progress{display:none}}