/* Preserve the header layout height; the larger wordmark uses its existing padding. */
.site-brand { position: relative; display: block; min-width: 0; max-width: calc(100% - 4rem); flex-shrink: 1; }
.brand-link { display: block; width: max-content; max-width: 100%; }
.brand-stage { position: relative; display: block; width: 18.63rem; max-width: 100%; aspect-ratio: 1400 / 248; isolation: isolate; }
.brand-stage > .brand-fallback { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 100%; height: auto; object-fit: contain; }
.brand-stage.brand-ready > .brand-fallback { opacity: 0; }
.brand-canvas { position: absolute; left: -8px; top: calc(-1 * var(--brand-margin-y, 10px)); width: calc(100% + 16px); height: calc(100% + 2 * var(--brand-margin-y, 10px)); pointer-events: none; }
.site-brand { clip-path: inset(-16px -9px -16px -9px); }
.brand-toggle { position: absolute; right: -4px; top: -15px; display: grid; place-items: center; width: 32px; height: 28px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #b8d1df; opacity: 0; transition: opacity .15s; cursor: pointer; z-index: 2; }
.brand-toggle[hidden] { display: none; }
.site-brand:hover .brand-toggle, .site-brand:focus-within .brand-toggle, .brand-toggle:focus-visible { opacity: 1; }
.brand-toggle:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.brand-toggle:hover,.brand-toggle[aria-expanded="true"] { background:#0b1729; border-color:#6796ab55; opacity:1; }
.brand-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.brand-action-menu { position:fixed; z-index:1000; width:264px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow-y:auto; padding:6px; border:1px solid #304157; border-radius:14px; background:#0b1425; color:#e2e8f0; box-shadow:0 16px 48px #0009; font:14px/1.35 system-ui,sans-serif; }
.brand-action-menu[hidden] { display:none; }
.brand-menu-title { padding:10px 12px; color:#94a3b8; font-size:12px; font-weight:600; }
.brand-action-menu button { display:block; width:100%; min-height:40px; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.brand-action-menu button:hover,.brand-action-menu button:focus { outline:none; background:#164e6355; color:#cffafe; }
.brand-action-menu button:focus-visible { outline:2px solid #67e8f9; outline-offset:-2px; }
.brand-menu-divider { height:1px; margin:5px 8px; background:#ffffff18; }
@media (min-width: 640px) { .brand-stage { width: 21.735rem; } }
@media (min-width: 1280px) { .brand-stage { width: 16.935rem; } .site-brand { max-width: none; } }
@media (hover: none) { .brand-toggle { opacity: .7; width:36px; height:32px; top:-16px; } .brand-action-menu button { min-height:44px; } }
@media (prefers-reduced-motion: reduce) { .brand-toggle { display: none; } }
