@layer layout {
    /* ---- background ------------------------------------------------------
       The 2014 site used a fixed full-bleed photo with background-attachment:
       fixed, which is janky-to-broken on iOS Safari. This is a fixed pseudo
       layer instead: no repaint cost while scrolling, no image to ship, and it
       reads as stadium light rather than as a stock photo. */
    .site-bg {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(80rem 50rem at 15% -10%,
                color-mix(in oklch, var(--jeff) 18%, transparent), transparent 60%),
            radial-gradient(70rem 45rem at 90% 0%,
                color-mix(in oklch, var(--vegas) 16%, transparent), transparent 55%),
            var(--bg);
    }

    /* A faint field-yardage rhythm. Subtle enough to read as texture rather
       than decoration, and it disappears entirely at small sizes. */
    .site-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(90deg,
            color-mix(in oklch, var(--fg) 3%, transparent) 0 1px,
            transparent 1px 6rem);
        mask-image: linear-gradient(to bottom, black, transparent 70%);
    }

    /* ---- shell ---------------------------------------------------------- */
    .site-header {
        position: sticky;
        inset-block-start: 0;
        z-index: var(--z-header);
        background: var(--surface-glass);
        backdrop-filter: saturate(180%) blur(14px);
        border-block-end: 1px solid var(--rule);
    }

    .site-header__inner,
    .site-main,
    .site-footer__inner {
        inline-size: min(100% - 2rem, var(--column));
        margin-inline: auto;
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        min-block-size: 3.5rem;
        position: relative;
    }

    .site-brand {
        font-family: var(--font-display);
        font-variation-settings: 'wdth' var(--wdth-display);
        font-weight: 800;
        font-size: var(--step-1);
        letter-spacing: .02em;
        text-transform: uppercase;
        text-decoration: none;
        margin-inline-end: auto;
        white-space: nowrap;
    }

    .site-brand em {
        font-style: normal;
        font-weight: 400;
        color: var(--fg-subtle);
        margin-inline: .15em;
    }

    .site-main {
        padding-block: var(--space-6) var(--space-8);
    }

    .site-footer {
        border-block-start: 1px solid var(--rule);
        background: var(--surface-1);
    }

    .site-footer__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
        padding-block: var(--space-5);
        font-size: var(--step--1);
        color: var(--fg-muted);
    }

    .site-footer__spacer { margin-inline-start: auto; }

    /* ---- navigation ------------------------------------------------------
       A <details> disclosure, so this works with no JavaScript at all.
       That is a hard requirement, not a preference: the header lives in the
       layout, and a single interactive Blazor component there would open a
       circuit on EVERY page and defeat output caching site-wide. */
    /* Deliberately NOT position: relative. The mobile panel is absolutely
       positioned and must span the full header width, so its containing block
       has to be .site-header__inner. Making .nav a containing block would pin
       the panel to the width of the hamburger button. */
    .nav__toggle {
        display: grid;
        place-items: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: var(--radius-2);
        cursor: pointer;
        list-style: none;
    }

    .nav__toggle::-webkit-details-marker { display: none; }
    .nav__toggle:hover { background: var(--surface-2); }

    .nav__bars,
    .nav__bars::before,
    .nav__bars::after {
        content: '';
        display: block;
        inline-size: 1.15rem;
        block-size: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform var(--dur-1) var(--ease-out);
    }

    .nav__bars { position: relative; }
    .nav__bars::before { position: absolute; inset-block-start: -6px; }
    .nav__bars::after { position: absolute; inset-block-start: 6px; }

    .nav__link {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-2);
        text-decoration: none;
        font-weight: 600;
        color: var(--fg-muted);
        white-space: nowrap;
        background: none;
        border: 0;
        cursor: pointer;
        text-align: start;
    }

    .nav__link:hover { color: var(--fg); background: var(--surface-2); }

    .nav__link.active {
        color: var(--fg);
        box-shadow: inset 0 -2px 0 var(--jeff);
    }

    .nav__link--cta {
        color: var(--bg);
        background: var(--jeff);
    }

    .nav__link--cta:hover {
        color: var(--bg);
        background: color-mix(in oklch, var(--jeff) 85%, white);
    }


    .nav__form { display: contents; }

    @media (width >= 48rem) {
        .nav__toggle { display: none; }

        /* The disclosure is closed at desktop widths and there is no visible
           control to open it, so the UA's default `content-visibility: hidden`
           on ::details-content would hide the entire navigation. Forcing it
           visible is what turns the same markup into a plain row of links. */
        .nav::details-content {
            content-visibility: visible;
            block-size: auto;
        }

        .nav__panel {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
    }

    @media (width < 48rem) {
        .nav__panel {
            position: absolute;
            /* Bleeds past the header's inline padding to sit flush with the
               viewport edges. */
            inset-inline: -1rem;
            inset-block-start: 100%;
            display: grid;
            gap: var(--space-1);
            padding: var(--space-3) var(--space-4) var(--space-4);
            background: var(--surface-1);
            border-block-end: 1px solid var(--rule);
            box-shadow: var(--shadow-2);

            transition: translate var(--dur-1) var(--ease-out);
        }

        /* The panel is absolutely positioned, so it contributes nothing to the
           content box's height. Clipping ::details-content to that height -- the
           usual way to animate a disclosure open -- would therefore clip the
           panel away in BOTH states, leaving a menu button that does nothing.
           Hiding when closed is the UA's own content-visibility, which works
           regardless of overflow; the reveal is animated on the panel itself. */
        .nav::details-content { overflow: visible; }

        /* Only `translate` is animated, and that is deliberate: the panel's
           VISIBILITY must never depend on a transition completing. Animating
           opacity from a @starting-style of 0 means any environment that does
           not run the transition -- a paused compositor, a stalled frame -- is
           left with a permanently invisible menu. A transform that fails to run
           just means the menu appears without sliding. */
        .nav[open] .nav__panel {
            translate: 0 0;

            @starting-style {
                translate: 0 -.5rem;
            }
        }

        .nav[open] .nav__bars { background: transparent; }
        .nav[open] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
        .nav[open] .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }
    }

    /* ---- error bar (Blazor's own) ---------------------------------------- */
    #blazor-error-ui {
        display: none;
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: var(--z-toast);
        padding: var(--space-3) var(--space-5);
        background: var(--wayoff-bg);
        color: var(--fg);
        border-block-start: 1px solid var(--wayoff);
        box-shadow: var(--shadow-2);
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        float: inline-end;
        padding-inline: var(--space-2);
    }
}