/* Shared hat-triggered navigation. Card treatments remain common to all areas. */
/* Only the small edge/glass surfaces inherit these native animation values. */
@property --menu-progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --notch-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

:root {
    --site-menu-motion-scale: 1.25;
    --global-header-height: 64px;
    --global-header-edge-height: 18px;
    --global-header-hat-size: 60px;
    --site-menu-content-width: 674px; /* Five 128px portraits, four 7px gaps and two 3px grid insets. */
    --site-menu-height: 564px; /* Preserve the two-row drawer space above the search field. */
    --site-menu-surface: #0d0c12;
    --site-menu-desktop-padding: 32px;
    --site-menu-glass-depth: 144px;
    --site-menu-close-depth: 24px;
    --site-header-glass: rgba(9, 8, 13, 0.6);
}

droog-site-header,
droog-site-drawers {
    display: contents;
}

.global-header,
.shared-site-drawer {
    --site-menu-panel-width: calc(100vw - var(--site-menu-scrollbar-width, 0px));
    --menu-edge-inset: 0px;
    --menu-edge-end-opacity: 0;
    --site-header-tint: linear-gradient(90deg, rgba(var(--accent-1-rgb), 0.08), transparent 28%, transparent 72%, rgba(var(--accent-3-rgb), 0.08));
}

.global-header {
    --menu-edge-width: calc(100vw - var(--site-menu-scrollbar-width, 0px));
    position: fixed;
    z-index: 60;
    inset: 0 var(--site-menu-scrollbar-width, 0px) auto 0;
    height: var(--global-header-height);
    /* The drawer owns depth; a separate bar shadow darkens its resting glass notch. */
}

