/* ============================================================
   HEADER  -  wider bar, larger and bolder menu on desktop
   Scoped to >=1200px so tablet/phone layouts are untouched.
   ============================================================ */
@media (min-width: 1200px) {
    /* let the header use more of the screen than the 1320px content column */
    header .container { max-width: 1560px; padding-left: 32px; padding-right: 32px; }

    /* wider gaps between items */
    #mainmenu > li { margin-right: 38px; }
    #mainmenu > li:last-child { margin-right: 0; }

    /* bigger, heavier links */
    #mainmenu > li > a {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .02em;
    }
    /* keep the external-link arrow on Discord proportional */
    #mainmenu > li > a i { font-size: 11px; margin-left: 6px; }
}
@media (min-width: 1400px) {
    header .container { max-width: 1680px; padding-left: 40px; padding-right: 40px; }
    #mainmenu > li { margin-right: 44px; }
    #mainmenu > li > a { font-size: 16.5px; }
}