@import url("./site-motion.css");
/* Shared header; loaded after page styles so its geometry cannot drift by route. */
:root{--site-header-height:96px;--site-header-gutter:max(4vw,env(safe-area-inset-left),env(safe-area-inset-right));--site-header-safe-top:env(safe-area-inset-top,0px)}
body.about-page{padding-top:var(--site-header-height)}
.site-header.site-header{position:fixed;inset:0 0 auto;z-index:5;isolation:isolate;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:24px;height:var(--site-header-height);padding:12px var(--site-header-gutter);margin:0;border:0;background:linear-gradient(#1c131bcc,#1c131b70 72%,transparent);color:#f4e9d9}
.site-header.site-header:before{content:'';position:absolute;inset:0;z-index:-1;background:#241a22eb;border-bottom:1px solid #e5cdb51f;opacity:0;transition:opacity .18s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header.site-header[data-scrolled=true]:before{opacity:1}
/* The movie keeps its existing transparent edge over the artwork. */
.site-header.player-header[data-scrolled=true]:before{opacity:0}
.site-header.site-header .player-brand{display:flex;align-items:center;flex:none;gap:11px;min-height:44px;width:max-content;max-width:100%;font:400 31px/1 Redaction,Georgia,serif;letter-spacing:-.04em;color:inherit;text-shadow:0 1px 12px #100b0d}
.site-header.site-header .identity-mark{display:block;width:30px;height:34px;flex:none}
.site-header.site-header .film-navigation{position:static;display:flex;align-items:center;flex-direction:row;justify-content:flex-end;flex:none;gap:32px;order:0;width:auto;padding:0;margin:0;font:400 16px/1.5 Redaction,Georgia,serif;letter-spacing:0;text-shadow:0 1px 8px #100b0d}
.site-header.site-header .film-navigation a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 0;margin:0;border:0;background:none;color:#f1dcc8;text-decoration:none;white-space:nowrap;transition:color .18s ease}
.site-header.site-header .film-navigation a:after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:#8e2a36;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.site-header.site-header .film-navigation a[aria-current=page]{display:flex;color:#f1dcc8}
.site-header.site-header .film-navigation a[aria-current=page]:after{transform:scaleX(1)}
.site-header.site-header .film-navigation a[data-header-link=membership]:after{background:#eddbc4;transform:scaleX(1);opacity:.6}
.site-header.site-header .film-navigation a span{display:inline}
.site-header.site-header .mobile-menu-toggle,.site-header.site-header .mobile-music-credit{display:none}
.site-header :is(a,button):focus-visible{outline:1px solid #f5d9be;outline-offset:5px}
.site-header :is(a,button){touch-action:manipulation}
.darkroom-page .space-index{top:var(--site-header-height)}
.darkroom-page :is(.page-section,.plan-section,.floor-gallery){scroll-margin-top:calc(var(--site-header-height) + 76px)}
.ethos-page .principles-intro{top:calc(var(--site-header-height) + 30px)}
.correspondence-page .application-letter{scroll-margin-top:calc(var(--site-header-height) + 12px)}
@media(hover:hover){.site-header.site-header .film-navigation a:hover{color:#fff6e8}.site-header.site-header .film-navigation a:hover:after{transform:scaleX(1)}}
@media(min-width:1024px){.site-header.site-header .film-navigation a.mobile-music-credit{display:none}}
@media(max-width:1180px) and (min-width:1024px){.site-header.site-header .film-navigation{gap:22px}.site-header.site-header .player-brand{font-size:28px}}
@media(max-width:1023px){
 :root{--site-header-gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right))}
 .site-header.site-header{padding:calc(8px + var(--site-header-safe-top)) var(--site-header-gutter) 10px;gap:16px}
 .site-header.site-header .player-brand{font-size:24px;gap:7px}
 .site-header.site-header .identity-mark{width:25px;height:30px}
 .site-header.site-header .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:76px;padding:8px 0 8px 12px;border:0;background:none;color:inherit;font:400 16px/1.3 Redaction,Georgia,serif}
 .site-header.site-header .mobile-menu-toggle[hidden]{display:none}
 .mobile-menu-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.2}
 .site-header.site-header.has-mobile-menu .film-navigation{position:absolute;inset:calc(100% - 2px) var(--site-header-gutter) auto auto;display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(280px,calc(100vw - 32px));max-height:calc(100svh - var(--site-header-height) - 20px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;padding:12px 18px;background:#251c23fa;border:1px solid #ecd5c64d;box-shadow:0 12px 28px #110b1240;font-size:15px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform-origin:top right}
 .site-header.site-header .film-navigation[hidden]{display:none}
 .site-header.site-header .film-navigation a{min-height:48px;padding:10px 0;font-size:15px}
 .site-header.site-header .film-navigation a+a{border-top:1px solid #ecd5c624}
 .site-header.site-header .film-navigation a:after{display:none}
 .site-header.site-header .film-navigation .mobile-music-credit{display:flex;font-size:12px}
 .site-header.site-header:not(.has-mobile-menu){height:auto;flex-wrap:wrap;background:#241a22}
 .site-header.site-header:not(.has-mobile-menu) .film-navigation{flex-wrap:wrap;justify-content:flex-start;gap:4px 20px;width:100%}
 body.about-page:not(:has(.has-mobile-menu)){padding-top:210px}
 .darkroom-page :is(.page-section,.plan-section,.floor-gallery){scroll-margin-top:calc(var(--site-header-height) + 68px)}
}
@keyframes site-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.site-header.site-header :is(a,a:after),.site-header.site-header:before{transition:none}.site-header.site-header .film-navigation{animation:none}}
@media print{body.about-page{padding-top:0}.site-header.site-header{position:static;background:none}.site-header.site-header .film-navigation,.site-header.site-header .mobile-menu-toggle{display:none}}
/* Round 10 web 4: the phone header's Apply link, beside Menu (site-header.js adds it; same words and underline as the desktop link). */
.site-header.site-header .header-apply{display:none}
@media(max-width:1023px){
 .site-header.site-header .header-apply{position:relative;display:flex;align-items:center;min-height:44px;margin-left:auto;padding:0 2px;font:400 16px/1.3 Redaction,Georgia,serif;color:#f1dcc8;text-decoration:none;white-space:nowrap;text-shadow:0 1px 8px #100b0d}
 .site-header.site-header .header-apply:after{content:'';position:absolute;left:2px;right:2px;bottom:9px;height:1px;background:#eddbc4;opacity:.6}
 .site-header.site-header .header-apply[aria-current=page]{color:#f1dcc8}
 .site-header.site-header .header-apply+.mobile-menu-toggle{min-width:0;padding-left:8px}
}

/* Nicole 10-22: no pixel font in the header; the highlight is oxblood, not pink. */
.site-header.site-header .film-navigation a[aria-current=page]:after,.site-header.site-header .header-apply[aria-current=page]:after{transform:scaleX(1);background:#8e2a36}
::selection{background:#6e1f2b;color:#f6ead9}
.color-study .site-header.site-header .film-navigation a[aria-current=page]:after,.site-header.site-header .film-navigation a[aria-current=page]:after,.site-header.site-header .film-navigation a:hover:after{background:#8e2a36!important}
.color-study .site-header.site-header .film-navigation a[aria-current=page]{color:#f1e6d7!important}
/* Nicole 10-22: Apply is a highlighted rectangle button in the header (oxblood, not pink). */
.site-header.site-header .film-navigation a[href^="/apply#membership"]{display:inline-flex!important}
.site-header.site-header .film-navigation a[href^="/apply#membership"],.site-header.site-header .header-apply{align-items:center;min-height:40px;padding:0 18px!important;background:#6e1f2b;border:1px solid #8e2a36;color:#f6ead9!important;text-shadow:none!important;transition:background .2s ease}
.site-header.site-header .film-navigation a[href^="/apply#membership"]:after,.site-header.site-header .header-apply:after{display:none!important}
.site-header.site-header .film-navigation a[href^="/apply#membership"]:hover,.site-header.site-header .film-navigation a[href^="/apply#membership"]:focus-visible,.site-header.site-header .header-apply:hover,.site-header.site-header .header-apply:focus-visible{background:#8e2a36}
/* Nicole 10-22 (from logo 08a): spaced Redaction capitals, no underline, the logo's muted wine instead of saturated oxblood. */
.site-header.site-header .film-navigation a,.site-header.site-header .header-apply,.site-header.site-header .mobile-menu-toggle{font-family:Redaction,Georgia,serif!important;font-size:13px!important;letter-spacing:.16em!important;text-transform:uppercase}
.site-header.site-header .film-navigation a:after,.site-header.site-header .film-navigation a[aria-current=page]:after,.color-study .site-header.site-header .film-navigation a[aria-current=page]:after,.site-header.site-header .film-navigation a:hover:after{display:none!important}
.site-header.site-header .film-navigation a{color:#f1e6d7b3!important;transition:color .2s ease}
.site-header.site-header .film-navigation a:hover,.site-header.site-header .film-navigation a[aria-current=page],.color-study .site-header.site-header .film-navigation a[aria-current=page]{color:#f1e6d7!important}
.site-header.site-header .film-navigation a[href^="/apply#membership"],.site-header.site-header .header-apply{background:#4a1826!important;border:1px solid #f1e6d740!important;color:#f1e6d7!important;padding:0 20px!important;min-height:40px}
.site-header.site-header .film-navigation a[href^="/apply#membership"]:hover,.site-header.site-header .film-navigation a[href^="/apply#membership"]:focus-visible,.site-header.site-header .header-apply:hover,.site-header.site-header .header-apply:focus-visible{background:#5a1f30!important;border-color:#f1e6d780!important}
::selection{background:#4a1826;color:#f6ead9}
/* Nicole 10-22: lowercase nav in the logos' Redaction, not capitals. */
.site-header.site-header .film-navigation a,.site-header.site-header .header-apply,.site-header.site-header .mobile-menu-toggle{text-transform:lowercase!important;letter-spacing:.02em!important;font-size:17px!important}

/* Theme toggle (site-header.js; themes in site-theme.css). The homepage stays dark over the film, so it has no toggle. */
.site-header.site-header .theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-width:44px;min-height:44px;margin:0 0 0 -8px;padding:0 4px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;opacity:.78;transition:opacity .2s ease}
.site-header.site-header .theme-toggle:is(:hover,:focus-visible){opacity:1}
.site-header.site-header .theme-toggle svg{width:15px;height:15px;flex:none}
.site-header.site-header .theme-toggle circle{fill:none;stroke:currentColor;stroke-width:1.1}
.site-header.site-header .theme-toggle path{fill:currentColor}
.site-header.player-header .theme-toggle{display:none}
@media(max-width:1023px){.site-header.site-header .film-navigation .theme-toggle{justify-content:flex-start;width:100%;min-height:48px;margin:0;padding:10px 0;border-top:1px solid #ecd5c624;opacity:1}}

/* Logo review (site-logo-review.js, behind LOGO_REVIEW in site-header.js): the brand slot shows the chosen logo in the
   theme's ink; small previous and next controls name it so Nicole can say which one. */
.site-header.site-header[data-logo-review]{justify-content:flex-start}
@media(min-width:1024px){.site-header.site-header[data-logo-review] .film-navigation{margin-left:auto}}
.site-header .player-brand .logo-art{display:none}
.site-header.site-header .player-brand:not([data-logo=current]) > :not(.logo-art){display:none!important}
.site-header.site-header .player-brand:not([data-logo=current]) .logo-art{display:block;flex:none;width:min(calc(48px * var(--logo-a,1)),210px);aspect-ratio:var(--logo-a,1);height:auto;background:currentColor;-webkit-mask:var(--logo-src) center/contain no-repeat;mask:var(--logo-src) center/contain no-repeat}
.site-header.site-header .player-brand:is([data-logo^="06"]) .logo-art{width:48px;background:none;-webkit-mask:none;mask:none}
.site-header .player-brand .logo-art img{display:block;width:100%;height:100%;object-fit:cover}
.site-header.site-header .logo-review{display:flex;align-items:center;flex:none;gap:0;margin-left:2px;font:400 11px/1 Redaction,Georgia,serif;letter-spacing:.02em;color:inherit;white-space:nowrap}
.site-header.site-header .logo-review button{display:grid;place-items:center;width:32px;min-height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.7}
.site-header.site-header .logo-review button:is(:hover,:focus-visible){opacity:1}
.site-header.site-header .logo-review svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3}
.site-header.site-header .logo-review-label{min-width:7.2em;text-align:center;opacity:.78;font-variant-numeric:tabular-nums}
@media(max-width:1023px){
 .site-header.site-header .player-brand:not([data-logo=current]) .logo-art{width:min(calc(36px * var(--logo-a,1)),112px)}
 .site-header.site-header .player-brand:is([data-logo^="06"]) .logo-art{width:36px}
 .site-header.site-header .logo-review{position:absolute;top:100%;left:var(--site-header-gutter);margin:0;padding:0 4px;background:color-mix(in srgb,var(--theme-ground,#4b1224) 92%,transparent);border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-top:0}
 .site-header.site-header .logo-review button{min-height:36px}
}

/* Nicole 2026-10-22: “i dont like the header fonts actually. they look old school. or maybe its the shadow behind the header”,
   then “i dont like the sans serif this looks worse” and “the underline is ugly”. Navigation in the logos' Redaction,
   lowercase, regular, .01em; no text shadows, no gradient or glow behind the header, no underlines. The current page is
   marked by full strength ink; the other links are slightly dimmer. After scrolling, one flat translucent bar.
   Supersedes the capitals and lowercase rules above. */
.site-header.site-header.site-header,.site-header.site-header.site-header *{text-shadow:none!important}
.site-header.site-header.site-header{background:none!important}
.site-header.site-header.site-header:before{background:#240a12eb;border-bottom:1px solid #f1e6d71a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header.site-header.site-header :is(.film-navigation a,.header-apply,.mobile-menu-toggle,.theme-toggle){font-family:Redaction,Georgia,serif!important;font-size:16.5px!important;font-weight:400!important;letter-spacing:.01em!important;text-transform:lowercase!important;line-height:1.2!important}
.site-header.site-header.site-header .logo-review{font:400 12px/1 Redaction,Georgia,serif!important;letter-spacing:.01em!important}
.site-header.site-header.site-header .film-navigation{gap:30px}
.site-header.site-header.site-header .film-navigation a{border:0!important;text-decoration:none!important;color:#f1e6d7b8!important}
.site-header.site-header.site-header .film-navigation a:is([aria-current=page],:hover,:focus-visible){color:#f1e6d7!important}
.site-header.site-header.site-header .film-navigation a:after,.site-header.site-header.site-header .header-apply:after{display:none!important}
.site-header.site-header.site-header .film-navigation a[href^="/apply#membership"],.site-header.site-header.site-header .header-apply{min-height:38px!important;padding:0 18px!important;background:#4b1224!important;border:1px solid #f1e6d73d!important;color:#f1e6d7!important}
.site-header.site-header.site-header .film-navigation a[href^="/apply#membership"] span{display:none}
.site-header.site-header.site-header .film-navigation a[href^="/apply#membership"]:is(:hover,:focus-visible),.site-header.site-header.site-header .header-apply:is(:hover,:focus-visible){background:#5c1a2e!important;border-color:#f1e6d780!important}
/* Over the homepage film: one flat translucent bar of the dark ground keeps the links legible on bright frames; never a gradient or glow. */
.site-header.player-header.player-header.player-header:before,.site-header.player-header.player-header.player-header[data-scrolled=true]:before{opacity:1;background:#240a129e;border-bottom-color:#f1e6d714;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header.site-header.site-header .player-brand:not([data-logo=current]) .logo-art{width:min(calc(60px * var(--logo-a,1)),300px)}
.site-header.site-header.site-header .player-brand:is([data-logo^="06"]) .logo-art{width:60px}
@media(max-width:1023px){
 .site-header.site-header.site-header{gap:10px}
 .site-header.site-header.site-header .header-apply{padding:0 14px!important}
 .site-header.site-header.site-header .mobile-menu-toggle{min-width:0;gap:8px}
 .site-header.site-header.site-header .player-brand:not([data-logo=current]) .logo-art{width:min(calc(44px * var(--logo-a,1)),150px)}
 .site-header.site-header.site-header .player-brand:is([data-logo^="06"]) .logo-art{width:44px}
}
@media(max-width:1023px){
 /* Phones: the picker sits in the header row as two small arrows beside the logo; its label is read aloud, not shown. */
 .site-header.site-header.site-header .logo-review{position:static;margin:0 0 0 -4px;padding:0;background:none;border:0}
 .site-header.site-header.site-header .logo-review button{width:26px;min-height:44px}
 .site-header.site-header.site-header .logo-review-label{position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .site-header.site-header.site-header .player-brand:not([data-logo=current]) .logo-art{width:min(calc(44px * var(--logo-a,1)),124px)}
}
.site-header.site-header.site-header .player-brand:not([data-logo=current]) .logo-art{width:min(calc(72px * var(--logo-a,1)),300px)}
.site-header.site-header.site-header .player-brand:is([data-logo^="06"]) .logo-art{width:68px}
@media(max-width:1023px){
 .site-header.site-header.site-header .player-brand:not([data-logo=current]) .logo-art{width:min(calc(44px * var(--logo-a,1)),160px)}
 .site-header.site-header.site-header .player-brand:is([data-logo^="06"]) .logo-art{width:44px}
}
/* Nicole: “why does the logo not say San Francisco, CA anymore below it, put it back”. The horizontal lockups that carry
   that line grow until it is about 9.5 px tall on desktop (the line is under a tenth of the lockup's height); the header grows with them.
   On phones the full lockup is kept at 44 px; its small line cannot reach 8 px there without crowding Apply and Menu. */
@media(min-width:1024px){
 .site-header.site-header.site-header .player-brand:is([data-logo="08"],[data-logo="08a"],[data-logo="08c"],[data-logo="10"]) .logo-art{width:min(calc(100px * var(--logo-a,1)),360px)}
}
@media(max-width:1023px){
 .site-header.site-header.site-header .player-brand:not([data-logo=current]) .logo-art{width:min(calc(44px * var(--logo-a,1)),138px)}
 .site-header.site-header.site-header .header-apply{padding:0 12px!important}
 .site-header.site-header.site-header .mobile-menu-toggle svg{flex:none}
}
/* Over the full frame photograph at the top of The space the links need the same flat bar as over the film (no gradient). */
.quiet-full-frame .site-header.site-header.site-header:before{opacity:1;background:#240a129e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.quiet-full-frame .site-header.site-header.site-header[data-scrolled=true]:before{background:#240a12eb}
.site-header.site-header.site-header .logo-review button,.site-header.site-header.site-header .theme-toggle{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
@media(max-width:1023px){.site-header.site-header.site-header .film-navigation .theme-toggle{border-top:1px solid #ecd5c624!important}}
.site-header .logo-review[hidden]{display:none!important}
/* Round 14 mobile (Nicole: “on mobile the logo in the top left is hard to see”). On phones the lockup drops its small
   SAN FRANCISCO, CA line (about 4 px tall there) and uses that room to grow: emblem about 39 px tall, THE ATELIER at
   about a 13.5 px cap size. Crops: brand-header/<id>-phone.svg from scripts/site-theme/header-logos.mjs. Width yields to
   Apply and Menu on the narrowest phones. Short landscape phones get the same lockup in a 64 px header. */
@media(max-width:1023px),(max-height:500px) and (min-aspect-ratio:1/1){
 .site-header.site-header.site-header .player-brand[data-logo="08c"] .logo-art{-webkit-mask-image:url("/studies/scrolls/brand-header/08c-phone.svg")!important;mask-image:url("/studies/scrolls/brand-header/08c-phone.svg")!important;aspect-ratio:3.89!important;width:min(165px,calc(100vw - 2 * var(--site-header-gutter) - 172px))!important}
 .site-header.site-header.site-header .player-brand[data-logo="08"] .logo-art{-webkit-mask-image:url("/studies/scrolls/brand-header/08-phone.svg")!important;mask-image:url("/studies/scrolls/brand-header/08-phone.svg")!important;aspect-ratio:3.341!important;width:min(142px,calc(100vw - 2 * var(--site-header-gutter) - 172px))!important}
 .site-header.site-header.site-header .player-brand[data-logo="08a"] .logo-art{-webkit-mask-image:url("/studies/scrolls/brand-header/08a-phone.svg")!important;mask-image:url("/studies/scrolls/brand-header/08a-phone.svg")!important;aspect-ratio:3.499!important;width:min(148px,calc(100vw - 2 * var(--site-header-gutter) - 172px))!important}
 .site-header.site-header.site-header .player-brand{gap:0}
}
@media(max-height:500px) and (min-aspect-ratio:1/1) and (min-width:701px){
 .site-header.site-header.site-header.site-header{height:var(--site-header-height)!important;padding:calc(8px + var(--site-header-safe-top)) var(--site-header-gutter) 10px!important}
 .site-header.site-header.site-header .player-brand[data-logo="08c"] .logo-art{width:165px!important}
}

/* Round 14 responsive (Nicole: "why is this not responsive?"): the compact header (logo, apply, menu) now runs up to 1023 px, where the
   full lockup and navigation stop fitting; from 1024 to 1279 px the lockup scales down smoothly so the full header never overflows. */
@media(min-width:1024px) and (max-width:1279px){.site-header.site-header.site-header .player-brand:is([data-logo="08"],[data-logo="08a"],[data-logo="08c"],[data-logo="10"]) .logo-art{width:clamp(76px,calc((100vw - 700px) * 100 / 580 * var(--logo-a,1)),calc(100px * var(--logo-a,1)))}}
/* Nicole 10-22: try a solid header in the logo colourways (no gradient, no blur, no text shadow). */
html:root .site-header.site-header.site-header.site-header:not(#solid-header){background:#240a12!important;border-bottom:1px solid #f1e6d71f!important}
html:root .site-header.site-header.site-header.site-header:not(#solid-header):before{display:none!important}
html:root .site-header.site-header :is(.player-brand,.film-navigation){text-shadow:none!important}
html:root[data-theme=light] .site-header.site-header.site-header.site-header:not(#solid-header){background:#f1e6d7!important;border-bottom-color:#4b12241f!important}
html:root .darkroom-page .space-page-nav.space-page-nav:not(#solid-header){background:#240a12!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:root[data-theme=light] .darkroom-page .space-page-nav.space-page-nav:not(#solid-header){background:#f1e6d7!important}

/* One selected header on every page; Nicole requested a shorter bar and smaller logo. */
.site-header.site-header.site-header{height:var(--site-header-height)!important;padding:12px var(--site-header-gutter)!important;box-sizing:border-box}
.site-header.site-header.site-header .player-brand[data-logo="08a"] .logo-art{width:calc(72px * var(--logo-a))!important}
.site-header.site-header .film-navigation{margin-left:auto}
@media(max-width:1023px),(max-height:500px) and (min-aspect-ratio:1/1){
 :root{--site-header-height:calc(64px + var(--site-header-safe-top))}
 .site-header.site-header.site-header{padding:calc(8px + var(--site-header-safe-top)) var(--site-header-gutter) 10px!important}
 .site-header.site-header.site-header .player-brand[data-logo="08a"] .logo-art{width:min(148px,calc(100vw - 2 * var(--site-header-gutter) - 172px))!important}
}
@media(max-width:1023px){.site-header.site-header.site-header:not(.has-mobile-menu){height:auto!important}}

/* Nicole 2026-10-23: keep San Francisco, CA in the selected mobile lockup.
   The phone SVG retains the original Ballet A and Redaction outlines; its location line is optically enlarged. */
@media(max-width:1023px),(max-height:500px) and (min-aspect-ratio:1/1){
 html:root .site-header.site-header.site-header.site-header{gap:10px!important}
 html:root .site-header.site-header.site-header.site-header .player-brand[data-logo="08a"] .logo-art{width:160px!important}
}
@media(max-width:359px){
 html:root .site-header.site-header.site-header.site-header{gap:8px!important}
 html:root .site-header.site-header.site-header.site-header .header-apply[data-header-link]:not(#theme-apply){padding:0 8px!important}
 html:root .site-header.site-header.site-header.site-header .mobile-menu-toggle{width:44px;min-width:44px;padding:0;gap:0}
 .site-header .mobile-menu-toggle .mobile-menu-label{display:none}
}