.global-header::before {
    /* At rest, the bar and notch are cut from one stationary glass sheet.
       The moving drawer keeps the same single outline and interactive handle. */
    --header-notch-scale: calc(max(.001, var(--notch-scale, 1)) * var(--menu-at-rest, 1));
    position: absolute;
    inset: 0 0 calc(-3 * var(--global-header-edge-height));
    content: "";
    pointer-events: none;
    z-index: -2;
    background: var(--site-header-tint), var(--site-header-glass);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    -webkit-mask-image: linear-gradient(#000 0 0), var(--global-header-notch-mask);
    mask-image: linear-gradient(#000 0 0), var(--global-header-notch-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% var(--global-header-height), min(320px, 100%) calc(var(--global-header-edge-height) * 3.1 * var(--header-notch-scale));
    mask-size: 100% var(--global-header-height), min(320px, 100%) calc(var(--global-header-edge-height) * 3.1 * var(--header-notch-scale));
    -webkit-mask-position: left top, center calc(var(--global-header-height) - 0.5px + var(--global-header-edge-height) / 40 - var(--global-header-edge-height) / 8 * var(--header-notch-scale));
    mask-position: left top, center calc(var(--global-header-height) - 0.5px + var(--global-header-edge-height) / 40 - var(--global-header-edge-height) / 8 * var(--header-notch-scale));
}

.global-header-viewport {
    height: 100%;
    overflow: hidden;
    overflow: clip;
}

/* Clip moving rows, but let the existing hat halo spill over the resting notch. */
body:not(.drawer-scroll-locked) .global-header-viewport { overflow: visible; }
body:not(.drawer-scroll-locked) .global-header-tab-row { visibility: hidden; }

.global-header-roll {
    height: 200%;
    /* Categories above, page links below: one physical strip, one movement. */
    transform: translateY(-50%);
}

.global-header-tab-row {
    height: var(--global-header-height);
}

.global-header-inner {
    display: grid;
    width: min(900px, 100%);
    height: var(--global-header-height);
    grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
    align-items: center;
    margin: 0 auto;
    padding: 0 18px;
}

.global-drawer-close-edge,
.global-header-edge {
    position: absolute;
    z-index: 0;
    top: calc(100% - 0.5px);
    left: 50%;
    display: block;
    width: min(320px, 100%);
    height: var(--global-header-edge-height);
    transform: translateX(-50%);
    pointer-events: none;
}

.global-drawer-close-edge svg {
    position: relative;
    display: block;
    width: 100%;
    height: var(--global-header-edge-height);
    overflow: visible;
    clip-path: inset(-4px 0 -40px);
    transition: opacity calc(260ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-close-edge::before,
.global-drawer-close-edge::after,
.global-header-edge::before,
.global-header-edge::after {
    position: absolute;
    top: 0;
    width: max(0px, calc((var(--menu-edge-width, var(--site-menu-panel-width)) - 320px) / 2 - var(--menu-edge-inset)));
    height: 1px;
    content: "";
}

.global-drawer-close-edge::before,
.global-header-edge::before {
    right: 100%;
    background: linear-gradient(90deg, rgba(var(--accent-1-rgb), var(--menu-edge-end-opacity)), rgba(var(--accent-1-rgb), 0.4) 50%, rgba(var(--accent-2-rgb), 0.65));
}

.global-drawer-close-edge::after,
.global-header-edge::after {
    left: 100%;
    background: linear-gradient(90deg, rgba(var(--accent-2-rgb), 0.65), rgba(var(--accent-3-rgb), 0.4) 50%, rgba(var(--accent-3-rgb), var(--menu-edge-end-opacity)));
}

.global-drawer-close-edge-outline,
.global-drawer-close-edge::before,
.global-drawer-close-edge::after,
.global-header-edge::before,
.global-header-edge::after {
    opacity: 0.65;
    transition: opacity calc(260ms * var(--site-menu-motion-scale)) ease;
}

.shared-site-drawer .global-drawer-close-edge-outline,
.shared-site-drawer .global-drawer-close-edge::before,
.shared-site-drawer .global-drawer-close-edge::after {
    opacity: 1;
}

.shared-site-drawer .global-drawer-close-edge-outline {
    stroke: var(--site-menu-border);
}

.shared-site-drawer .global-drawer-close-edge::before,
.shared-site-drawer .global-drawer-close-edge::after {
    background: var(--site-menu-border);
}

.global-drawer-close-edge-outline,
.global-drawer-tab-fill {
    transform: scaleY(max(.001, var(--notch-scale, 1)));
    transform-origin: 0 1px;
}

.menu-notch-left { transform: translateX(calc(-95px * var(--menu-progress, 0))); }
.menu-notch-right { transform: translateX(calc(95px * var(--menu-progress, 0))); }
.menu-notch-middle { transform: translateX(180px) scaleX(var(--menu-progress, 0)); }

.global-drawer-tab-fill {
    fill: color-mix(in srgb, var(--site-header-glass), var(--site-menu-surface) calc(var(--menu-progress, 0) * 100%));
    opacity: calc(1 - var(--menu-at-rest, 1));
}

.global-header-edge {
    /* The moving drawer owns the middle; these are only the outer bar tails. */
    --menu-edge-gap: max(0px, calc((var(--site-menu-panel-width) - 320px) / 2 - var(--menu-edge-corner, 0px) * (1 - var(--menu-progress, 0))));
    opacity: calc(1 - var(--menu-at-rest, 1));
}

.global-header-edge::before { clip-path: inset(0 var(--menu-edge-gap) 0 0); }
.global-header-edge::after { clip-path: inset(0 0 0 var(--menu-edge-gap)); }

.global-header-mobile-side,
.global-header-links {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: center;
}

.global-header-links-start {
    justify-content: flex-end;
}

.global-header-links-end {
    justify-content: flex-start;
}

.global-header-mobile-side,
.global-header-section-menu,
.global-header-links a,
.global-drawer-tab-copy strong {
    font-family: "DM Sans", sans-serif;
    font-size: clamp(0.54rem, 0.7vw, 0.64rem);
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.global-header-links a {
    position: relative;
    padding: 8px clamp(8px, 1.2vw, 17px);
    color: var(--muted);
    text-decoration: none;
    transition: color calc(160ms * var(--site-menu-motion-scale)) ease;
}

.global-header-links a[hidden] {
    display: none;
}

.global-header-links a + a:not([hidden])::before,
.global-drawer-tab + .global-drawer-tab::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 16px;
    background: rgba(var(--accent-2-rgb), 0.32);
    content: "";
    transform: translateY(-50%);
    pointer-events: none;
}

.global-drawer-tab + .global-drawer-tab::before {
    /* Centre the shared separator in the tabs' 4px gap. */
    left: -2px;
}

.global-header-links a:hover,
.global-header-links a.is-current-section,
.global-header-links a[aria-current="location"] {
    color: var(--accent-3);
}

.global-header-brand {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 94px;
    height: 64px;
    /* Keep the masked hat and its centred glow aligned in smaller CMS preview boxes too. */
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    text-decoration: none;
}

.global-header-hat {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--global-header-hat-size);
    height: var(--global-header-hat-size);
    background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
    -webkit-mask: var(--global-header-hat) center / contain no-repeat;
    mask: var(--global-header-hat) center / contain no-repeat;
}

.global-header-hat::after {
    position: absolute;
    inset: 0;
    background: var(--accent-3);
    content: "";
    opacity: 0;
    transition: opacity calc(260ms * var(--site-menu-motion-scale)) ease;
}

.global-header-hat-glow {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: var(--global-header-hat-size);
    height: var(--global-header-hat-size);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter:
        drop-shadow(0 0 4px rgba(var(--accent-3-rgb), 1))
        drop-shadow(0 0 11px rgba(var(--accent-2-rgb), 0.92))
        drop-shadow(0 0 22px rgba(var(--accent-1-rgb), 0.68));
    transition: opacity calc(260ms * var(--site-menu-motion-scale)) ease;
}

/* Standalone CMS previews use native hover; the menu toggle retains its resettable hover state. */
.global-header-brand:not(.global-header-menu-toggle):hover .global-header-hat-glow,
.global-header-brand[data-menu-hover] .global-header-hat-glow,
.global-header-brand:focus-visible:not([data-menu-pointer-focus]) .global-header-hat-glow,
.global-header-brand:not(.global-header-menu-toggle):hover .global-header-hat::after,
.global-header-brand[data-menu-hover] .global-header-hat::after,
.global-header-brand:focus-visible:not([data-menu-pointer-focus]) .global-header-hat::after {
    opacity: 1;
}

.global-header-menu-toggle {
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
}

.global-header-menu-toggle:focus {
    /* The existing :focus-visible hat glow is this button's keyboard indicator. */
    outline: none;
}

.global-header-menu-notch,
.global-drawer-home {
    font: 600 0.64rem / 1.3 "DM Sans", sans-serif;
    letter-spacing: 0.08em;
}

.global-header-menu-notch {
    position: absolute;
    z-index: 2;
    top: 24px;
    left: 50%;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--text);
    opacity: var(--notch-scale, 1);
    pointer-events: none;
    transform: translate(-50%, calc(-8px * (1 - var(--notch-scale, 1))));
}

/* The homepage's layered scene is expensive to composite during scrolling.
   Keep its tiny notch label and mobile location words on their own layers. */
body.homepage .global-header-menu-notch { will-change: transform, opacity; }

.global-header-menu-notch svg {
    display: block;
    width: 10px;
    height: 6px;
    fill: none;
    stroke: var(--accent-3);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

droog-site-drawers[data-menu-state="closed"] .global-header-menu-notch svg {
    transform: rotate(180deg);
}

.global-header-svg-icon {
    display: block;
    background: currentColor;
    -webkit-mask: var(--global-header-icon) center / contain no-repeat;
    mask: var(--global-header-icon) center / contain no-repeat;
    transition: color calc(180ms * var(--site-menu-motion-scale)) ease, filter calc(180ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-tabs,
.shared-site-drawer {
    /* Keep the categories aligned with the cards, including scroll-lock compensation. */
    --site-menu-inline-padding: max(18px, calc((100vw - var(--site-menu-scrollbar-width, 0px) - var(--site-menu-content-width)) / 2));
}

.global-drawer-viewport {
    /* Keep the clipping boundary stationary. Animating a clip on the translated
       drawer can repaint separately from its background and cards in Safari. */
    position: fixed;
    z-index: 61;
    inset: var(--global-header-height) var(--site-menu-scrollbar-width, 0px) 0 0;
    overflow: hidden;
    overflow: clip;
    pointer-events: none;
}

.shared-site-drawer {
    /* One paint for the frame, connecting lines and notch; no compounded fades. */
    --site-menu-border: rgba(var(--accent-2-rgb), 0.55);
    position: absolute;
    z-index: 50;
    inset: 0 0 auto;
    display: flex;
    height: var(--site-menu-height);
    max-height: calc(100vh - var(--global-header-height) - var(--site-menu-close-depth) - max(8px, env(safe-area-inset-bottom)));
    max-height: min(calc(100dvh - var(--global-header-height) - var(--site-menu-close-depth) - max(8px, env(safe-area-inset-bottom))), var(--site-search-viewport-height, 100dvh));
    min-height: 0;
    flex-direction: column;
    padding: 0 var(--site-menu-inline-padding) 88px;
    /* The grid clips its own scrolling content; leave the closing notch visible below the edge. */
    overflow: visible;
    border: 0;
    background: linear-gradient(180deg, transparent, var(--site-menu-surface) var(--site-menu-glass-depth));
    pointer-events: none;
    /* The same notch rests at the bar when closed and travels with the drawer. */
    transform: translateY(-100%);
}

.global-drawer-shadow {
    /* Fade a fixed shadow with the same clock, instead of repainting its blur. */
    position: absolute;
    z-index: -2;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
}

.shared-site-drawer::before {
    /* Only this shallow strip needs the header's glass; the cards below remain opaque. */
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: var(--site-menu-glass-depth);
    max-height: 100%;
    background:
        var(--site-header-tint) center top / calc(100vw - var(--site-menu-scrollbar-width, 0px)) 100% no-repeat,
        var(--site-header-glass);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
    content: "";
    pointer-events: none;
}

body.site-menu-open .shared-site-drawer {
    pointer-events: auto;
}

@media (min-width: 901px) {
    .global-header {
        --menu-edge-corner: 20px;
        /* Cover Safari's occasional one-pixel mask seam at the viewport edge. */
        background: linear-gradient(var(--site-header-glass), var(--site-header-glass)) top / 100% 1px no-repeat;
    }

    .global-drawer-tabs {
        --site-menu-inline-padding: var(--site-menu-desktop-padding);
    }

    .shared-site-drawer {
        --site-menu-inline-padding: var(--site-menu-desktop-padding);
        --menu-edge-inset: 20px;
        --menu-edge-end-opacity: 0.42;
        width: calc(var(--site-menu-content-width) + 2 * var(--site-menu-inline-padding));
        max-width: calc(100vw - var(--site-menu-scrollbar-width, 0px) - 36px);
        max-height: calc(100vh - var(--global-header-height) - var(--site-menu-close-depth) - 18px);
        max-height: min(calc(100dvh - var(--global-header-height) - var(--site-menu-close-depth) - 18px), var(--site-search-viewport-height, 100dvh));
        /* Auto margins centre within the same scrollbar-compensated bounds as the hat. */
        margin-inline: auto;
        border-radius: 0 0 20px 20px;
    }

    .global-header,
    .shared-site-drawer {
        --site-menu-panel-width: min(calc(var(--site-menu-content-width) + 2 * var(--site-menu-desktop-padding)), calc(100vw - var(--site-menu-scrollbar-width, 0px) - 36px));
    }

    .shared-site-drawer::after {
        /* Reuse the rounded gradient-mask border from the Blueprint/download buttons. */
        position: absolute;
        z-index: 3;
        inset: 0 0 -0.5px;
        padding: 0 1px 1px;
        border-radius: inherit;
        background: var(--site-menu-border);
        opacity: 1;
        /* Keep only the sides and rounded corners. The shared edge owns the entire straight bottom. */
        clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) 100%, calc(100% - 20px) calc(100% - 1px), 20px calc(100% - 1px), 20px 100%, 0 100%);
        content: "";
        pointer-events: none;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }
}

.global-drawer-actions {
    position: absolute;
    z-index: 5;
    bottom: calc(-1 * var(--site-menu-close-depth));
    left: 50%;
    width: 320px;
    max-width: 100%;
    height: 48px;
    transform: translateX(-50%);
    pointer-events: none;
}

.global-drawer-close {
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: calc(50% + 64px * var(--menu-progress, 0));
    width: 96px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    transform: translateX(-50%);
    cursor: pointer;
    pointer-events: auto;
}

.global-drawer-close[hidden] { display: none; }

.global-drawer-close-edge {
    z-index: 0;
    top: calc(100% - var(--site-menu-close-depth) - 0.5px);
}

/* At rest, paint the whole line and notch through one viewport-wide fade.
   The moving drawer's corners and separate header tails must not show through
   this outline. The mask is tall enough to include the bottom of the notch. */
droog-site-drawers[data-menu-state="closed"] .global-drawer-close-edge {
    width: calc(100vw - var(--site-menu-scrollbar-width, 0px));
    height: calc(3 * var(--global-header-edge-height));
    /* Align the SVG's y=1 stroke with the one-pixel horizontal strips. */
    top: calc(100% - var(--site-menu-close-depth) + 0.5px - var(--global-header-edge-height) / 40);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000, transparent);
    mask-image: linear-gradient(90deg, transparent, #000, transparent);
}

droog-site-drawers[data-menu-state="closed"] .global-drawer-close-edge svg {
    width: min(320px, 100%);
    margin-inline: auto;
}

droog-site-drawers[data-menu-state="closed"] .global-drawer-close-edge::before,
droog-site-drawers[data-menu-state="closed"] .global-drawer-close-edge::after {
    top: calc(var(--global-header-edge-height) / 40 - 0.5px);
    width: max(0px, calc((100% - 320px) / 2));
}

droog-site-drawers[data-menu-state="closed"] .global-drawer-close-edge::before {
    left: 0;
    right: auto;
}

droog-site-drawers[data-menu-state="closed"] .global-drawer-close-edge::after {
    left: auto;
    right: 0;
}

droog-site-drawers[data-menu-state="closed"] .shared-site-drawer::after {
    visibility: hidden;
}

body.site-menu-open .global-drawer-actions {
    /* The space between controls absorbs taps instead of closing via the backdrop. */
    pointer-events: auto;
}

.global-drawer-close:focus {
    outline: none;
}

.global-drawer-close:focus-visible .global-header-menu-notch > span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.global-drawer-tabs {
    /* The original tablist lives in the first row of the shared rolling strip. */
    position: relative;
    isolation: isolate;
    display: grid;
    width: var(--site-menu-content-width);
    max-width: calc(100% - 2 * var(--site-menu-inline-padding));
    height: var(--global-header-height);
    grid-template-columns: repeat(var(--drawer-tab-count, 1), minmax(0, 1fr));
    gap: 4px;
    margin: 0 auto;
    padding: 0 5px;
}

.global-drawer-tabs::before {
    position: absolute;
    right: calc(-1 * var(--site-menu-inline-padding));
    bottom: 0;
    left: calc(-1 * var(--site-menu-inline-padding));
    height: 1px;
    background: var(--line);
    opacity: 0.45;
    content: "";
    pointer-events: none;
}

.global-drawer-tab-slider {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-1) 15%, var(--accent-2) 52%, var(--accent-3) 85%, transparent);
    box-shadow: 0 -2px 9px rgba(var(--accent-2-rgb), 0.55);
    pointer-events: none;
    /* The menu clock fades underline, mist and spill with the rolling row. */
    opacity: 0;
}

.global-drawer-tab-slider::after {
    /* Continue the same selected-tab gradient into the content; it travels with the slider. */
    position: absolute;
    top: 100%;
    right: -8px;
    left: -8px;
    height: 32px;
    background: inherit;
    content: "";
    opacity: 0.16;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 0%, transparent 100%);
}

