/* /css/chrome.css: the ONE shared header + footer (build/chrome/header.html, build/chrome/footer.html), loaded last on every
   page except Janine's /the-studio and /parrotfish. Source: build/chrome/chrome.css (build/chrome.py copies it, hashed URL).
   Self-contained and scoped (.sh-nav, .sh-foot) so it renders the same on pages with their own stylesheet (/folio, /resume, 404).
   Black and white only; cyan is an accent (wordmark A and I on hover, focus ring, current marker). */
.sh-nav,.sh-foot,.sh-head{--m:24px}
@media(min-width:640px){.sh-nav,.sh-foot,.sh-head{--m:48px}}
@media(min-width:1280px){.sh-nav,.sh-foot,.sh-head{--m:72px}}
.sh-nav{position:sticky;top:0;z-index:20;background:#07070A;border-bottom:1px solid rgba(255,255,255,.08)}
.sh-nav .wrap,.sh-foot .wrap{max-width:calc(var(--rn-max,1200px) + 2*var(--m));margin:0 auto;padding:0 var(--m);box-sizing:border-box}
.sh-nav .nav__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;height:auto}
.sh-nav .brand{display:flex;align-items:center;height:64px;text-decoration:none}
.sh-nav .brand .wm{display:block;flex:none;height:13px;width:auto;overflow:visible}
/* wordmark: all white at rest; the cyan A and I only on hover (fine pointers) or keyboard focus */
.sh-nav .brand .wm-ai,.sh-nav .brand .wm-ai-glow,.sh-foot .brand .wm-ai,.sh-foot .brand .wm-ai-glow{opacity:0}
@media (hover:hover) and (pointer:fine){.sh-nav .brand .wm-ai,.sh-foot .brand .wm-ai{transition:opacity 160ms cubic-bezier(.16,1,.3,1)}
 .sh-nav .brand:hover .wm-ai,.sh-foot .brand:hover .wm-ai{opacity:1}}
.sh-nav .brand:focus-visible .wm-ai,.sh-foot .brand:focus-visible .wm-ai{opacity:1}
@media (hover:none){.sh-nav .brand:hover:not(:focus-visible) .wm-ai,.sh-foot .brand:hover:not(:focus-visible) .wm-ai{opacity:0}}
@media (prefers-reduced-motion:reduce){.sh-nav .brand .wm-ai,.sh-foot .brand .wm-ai{transition:none}}

