/* Inked Company branding and navigation, 26 October 2026. */
:root { --site-header-height: 76px; }
.site-header .nav-shell { min-height: var(--site-header-height); }
.site-header .brand { width: calc(60px * 561 / 205); flex: 0 0 calc(60px * 561 / 205); }
.site-header .brand img { width: 100%; height: auto; max-height: none; }
.site-header .logo-light { display: none; }
.site-header .brand .logo-dark { display: block; }
.site-header[data-chapter-tone="light"] .logo-light { display: block; filter: none; }
.site-header[data-chapter-tone="light"] .brand .logo-dark { display: none; }
.site-header[data-chapter-tone="dark"] .logo-light { display: none; }
.site-header[data-chapter-tone="dark"] .brand .logo-dark { display: block; }
.site-header .nav { top: var(--site-header-height); font-family: Manrope, Inter, sans-serif; font-weight: 800; letter-spacing: .035em; }
.footer-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-logo { display: block; width: 110px; }
.footer-logo img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  :root { --site-header-height: 70px; }
  .footer-logo { width: 100px; }
}

/* The opening logo gives way to the existing code and headline scroll sequence. */
.story-brand-intro { position: absolute; z-index: 3; left: 50%; top: 42%; width: min(773.333px, 90vw); transform: translate(-50%, -50%); opacity: var(--brand-opacity, 1); pointer-events: none; will-change: opacity; }
.story-brand-intro img { display: block; width: 100%; height: auto; }
.scroll-story .story-intro { left: 0; right: 0; justify-content: center; text-align: center; gap: 0; padding-inline: 20px; }
@media (max-height: 550px) and (min-width: 761px) { .story-brand-intro { width: min(586.667px, 86.667vw); top: 38%; } }
@media (prefers-reduced-motion: reduce) { .story-brand-intro { display: none; } }
.scroll-story:not(.is-ready) .story-brand-intro { display: none; }