.global-drawer-tabs.slider-ready .global-drawer-tab-slider {
    transition: width calc(300ms * var(--site-menu-motion-scale)) cubic-bezier(0.22, 1, 0.36, 1), transform calc(300ms * var(--site-menu-motion-scale)) cubic-bezier(0.22, 1, 0.36, 1);
}

/* The approved mist travels with the existing slider; only its two small layers animate. */
.global-drawer-tab-mist {
    position: absolute;
    bottom: 1px;
    left: -8px;
    right: -8px;
    height: 56px;
    overflow: hidden;
    opacity: 0.65;
    /* A soft dome: the mist rises in the centre and tapers into the ends of the bar. */
    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 18%, rgba(0, 0, 0, 0.82) 44%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 18%, rgba(0, 0, 0, 0.82) 44%, transparent 100%);
    pointer-events: none;
}

.global-drawer-tab-mist::before,
.global-drawer-tab-mist::after {
    position: absolute;
    inset: 10% 6% -20%;
    content: "";
    filter: blur(8px);
    transform-origin: center bottom;
    animation: droog-menu-mist-rise calc(6s * var(--site-menu-motion-scale)) ease-in-out infinite alternate;
    animation-play-state: paused;
}

.global-drawer-tab-mist::before {
    background:
        radial-gradient(ellipse at 18% 94%, var(--accent-1), transparent 58%),
        radial-gradient(ellipse at 52% 70%, var(--accent-2), transparent 70%),
        radial-gradient(ellipse at 85% 98%, var(--accent-3), transparent 58%);
}

