/* /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:56px;text-decoration:none;color:var(--rn-text-1,#F2F2F5)}
.sh-nav .brand .wm{display:block;flex:none;height:14px;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 (Joel, Oct 6 6:06 PM): PAST at the far left, the STUDIOHARRISON wordmark centred, FUTURE at the far right. The wordmark
   is a real <button aria-expanded aria-controls="sh-menu"> that opens the PROJECTS dropdown: Home, the top 3 ideas by Big Idea Score
   (build/projects.py), then Building and All ideas. Mouse hover opens it; tap, click, Enter, Space or ArrowDown toggle it; Esc, a click
   outside or tabbing out closes it (build/chrome/nav.js). One row at every width, every target at least 44px. */
.sh-nav .nav__bar{flex-wrap:nowrap}
.sh-bar{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:56px}
.sh-edge{display:inline-flex;align-items:center;gap:6px;height:56px;min-width:44px;margin:0;padding:0;
 font:var(--rn-t-label,500 11px/1.4 "IBM Plex Mono",monospace);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;position:relative;transition:color 160ms cubic-bezier(.16,1,.3,1)}
.sh-edge--past{justify-self:start}
.sh-edge--future{justify-self:end;justify-content:flex-end;margin-right:-.16em}
.sh-edge:hover,.sh-edge.is-current{color:var(--rn-text-1,#F2F2F5)}
.sh-edge.is-current::after{content:"";position:absolute;left:0;right:.16em;bottom:0;height:2px;background:var(--rn-text-1,#F2F2F5)}
.sh-brand{justify-self:center;display:flex;min-width:0}
/* the chevron hangs under the wordmark (out of the flow), so the wordmark itself sits dead centre and nothing crowds PAST or FUTURE */
.sh-nav .sh-wm{position:relative;min-width:44px;margin:0;padding:0 2px;background:none;border:0;border-radius:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sh-wm .sh-chev{position:absolute;left:50%;bottom:7px;margin-left:-4px;width:8px;height:8px;color:var(--rn-text-3,#8E8E9A);transition:transform 160ms cubic-bezier(.16,1,.3,1)}
.sh-wm[aria-expanded="true"] .sh-chev{transform:rotate(180deg);color:var(--rn-text-1,#F2F2F5)}
.sh-nav .sh-wm[aria-expanded="true"] .wm-ai{opacity:1}
.sh-nav a:focus-visible,.sh-nav button:focus-visible{outline:2px solid var(--rn-cyan,#54CDF2);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.sh-chev,.sh-edge{transition:none}}
@media (max-width:419px){.sh-edge{letter-spacing:.1em;gap:4px}.sh-edge--future{margin-right:-.1em}}

/* PROJECTS dropdown. Phone: a full width sheet under the bar. Desktop: a panel centred under the wordmark */
.sh-menu{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);
 padding:8px 0 12px;max-height:calc(100vh - 56px);overflow-y:auto;overscroll-behavior:contain;text-align:left;animation:sh-drop 220ms cubic-bezier(.16,1,.3,1)}
.sh-menu[hidden]{display:none}
@keyframes sh-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sh-menu__list{list-style:none;margin:0;padding:0}
.sh-menu a{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:48px;padding:8px var(--m);box-sizing:border-box;text-decoration:none;position:relative;color:var(--rn-text-1,#F2F2F5)}
.sh-menu a::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:0;background:var(--rn-cyan,#54CDF2)}
.sh-menu a:hover,.sh-menu a:focus-visible{background:rgba(255,255,255,.04)}
.sh-menu a:hover::before,.sh-menu li.is-current a::before,.sh-menu a[aria-current="page"]::before{width:2px}
.sh-menu__t{font:var(--rn-t-label,500 11px/1.4 "IBM Plex Mono",monospace);font-family:RNSym,"IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--rn-text-1,#F2F2F5)}
.sh-menu__proj .sh-menu__t{font:600 20px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;text-wrap:balance}
.sh-menu__proj a:hover .sh-menu__t{color:var(--rn-cyan,#54CDF2)}
.sh-menu__n{font:500 10px/1.4 RNSym,"IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--rn-text-3,#8E8E9A);font-variant-numeric:tabular-nums}
.sh-menu__lab{margin:8px 0 0;padding:12px var(--m) 4px;border-top:1px solid var(--rn-line,#24242E);font:500 10px/1.4 RNSym,"IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--rn-text-3,#8E8E9A)}
.sh-menu__k{color:var(--rn-text-4,#5A5A66)}
.sh-menu__more{margin-top:8px;padding-top:8px;border-top:1px solid var(--rn-line,#24242E)}
.sh-menu__more a{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
@media (prefers-reduced-motion:reduce){.sh-menu{animation:none}}
@media(min-width:960px){
 .sh-nav .nav__bar{height:64px}
 .sh-nav .brand{height:64px}
 .sh-nav .brand .wm{height:18px}
 .sh-bar{height:64px}
 .sh-edge{height:64px;gap:8px;letter-spacing:.2em}
 .sh-edge--future{margin-right:-.2em}
 .sh-edge.is-current::after{bottom:-1px;right:.2em}
 .sh-brand{position:relative}
 .sh-nav a:focus-visible,.sh-nav button:focus-visible{outline-offset:4px}
 .sh-wm .sh-chev{bottom:10px}
 .sh-menu{left:50%;right:auto;width:360px;margin-left:-180px;border:1px solid var(--rn-line-strong,#3A3A46);border-top:0;max-height:calc(100vh - 64px)}
 .sh-menu a{padding:8px 24px}
 .sh-menu__lab{padding:12px 24px 4px}
 .sh-nav .sh-menu 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;color:var(--rn-text-1,#F2F2F5)}
.sh-foot .brand .wm{display:block;flex:none;height:14px;width:auto}
@media(min-width:960px){.sh-foot .brand .wm{height:18px}}
.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-foot .sh-foot__legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.sh-foot .sh-foot__legal ul{display:flex;gap:20px}
.sh-foot .sh-foot__legal a{display:inline-block;padding:6px 0}
.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)}

/* Section H2 (home-v2, Joel Oct 6: "Make sure every section uses proper H2, EVENTS is too small"): a real <h2> in the big condensed
   display face of the page H1s (/events), one step down. Used by every homepage section and available on every page */
.sh-h2{margin:0;max-width:none;font:700 clamp(40px,calc((100vw - 2*var(--m,24px))/11),88px)/.92 var(--rn-font-display,"Barlow Condensed","Arial Narrow",sans-serif);letter-spacing:-.005em;text-transform:uppercase;color:var(--rn-text-1,#F2F2F5)}

/* TIMELINE rail (build/timeline.py, appended to the shared footer): fixed slim bar at the bottom of every page, past on the left,
   future on the right, NOW marker, the events as fixed items linking to /events. Body padding keeps it off the end of the page */
html{--tl-h:44px}
body{padding-bottom:calc(var(--tl-h) + env(safe-area-inset-bottom))}
.tl{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tl-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;
 background:#07070A;border-top:1px solid rgba(255,255,255,.12);color:#F2F2F5;font:500 10px/1 RNSym,"IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.tl__in{position:relative;height:var(--tl-h);max-width:calc(var(--rn-max,1200px) + 2*var(--m,24px));margin:0 auto;padding:0 16px;box-sizing:border-box;display:flex;align-items:stretch;gap:20px}
.tl__lab{display:none;align-items:center;color:#8E8E9A;text-decoration:none;letter-spacing:.16em;flex:none}
.tl__lab:hover{color:#F2F2F5}
.tl__track{position:relative;flex:1;min-width:0}
.tl__line,.tl__done{position:absolute;left:0;top:16px;height:1px;background:rgba(255,255,255,.22)}
.tl__line{right:0}
.tl__done{width:var(--x);background:#8E8E9A}
.tl__ticks{list-style:none;margin:0;padding:0}
.tl__ticks li{position:absolute;left:var(--x);top:16px;bottom:0;box-sizing:border-box;padding:12px 0 0 4px;border-left:1px solid rgba(255,255,255,.14);color:#6E6E7A;font-size:9px;letter-spacing:.1em;white-space:nowrap}
.tl__ticks li::before{content:"";position:absolute;left:-1px;top:-4px;height:4px;border-left:1px solid rgba(255,255,255,.3)}
.tl__now{position:absolute;left:var(--x);top:4px;bottom:4px;width:0;border-left:2px solid var(--rn-cyan,#54CDF2);margin-left:-1px}
.tl__now span{position:absolute;right:5px;top:0;color:var(--rn-cyan,#54CDF2);font-size:9px;letter-spacing:.14em}
.tl__evs,.tl__travel{list-style:none;margin:0;padding:0}
.tl__ev{position:absolute;left:var(--x);top:0;height:32px;width:max(var(--w),0px)}
.tl__ev a{position:absolute;left:-12px;right:-12px;top:4px;height:24px;display:block;color:#F2F2F5;text-decoration:none;outline-offset:0}
.tl__dot{position:absolute;left:12px;right:12px;top:7px;min-width:10px;height:10px;margin-left:-5px;box-sizing:border-box;border-radius:5px;background:#F2F2F5;border:2px solid #07070A;
 box-shadow:0 0 0 1px #F2F2F5;transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .18s}
.tl__ev.is-past .tl__dot{background:#55555F;box-shadow:0 0 0 1px #8E8E9A}
.tl__tip{position:absolute;left:12px;bottom:calc(100% + 10px);transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;padding:8px 10px;
 background:#F2F2F5;color:#07070A;letter-spacing:.08em;line-height:1.35;transition:opacity .16s,transform .16s cubic-bezier(.16,1,.3,1)}
.tl__tip b{display:block;font:700 15px/1.05 var(--rn-font-display,"Barlow Condensed","Arial Narrow",sans-serif);letter-spacing:.02em}
.tl__tip span{display:block;margin-top:3px;font-size:9px}
.tl__tip .tl__proj{margin-top:5px;padding-top:5px;border-top:1px solid rgba(7,7,10,.2);color:#9A2F7A}
.tl__ev--proj .tl__dot{box-shadow:0 0 0 1px #F2F2F5,0 0 0 4px rgba(228,123,196,.85)}
.tl__ev--l .tl__tip{transform:translate(-12px,4px)}
.tl__ev--r .tl__tip{left:auto;right:12px;transform:translate(0,4px)}
.tl__ev a:hover .tl__tip,.tl__ev a:focus-visible .tl__tip{opacity:1;transform:translate(-50%,0)}
.tl__ev--l a:hover .tl__tip,.tl__ev--l a:focus-visible .tl__tip{transform:translate(-12px,0)}
.tl__ev--r a:hover .tl__tip,.tl__ev--r a:focus-visible .tl__tip{transform:none}
.tl__ev a:hover .tl__dot,.tl__ev a:focus-visible .tl__dot{transform:scale(1.35);background:var(--rn-cyan,#54CDF2);box-shadow:0 0 0 1px var(--rn-cyan,#54CDF2)}
.tl__ev a:focus-visible{outline:2px solid var(--rn-cyan,#54CDF2)}
.tl.is-in .tl__dot{animation:tl-pop .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--n,0)*80ms + 200ms)}
@keyframes tl-pop{from{transform:scale(0)}to{transform:none}}
@media(min-width:640px){.tl__in{padding:0 var(--m,48px)}.tl__lab{display:flex}}
@media(min-width:960px){html{--tl-h:48px}.tl__line,.tl__done,.tl__ticks li{top:18px}.tl__ev{height:36px}.tl__ev a{top:6px}.tl__ticks li{font-size:10px;padding-top:13px}}
@media (prefers-reduced-motion:reduce){.tl__dot,.tl__tip{transition:none}.tl.is-in .tl__dot{animation:none}}
@media print{.tl{display:none}body{padding-bottom:0}}
main li[id^="ev-"]{scroll-margin-top:96px}
main li[id^="ev-"]:target{outline:1px solid var(--rn-cyan,#54CDF2);outline-offset:8px}
/* portfolio case study kicker: was an <h4> after the H2 (skipped level); now an h3 that keeps the old h4 look */
.lg-main h3.xh4{font-size:14px;font-weight:700;line-height:1.65;font-family:inherit;letter-spacing:normal;text-transform:none;margin:1.33em 0;color:inherit}