/* Recovered stroke animation: one six-second write/erase cycle with eased acceleration and deceleration. */
#preloader{animation:preloader-failsafe 0s 8s forwards}
.signature-draw{width:197px;height:85px;background:none;mask:none;-webkit-mask:none;clip-path:none;animation:none;display:grid;place-items:center}
.signature-draw svg{display:block}
.hero-name img{filter:none}
.ready .hero-portrait,.ready .hero-name{opacity:var(--scroll-opacity,1);transition:opacity .18s linear}
.reveal,#biography p{transition:opacity .12s linear,translate .12s linear}
.ethos-word{display:inline-block;white-space:nowrap}
.ethos-letter{opacity:0;transition:opacity 60ms linear}
.ethos-letter.written{opacity:1}
.ethos-signature,.dark .ethos-signature{filter:none;color:var(--ink)}
.ethos-signature svg{display:block}
.biography.collapsed{height:378px;max-height:none}
.biography{overflow:hidden}
.project-row{cursor:default}
@media(max-width:700px){.biography.collapsed{height:282px;max-height:none}}
@media(hover:hover) and (pointer:fine){.project-row{cursor:none}}
@media(prefers-reduced-motion:reduce){.ethos-letter{opacity:1}.ready .hero-portrait,.ready .hero-name{opacity:1!important}.reveal,#biography p{opacity:1!important;translate:none!important}}
.socials .social-button{height:27px;display:inline-flex;align-items:center;justify-content:center;gap:0;padding:0 5px;white-space:nowrap;overflow:hidden;transform:none;transition:background-color .25s,color .25s,border-color .25s}
.socials .social-button>span:first-child{line-height:21px}
.social-icon-slot{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .3s cubic-bezier(.22,1,.36,1),opacity .2s,margin-left .3s;margin-left:0}
.social-icon{display:block;width:20px;height:20px;min-width:0;overflow:hidden;background:currentColor;mask:var(--social-icon) center/20px 20px no-repeat;-webkit-mask:var(--social-icon) center/20px 20px no-repeat}
.social-icon-slot{width:0;transition:width .3s cubic-bezier(.22,1,.36,1),opacity .2s,margin-left .3s}
.social-behance{--social-icon:url('assets/behance.svg')}
.social-linkedin{--social-icon:url('assets/linkedin.svg')}
.social-instagram{--social-icon:url('assets/instagram.svg')}
.socials .social-button:is(:hover,:focus-visible){background:#000;color:#eeff3f;border-color:#000;transform:none}
.socials .social-button:is(:hover,:focus-visible) .social-icon-slot{width:20px;grid-template-columns:1fr;opacity:1;margin-left:4px}
.dark footer .socials .social-button:is(:hover,:focus-visible){background:#eeff3f;color:#000;border-color:#eeff3f}
/* Project controls use the supplied complete SVGs, including their circles. */
.project-row h3,.project-row .project-description{transition:color .25s}
.project-row:is(:hover,:focus-visible) h3,.project-row:is(:hover,:focus-visible) .project-description{color:#ff0066}
.dark .project-row:is(:hover,:focus-visible) h3,.dark .project-row:is(:hover,:focus-visible) .project-description{color:#eeff3f}
.project-row .expand-icon,.project-row:is(:hover,:focus-visible) .expand-icon,.dark .project-row:is(:hover,:focus-visible) .expand-icon{width:50px;height:50px;border:0;background:transparent;transform:translateY(-50%);transition:none}
.project-row .expand-icon img{position:absolute;top:50%;left:50%;translate:-50% -50%;transition:opacity .25s,scale .25s;pointer-events:none}
.project-row .expand-icon .expand-default{width:44px;height:44px;filter:invert(1);opacity:1}
.project-row .expand-icon .expand-hover{width:50px;height:50px;filter:none;opacity:0;scale:.88}
.dark .project-row .expand-icon .expand-default{filter:none}
.dark .project-row:is(:hover,:focus-visible) .expand-icon .expand-default{opacity:0}
.dark .project-row:is(:hover,:focus-visible) .expand-icon .expand-hover{opacity:1;scale:1}
@media(max-width:700px){.project-row .expand-icon,.project-row:is(:hover,:focus-visible) .expand-icon,.dark .project-row:is(:hover,:focus-visible) .expand-icon{top:25px;right:-3px;transform:none}}
/* Figma button states: the round background grows from the arrow towards the label. */
.nav-links>a{transition:background-color .25s,color .25s}
.nav-links>a:is(:hover,:focus-visible){background:#000;color:#eeff3f}
.contact-link,.text-action,.mobile-project-toggle{--button-size:26px;--button-bg:var(--ink);--button-hover-bg:#000;--button-hover-text:#eeff3f;position:relative;isolation:isolate;width:max-content;border-radius:30px;min-height:var(--button-size);transition:color .3s}
.contact-link::before,.text-action::before,.mobile-project-toggle::before{content:'';position:absolute;z-index:-1;right:0;top:50%;translate:0 -50%;width:var(--button-size);height:var(--button-size);border-radius:30px;background:var(--button-bg);transition:width .38s cubic-bezier(.22,1,.36,1),background-color .25s}
.contact-link .round,.text-action .round,.mobile-project-toggle .round{width:var(--button-size);height:var(--button-size);flex:0 0 var(--button-size);background:transparent;transform:none;transition:color .25s;line-height:1}
.contact-link:is(:hover,:focus-visible),.text-action:is(:hover,:focus-visible),.mobile-project-toggle:is(:hover,:focus-visible){color:var(--button-hover-text)}
.contact-link:is(:hover,:focus-visible)::before,.text-action:is(:hover,:focus-visible)::before,.mobile-project-toggle:is(:hover,:focus-visible)::before{width:calc(100% + 12px);background:var(--button-hover-bg)}
.contact-link:is(:hover,:focus-visible) .round,.text-action:is(:hover,:focus-visible) .round,.mobile-project-toggle:is(:hover,:focus-visible) .round{transform:none;background:transparent;color:var(--button-hover-text)}
.navbar .contact-link{--button-size:32px;--button-bg:#000;width:117px;padding-left:13px;gap:0;justify-content:space-between}
.navbar .contact-link::before{background:#000}
.navbar .contact-link:is(:hover,:focus-visible)::before{width:100%}
.navbar .contact-link .round{background:transparent;color:#fff}
.navbar .contact-link:is(:hover,:focus-visible) .round{color:#eeff3f}
.contact .contact-link{--button-size:36px;--button-bg:var(--ink);--button-hover-bg:#eeff3f;--button-hover-text:#000}
.mobile-project-toggle{--button-hover-bg:#eeff3f;--button-hover-text:#000}
.bio-tabs button:not(.active):is(:hover,:focus-visible){background:#f5fbb3;border-color:#d7e634;color:#000}
.bio-tabs button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:700px){
 .navbar{display:grid;grid-template-columns:minmax(0,1fr) 27px;grid-template-rows:39px 105px;column-gap:0;row-gap:11px;align-content:start;align-items:center;padding:10px 0;height:59px;overflow:hidden;transition:height .42s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),padding .42s,top .42s,background .35s,color .35s;}
 .navbar.compact{padding:10px 13px;background:rgba(255,255,255,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 .navbar.menu-open{height:175px;padding:10px 13px;background:rgba(255,255,255,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#000}
 .navbar .logo{justify-self:start;min-width:0;font-size:18px}
 .menu-toggle{width:27px;height:39px;position:relative;display:block;justify-self:end;}
 .menu-toggle span{position:absolute;width:27px;height:1px;left:0;top:calc(50% - .5px);background:currentColor;transform-origin:center;transition:transform .35s cubic-bezier(.22,1,.36,1)}
 .menu-toggle span:first-child{transform:translateY(-4.5px)}
 .menu-toggle span:last-child{transform:translateY(4.5px)}
 .menu-open .menu-toggle span:first-child{transform:rotate(45deg)}
 .menu-open .menu-toggle span:last-child{transform:rotate(-45deg)}
 .navbar .nav-links,.navbar.menu-open .nav-links{position:static;grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:11px;padding:0 16px;background:transparent;border-radius:0;opacity:0;translate:0 -6px;visibility:hidden;transition:opacity .2s,translate .3s,visibility .3s;font-size:18px;font-weight:600;line-height:24px;}
 .navbar.menu-open .nav-links{opacity:1;translate:0 0;visibility:visible;transition:opacity .25s .08s,translate .3s .06s,visibility 0s}
 .navbar .nav-links>a,.navbar .nav-links .contact-link{padding:0;width:100%;min-height:24px;height:24px;text-align:left;display:block;border-radius:0;font-size:18px;line-height:24px;}
 .navbar .nav-links .contact-link::before,.navbar .nav-links .contact-link .round{display:none}
 .navbar .nav-links>a:is(:hover,:focus-visible),.navbar .nav-links .contact-link:is(:hover,:focus-visible){background:transparent;color:#000}
 .navbar .nav-links>a:active,.navbar .nav-links .contact-link:active{color:#ff0066}
}
@media(prefers-reduced-motion:reduce){.contact-link::before,.text-action::before,.mobile-project-toggle::before,.navbar,.navbar .nav-links,.menu-toggle span{transition:none!important}}

/* Match the contact CTA height and ease both directions of the journey pill. */
#read-more{--button-size:36px}
#read-more::before{transition:width .48s cubic-bezier(.65,0,.35,1),background-color .3s ease-in-out}
#read-more,#read-more .round{transition:color .3s ease-in-out}

/* Word-level blur reveal: stable wrapping, no typing or layout jumps. */
.ethos-word{opacity:.35;filter:blur(8px)}
@media(prefers-reduced-motion:reduce){.ethos-word{opacity:1;filter:none}}
/* Compact chips preserve reading order and use the full available width. */
.experience-entry .tags{gap:6px;align-items:flex-start}
.experience-entry .tags span{padding:3px 8px;max-width:100%;text-wrap:pretty;overflow-wrap:anywhere}
.experience-entry .tools span{color:#284ba9}
.experience-entry .skill-title{margin-top:20px;margin-bottom:9px}
@media(min-width:1101px){.experience-entry .tags{max-width:none}}
@media(max-width:700px){.experience-entry .tags{gap:5px}.experience-entry .tags span{padding:3px 6px}}
/* Contact is a native modal dialog; the page and fixed navigation push together. */
:root{--contact-width:min(582px,100vw);--contact-ease:cubic-bezier(.65,0,.35,1)}
html{scrollbar-gutter:stable}
body>main,body>footer{transition:transform .6s var(--contact-ease)}
.navbar{translate:0 0;transition:translate .6s var(--contact-ease),width .7s cubic-bezier(.22,1,.36,1),padding .7s,background .5s,color .5s}
body.contact-lock{overflow:hidden}
body.contact-open>main,body.contact-open>footer{transform:translateX(calc(-1 * var(--contact-width)))}
body.contact-open .navbar{translate:calc(-1 * var(--contact-width)) 0}
body.contact-lock #cursor,body.contact-lock #project-preview{display:none!important}
#contact-panel{position:fixed;inset:0 0 0 auto;margin:0;width:var(--contact-width);max-width:100%;height:100dvh;max-height:none;overflow:auto;overscroll-behavior:contain;border:0;border-radius:0;background:#eeff3f;color:#000;transform:translateX(100%);transition:transform .6s var(--contact-ease);scrollbar-width:thin;color-scheme:light;cursor:auto}
#contact-panel::backdrop{background:rgb(255 255 255 / 0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background .6s var(--contact-ease),backdrop-filter .6s var(--contact-ease),-webkit-backdrop-filter .6s var(--contact-ease)}
.contact-open #contact-panel::backdrop{background:rgb(255 255 255 / .65);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.contact-open #contact-panel{transform:translateX(0)}
#contact-panel :is(button,a){cursor:pointer}
#contact-panel :is(input,textarea){cursor:text}
#contact-panel :is(button,a,input,textarea):focus-visible{outline:1px solid #000;outline-offset:3px}
.contact-panel-content{padding:40px 28px;min-height:100%;display:flex;flex-direction:column;gap:27px}
.contact-back{display:flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;min-height:32px;padding:4px 10px;border-radius:6px;background:#000;color:#fff;font-size:16px;line-height:24px;font-weight:600}
.contact-back:hover{color:#eeff3f}
.contact-panel-heading h2{font-size:40px;line-height:53px;max-width:387px;font-weight:600}
.contact-panel-heading>p{font-size:20px;line-height:1.4;font-weight:600;margin-top:17px}
#contact-form{display:grid;gap:25px}
.contact-field{min-width:0;display:flex;flex-direction:column;gap:11px}
.contact-field label{font-size:16px;line-height:24px;font-weight:600}
.contact-field :is(input,textarea){display:block;width:100%;border:1px solid #303030;background:transparent;color:#000;border-radius:6px;padding:11px 16px;font:400 16px/26px Manrope,Arial,sans-serif;transition:background-color .25s ease,color .25s ease;min-height:50px}
.contact-field textarea{height:195px;min-height:90px;resize:vertical}
.contact-field :is(input,textarea)::placeholder{color:#000;opacity:1}
.contact-field :is(input,textarea):focus{background:#000;color:#eeff3f;caret-color:#eeff3f}
.contact-field :is(input,textarea):focus::placeholder{color:#eeff3f;opacity:1}
.contact-field :is(input,textarea)[aria-invalid=true]{border-width:1px}
.contact-consent{font-size:16px;line-height:26px}
.consent-row{display:flex;gap:15px;align-items:flex-start}
.consent-row input{appearance:none;flex:0 0 23px;width:23px;height:23px;margin:2px 0 0;border:1px solid #303030;border-radius:6px;cursor:pointer!important;display:grid;place-content:center;background:transparent}
.consent-row input:checked{background:#000}
.consent-row input:checked::after{content:'';width:13px;height:13px;background:#eeff3f;mask:url('assets/check.svg') center/contain no-repeat;-webkit-mask:url('assets/check.svg') center/contain no-repeat}
.contact-privacy{text-decoration:underline;text-underline-offset:3px}
.contact-send{min-height:64px;border-radius:6px;background:#000;color:#fff;font-weight:600;font-size:16px;transition:color .25s ease,background-color .25s ease}
.contact-send:is(:hover,:focus-visible){background:#fff;color:#000;box-shadow:none}
.contact-delivery{font-size:13px;line-height:19px;margin-top:-15px}
.contact-status:empty{display:none}
.contact-status{font-size:14px;line-height:22px;border-left:3px solid #000;padding-left:10px}
.field-error{font-size:14px;line-height:21px;font-weight:600;color:#000}
.contact-direct{margin-top:auto;padding-top:12px;font-size:16px;line-height:24px}
.contact-direct h3{font-size:20px;line-height:28px;margin-bottom:18px;font-weight:600}
.contact-direct p+p,.contact-social-row{margin-top:10px}
.contact-direct a:hover{text-decoration:underline}
.contact-social-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
#notice-dialog{cursor:auto}
#notice-dialog button{cursor:pointer}
#notice-dialog p{white-space:pre-line}
@media(min-width:701px) and (max-height:1100px){
 .contact-panel-content{padding:22px 28px;gap:18px}
 .contact-panel-heading h2{font-size:34px;line-height:42px;max-width:370px}
 .contact-panel-heading>p{font-size:17px;line-height:25px;margin-top:10px}
 #contact-form{gap:14px}
 .contact-field{gap:6px}
 .contact-field :is(input,textarea){min-height:44px;padding:8px 14px;line-height:26px}
 .contact-field textarea{height:110px}
 .contact-send{min-height:48px}
 .contact-delivery{margin-top:-6px}
 .contact-direct{padding-top:0}
 .contact-direct h3{font-size:18px;line-height:25px;margin-bottom:10px}
 .contact-direct p+p,.contact-social-row{margin-top:6px}
}
@media(min-width:701px) and (max-height:850px){
 .contact-panel-content{padding:18px 28px;gap:14px}
 .contact-panel-heading h2{font-size:32px;line-height:38px}
 #contact-form{grid-template-columns:1fr 1fr;gap:12px 14px}
 .contact-subject,.contact-message,.contact-consent,.contact-send,.contact-delivery,.contact-status{grid-column:1/-1}
 .contact-field textarea{height:90px}
 .contact-consent{font-size:14px;line-height:22px}
 .contact-direct{font-size:14px;line-height:22px}
 .contact-field input{padding-inline:10px}
}
@media(max-width:700px){
 :root{--contact-width:100vw}
 .contact-panel-content{padding:24px 20px max(24px,env(safe-area-inset-bottom));gap:24px}
 .contact-panel-heading h2{font-size:32px;line-height:42px;max-width:350px}
 .contact-panel-heading>p{font-size:17px;line-height:26px;margin-top:12px}
 #contact-form{gap:20px}
 .contact-field{gap:8px}
 .contact-field textarea{height:160px}
 .contact-send{min-height:56px}
 .contact-direct{padding-top:12px}
}
@media(prefers-reduced-motion:reduce){body>main,body>footer,.navbar,#contact-panel{transition:none!important}}
@media(forced-colors:active){.consent-row input{appearance:auto}.consent-row input::after{display:none}.contact-field :is(input,textarea){border:1px solid CanvasText}.ethos-word{filter:none;opacity:1}}

.full-name button.tooltip-dismissed .name-card{display:none}
.name-card::before{content:'';position:absolute;left:0;right:0;top:100%;height:14px}
@media(max-width:700px){.navbar{transition:translate .6s var(--contact-ease),height .42s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),padding .42s,top .42s,background .35s,color .35s}}
@media(prefers-reduced-motion:reduce){.navbar{transition:none!important}}

/* Pointer focus stays clean; keyboard focus retains a fine visible indicator. */
#contact-panel :is(button,a,input,textarea):focus{outline:none;box-shadow:none}
.keyboard-nav #contact-panel :is(button,a,input,textarea):focus-visible{outline:1px solid #000;outline-offset:3px}
.contact-back>span{display:inline-flex;align-items:center;justify-content:center;width:16px;line-height:1;flex-shrink:0}
.contact-panel-content>*{flex-shrink:0;min-width:0}
.contact-consent label{min-width:0}
.contact-direct a{overflow-wrap:anywhere}
.contact-social-row .socials{flex-wrap:wrap;max-width:100%}
#contact-panel .contact-status{border-left-width:1px}
@media(max-width:700px){
 .contact-panel-content{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
 .contact-back{min-height:40px}
 .contact-social-row{gap:8px}
 .contact-panel-heading h2{font-size:clamp(28px,8vw,32px)}
}
@media(prefers-reduced-motion:reduce){#contact-panel::backdrop{transition:none!important}.ethos-signature{opacity:1!important}}

/* Journey sections: Manrope SemiBold 20 / auto, matching the supplied reference. */
.biography h3{font-size:20px;font-weight:600;line-height:27px;margin:34px 0 20px;transition:opacity .12s linear,translate .12s linear}
.biography p+p{margin-top:18px}
.biography strong{font-weight:700}
.role{max-width:100%;text-wrap:pretty}
#project-list .project-row{display:block;text-decoration:none;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){
 .biography h3{font-size:20px;line-height:27px;margin:28px 0 16px}
 .biography p+p{margin-top:16px}
 #project-list .project-row .desktop-project-icon{display:block;top:25px;right:-3px;transform:none}
 #project-list .project-row .project-copy{width:100%;padding-right:0}
 #project-list .project-row h3{padding-right:62px;min-height:44px;display:flex;align-items:center}
 #project-list .project-row .project-description{margin-top:6px;margin-bottom:16px;max-height:none;min-height:0;mask-image:none;-webkit-mask-image:none}
 #project-list .project-row .tags{width:100%}
}
@media(prefers-reduced-motion:reduce){.biography h3{opacity:1!important;translate:none!important;transition:none!important}}

/* Prepare the signature offscreen before revealing its first animation frame. */
.ethos-signature{opacity:0}
@media(prefers-reduced-motion:reduce){.ethos-signature{opacity:1}}
/* Privacy content uses the same readable hierarchy on mobile and desktop. */
#notice-dialog{width:min(760px,calc(100vw - 32px));max-width:none;max-height:88dvh;padding:38px 32px;overflow:auto;overscroll-behavior:contain;border-radius:6px}
#notice-dialog .notice-close{position:sticky;display:block;top:-24px;margin:-20px -16px 0 auto;width:36px;height:36px;background:#f0f0f0;border-radius:50%;font-size:26px;line-height:1;z-index:1}
#notice-title:focus{outline:none}
.privacy-copy{font-size:16px;line-height:26px;color:#000}
.privacy-copy h3{font-size:20px;font-weight:600;line-height:28px;margin:28px 0 12px}
.privacy-copy p+p{margin-top:12px}
.privacy-copy a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.privacy-updated{font-size:14px;color:#555;margin-bottom:20px}
.privacy-page,.privacy-page a{cursor:auto}
.privacy-page a{cursor:pointer}
.privacy-document{width:min(760px,calc(100% - 40px));margin:0 auto;padding:40px 0 70px}
.privacy-document h1{font-size:36px;line-height:1.3;margin:30px 0 20px}
.privacy-back{font-weight:600}
@media(max-width:700px){#notice-dialog{padding:30px 22px}.privacy-copy{font-size:15px;line-height:25px}.privacy-copy h3{font-size:18px;line-height:26px}}
#notice-dialog a{cursor:pointer}

/* Consistent category chips and light-background project controls. */
.project-row .tags span,.dark .project-row .tags span{background:#f5fbb3;border-color:#eeff3f;color:#000}
body:not(.dark) .project-row .expand-icon .expand-default{filter:invert(1)}
body:not(.dark) .project-row:is(:hover,:focus-within) .expand-icon .expand-default{opacity:0}
body:not(.dark) .project-row:is(:hover,:focus-within) .expand-icon .expand-hover{opacity:1;scale:1;filter:none;content:url('/assets/project-arrow-pink.svg')}
#biography{overflow-anchor:none}
#read-more:disabled{cursor:progress}

@media(hover:none),(pointer:coarse){#project-preview{display:none!important}}