.global-drawer-tab-mist::after {
    background:
        radial-gradient(ellipse at 34% 78%, var(--accent-2), transparent 48%),
        radial-gradient(ellipse at 70% 84%, var(--accent-3), transparent 44%);
    animation-name: droog-menu-mist-wisp;
    animation-duration: calc(8s * var(--site-menu-motion-scale));
    animation-delay: calc(-3s * var(--site-menu-motion-scale));
}

body.site-menu-open .global-drawer-tab-mist::before,
body.site-menu-open .global-drawer-tab-mist::after {
    animation-play-state: running;
}

@keyframes droog-menu-mist-rise {
    from { transform: translate(-2%, 9%) scale(1, 0.86); opacity: 0.64; }
    to { transform: translate(2%, -4%) scale(1.06, 1.13); opacity: 0.9; }
}

@keyframes droog-menu-mist-wisp {
    from { transform: translate(4%, 15%) skewX(-8deg); opacity: 0.22; }
    to { transform: translate(-4%, -9%) skewX(6deg); opacity: 0.46; }
}

.global-drawer-tab {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 8px;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: color calc(180ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-tab:not([aria-selected="true"]):hover,
.global-drawer-tab:not([aria-selected="true"]):focus-visible {
    color: var(--text);
}

.global-drawer-tab[aria-selected="true"] {
    color: var(--accent-3);
}

.global-drawer-tab:focus {
    /* Use the label indicator below instead of the site's generic rounded focus ring. */
    outline: none;
}

.global-drawer-tab:focus-visible .global-drawer-tab-copy strong {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.global-drawer-tab-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    background: currentColor;
}

.global-drawer-tab[aria-selected="true"] .global-drawer-tab-icon {
    background: var(--accent-3);
}

.global-drawer-tab-copy {
    display: grid;
    min-width: 0;
    text-align: left;
}

.global-drawer-tab-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-drawer-content {
    display: flex;
    min-height: 0;
    flex: 1;
    overflow: clip;
}

.global-drawer-panels {
    position: relative;
    /* Keep card fades and paging controls below the drawer frame and Home. */
    isolation: isolate;
    z-index: 0;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    /* Clip moving cards, not the drawer itself: the mist and Close notch stay intact. */
    overflow: hidden;
    /* Unlike hidden, clip cannot scroll sideways when a moving link receives keyboard focus. */
    overflow: clip;
    transition: transform calc(336ms * var(--site-menu-motion-scale)) cubic-bezier(.22, 1, .36, 1), opacity calc(208ms * var(--site-menu-motion-scale)) ease;
}

.shared-site-drawer.is-searching .global-drawer-panels {
    transform: translateY(-105%);
    opacity: 0;
    pointer-events: none;
}

.global-search-field {
    position: absolute;
    z-index: 4;
    top: 16px;
    left: var(--site-menu-inline-padding);
    right: var(--site-menu-inline-padding);
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--site-menu-border);
    border-radius: 12px;
    background: #07060a;
    color: var(--muted);
    transform: translateY(var(--site-search-travel, 0px));
    transition: transform calc(336ms * var(--site-menu-motion-scale)) cubic-bezier(.22, 1, .36, 1), border-color calc(180ms * var(--site-menu-motion-scale)) ease;
}

.global-search-field:focus-within { border-color: var(--accent-3); }
.is-searching .global-search-field { transform: translateY(0); }
droog-site-drawers[data-menu-state="closed"] .global-search-field,
droog-site-drawers[data-menu-state="opening"] .global-search-field { transition: none; }
droog-site-drawers[data-menu-state="closed"] .global-drawer-panels { transition: none; }
.global-search-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.is-searching .global-search-icon { display: none; }
.global-search-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
}
.global-search-field input::placeholder { color: var(--muted); opacity: 1; }
.global-search-field input:focus-visible { outline: none; }
.global-search-field input::-webkit-search-cancel-button { display: none; }
.global-search-back, .global-search-clear, .global-search-retry {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.global-search-back, .global-search-clear { width: 32px; height: 40px; flex: 0 0 auto; font-size: 24px; }
.global-search-back[hidden], .global-search-clear[hidden] { display: none; }
.global-search-back:hover, .global-search-clear:hover, .global-search-retry:hover { color: var(--accent-3); }
.global-search-results {
    position: absolute;
    z-index: 2;
    inset: 76px var(--site-menu-inline-padding) 24px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--site-menu-border) transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity calc(176ms * var(--site-menu-motion-scale)) ease, transform calc(240ms * var(--site-menu-motion-scale)) ease, visibility calc(240ms * var(--site-menu-motion-scale));
}
.is-searching .global-search-results {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: calc(112ms * var(--site-menu-motion-scale));
}
/* The closed drawer keeps its notch visible. Hide search surfaces explicitly:
   a viewport-height change can leave their last measured travel below the header. */
