/* The desktop navigation has two rows; the logo has its own reserved width. */
@media (min-width:1021px) {
    .site-header .header-main {
        grid-template-columns:190px minmax(0,1fr) auto;
        column-gap:20px;
        min-height:112px;
        padding-block:10px;
    }
    .site-header .header-main > .brand {
        width:190px;
        min-width:190px;
    }
    .site-header .brand__picture,
    .site-header .brand__logo {
        width:190px;
        min-width:190px;
        max-width:none;
    }
    .site-header .primary-nav {
        display:grid;
        grid-template-columns:repeat(4,max-content);
        align-items:center;
        justify-content:center;
        gap:0 18px;
        min-width:0;
        padding:0;
    }
    .site-header .primary-nav a {
        white-space:nowrap;
        min-height:44px;
        display:flex;
        align-items:center;
        padding:9px 0;
    }
    .site-header .primary-nav a::after {bottom:5px;}
    .site-header .header-actions {justify-self:end;}
    /* Development-only ninth link also stays within two rows. */
    .site-header .primary-nav:has(.dev-link) {grid-template-columns:repeat(5,max-content);}
}
/* More room for labels on smaller desktops: actions above, two-row menu below. */
@media (min-width:1021px) and (max-width:1199px) {
    .site-header .header-main {grid-template-columns:190px minmax(0,1fr);row-gap:0;}
    .site-header .header-main > .brand {grid-column:1;grid-row:1;}
    .site-header .header-actions {grid-column:2;grid-row:1;}
    .site-header .primary-nav {grid-column:1 / -1;grid-row:2;column-gap:32px;}
}