/* primary nav (EVENTS, PROJECTS, STORE): mobile first = a full width row of three under the bar */
.sh-primary{order:3;flex:0 0 auto;width:calc(100% + 2*var(--m));margin:0 calc(-1*var(--m));display:block}
.sh-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rn-line,#24242E);height:44px}
.sh-item{display:flex;min-width:0;border-right:1px solid var(--rn-line,#24242E)}
.sh-item:last-child{border-right:0}
.sh-top{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;margin:0;padding:0 4px;background:none;border:0;border-radius:0;
 font:var(--rn-t-label);font-family:RNSym,"IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
 color:var(--rn-text-3,#8E8E9A);text-decoration:none;cursor:pointer;position:relative}
.sh-top:hover,.sh-top[aria-expanded="true"],.sh-item.is-current>.sh-top{color:var(--rn-text-1,#F2F2F5)}
.sh-item.is-current>.sh-top::after{content:"";position:absolute;left:50%;bottom:0;width:24px;margin-left:-12px;height:2px;background:var(--rn-text-1,#F2F2F5)}
.sh-chev{flex:none;width:10px;height:10px;transition:transform 160ms cubic-bezier(.16,1,.3,1)}
.sh-toggle[aria-expanded="true"] .sh-chev{transform:rotate(180deg)}
.sh-nav a:focus-visible,.sh-nav button:focus-visible,.sh-foot a:focus-visible{outline:2px solid var(--rn-cyan,#54CDF2);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.sh-chev{transition:none}}
/* PROJECTS subnav, mobile: a row of three under the tabs, opened by tapping PROJECTS (no hover needed) */
.sh-sub{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:100%;z-index:1;background:#07070A;
 border-top:1px solid var(--rn-line,#24242E);border-bottom:1px solid var(--rn-line-strong,#3A3A46);display:grid;grid-template-columns:repeat(3,1fr)}
.sh-sub[hidden]{display:none}
.sh-sub li{display:flex;min-width:0;border-right:1px solid var(--rn-line,#24242E)}
.sh-sub li:last-child{border-right:0}
.sh-sub a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:8px 4px;text-decoration:none;position:relative}
.sh-sub__t{font:var(--rn-t-label);font-family:RNSym,"IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--rn-text-1,#F2F2F5)}
.sh-sub__n{font:var(--rn-t-label);font-family:RNSym,"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:lowercase;white-space:nowrap;color:var(--rn-text-3,#8E8E9A)}
.sh-sub a:hover .sh-sub__n,.sh-sub a:focus-visible .sh-sub__n{color:var(--rn-text-2,#B8B8C2)}
.sh-sub a::before{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;margin-left:0;background:var(--rn-cyan,#54CDF2)}
.sh-sub a:hover::before,.sh-sub li.is-current a::before{width:24px;margin-left:-12px}
@media (max-width:379px){.sh-top,.sh-sub__t{letter-spacing:.1em}.sh-top{gap:4px}}
/* desktop: links inline at the right of the bar (where the Book button was), PROJECTS opens a dropdown panel (click, Enter or Space; Esc closes) */
@media(min-width:960px){
 .sh-nav .nav__bar{flex-wrap:nowrap;height:64px}
 .sh-nav .brand .wm{height:15px}
 .sh-primary{order:0;flex:0 1 auto;width:auto;margin:0 0 0 auto}
 .sh-list{display:flex;gap:36px;border-top:0;height:64px}
 .sh-item{border-right:0;position:relative}
 .sh-top{padding:0;gap:8px;height:64px;letter-spacing:.2em}
 .sh-item.is-current>.sh-top::after{left:0;width:100%;margin-left:0;bottom:-1px}
 .sh-nav a:focus-visible,.sh-nav button:focus-visible{outline-offset:4px}
 .sh-sub{left:auto;right:-20px;top:100%;min-width:260px;display:block;padding:8px 0;border:1px solid var(--rn-line-strong,#3A3A46);border-top:0}
 .sh-sub li{border-right:0}
 .sh-sub a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:24px;min-height:44px;padding:12px 20px}
 .sh-sub a::before{left:0;top:12px;bottom:12px;width:0;height:auto;margin:0}
 .sh-sub a:hover::before,.sh-sub li.is-current a::before{width:2px;margin:0}
 .sh-sub a:hover{background:rgba(255,255,255,.04)}
 .sh-nav .sh-sub a:focus-visible{outline-offset:-2px}
}
/* section anchors (/#events, /#active) clear the sticky header */
main section[id]{scroll-margin-top:120px}
@media(min-width:960px){main section[id]{scroll-margin-top:72px}}

/* shared footer */
.sh-foot{display:block;max-width:none;margin:0;padding:40px 0 32px;border-top:1px solid var(--rn-line,#24242E);background:#07070A}
.sh-foot>.wrap{display:block;height:auto;font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.sh-foot .small svg.globe{display:inline;width:1em;height:1em}
.sh-foot .foot__grid{display:grid;gap:32px}
@media(min-width:960px){.sh-foot .foot__grid{grid-template-columns:5fr 3fr 4fr}}
.sh-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sh-foot nav{display:block}
.sh-foot a{text-decoration:none;color:var(--rn-text-2,#B8B8C2)}
.sh-foot a:hover{color:var(--rn-cyan,#54CDF2)}
.sh-foot .lab{font:var(--rn-t-label);font-family:RNSym,"IBM Plex Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--rn-text-3,#8E8E9A)}
.sh-foot .small{font:var(--rn-t-small,400 12.5px/1.5 var(--rn-font-mono));font-family:RNSym,"IBM Plex Mono",monospace;color:var(--rn-text-3,#8E8E9A);margin:0}
.sh-foot .g{font-weight:400;letter-spacing:0;margin-right:.3em}
.sh-foot .brand{display:flex;align-items:center;text-decoration:none}
.sh-foot .brand .wm{display:block;flex:none;height:13px;width:auto}
@media(min-width:960px){.sh-foot .brand .wm{height:15px}}
.sh-foot .foot__base{display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:16px;border-top:1px solid var(--rn-line,#24242E)}
.sh-foot .foot__base svg{width:25px;height:8px}
.sh-nav .sr-only,.sh-foot .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Page headings (Joel 4:47 PM): label eyebrow, H1 = the nav word, H2 = the plain name. Same sizes on every page (build/headings.py) */
.sh-head{box-sizing:border-box;max-width:calc(var(--rn-max,1200px) + 2*var(--m));margin:0 auto;padding:48px var(--m) 8px;text-align:left}
.lg-main>.sh-head{max-width:none;padding:0 0 8px}
main.fr-main>.sh-head+section{padding-top:32px}main.fr-main>.sh-head+.ct{min-height:0}
@media(max-width:479px){.lg-main h2.display{font-size:12vw}}   /* demoted page headings (voyager) fit a glued last pair at 320 */
.sh-head .sh-head__lab{display:block;margin:0 0 14px;max-width:none;font:500 12px/1.2 RNSym,"IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:lowercase;color:var(--rn-text-3,#8E8E9A)}
.sh-head .sh-head__h1{margin:0;max-width:none;font:700 clamp(28px,calc((100vw - 2*var(--m))/9.6),104px)/.92 var(--rn-font-display,"Barlow Condensed","Arial Narrow",sans-serif);letter-spacing:-.005em;text-transform:uppercase;color:var(--rn-text-1,#F2F2F5)}
.sh-head .sh-head__h2{margin:12px 0 0;max-width:none;font:600 clamp(20px,3.2vw,32px)/1.05 var(--rn-font-display,"Barlow Condensed","Arial Narrow",sans-serif);letter-spacing:.02em;text-transform:uppercase;color:var(--rn-text-2,#B8B8C2)}