.nav-logo{display:flex;align-items:center;flex-shrink:0;line-height:1}
.brand-wordmark{display:block;width:auto;height:42px;object-fit:contain}
.sf-logo .brand-wordmark{height:64px}
.brand-on-dark{display:none}
html[data-theme="dark"] .brand-on-light{display:none}
html[data-theme="dark"] .brand-on-dark{display:block}
.hero-brand{font-size:inherit;line-height:1;margin-bottom:24px}
.hero-brand img{display:block;width:clamp(200px,30vw,380px);height:auto;margin:0 auto}
.brand-crew{display:block;width:150px;height:auto;margin:0 auto 24px}
@media(max-width:600px){.brand-wordmark{height:36px}.hero-brand img{width:clamp(180px,55vw,260px)}}
@media(prefers-reduced-motion:reduce){.hero-brand{animation:none;opacity:1;transform:none}}
/* Give the calligraphic silhouette room instead of treating it as a text label. */
.top-nav{height:84px}
.brand-wordmark{height:68px}
.sf-logo .brand-wordmark{height:96px}
@media(max-width:640px){
  .top-nav{height:76px;padding:0 12px;gap:8px}
  .brand-wordmark{height:56px}
  .nav-links{gap:0;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .nav-link{padding:5px 6px;font-size:7px;letter-spacing:.04em}
  .nav-cta{padding:8px;margin-left:4px;white-space:nowrap;font-size:7px}
  .nav-theme{margin-left:4px;flex-shrink:0}
}

/* Navigation uses the compact S; the full wordmark closes the page. */
.brand-monogram{display:block;width:auto;height:48px}
.brand-monogram.brand-on-dark{display:none}
html[data-theme="dark"] .brand-monogram.brand-on-dark{display:block}
@media(max-width:640px){.brand-monogram{height:40px}}