/* The wordmark and full horizontal lockup share a fixed center. */
.header .logo { position: relative; width: 239.2px; }
.header-logo {
    --header-logo-scale: .81;
    position: absolute;
    left: 50%; top: 50%;
    width: 239.2px; height: 80px;
    transform: translate(-50%, -50%);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.header-logo-contrast {
    position: absolute; inset: 0; display: block;
    pointer-events: none;
    transition: filter 250ms ease;
}
.header-logo-lockup {
    position: absolute; left: 50%; top: 50%;
    display: block; width: 199.2px; height: 67px;
    transform: translate(-50%, -50%) scale(var(--header-logo-scale));
    transform-origin: center center;
    transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.header-logo-emblem {
    position: absolute; left: 0; top: 0;
    display: block; width: 40.8px; height: 67px;
    transform-origin: center center;
    transform: translateX(10px) scale(.92);
    opacity: 0; filter: blur(5px);
    transition:
        transform 280ms cubic-bezier(.22, 1, .36, 1),
        opacity 200ms ease,
        filter 280ms cubic-bezier(.22, 1, .36, 1);
}
.header-logo-wordmark {
    position: absolute; left: 52.2px; top: 19.6px;
    display: block; width: 147px; height: 27.8px;
    transform: translateX(-26.1px);
    transform-origin: center center;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}
/* Size SVGs at their display dimensions so the scroll filter never wraps
   oversized artwork reduced by another transform. */
.header-logo-artwork { display: block; width: 100%; height: 100%; }
/* Motion blur is inside the scroll contrast shell, never replacing it. */
.header .logo .header-logo img {
    display: block; max-width: none; width: 100%; height: auto;
    transform: none; filter: none; transition: none;
}
.header.scrolled .logo .header-logo img { filter: none; }
.header.scrolled .header-logo-contrast {
    filter:
        drop-shadow(0 0 1.5px #ffffff)
        drop-shadow(0 0 1.5px #ffffff)
        drop-shadow(0 0 1.5px #ffffff)
        drop-shadow(0 0 2px #ffffff)
        drop-shadow(0 2px 5px rgba(15, 23, 42, 0.18));
}
@media (hover: hover) and (pointer: fine) {
    .header-logo:hover .header-logo-emblem {
        opacity: 1; transform: translateX(0) scale(1); filter: blur(0);
        transition-duration: 400ms, 280ms, 400ms;
    }
    .header-logo:hover .header-logo-wordmark {
        transform: translateX(0);
        transition-duration: 400ms;
    }
}
.header-logo:focus-visible .header-logo-emblem { opacity: 1; transform: none; filter: blur(0); }
.header-logo:focus-visible .header-logo-wordmark { transform: none; }
@media (max-width: 480px) {
    .header { padding-top: 24px; }
    .header-logo:hover .header-logo-lockup,
    .header-logo:focus-visible .header-logo-lockup { --header-logo-scale: .5346; }
}
@media (hover: none), (pointer: coarse) {
    .header-logo-lockup { --header-logo-scale: .5346; }
    .header .logo .header-logo-emblem { opacity: 1; transform: none; filter: none; }
    .header .logo .header-logo-wordmark { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .header-logo-lockup,
    .header-logo-emblem,
    .header-logo-wordmark,
    .header-logo-contrast { transition: none !important; }
    .header-logo-emblem { filter: none !important; }
}

/* Give mobile header controls a real surface. The separate masked blur left
   scrolling text readable behind them and under Safari's transparent chrome. */
@media (max-width: 900px) {
    body { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
    .header {
        background-color: #ffffff;
        padding-top: calc(32px + env(safe-area-inset-top, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-bottom: 16px;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
    }
    .header::after {
        content: '';
        position: absolute;
        top: 100%; right: 0; left: 0;
        height: 32px;
        background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
        pointer-events: none;
    }
    .progressive-blur.top-blur { display: none; }
    .header.scrolled .header-logo-contrast { filter: none; }
}
@media (max-width: 768px) {
    .header {
        padding-top: calc(24px + env(safe-area-inset-top, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-bottom: 12px;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
    }
}

/* Shared scrolling header: protect the wordmark with a small, solid surface
   instead of outlining the artwork. The existing scroll state applies this
   treatment on every page, including the homepage when it can scroll. */
body .header-logo {
    width: 176px;
    height: 56px;
    border-radius: 28px;
}
body .header-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-border-light, #f0f0f0);
    border-radius: inherit;
    background: var(--color-bg-primary, #ffffff);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
    opacity: 0;
    transform: scale(.96);
    transition: opacity 200ms ease, transform 250ms cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
body .header.scrolled .header-logo::before {
    opacity: 1;
    transform: none;
}
body .header.scrolled .header-logo-contrast {
    filter: none;
}
/* A quiet, stable wordmark while reading, including on hover and touch. */
body .header.scrolled .header-logo-lockup {
    --header-logo-scale: .81;
}
body .header.scrolled .header-logo-emblem {
    opacity: 0;
    transform: translateX(10px) scale(.92);
    filter: none;
}
body .header.scrolled .header-logo-wordmark {
    transform: translateX(-26.1px);
}
@media (min-width: 901px) {
    .header.scrolled ~ .progressive-blur.top-blur { display: none; }
}
/* Phones already have a solid header. Use that surface rather than adding
   a second one; retain the existing safe-area padding and menu target. */
@media (max-width: 900px) {
    body .header-logo::before { display: none; }
    body .header::after {
        height: 1px;
        background: var(--color-border-light, #f0f0f0);
        opacity: 0;
        transition: opacity 200ms ease;
    }
    body .header.scrolled::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body .header-logo::before,
    body .header::after { transition: none; }
}