/* /css/nav.css: the site header + mobile menu for pages with their own stylesheet (/folio, /resume). Same rules as
   /css/site.css, scoped under .nav / .msheet so the page's own .btn/.wrap/.mark/.lab rules can't leak in. Generated by build/p0.py. */
.nav{--m:24px;position:sticky;top:0;z-index:10;background:#07070A;border-bottom:1px solid rgba(255,255,255,.08)}
@media(min-width:640px){.nav,.msheet{--m:48px}}
@media(min-width:1280px){.nav,.msheet{--m:72px}}
.msheet{--m:24px}
.nav .wrap,.msheet .wrap{max-width:calc(var(--rn-max) + 2*var(--m));margin:0 auto;padding:0 var(--m)}
.nav .lab,.msheet .lab{font:var(--rn-t-label);font-family:RNSym,"IBM Plex Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--rn-text-3)}
.nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:0;height:32px;padding:0 12px;font:var(--rn-t-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav .btn--secondary{border:1px solid var(--rn-line-strong);color:var(--rn-text-1)}
.nav .btn--secondary:hover{border-color:var(--rn-cyan);color:var(--rn-cyan)}
.nav__bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .brand svg.mark{flex:none;width:38px;height:12px;display:inline}
.nav__links{display:none;align-items:center}
.nav__tabs{display:flex;border-top:1px solid var(--rn-line);height:44px;align-items:stretch}
.nav__tabs a,.nav__links a{font:var(--rn-t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--rn-text-3);text-decoration:none;display:flex;align-items:center;position:relative}
.nav__tabs a{flex:1;justify-content:center;border-right:1px solid var(--rn-line)}
.nav__tabs a:last-child{border-right:0}
.nav a:hover{color:var(--rn-text-1)}
.nav__right{display:flex;align-items:center;gap:16px}
.nav__sec{display:none}
.nav .menu{font:var(--rn-t-label);letter-spacing:.2em;color:var(--rn-text-3);display:flex;align-items:center;gap:6px}
.nav .menu .g{font-size:16px;margin:0;font-family:RNSym,"IBM Plex Mono",monospace}
.nav .sm-show{display:inline}.nav .sm-hide{display:none}
@media(min-width:640px){.nav .sm-show{display:none}.nav .sm-hide{display:inline}}
@media(min-width:960px){.nav__tabs{display:none}.nav__links{display:flex;gap:32px;height:64px}
 .nav__sec{display:flex;gap:24px;padding-left:24px;border-left:1px solid var(--rn-line);height:24px;align-items:center}
 .nav .menu{display:none}.nav .brand svg.mark{width:44px;height:14px}}

/* /folio + /resume below 640px: the hero ichthus moves to the bottom left of the hero text, after the name block
   (clear of the header wordmark by far more than 96px; never directly under it). Desktop layout unchanged. */
@media (max-width:639px){
.hero-txt{display:flex;flex-direction:column}
.hero-txt>.top{display:contents}
.hero-txt>.top>.lab{order:-1;align-self:flex-end}
.hero-txt>.top>.mark{order:99;align-self:flex-start;margin-top:32px}
}
/* p0-menu (#41) */
.nav button.menu{background:none;border:1px solid var(--rn-line);min-height:44px;min-width:44px;padding:0 12px;justify-content:center;cursor:pointer;color:var(--rn-text-1)}
.nav button.menu:hover{border-color:var(--rn-text-3)}
.nav button.menu:focus-visible,.msheet button:focus-visible,.msheet a:focus-visible{outline:2px solid var(--rn-cyan);outline-offset:3px}
.msheet{position:fixed;inset:0;z-index:50;background:var(--rn-bg);overflow-y:auto}
.msheet[hidden]{display:none}
.msheet__bar{display:flex;align-items:center;justify-content:space-between;height:64px;border-bottom:1px solid var(--rn-line)}
.msheet__close{background:none;border:1px solid var(--rn-line);color:var(--rn-text-1);min-width:44px;min-height:44px;font-size:16px;cursor:pointer}
.msheet__list{list-style:none;margin:0;padding:8px 0}
.msheet__list a{display:flex;align-items:center;min-height:64px;border-bottom:1px solid var(--rn-line);font:var(--rn-t-h2);text-transform:uppercase;letter-spacing:.02em;color:var(--rn-text-1);text-decoration:none}
.msheet__list a:hover{color:var(--rn-cyan)}
.msheet__list .msheet__book{color:var(--rn-cyan)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:960px){.msheet{display:none}}
/* /p0-menu */