/* Site chrome shared by every page, the UI/UX wall included: the masthead,
   text links and the floating navigation. Loads right after style.css on
   the main pages, so typography.css and nav-motion.css still refine it. */
/* The chrome's own base: what the main pages' root gives it (style.css sets
   Manrope on :root), stated so pages with another body font match. */
.masthead,.floating-nav,.theme-corner{font-family:Manrope,sans-serif;font-size:16px;line-height:normal}
.masthead{margin:16px 70px 0 48px;min-height:112px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:30px;padding-right:145px}
.wordmark{font-size:17px;font-weight:800;letter-spacing:-.045em}
.wordmark span{display:block;font:400 11px/1.8 'IBM Plex Mono',monospace;letter-spacing:0}
.masthead>.mono{justify-self:center;font-size:11px;line-height:1.55;letter-spacing:.035em}
.text-link{display:inline-block;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 5px;font:600 13px/1.5 Manrope,sans-serif;text-align:left}
.text-link:hover{color:var(--violet)}
.floating-nav{position:fixed;bottom:38px;left:38px;z-index:40}
.nav-capsule{display:flex;align-items:center;background:var(--paper);padding:7px;gap:8px;border:1px solid var(--wine);border-radius:50px;box-shadow:0 7px 20px #351d2c1a;width:max-content}
.nav-monogram{font:500 38px/1 'Bodoni Moda',serif;letter-spacing:-.12em;width:54px;text-align:center;transform:rotate(-10deg);padding-right:5px}
.nav-capsule button{border:0;background:var(--violet);color:var(--paper);border-radius:35px;min-width:135px;min-height:44px;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:12px;font-weight:700}
.nav-plus{font-size:21px;line-height:1;transition:transform 480ms var(--ease,cubic-bezier(.2,.8,.2,1))}
.nav-capsule button[aria-expanded=true] .nav-plus{transform:rotate(45deg)}
.nav-panel{background:var(--paper);border:1px solid var(--wine);padding:22px 25px 15px;border-radius:14px;margin-bottom:10px;width:310px;box-shadow:0 15px 40px #351d2c22}
.nav-panel>.mono{margin-bottom:12px;font-size:10px}
.nav-panel a{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid var(--line);padding:15px 0;overflow:clip}
.nav-panel a>span{font:500 33px/1 'Bodoni Moda',serif;letter-spacing:-.05em;transition:transform 300ms var(--ease,cubic-bezier(.2,.8,.2,1)),color 140ms}
.nav-panel a>small{font-size:10px}
.nav-panel a:hover>span{transform:translateX(8px) skewX(-8deg);color:var(--violet)}
@media(min-width:1500px){.masthead{max-width:1420px;margin-left:auto;margin-right:auto}}
@media(max-width:1050px){.masthead{padding-right:100px;grid-template-columns:1fr auto}.masthead>.mono{display:none}}
@media(max-width:700px){.masthead{margin:10px 38px 0 26px;min-height:100px;padding:0 90px 0 0;grid-template-columns:1fr;gap:0;align-content:center}.wordmark{font-size:15px}.wordmark span{font-size:10px}.masthead>.text-link{font-size:11px;justify-self:start;margin-top:9px;padding:0;border:0}.floating-nav{left:23px;bottom:24px}.nav-capsule{padding:5px;gap:4px}.nav-monogram{font-size:32px;width:43px}.nav-capsule button{min-width:119px;min-height:42px;font-size:11px;padding:9px 15px}.nav-panel{width:min(285px,calc(100vw - 65px));padding:18px 20px 12px}.nav-panel a>span{font-size:29px}}
/* Rolling labels that site.js builds inside text links. */
.roll-label{position:relative;display:inline-grid;overflow:clip;vertical-align:bottom}
.roll-label>span{grid-area:1/1;display:block}
.roll-label>span+span{transform:translateY(110%)}
/* Arrows (wrapped by site.js): each moves toward where it points while its
   control is hovered or focused; circular arrows turn. The glyph is drawn as
   an SVG stroked in the text colour, so iOS never swaps in its emoji. */
.arrow-svg{display:inline-block;width:.78em;height:.78em;vertical-align:-.12em;overflow:visible;fill:currentColor;stroke:currentColor;stroke-width:1.4}
.arrow-glyph{display:inline-block;transition:translate 320ms cubic-bezier(.2,.8,.2,1),rotate 420ms cubic-bezier(.2,.8,.2,1)}
:is(a,button,summary,label,.project-card,.gallery-plane):is(:hover,:focus-visible) .arrow-glyph,
:is(a,button,summary):is(:hover,:focus-visible)>.arrow-glyph{translate:calc(var(--ax,0) * max(3px,.2em)) calc(var(--ay,0) * max(3px,.2em))}
:is(a,button,summary,label,.project-card,.gallery-plane):is(:hover,:focus-visible) .arrow-glyph[data-arrow=spin]{translate:none;rotate:-180deg}
/* The explore arrow's own snap is replaced by the shared motion. */
.arrow-link:hover>span{transform:none}
.arrow-link>.arrow-glyph{transition:translate 320ms cubic-bezier(.2,.8,.2,1)!important}
@media(prefers-reduced-motion:reduce){.arrow-glyph{transition:none!important;translate:none!important;rotate:none!important}}