/* The header's Work menu, the same on every page, and a soft fade between pages */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
/* Say hi: the one warm note in the header */
.hud-r a[href^="mailto:"]{color:#e8643c !important}
.hud-r a[href^="mailto:"]:hover{border-color:#e8643c !important}
/* "Freelance designer", beside the name in the header */
.brand-role{display:inline-block;margin-left:12px;padding-left:12px;border-left:1px solid rgba(239,232,216,.26);color:#a9b2a4;font:400 10px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;vertical-align:.08em}
@media (max-width:900px){.brand{display:inline-block}.brand-role{display:block;margin:4px 0 0;padding:0;border:0;font-size:9px;letter-spacing:.12em;vertical-align:baseline}}
.mn{position:relative;display:flex}
.mn-btn{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px 0 16px;border:1px solid rgba(239,232,216,.34);border-radius:999px;background:none;color:#efe8d8;cursor:pointer;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s,background-color .3s,border-color .3s}
.mn-btn:hover,.mn-btn:focus-visible,.mn-btn[aria-expanded="true"]{color:#16211a;background:#efe8d8;border-color:#efe8d8}
.mn-btn svg{width:9px;height:9px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mn-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mn-panel{position:absolute;right:0;top:calc(100% + 12px);display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:8px;width:min(620px,calc(100vw - 32px));padding:10px;border-radius:18px;background:#1d2b22;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(239,232,216,.12);text-transform:none;letter-spacing:0;visibility:hidden;opacity:0;transform:translateY(-8px);transform-origin:top right;transition:opacity .25s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s .25s}
.mn.open .mn-panel{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mn-list{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.mn-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:9px 12px;border-radius:10px;color:#efe8d8 !important;text-decoration:none !important;border:0 !important;font-family:"Bricolage Grotesque",system-ui,sans-serif;opacity:0;transform:translateY(6px);transition:background .2s,opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.mn.open .mn-row{opacity:1;transform:none;transition-delay:0s,calc(var(--i) * 30ms),calc(var(--i) * 30ms)}
.mn-row:hover,.mn-row:focus-visible{background:rgba(239,232,216,.07)}
.mn-row i{font:400 10px "JetBrains Mono",ui-monospace,monospace;font-style:normal;color:#e8643c}
.mn-row b{font-weight:600;font-size:15px;letter-spacing:-.015em}
.mn-row span{font-size:12px;color:#a9b2a4}
.mn-row[aria-current="page"] b::after{content:" · here";font-weight:400;font-size:12px;color:#a9b2a4}
.mn-prev{position:relative;overflow:hidden;border-radius:10px;background:#16211a}
.mn-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .35s,transform .7s cubic-bezier(.2,.7,.2,1)}
.mn-prev img.on{opacity:1;transform:none}
.mn-prev img.logo{padding:16%;object-fit:contain;background:#efe6d2}
.mn-all{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:2px;padding:12px;border-top:1px solid rgba(239,232,216,.14);color:#efe8d8 !important;text-decoration:none !important;font:11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.mn-all:hover,.mn-all:focus-visible{color:#e8643c !important}
@media (max-width:480px){.hud-r > a{white-space:nowrap}.hud-r .bar{display:none !important}.mn-btn{min-height:30px;padding:0 10px 0 12px}}
@media (max-width:640px){.mn-panel{position:fixed;left:16px;right:16px;top:64px;width:auto;grid-template-columns:1fr}.mn-prev{display:none}.mn-row{padding:11px 10px}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.mn-panel,.mn-row,.mn-btn svg,.mn-prev img{transition:none !important}.mn-row{transform:none}}