droog-site-drawers:not([data-menu-state]) :is(.global-search-field, .global-search-results),
droog-site-drawers[data-menu-state="closed"] :is(.global-search-field, .global-search-results) {
    visibility: hidden;
}

.global-search-status { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.global-search-group { margin: 0 0 24px; }
.global-search-group h2 {
    margin: 0 0 8px;
    color: var(--accent-3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.global-search-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    transition: background calc(120ms * var(--site-menu-motion-scale)) ease, color calc(120ms * var(--site-menu-motion-scale)) ease;
}
.global-search-result:hover, .global-search-result:focus-visible {
    background: rgba(var(--accent-2-rgb), .12);
    color: var(--accent-3);
}
.global-search-thumbnail {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(var(--accent-2-rgb), .1);
    color: var(--muted);
}
.global-search-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.global-search-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.global-search-copy strong { font-size: 15px; font-weight: 600; }
.global-search-copy small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.global-search-blueprint { color: var(--accent-3); font-size: 11px; }
.global-search-retry { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .global-drawer-panels, .global-search-field, .global-search-results { transition: none; }
}

.global-drawer-home {
    position: absolute;
    z-index: 7;
    bottom: 0;
    left: calc(50% - 112px);
    display: flex;
    box-sizing: border-box;
    width: 96px;
    height: 48px;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 22px 0 0;
    border: 0;
    background: none;
    color: var(--text);
    opacity: var(--menu-progress, 0);
    visibility: hidden;
    pointer-events: none;
    outline: 0;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color calc(180ms * var(--site-menu-motion-scale)) ease;
}

droog-site-drawers:not([data-menu-state="closed"]) .global-drawer-home {
    visibility: visible;
}

droog-site-drawers[data-menu-state="open"] .global-drawer-home {
    pointer-events: auto;
}

.global-drawer-action-divider {
    position: absolute;
    z-index: 7;
    top: 21px;
    left: calc(50% - 0.5px);
    width: 1px;
    height: 16px;
    background: rgba(var(--accent-2-rgb), 0.38);
    opacity: var(--menu-progress, 0);
    pointer-events: none;
}

.global-drawer-close .global-header-menu-notch {
    top: calc(24px - 2px * var(--menu-progress, 0));
    transition: color calc(180ms * var(--site-menu-motion-scale)) ease;
}

droog-site-drawers:not([data-menu-state="closed"]) .global-drawer-close .global-header-menu-notch svg {
    stroke: currentColor;
}

droog-site-drawers:not([data-menu-state="closed"]) .global-drawer-close:is(:hover, :focus-visible) .global-header-menu-notch {
    color: var(--accent-3);
}

.global-drawer-home:hover,
.global-drawer-home:focus-visible {
    color: var(--accent-3);
}

.global-drawer-home:focus-visible {
    outline: 1px solid rgba(var(--accent-3-rgb), 0.72);
    outline-offset: -4px;
}

.global-drawer-home-hat {
    display: block;
    width: 22px;
    height: 17px;
    margin-top: -2px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--global-drawer-home-hat) center / contain no-repeat;
    mask: var(--global-drawer-home-hat) center / contain no-repeat;
    transition: filter calc(180ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-home:hover .global-drawer-home-hat,
.global-drawer-home:focus-visible .global-drawer-home-hat {
    filter: drop-shadow(0 0 7px rgba(var(--accent-2-rgb), 0.58));
}

.global-drawer-panels.is-switching {
    flex: none;
    /* Absolute sliding panels cannot supply intrinsic width inside the content flex row. */
    width: 100%;
}

.global-drawer-panels.is-switching > .global-drawer-tab-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.global-drawer-tab-panel {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.global-drawer-tab-panel[hidden] {
    display: none !important;
}

.shared-site-drawer .warband-message[hidden] {
    display: none !important;
}

.shared-site-drawer .global-drawer-housing-grid,
.shared-site-drawer .global-drawer-workshop-grid {
    --drawer-card-width: 195px;
    gap: 9px;
}

.shared-site-drawer .global-drawer-housing-grid .global-drawer-card-media,
.shared-site-drawer .global-drawer-workshop-grid .global-drawer-card-media {
    aspect-ratio: 16 / 10;
    font-size: clamp(2rem, 5vw, 3rem);
}

.shared-site-drawer .global-drawer-homepage-card {
    grid-column: 1 / -1;
}

.shared-site-drawer .global-drawer-housing-page-pair {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.shared-site-drawer .global-drawer-housing-page-card .global-drawer-card-media,
.shared-site-drawer .global-drawer-homepage-card .global-drawer-card-media {
    aspect-ratio: 16 / 5;
    max-height: 120px;
}

/* Feather the artwork to black using the existing shading layer, not the palette beneath it. */
.shared-site-drawer .global-drawer-housing-page-card .global-drawer-card-media:has(img),
.shared-site-drawer .global-drawer-homepage-card .global-drawer-card-media:has(img) {
    --drawer-media-edge-fade: linear-gradient(90deg, #000, transparent 14%, transparent 86%, #000);
}

.shared-site-drawer .global-drawer-separator {
    display: block;
    grid-column: 1 / -1;
    width: calc(100% - 6px);
    height: 1px;
    margin: 5px 3px;
    background: var(--line);
}

.global-drawer-card-symbol {
    position: relative;
    z-index: 1;
    width: 46%;
    height: 46%;
    background: rgba(255, 255, 255, 0.82);
    filter: drop-shadow(0 0 14px rgba(var(--accent-2-rgb), 0.35));
}

.global-drawer-browser {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1;
}

.global-drawer-browser::before,
.global-drawer-browser::after {
    position: absolute;
    z-index: 4;
    right: 0;
    left: 0;
    height: 74px;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity calc(180ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-browser::before {
    top: 0;
    background: linear-gradient(180deg, rgba(15, 14, 19, 0.98), rgba(15, 14, 19, 0));
}

.global-drawer-browser::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(15, 14, 19, 0.98), rgba(15, 14, 19, 0));
}

.global-drawer-browser.can-scroll-up::before,
.global-drawer-browser.can-scroll-down::after {
    opacity: 1;
}

.global-drawer-grid {
    display: grid;
    width: 100%;
    min-height: 0;
    flex: 1;
    grid-template-columns: repeat(auto-fill, var(--drawer-card-width, 128px));
    justify-content: center;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 7px;
    padding: 16px 3px 8px;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scroll-padding: 48px 0 58px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.global-drawer-grid::-webkit-scrollbar {
    display: none;
}

.global-drawer-page-button {
    position: absolute;
    z-index: 6;
    left: 50%;
    display: grid;
    width: 50px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(var(--accent-2-rgb), 0.48);
    border-radius: 999px;
    color: var(--text);
    background:
        linear-gradient(145deg, rgba(var(--accent-1-rgb), 0.34), rgba(var(--accent-3-rgb), 0.18)),
        rgba(14, 13, 18, 0.92);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36), 0 0 20px rgba(var(--accent-2-rgb), 0.16);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity calc(180ms * var(--site-menu-motion-scale)) ease, transform calc(180ms * var(--site-menu-motion-scale)) ease, border-color calc(180ms * var(--site-menu-motion-scale)) ease, filter calc(180ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-page-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.global-drawer-page-up {
    top: 9px;
    transform: translate(-50%, -8px);
}

.global-drawer-page-down {
    bottom: 10px;
    transform: translate(-50%, 8px);
}

.global-drawer-browser.can-scroll-up .global-drawer-page-up:not(:disabled),
.global-drawer-browser.can-scroll-down .global-drawer-page-down:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.global-drawer-page-button:hover {
    border-color: var(--accent-3);
    filter: brightness(1.2);
}

.global-drawer-card {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    height: max-content;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-self: start;
    gap: 0;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.018);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    text-align: left;
    appearance: none;
    transition: color calc(150ms * var(--site-menu-motion-scale)) ease, border-color calc(150ms * var(--site-menu-motion-scale)) ease, background calc(150ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-card::before {
    position: absolute;
    z-index: 3;
    inset: 0 18px auto;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--drawer-c1), var(--drawer-c2), var(--drawer-c3));
    content: "";
    opacity: 0;
    transition: opacity calc(150ms * var(--site-menu-motion-scale)) ease;
}

.global-drawer-card:hover,
.global-drawer-card:focus-visible {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

.global-drawer-card[aria-current="page"] {
    border-color: var(--drawer-c2);
    color: var(--text);
    background:
        linear-gradient(145deg, rgba(var(--accent-2-rgb), 0.16), rgba(var(--accent-3-rgb), 0.035)),
        rgba(255, 255, 255, 0.035);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.global-drawer-card[aria-current="page"]::before {
    opacity: 1;
}

.global-drawer-card-media {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 0.74 / 1;
    overflow: hidden;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.14), transparent 34%) padding-box,
        linear-gradient(145deg, var(--drawer-c1), var(--drawer-c2) 52%, var(--drawer-c3)) padding-box,
        linear-gradient(
            315deg,
            color-mix(in srgb, var(--drawer-c3) 82%, white 18%) 0%,
            color-mix(in srgb, var(--drawer-c2) 74%, white 26%) 50%,
            color-mix(in srgb, var(--drawer-c1) 82%, white 18%) 100%
        ) border-box;
    font-family: "Bungee", sans-serif;
    font-size: clamp(2.35rem, 4vw, 3.7rem);
    font-weight: 600;
}

.global-drawer-card-media::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        var(--drawer-media-edge-fade, linear-gradient(transparent, transparent)),
        linear-gradient(180deg, transparent 42%, rgba(7, 6, 10, 0.5)),
        linear-gradient(145deg, transparent 45%, rgba(0, 0, 0, 0.18));
    content: "";
    pointer-events: none;
}

.global-drawer-card-media img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-drawer-card-badge {
    position: absolute;
    z-index: 3;
    top: 7px;
    right: 7px;
    max-width: calc(100% - 14px);
    padding: 3px 6px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--drawer-c3) 72%, white 8%);
    border-radius: 999px;
    color: color-mix(in srgb, var(--drawer-c3) 58%, white 42%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--drawer-c1) 70%, #08070b),
        color-mix(in srgb, var(--drawer-c2) 52%, #08070b)
    );
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 14px color-mix(in srgb, var(--drawer-c3) 24%, transparent);
    font-family: "DM Sans", sans-serif;
    font-size: 0.42rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.global-drawer-card-fallback {
    position: relative;
    z-index: 0;
    color: rgba(255, 255, 255, 0.58);
    text-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.global-drawer-card-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 8px 3px;
}

.global-drawer-card-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: clip;
    white-space: nowrap;
}

.global-drawer-card-copy small {
    display: -webkit-box;
    min-height: 2.5em;
    overflow: hidden;
    color: var(--quiet);
    font-size: 0.52rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.global-drawer-backdrop {
    position: fixed;
    z-index: 45;
    inset: var(--global-header-height) 0 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    /* Avoid a dark seam immediately under the header; retain dimming below the glass. */
    background: linear-gradient(180deg, transparent, rgba(3, 2, 5, 0.68) var(--site-menu-glass-depth));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: default;
    backdrop-filter: blur(3px);
}

body.drawer-scroll-locked .global-drawer-backdrop {
    visibility: visible;
    pointer-events: auto;
}

body.drawer-scroll-locked {
    overflow: hidden;
}

.global-header-mobile-side,
.global-header-section-menu {
    display: none;
}

@media (max-width: 900px) {
    :root {
        --global-header-height: 62px;
        --site-menu-height: 90vh;
    }

    @supports (height: 100dvh) {
        :root {
            /* Follow the visible screen as mobile browser controls expand or collapse. */
            --site-menu-height: 90dvh;
        }
    }

    /* Continue the cards behind the resting search area instead of ending at
       its reserved space. Only the scrolling artwork is feathered: the frame,
       search input and paging controls keep their original opacity. */
    .global-drawer-content {
        margin-bottom: -64px;
    }

    .global-drawer-grid {
        padding-bottom: 64px;
        scroll-padding-bottom: 72px;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), rgba(0, 0, 0, .65) calc(100% - 48px), rgba(0, 0, 0, .22) calc(100% - 24px), transparent calc(100% - 8px));
        mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), rgba(0, 0, 0, .65) calc(100% - 48px), rgba(0, 0, 0, .22) calc(100% - 24px), transparent calc(100% - 8px));
    }

    .global-drawer-browser::after {
        /* The alpha fade above replaces the old dark strip at the cutoff. */
        display: none;
    }

    .shared-site-drawer:not(.is-searching) .global-search-field::before {
        /* A short, stationary fade into the resting field, without reserving
           more space or dimming the drawer frame and its border. */
        content: "";
        position: absolute;
        left: -1px;
        right: -1px;
        bottom: calc(100% + 1px);
        height: 24px;
        background: linear-gradient(180deg, transparent, var(--site-menu-surface));
        pointer-events: none;
    }

    .global-drawer-page-down {
        bottom: 74px;
    }

    .global-header-inner {
        column-gap: 6px;
        padding: 0 16px;
    }

    .global-header-links {
        display: none;
    }

    .global-header-brand {
        height: 62px;
        margin: 0 auto;
        grid-area: 1 / 2;
    }

    .global-header-mobile-side,
    .global-drawer-tab-copy strong {
        font-size: clamp(0.64rem, 2.5vw, 0.72rem);
    }

    .global-header-mobile-side {
        display: flex;
        min-height: 44px;
    }

    .global-header-mobile-start {
        grid-area: 1 / 1;
        justify-content: center;
        text-align: center;
        color: var(--accent-3);
    }

    .global-header-mobile-end {
        grid-area: 1 / 3;
        justify-content: center;
        text-align: center;
        color: #fff;
    }

    .global-header-current-section {
        position: relative;
        display: grid;
        width: 100%;
        height: 2.8em;
        overflow: hidden;
        line-height: 1.35;
    }

    .global-header-current-section > span {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-wrap: anywhere;
    }

    body.homepage .global-header-current-section > span { will-change: transform, opacity; }

    .global-header-current-section > span:first-child {
        opacity: 0;
    }

    .global-header-sections-toggle,
    .global-header-direct-section {
        display: flex;
        min-width: 0;
        min-height: 44px;
        align-items: center;
        gap: 5px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        font: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
        text-align: inherit;
        text-decoration: none;
        cursor: pointer;
        touch-action: manipulation;
        overflow-wrap: anywhere;
    }

    .global-header-sections-toggle svg {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        transition: transform calc(200ms * var(--site-menu-motion-scale)) ease;
    }

    .global-header-sections-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .global-header-current-section[hidden],
    .global-header-sections-toggle[hidden],
    .global-header-direct-section[hidden] {
        display: none;
    }

    .global-header-section-menu {
        position: absolute;
        z-index: 4;
        top: calc(100% - 1px);
        right: 16px;
        display: grid;
        width: min(240px, calc(100% - 32px));
        max-height: calc(100dvh - var(--global-header-height) - 16px);
        overflow: auto;
        overscroll-behavior: contain;
        padding: 6px;
        border: 1px solid rgba(var(--accent-2-rgb), 0.4);
        border-radius: 0 0 13px 13px;
        background: var(--site-header-tint), rgba(13, 12, 18, 0.94);
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity calc(160ms * var(--site-menu-motion-scale)) ease, transform calc(200ms * var(--site-menu-motion-scale)) ease, visibility 0s linear calc(200ms * var(--site-menu-motion-scale));
        font-size: 0.72rem;
    }

    droog-site-header[data-sections-open] .global-header-section-menu {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s;
    }

    .global-header-section-menu a {
        display: flex;
        min-height: 44px;
        align-items: center;
        padding: 10px 12px;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .global-header-section-menu a:hover,
    .global-header-section-menu a:focus-visible,
    .global-header-section-menu a[aria-current="location"] {
        color: var(--accent-3);
        background: rgba(var(--accent-2-rgb), 0.1);
    }

    .global-header-direct-section[aria-current="location"] {
        color: var(--accent-3);
    }
}

@media (max-width: 480px) {
    .global-drawer-tab {
        min-height: 48px;
        gap: 6px;
        padding-inline: 3px;
    }

    .global-drawer-tab-icon {
        width: 18px;
        height: 18px;
    }

    .global-drawer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shared-site-drawer .global-drawer-housing-grid,
    .shared-site-drawer .global-drawer-workshop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .shared-site-drawer {
        --site-menu-inline-padding: 10px;
    }

    .global-drawer-tab {
        gap: 3px;
        padding-inline: 2px;
    }

    .global-drawer-tab-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 520px) {
    :root {
        --global-header-hat-size: 56px;
    }
}

@media (forced-colors: active) {
    .global-drawer-home:focus-visible,
    .global-drawer-close:focus-visible,
    .global-header-menu-toggle:focus-visible,
    .global-drawer-tab:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: -4px;
    }

    .global-drawer-tab-slider {
        background: Highlight;
        box-shadow: none;
        forced-color-adjust: none;
    }

    .global-drawer-tab-mist,
    .global-drawer-tab-slider::after,
    .shared-site-drawer::before {
        display: none;
    }

    .shared-site-drawer {
        --site-menu-surface: Canvas;
        background: Canvas;
    }

    .global-drawer-close-edge-outline {
        stroke: CanvasText;
    }

}

@media (prefers-reduced-motion: reduce) {
    .global-drawer-tab-mist::before,
    .global-drawer-tab-mist::after {
        animation: none;
        opacity: 0.5;
    }

    .global-drawer-home {
        transition-duration: 0.01ms;
    }

    .global-drawer-close-edge svg,
    .global-drawer-close-edge-outline,
    .global-drawer-close-edge::before,
    .global-drawer-close-edge::after,
    .global-header-edge::before,
    .global-header-edge::after,
    .global-header-section-menu,
    .global-header-sections-toggle svg,
    .global-header-hat::after,
    .global-header-hat-glow,
    .global-drawer-tab-slider,
    .global-drawer-tabs.slider-ready .global-drawer-tab-slider,
    .global-drawer-page-button,
    .global-drawer-card,
    .global-drawer-card::before {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }

    .global-drawer-grid {
        scroll-behavior: auto;
    }
}