.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    background: color-mix(in srgb, var(--paper) 91%, transparent);
    backdrop-filter: blur(20px) saturate(1.2);
    transition: box-shadow .3s ease, background-color .3s ease;
}

.site-header[data-scrolled] {
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    box-shadow: 0 14px 42px rgba(4, 21, 16, .12);
}

.header-shell {
    width: min(calc(100% - 2rem), 1320px);
    height: 82px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    color: var(--ink);
}

/* Mærket står som tekst.

   Navnet med versaler og underteksten under. Det er skarpt i enhver
   størrelse, koster ingen hentning og følger med, når læseren forstørrer
   siden.

   De to dele står i et gitter og ikke ved siden af hinanden, så underteksten
   begynder præcis ved navnets venstre kant. */
.brand-mark {
    display: grid;
    gap: .12em;
    line-height: 1;
}

/* Navnet er sat, så de to linjer ender ved den samme højrekant.

   Underteksten er 48 tegn, navnet er 13. Målt i Inter fylder underteksten
   31,9 gange sin egen skriftstørrelse, navnet 8,23 gange sin. Skal de to
   linjer være lige brede, skal navnet altså være 3,87 gange så stort som
   underteksten. Hvert af de tre tal herunder er undertekstens tilsvarende tal
   gange 3,87, så de to linjer følges ad i hele skærmbredden.

   Det er navnet, der er vokset. Underteksten står i nøjagtig samme størrelse
   som før og er derfor lige så læselig — havde den i stedet skullet krympes
   ned til det gamle navns bredde, skulle den ned på 7 px og ville ikke kunne
   læses.

   Ordmellemrummet er sat med «gap». De to ord er felter i en flexboks, og et
   almindeligt mellemrum mellem dem ville falde bort. */
.brand-mark-name {
    display: flex;
    gap: .22em;
    font: 800 clamp(1.78rem, 2.25vw, 2.33rem)/1 var(--sans);
    letter-spacing: -.01em;
}

/* Hele navnet står i guld — var(--gold), den samme farve som menupunkterne
   ved siden af, og dermed ét og samme gul i hele headeren.

   «b» og «i» er valgt, fordi de er korte og ikke betyder noget her: mærket
   er «aria-hidden», så ingen får dem læst op som fed eller kursiv. De to ord
   står stadig hver for sig, fordi mellemrummet mellem dem skal sættes i
   flexboksen. */
.brand-mark-name b,
.brand-mark-name i {
    color: var(--gold);
    font-style: normal;
}

/* Underteksten er lille og har luft mellem bogstaverne, så den læses som en
   undertekst og ikke som en anden overskrift. Den bliver på én linje: to
   linjer under navnet med hver sin længde ser ud som et uheld.

   Farven er den fulde dæmpede farve. Den var før sat 18 % ned i styrke, og så
   lille en tekst tåler ikke også at stå svagere end nødvendigt. */
.brand-mark small {
    color: var(--muted);
    font-size: clamp(.46rem, .58vw, .6rem);
    font-weight: 700;
    letter-spacing: .085em;
    white-space: nowrap;
}

.desktop-nav {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: .1rem;
}

