.site-header nav{gap:24px}
.site-header nav .nav-pill,.nav-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:4px 3px;min-height:32px;border-radius:0;background:transparent;color:var(--ink);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;isolation:isolate;transition:background .2s}
.site-header nav .nav-pill[aria-current=page],.nav-pill:is(:hover,:focus-visible){background:transparent}
.site-header nav .nav-pill:after{display:none}
.site-header nav .nav-label,.site-header nav .nav-letter,.nav-label,.nav-letter{font:inherit;color:inherit}
.nav-label{display:inline-flex;position:relative;z-index:1}
.nav-letter{display:inline-block;transform-origin:50% 90%}
.nav-icon{display:block;flex:none;width:27px;height:27px}
.nav-icon svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-pupils{fill:currentColor;stroke:none;transition:transform .12s ease-out}
.nav-hammer{transform-origin:16px 27px;transform:rotate(-12deg)}
.nav-plane{opacity:0;transform-origin:16px 16px}
.nav-sheet{transform-origin:16px 16px}
.sheet-fold-left,.sheet-fold-right{fill:#e9e4d2;stroke:transparent;stroke-width:1.1;transform-origin:17px 16px}
.nav-flower{transform-origin:16px 16px}
.nav-arrow-line,.nav-arrow-head{transition:d .55s cubic-bezier(.22,.8,.25,1)}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=work] .nav-hammer{animation:nav-hammer-tap .8s cubic-bezier(.3,.7,.3,1) infinite}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=work] .nav-letter{animation:nav-letter-wobble .7s ease-in-out infinite;animation-delay:calc(var(--letter-index)*-.12s)}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=about] .nav-eyes{transform-origin:16px 16px;animation:nav-eyes-blink 3.6s ease-in-out infinite}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=gallery] .nav-flower{animation:nav-flower-spin 1.9s linear infinite}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=resume] .nav-sheet{animation:nav-paper-fold 1.5s ease-in-out infinite}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=resume] .sheet-fold-left{stroke:currentColor;animation:nav-fold-left 1.5s ease-in-out infinite}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=resume] .sheet-fold-right{stroke:currentColor;animation:nav-fold-right 1.5s ease-in-out infinite}
.nav-pill:is(:hover,:focus-visible)[data-nav-kind=resume] .nav-plane{animation:nav-plane-launch 1.5s ease-in-out infinite}
.nav-pill:is(:hover,:focus-visible):is([data-nav-kind=back-to-top],[data-nav-kind=back]) .nav-arrow-line{d:path("M24 24C19 20 17 11 16 2C15 -7 19 -18 16 -28C14 -38 16 -43 16 -49")}
.nav-pill:is(:hover,:focus-visible):is([data-nav-kind=back-to-top],[data-nav-kind=back]) .nav-arrow-head{d:path("M11 -43L16 -49L21 -43")}
.nav-pill[data-nav-kind=back] .nav-icon svg{transform:rotate(-90deg)}
.case-back.nav-pill,.threadit-end .nav-pill,.site-footer>.nav-pill{font-size:11px;padding:6px 12px;width:fit-content}
.case-back.nav-pill:hover,.threadit-end .nav-pill:hover{text-decoration:none}
.threadit-nav>div{align-items:center}
.threadit-nav-divider{flex:none;width:1px;height:18px;background:var(--line)}
.threadit-nav a.section-back.nav-pill{padding:5px 0;min-height:0;border-radius:0;background:transparent;font-size:11px;font-weight:400;border-bottom-color:transparent}
.threadit-nav .section-back .nav-icon{width:20px;height:20px}
@keyframes nav-hammer-tap{0%,100%{transform:rotate(-12deg)}35%{transform:rotate(28deg)}62%{transform:rotate(-34deg)}80%{transform:rotate(-6deg)}}
@keyframes nav-letter-wobble{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-2px) rotate(-9deg)}65%{transform:translateY(3px) rotate(9deg)}}
@keyframes nav-eyes-blink{0%,88%,96%,100%{transform:scaleY(1)}92%{transform:scaleY(.08)}}
@keyframes nav-flower-spin{to{transform:rotate(360deg)}}
@keyframes nav-fold-left{0%,10%,90%,100%{transform:none}35%,65%{transform:skewY(25deg) scaleX(.15)}}
@keyframes nav-fold-right{0%,10%,90%,100%{transform:none}35%,65%{transform:skewY(-25deg) scaleX(.15)}}
@keyframes nav-paper-fold{0%,15%,100%{opacity:1;transform:none}40%{opacity:1;transform:scale(.7) rotate(25deg)}50%,85%{opacity:0;transform:scale(.35) rotate(45deg)}95%{opacity:1;transform:none}}
@keyframes nav-plane-launch{0%,38%,90%,100%{opacity:0;transform:scale(.3) rotate(-20deg)}52%{opacity:1;transform:scale(.95) rotate(0)}65%{opacity:1;transform:translate(0,0) scale(1)}82%{opacity:0;transform:translate(13px,-10px) scale(.8)}}
html[data-theme=night] .nav-pill{background:#393740}
html[data-theme=night] .site-header nav .nav-pill[aria-current=page],html[data-theme=night] .nav-pill:is(:hover,:focus-visible){background:#514653}
html[data-theme=night] .sheet-fold-left,html[data-theme=night] .sheet-fold-right{fill:#393740}
@media(max-width:900px){.site-header nav{gap:7px}.site-header nav .nav-pill{padding:4px 7px;gap:6px;font-size:12px}}
@media(max-width:600px){.site-header nav{gap:6px}.site-header nav .nav-pill{flex:1;min-width:0;padding:3px 5px;gap:5px;font-size:11px;min-height:30px}.nav-icon{width:21px;height:21px}.site-footer>.nav-pill{font-size:10px}.site-header nav .nav-label{flex:none}}
@media(max-width:360px){.site-header nav .nav-pill{font-size:10px;gap:3px;padding-inline:4px}.site-header nav .nav-icon{width:18px;height:18px}}
@media(max-width:600px){.threadit-nav a.section-back.nav-pill{font-size:10px}.threadit-nav .section-back .nav-icon{width:18px;height:18px}.threadit-nav .section-back:is(:hover,:focus-visible) .nav-arrow-line{d:path("M24 24C19 20 17 11 16 2C15 -4 19 -9 16 -14C14 -19 16 -20 16 -24")}.threadit-nav .section-back:is(:hover,:focus-visible) .nav-arrow-head{d:path("M11 -18L16 -24L21 -18")}}
@media(prefers-reduced-motion:reduce){.nav-pill *{animation:none!important;transition:none!important}.nav-pill:is([data-nav-kind=back-to-top],[data-nav-kind=back]) .nav-arrow-line{d:path("M24 24C19 20 17 11 16 9C16 8 16 8 16 7C16 7 16 7 16 6")}.nav-pill:is([data-nav-kind=back-to-top],[data-nav-kind=back]) .nav-arrow-head{d:path("M11 11L16 6L21 11")}}

.site-header nav .nav-pill[aria-current=page] .nav-label{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
html[data-theme=night] .site-header nav .nav-pill,html[data-theme=night] .site-header nav .nav-pill[aria-current=page],html[data-theme=night] .site-header nav .nav-pill:is(:hover,:focus-visible){background:transparent}

/* Compact navigation is a disclosure, with the same four page links. */
.nav-menu-toggle{display:none}
.nav-menu-toggle svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.nav-menu-toggle path{transform-origin:12px 12px;transition:transform .2s ease,opacity .2s ease}
.nav-menu-toggle[aria-expanded=true] .menu-upper{transform:translateY(6px) rotate(45deg);transform-origin:12px 6px}
.nav-menu-toggle[aria-expanded=true] .menu-middle{opacity:0}
.nav-menu-toggle[aria-expanded=true] .menu-lower{transform:translateY(-6px) rotate(-45deg);transform-origin:12px 18px}
@media(max-width:900px){
 :root{--header-height:64px}
 .site-header.nav-compact-ready{height:var(--header-height);min-height:0;flex-wrap:nowrap;gap:12px;padding:8px 18px}
 .site-header.nav-compact-ready .nav-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border-radius:10px;color:var(--ink);background:transparent}
 .site-header.nav-compact-ready nav{display:none;position:absolute;top:calc(100% + 8px);right:18px;left:auto;width:min(238px,calc(100vw - 36px));padding:10px;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 12px 36px #00000014}
 .site-header.nav-compact-ready[data-menu-open=true] nav{display:flex}
 .site-header.nav-compact-ready nav .nav-pill{display:flex;flex:none;justify-content:flex-start;gap:12px;padding:10px 12px;min-height:44px;border-radius:9px;font-size:14px}
 .site-header.nav-compact-ready nav .nav-icon{width:24px;height:24px}
 .site-header.nav-compact-ready nav .nav-pill[aria-current=page]{background:color-mix(in srgb,var(--ink) 5%,transparent)}
 .site-header.nav-compact-ready nav .nav-pill:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ink) 8%,transparent)}
}
@media(prefers-reduced-motion:reduce){.nav-menu-toggle path{transition:none}}