/* September 2026 redesign. Existing case-study layouts and interaction styles remain in styles.css. */
:root, html.about-dark { --pink:#ff82db; --sans:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --mono:Menlo,"SFMono-Regular",Consolas,monospace; }
:root { --background:#EFEFF2; --ink:#000; --secondary:#959595; --nav-hover:#737373; --cv-heading:#7a7a7a; --cv-sub:#6c6c6c; --cv-body:#696969; --rule:#d0d0d0; --intro:#7a7a7a; --glass:rgba(239,239,242,.3); --glass-border:rgba(255,255,255,.66); }
html.about-dark { --background:#0F1216; --ink:#fff; --secondary:#ccc; --nav-hover:#aaa; --cv-heading:#909090; --cv-sub:#909090; --cv-body:#909090; --rule:#909090; --intro:#e2e2e2; --glass:rgba(15,18,22,.68); --glass-border:rgba(14,19,26,.62); }
html { scroll-behavior:smooth; scroll-padding-top:112px; }
html, html body.redesign-page, html.about-dark body.redesign-page { background:var(--background); color:var(--ink); }
body.redesign-page, body.redesign-page.is-dark { --control-border:var(--rule); font-family:var(--sans); padding:0; margin:0; }
/* Explicit inheritance keeps the legacy body theme variables from winning. */
html body.redesign-page { --background:#EFEFF2; --ink:#000; }
html.about-dark body.redesign-page { --background:#0F1216; --ink:#fff; }
.redesign-page * { box-sizing:border-box; }
.redesign-page h1,.redesign-page h2,.redesign-page h3,.redesign-page p { margin:0; }
.redesign-page a { color:inherit; }
.redesign-page a:focus-visible,.redesign-page button:focus-visible { outline:2px solid var(--pink); outline-offset:6px; }
.site-header { position:fixed; z-index:100; inset:0 0 auto; height:84px; display:flex; align-items:center; justify-content:space-between; padding:16px 48px; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(16px) saturate(112%) contrast(104%); -webkit-backdrop-filter:blur(16px) saturate(112%) contrast(104%); box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(255,255,255,.18); }
html.about-dark .site-header { box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(8,12,17,.26); }
.desktop-nav { display:flex; gap:32px; align-items:center; }
.desktop-nav a { font:400 16px/1 var(--sans); text-transform:uppercase; letter-spacing:-.5px; }
.desktop-nav a,.mobile-navigation a { position:relative; display:inline-block; text-decoration:none; transition:color 240ms ease; }
.desktop-nav a::after,.mobile-navigation a::after { content:""; position:absolute; right:0; bottom:-4px; left:0; height:1px; border-radius:1px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform 240ms ease; }
body.redesign-page .desktop-nav a:not([aria-current]):hover,body.redesign-page .mobile-navigation a:not([aria-current]):hover { color:var(--nav-hover); }
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.mobile-navigation a:hover::after,.mobile-navigation a:focus-visible::after { transform:scaleX(1); }
body.redesign-page .desktop-nav a[aria-current],body.redesign-page .desktop-nav a[aria-current]:hover,body.redesign-page .mobile-navigation a[aria-current],body.redesign-page .mobile-navigation a[aria-current]:hover { color:var(--pink); }
.desktop-nav a[aria-current]::after,.mobile-navigation a[aria-current]::after { transform:scaleX(1); }
.site-header .about-theme-toggle { width:56px; min-width:56px; height:32px; padding:3px; justify-content:flex-start; color:#111; border-color:transparent; border-radius:999px; background:#d9d9dd; font-family:var(--mono); transition:background 240ms ease,border-color 240ms ease; }
.site-header .about-theme-toggle .theme-toggle-icon { width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transform:translateX(0); transition:transform 360ms cubic-bezier(.22,1,.36,1),background 240ms ease; }
.site-header .about-theme-toggle .theme-toggle-icon svg { width:14px; height:14px; transition:opacity 200ms ease; }
.site-header .about-theme-toggle .theme-toggle-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.redesign-page.is-dark .site-header .about-theme-toggle { background:#444e5a; border-color:transparent; color:#111; }
body.redesign-page.is-dark .site-header .about-theme-toggle .theme-toggle-icon { background:#f2f2f4; box-shadow:0 1px 4px rgba(0,0,0,.35); }
body.redesign-page.is-dark .site-header .about-theme-toggle .theme-toggle-icon { transform:translateX(24px); }
.site-header .about-theme-toggle:hover,.site-header .about-theme-toggle:focus-visible { border-color:transparent; background:#c9c9ce; }
body.redesign-page.is-dark .site-header .about-theme-toggle:hover,body.redesign-page.is-dark .site-header .about-theme-toggle:focus-visible { border-color:transparent; background:#505b68; }
.mobile-menu-toggle,.mobile-navigation { display:none; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:200; padding:16px; background:var(--background); }
.skip-link:focus { top:16px; }
.content-wide { width:min(1184px,calc(100% - 128px)); margin-inline:auto; }
.redesign-hero { padding-top:228px; padding-bottom:128px; min-height:max(880px, 100svh); }
.redesign-hero h1 { font:700 clamp(64px,8.89vw,128px)/1.02 var(--sans); color:var(--pink); letter-spacing:-.045em; }
.interactive-name-word { display:inline-block; white-space:nowrap; }
.interactive-name-word > span { display:inline-block; transition:transform 320ms cubic-bezier(.22,1,.36,1); will-change:transform; }
@media (hover:hover) and (pointer:fine) {
 .interactive-name-word > span:hover { transform:translateY(-.1em); }
}
@media (prefers-reduced-motion:reduce) {
 .interactive-name-word > span { transition:none; }
 .interactive-name-word > span:hover { transform:none; }
}
.designer-title { font:500 italic clamp(56px,6.67vw,96px)/1.02 var(--sans); letter-spacing:-.065em; }
.specialties { overflow:hidden; margin-top:32px; color:var(--secondary); font:500 clamp(24px,2.5vw,36px)/1.3 var(--sans); letter-spacing:-.065em; }
.specialties-track { display:flex; width:max-content; transform:translate3d(0,0,0); will-change:transform; backface-visibility:hidden; animation:specialties-scroll 25s linear infinite; }
.specialties-track span { white-space:pre; }
@keyframes specialties-scroll { from { transform:translate3d(0,0,0); } to { transform:translate3d(var(--specialties-shift,-50%),0,0); } }
.hero-controls { margin:48px 0 0 32px; }
.redesign-page .hero-status,.redesign-page.is-dark .hero-status { font:400 14px/1 var(--mono); letter-spacing:1.7px; color:var(--cv-heading); gap:16px; animation:none; opacity:1; }
.redesign-page .hero-status span { padding:3px 9px; font:400 10px/1 var(--mono); letter-spacing:.5px; background:#b9ffd7; color:#007934; border:1px solid #6fe6a1; box-shadow:0 0 4px #67e9a080; }
.redesign-page.is-dark .hero-status span { background:#006832; color:#bbffda; border-color:#00a855; box-shadow:inset 0 0 5px #20ce71,0 0 4px #00b658; }
.redesign-page .hero-contact-slot { margin-top:16px; width:208px; height:48px; }
.redesign-page .hero-contact-menu,.redesign-page.is-dark .hero-contact-menu { width:208px; height:48px; background:var(--background); border:1px solid var(--rule); border-radius:24px; color:var(--cv-body); font-family:var(--mono); animation:none; opacity:1; }
.redesign-page .hero-contact-menu.is-open { height:192px; }
.redesign-page .hero-contact-toggle { min-height:46px; padding:0 16px; font:400 12px/1 var(--mono); }
.redesign-page .hero-contact-toggle-icon { width:16px; height:16px; }
.redesign-page .hero-contact-actions { padding-inline:16px; }
.redesign-page .hero-contact-actions a { font:400 11px/1.5 var(--mono); }
.redesign-page .hero-contact-actions a:hover { color:var(--pink); }
.ui-icon { width:16px; height:16px; }
html.about-dark .ui-icon { filter:invert(1); }
.work-list { display:grid; gap:160px; padding-top:48px; padding-bottom:192px; }
.work-card-link { display:block; text-decoration:none; }
.work-card-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; margin-bottom:32px; }
.work-card-heading h2 { font:400 32px/1.15 var(--sans); letter-spacing:-1.5px; }
.work-card-heading p { grid-column:1/-1; font:400 22px/1.45 var(--sans); color:var(--cv-heading); letter-spacing:-1px; }
.work-card .shipped-tag { display:inline-flex; align-self:center; align-items:center; justify-content:center; gap:4px; font:400 14px/16px var(--mono); color:#009f4c; background:#c7ffda; border:1px solid #6cefa2; border-radius:24px; padding:3px 10px; }
.work-card .shipped-tag:has(img)::before { content:""; display:block; flex:0 0 auto; width:16px; height:16px; background:currentColor; -webkit-mask:url('./assets/starship-launch.svg') center/contain no-repeat; mask:url('./assets/starship-launch.svg') center/contain no-repeat; }
.work-card .shipped-tag img { display:none; }
.work-card .wip-tag { color:#9653ff; background:#eadbff; border-color:#d8baff; }
.work-card-image { aspect-ratio:16/9; border-radius:32px; overflow:hidden; }
.work-card-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 500ms cubic-bezier(.22,1,.36,1); }
.work-card-link:hover .work-card-image img { transform:scale(1.018); }
.work-card-link:hover h2 { color:var(--pink); }
.back-to-top { position:fixed; z-index:30; bottom:32px; right:48px; width:58px; height:58px; display:block; border-radius:50%; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); transition:opacity 240ms ease,transform 320ms cubic-bezier(.22,1,.36,1),visibility 320ms; }
.back-to-top.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.back-to-top img { display:block; width:100%; height:100%; filter:invert(1); }
html.about-dark .back-to-top img { filter:none; }
.about-content { width:min(1012px,calc(100% - 128px)); margin-inline:auto; padding:208px 0 224px; min-height:100vh; }
.about-intro { color:var(--intro); font:400 16px/1.5 var(--sans); margin-bottom:32px !important; }
.cv-section { border-top:1px solid var(--rule); padding:32px 0; }
.cv-section h2 { margin:0 0 32px; font:500 16px/1.5 "Roboto Mono",var(--mono); color:var(--cv-heading); letter-spacing:1.92px; text-transform:uppercase; }
.cv-entry h3,.experience-entry h3 { font:700 16px/1.5 var(--mono); letter-spacing:0; text-transform:none; }
.cv-entry p,.entry-subtitle { font:300 16px/1.5 var(--sans); color:var(--cv-sub); margin-top:4px !important; }
.cv-entry + .cv-entry { margin-top:32px; }
.experience-entry { margin-bottom:16px; }
.experience-toggle { display:flex; align-items:center; justify-content:space-between; border:0; background:none; padding:0; width:100%; color:var(--ink); font:inherit; cursor:pointer; text-align:left; min-height:24px; }
.experience-toggle .collapse-icon { display:none; }
.experience-toggle[aria-expanded="true"] .expand-icon { display:none; }
.experience-toggle[aria-expanded="true"] .collapse-icon { display:block; }
.experience-body { max-height:0; overflow:hidden; opacity:0; transform:translateY(-8px); transition:max-height 520ms cubic-bezier(.22,1,.36,1),opacity 360ms ease,transform 520ms cubic-bezier(.22,1,.36,1); }
.experience-body.is-expanded { max-height:var(--experience-height,240px); opacity:1; transform:translateY(0); }
.experience-body p { font:400 12px/20px var(--sans); color:var(--cv-body); margin-top:8px; padding-right:48px; }
.redesign-page .work-description-highlight { color:var(--pink); }
.page-intro { padding:176px 0 64px; }
.page-intro h1,.simple-page h1 { font:600 clamp(48px,6vw,80px)/1.1 var(--sans); letter-spacing:-.05em; color:var(--pink); }
.simple-page p { max-width:720px; color:var(--cv-sub); font:400 20px/1.6 var(--sans); margin-top:32px; }
.contact-links { display:grid; justify-items:start; gap:24px; margin-top:48px; font:400 18px/1.5 var(--mono); overflow-wrap:anywhere; }
.contact-links a:hover { color:var(--pink); }
/* Retain case-study structure, media, lightboxes, and video interactions. */
.redesign-page.project-detail-page .about-shell { background:var(--background); padding-top:128px; }
.redesign-page .secure-email-content { color:var(--ink); }
.redesign-page .secure-email-title-row h1 { font:700 clamp(64px,7vw,96px)/1.02 var(--sans); letter-spacing:-.045em; }
.redesign-page .secure-email-title-row p { font:400 18px/1.55 var(--sans); color:var(--cv-sub); letter-spacing:0; }
.redesign-page .secure-email-section h2 { font:500 16px/1.5 var(--sans); color:var(--cv-heading); letter-spacing:1.92px; text-transform:uppercase; }
.redesign-page .secure-email-section-copy p { font:300 16px/1.65 var(--sans); color:var(--cv-body); letter-spacing:0; }
.redesign-page .secure-email-facts,.redesign-page .secure-email-footer { font-family:var(--sans); }
.redesign-page .case-study-back-link,.redesign-page .secure-email-link,.redesign-page .secure-email-status { font-family:var(--mono); }
.redesign-page .secure-email-section { border-color:var(--rule); }
.redesign-page .case-study-back-link { color:var(--cv-sub); }
.redesign-page .secure-email-title-row h1 { color:var(--pink); }
@media(min-width:1600px) { .redesign-hero { padding-top:304px; } }
@media(max-width:1000px) { .desktop-nav { gap:16px; } .site-header { padding-inline:32px; } .content-wide,.about-content { width:calc(100% - 64px); } .work-card-heading p { font-size:18px; } }
@media(max-width:700px) {
 html { scroll-padding-top:96px; }
 .site-header { height:72px; padding:16px 32px; justify-content:flex-end; overflow:hidden; transition:height 800ms cubic-bezier(.22,1,.36,1); }
 .desktop-nav,.desktop-theme { display:none; }
 .mobile-menu-toggle { display:flex; position:absolute; z-index:2; top:16px; right:32px; align-items:center; justify-content:center; width:40px; height:40px; padding:0; background:none; border:0; cursor:pointer; }
 .mobile-menu-icon { width:36px; height:36px; overflow:visible; }
 .menu-line { stroke:currentColor; stroke-width:2.5; transform-box:fill-box; transform-origin:center; transition:transform 390ms cubic-bezier(.22,1,.36,1); }
 .mobile-menu-toggle { color:var(--ink); }
 .mobile-menu-toggle[aria-expanded="true"] .menu-line-top { transform:translateY(6.5px) rotate(45deg); }
 .mobile-menu-toggle[aria-expanded="true"] .menu-line-bottom { transform:translateY(-6.5px) rotate(-45deg); }
 .mobile-navigation { display:flex; position:absolute; inset:71px -1px auto; height:calc(100dvh - 71px); min-height:calc(100vh - 71px); padding:104px 24px 48px; flex-direction:column; align-items:center; background:transparent; border:0; visibility:hidden; transition:visibility 800ms; overflow-y:auto; }
 .menu-is-open .site-header { height:100dvh; }
 .menu-is-open .mobile-navigation { visibility:visible; }
 .mobile-nav-links { display:grid; gap:16px; text-align:center; }
 .mobile-navigation a { font:400 clamp(25px,8.95vw,36px)/1.2 var(--sans); letter-spacing:-1.6px; text-transform:uppercase; text-decoration:none; }
 .mobile-nav-links a,.mobile-theme-slot { opacity:0; transform:translateY(-12px); transition:opacity 360ms ease,transform 480ms cubic-bezier(.22,1,.36,1); }
 .mobile-nav-links a:nth-child(1) { transition-delay:240ms; }
 .mobile-nav-links a:nth-child(2) { transition-delay:180ms; }
 .mobile-nav-links a:nth-child(3) { transition-delay:120ms; }
 .mobile-nav-links a:nth-child(4) { transition-delay:60ms; }
 .mobile-theme-slot { transition-delay:0ms; }
 .menu-is-open .mobile-nav-links a,.menu-is-open .mobile-theme-slot { opacity:1; transform:translateY(0); }
 .menu-is-open .mobile-nav-links a:nth-child(1) { transition-delay:180ms; }
 .menu-is-open .mobile-nav-links a:nth-child(2) { transition-delay:240ms; }
 .menu-is-open .mobile-nav-links a:nth-child(3) { transition-delay:300ms; }
 .menu-is-open .mobile-nav-links a:nth-child(4) { transition-delay:360ms; }
 .mobile-theme-slot { margin-top:48px; }
 .menu-is-open .mobile-theme-slot { transition-delay:420ms; }

 .content-wide { width:calc(100% - 40px); }
 .redesign-hero { height:100svh; min-height:0; padding-top:208px; padding-bottom:32px; }
 .redesign-hero h1 { max-width:340px; font-size:64px; line-height:.85; letter-spacing:-2.6px; }
 .designer-title { font-size:64px; line-height:1; letter-spacing:-4px; }
 .specialties { margin:32px -20px 0; font-size:32px; line-height:1.4; letter-spacing:-1.8px; }
 .hero-controls { margin:32px 0 0; }
 .redesign-page .hero-contact-slot { margin-top:16px; }
 .work-list { gap:80px; padding-top:0; padding-bottom:128px; }
 .work-card-heading { margin-bottom:24px; }
 .work-card-heading h2 { font-size:24px; letter-spacing:-1px; }
 .work-card-heading p { font-size:14px; letter-spacing:-.3px; }
 .work-card .shipped-tag { font-size:10px; padding:3px 7px; }
 .work-card-image { border-radius:24px; }
 .about-content { width:calc(100% - 64px); padding-top:112px; padding-bottom:256px; }
 .about-intro { color:var(--cv-heading); }
 .cv-section { padding:32px 0; }
 .experience-body p { padding-right:40px; font-size:13px; }
 .back-to-top { width:58px; height:58px; bottom:16px; right:24px; }
 .page-intro { padding-top:128px; padding-bottom:16px; }
 .simple-page p { font-size:18px; }
 .contact-links { font-size:15px; }
 .redesign-page.project-detail-page .about-shell { padding-top:96px; }
 .redesign-page .secure-email-title-row h1 { font-size:clamp(54px,14vw,72px); }
 .redesign-page .secure-email-title-row p { font-size:16px; line-height:1.55; }
 .redesign-page .secure-email-section h2 { font-size:16px; line-height:1.5; }
 .redesign-page .secure-email-section-copy p { font-size:15px; line-height:1.65; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .specialties-track { animation:none; } .redesign-page *, .redesign-page *::before,.redesign-page *::after { animation:none!important; transition:none!important; } }
/* Match the compact resume rhythm and the mobile content shown in the supplied frames. */
.cv-section h2 { line-height:1; }
.cv-entry h3,.experience-entry h3 { line-height:20px; }
.experience-toggle { min-height:20px; }
.entry-subtitle { line-height:22px; }
@media(max-width:700px) {
 .designer-title { line-height:.95; }
 .specialties { margin-top:28px; }
 .hero-controls { margin-top:24px; }
 .experience-entry:last-of-type { margin-bottom:0; }
}
.about-content { min-height:1626px; }
.about-content:has(.experience-toggle[aria-expanded="true"]) { min-height:1848px; }
@media(max-width:700px) {
 .about-content { min-height:1127px; }
 .about-content:has(.experience-toggle[aria-expanded="true"]) { min-height:1628px; }
}
@font-face { font-family:"Roboto Mono"; src:url('./assets/ui/RobotoMono.ttf') format('truetype'); font-weight:100 700; font-display:swap; }
.experience-entry h3 { position:relative; }
.company-link { position:absolute; left:80px; top:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; }
.company-link img { width:10px; height:10px; }
.simple-page.about-content { min-height:100vh; }
@media(min-width:701px) {
 .redesign-hero h1 { margin-bottom:-16px; }
 .designer-title { margin-bottom:-16px !important; }
 .specialties { max-width:1012px; }
 .hero-controls { margin-top:32px; }
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px!important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:700px) { .experience-body p { font-size:12px; } }
/* Combined contact / collaboration page. */
.contact-content { padding-bottom:128px; }
.contact-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:64px; margin-top:48px; }
.contact-form { display:grid; gap:24px; }
.form-field { display:grid; gap:12px; }
.form-field label,.contact-aside h2 { font:500 14px/1.5 var(--mono); }
.form-field input,.form-field textarea { width:100%; border:1px solid var(--rule); border-radius:12px; padding:16px; color:var(--ink); background:transparent; font:400 16px/1.5 var(--sans); }
.form-field input::placeholder,.form-field textarea::placeholder { color:var(--cv-sub); opacity:.8; }
.form-field textarea { resize:vertical; min-height:160px; }
.form-field input:focus,.form-field textarea:focus { outline:2px solid var(--pink); outline-offset:3px; }
.contact-submit { justify-self:start; min-height:48px; padding:12px 32px; border:1px solid var(--ink); border-radius:24px; background:var(--ink); color:var(--background); font:400 13px/1.5 var(--mono); cursor:pointer; }
.contact-submit:hover { background:var(--pink); border-color:var(--pink); color:#000; }
.contact-submit:disabled { opacity:.6; cursor:wait; }
.simple-page .contact-status { margin:0; font:400 14px/1.5 var(--sans); min-height:24px; color:var(--ink); }
.contact-status[data-state="error"] { border-left:2px solid var(--pink); padding-left:12px; }
.contact-aside { display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-top:0; }
.contact-aside h2 { color:var(--cv-heading); text-transform:uppercase; letter-spacing:1px; }
.contact-aside a { font:400 14px/1.5 var(--sans); overflow-wrap:anywhere; }
.contact-aside a:hover { color:var(--pink); }
.form-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:700px) { .contact-layout { grid-template-columns:1fr; gap:48px; margin-top:32px; } .contact-content h1 { font-size:48px; } }

/* Paint to the screen edges while keeping controls clear of iPhone safe areas. */
@media(max-width:700px) {
 html { scroll-padding-top:calc(96px + env(safe-area-inset-top, 0px)); }
 .site-header { height:calc(72px + env(safe-area-inset-top, 0px)); padding-top:calc(16px + env(safe-area-inset-top, 0px)); }
 .mobile-menu-toggle { top:calc(16px + env(safe-area-inset-top, 0px)); right:max(32px, env(safe-area-inset-right, 0px)); }
 .mobile-navigation { top:calc(71px + env(safe-area-inset-top, 0px)); height:calc(100dvh - 71px - env(safe-area-inset-top, 0px)); min-height:0; padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); }
 .back-to-top { bottom:calc(16px + env(safe-area-inset-bottom, 0px)); right:max(24px, env(safe-area-inset-right, 0px)); }
}

/* Let Safari follow the document scroll, rather than a viewport-height body scroller. */
html:has(body.redesign-page), html.about-dark:has(body.redesign-page) { overflow-x:clip; overflow-y:auto; background:var(--background); }
html body.redesign-page { overflow-x:clip; overflow-y:visible; }
body.redesign-page > main { height:auto; min-height:100svh; }



/* Keep menu gestures from chaining into the document without replacing its scroller. */
.mobile-navigation { overscroll-behavior-y:contain; }

/* An expanded fixed header can leave Safari's toolbar color cached after closing.
   Anchor the menu in document space until it has collapsed to header height. */
@media(max-width:700px) {
 .menu-is-positioned .site-header { position:absolute; top:var(--menu-document-top, 0px); }
}

/* Keep the glass header, with no top seam against Safari's status-bar area. */
@media(max-width:700px) {
 .site-header {
  border-width:0 0 1px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.18);
 }
 html.about-dark .site-header {
  box-shadow:inset 0 -1px 0 rgba(8,12,17,.26);
 }
}