.desktop-nav a {
    position: relative;
    padding: 0 .72rem;
    display: inline-flex;
    align-items: center;
    color: var(--gold);

    /* Store bogstaver med luft imellem.

       Versaler uden ekstra luft står tættere end almindelige bogstaver og
       bliver svære at læse i små størrelser. Skriften er derfor sat en
       anelse ned og bogstavafstanden op — så fylder menuen det samme som
       før og er stadig til at læse. */
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .2s ease;
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    right: .72rem;
    bottom: -1px;
    left: .72rem;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

/* Det punkt, man står på, og det man peger på, står lysere end de øvrige.
   Farven er den samme familie; forskellen er styrken, så guldet ikke bliver
   afbrudt af en helt anden farve midt i rækken. */
.desktop-nav a:hover,
.desktop-nav a.active {
    color: color-mix(in srgb, var(--gold) 72%, var(--ink));
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.header-control {
    height: 44px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.header-control:hover {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 68%, var(--line));
    background: var(--surface);
    transform: translateY(-1px);
}

.header-control svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-search {
    min-width: 108px;
    padding-inline: .78rem .55rem;
    gap: .55rem;
}

.header-search span {
    font-size: .76rem;
    font-weight: 750;
}

.header-search kbd {
    min-width: 21px;
    padding: .12rem .3rem;
    border: 1px solid var(--line);
    color: var(--muted);
    background: var(--paper);
    font: 700 .62rem/1.3 var(--sans);
    text-align: center;
}

.theme-control,
.menu-button {
    width: 44px;
    flex: 0 0 44px;
}

.theme-sun {
    display: none;
}

[data-theme="dark"] .theme-sun {
    display: block;
}

[data-theme="dark"] .theme-moon {
    display: none;
}

.menu-button {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.menu-button span {
    width: 17px;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s ease;
}

.menu-button[aria-expanded="true"] span:first-child {
    transform: translateY(3.75px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
}

.mobile-nav {
    display: none;
}

.global-search {
    width: min(760px, calc(100% - 2rem));
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 38px 100px rgba(2, 17, 12, .38);
}

.global-search::backdrop {
    background: rgba(3, 17, 13, .78);
    backdrop-filter: blur(10px);
}

.global-search-panel {
    padding: clamp(1.4rem, 4vw, 2.6rem);
}

.global-search-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 2rem;
}

.global-search-top > span {
    display: grid;
}

.global-search-top small {
    color: var(--gold);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.global-search-top strong {
    margin-top: .2rem;
    font: 500 clamp(1.8rem, 4vw, 2.8rem)/1.1 var(--serif);
}

.global-search-top button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
}

.global-search-form {
    min-height: 72px;
    margin-top: 2rem;
    padding: .45rem;
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    background: var(--paper);
}

.global-search-form > svg {
    width: 20px;
    margin: auto;
    fill: none;
    stroke: var(--green);
    stroke-width: 1.7;
}

.global-search-form input {
    min-width: 0;
    height: 56px;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 1rem;
}

.global-search-form button {
    height: 56px;
    padding-inline: 1.2rem;
    border: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #10231c;
    background: var(--gold);
    font-weight: 800;
    cursor: pointer;
}

.global-search-links {
    margin-top: 1.3rem;
    display: flex;
    align-items: center;
    gap: .7rem 1.1rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .75rem;
}

.global-search-links > span {
    color: var(--gold);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.global-search-links a:hover {
    color: var(--ink);
}

@media (max-width: 1180px) {
    .header-shell {
        gap: 1.2rem;
    }

    .desktop-nav a {
        padding-inline: .48rem;
        font-size: .7rem;
        letter-spacing: .07em;
    }

    .desktop-nav a::after {
        right: .48rem;
        left: .48rem;
    }

    .header-search {
        min-width: 44px;
        width: 44px;
        padding: 0;
    }

    .header-search span,
    .header-search kbd {
        display: none;
    }
}

@media (max-width: 960px) {
    .header-shell {
        height: 74px;
        grid-template-columns: 1fr auto;
    }

    .desktop-nav {
        display: none;
    }

    .menu-button {
        display: inline-flex;
    }

    .mobile-nav[open] {
        width: min(calc(100% - 2rem), 900px);
        margin-inline: auto;
        padding: .8rem 0 1rem;
        border-top: 1px solid var(--line);
        display: block;
    }

    .mobile-nav-head {
        padding: .5rem 0 1rem;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .mobile-nav-head > span {
        font: 500 1.25rem var(--serif);
    }

    .mobile-nav-head small {
        font-size: .62rem;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .mobile-nav-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
    }

    .mobile-nav-grid a {
        min-width: 0;
        min-height: 86px;
        padding: .85rem 1rem;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: 28px 1fr auto;
        align-items: center;
        gap: .55rem;
        background: color-mix(in srgb, var(--surface) 45%, transparent);
    }

    .mobile-nav-grid a.active {
        background: var(--green);
        color: var(--paper);
    }

    [data-theme="dark"] .mobile-nav-grid a.active {
        color: #101714;
    }

    .mobile-nav-grid i {
        color: var(--gold);
        font: italic .7rem var(--serif);
    }

    .mobile-nav-grid a > span {
        min-width: 0;
        display: grid;
    }

    .mobile-nav-grid strong {
        overflow-wrap: anywhere;
        font: 600 1rem var(--serif);
    }

    .mobile-nav-grid small {
        margin-top: .12rem;
        font-size: .66rem;
    }

    .mobile-nav-grid b {
        color: var(--gold);
        font-size: .8rem;
    }
}

@media (max-width: 560px) {
    .header-shell {
        width: calc(100% - 1.5rem);
        gap: .6rem;
    }

    /* Under 560 px skal menuknappen have plads. Underteksten fylder mere end
       navnet; den går derfor af, og navnet bliver stående alene. Det er
       navnet, man kender mærket på.

       Uden underteksten er der ingen bredde at ramme, og navnet kan i stedet
       følge skærmen. Det er nødvendigt: i fuld størrelse er navnet 235 px, og
       på en 320 px skærm er der kun 202 px til det. Ved 560 px giver de to
       regler det samme tal, så skiftet ikke ses. */
    .brand-mark small { display: none; }

    .brand-mark-name { font-size: clamp(1.3rem, 5.2vw, 1.78rem); }

    .header-actions {
        gap: .28rem;
    }

    .header-control,
    .theme-control,
    .menu-button,
    .header-search {
        width: 40px;
        min-width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .mobile-nav[open] {
        width: calc(100% - 1.5rem);
    }

    .mobile-nav-head {
        display: grid;
        gap: .1rem;
    }

    .mobile-nav-grid a {
        min-height: 82px;
        padding: .75rem;
        grid-template-columns: 22px 1fr;
    }

    .mobile-nav-grid b {
        display: none;
    }

    .global-search-panel {
        padding: 1.2rem;
    }

    .global-search-form {
        grid-template-columns: 42px minmax(0, 1fr) 68px;
    }

    .global-search-form input {
        font-size: .88rem;
    }

    .global-search-form button {
        padding-inline: .8rem;
        justify-content: center;
    }

    .global-search-form button span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .desktop-nav a::after,
    .header-control,
    .menu-button span {
        transition: none !important;
    }

    .header-control:hover {
        transform: none !important;
    }
}