@media only screen and (min-width : 900px) {
    :root {
        --code-header-inline-inset: 30px;
    }

    #menu > ul > li {
        position: relative;
    }

    .subMenu {
        display: none;
        clear: both;
        padding: 0;
        margin: 15px 0 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: max-content;
        min-width: 200px;
        max-width: min(360px, calc(100vw - 32px));
        box-sizing: border-box;
        text-align: left;
        /* A lighter surface and lit upper edge separate the panel from dark heroes. */
        background-color: rgba(38, 44, 54, .97);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, .07), transparent 90px);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, .24);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
                    0 18px 40px rgba(0, 0, 0, .55),
                    0 4px 10px rgba(0, 0, 0, .35);
        border-radius: 6px;
        font-size: 15px;
    }

    .visibleSubMenu {
        display: block;
    }

    .subMenu ul {
        margin-top: 6px;
        margin-bottom: 6px;
    }

        .subMenu ul li {
            float: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            .subMenu ul li:hover {
                background-color: rgba(255,255,255,.09);
            }

    #menu .subMenu ul {
        font-size: 15px;
        float: none;
        margin: 6px 0;
        padding: 0;
        text-align: left;
    }

    /* Legacy Home menus can include a second submenu wrapper. */
    #menu .subMenu .subMenu {
        display: contents;
    }

    #menu .subMenu ul li a {
        display: block;
        padding: 10px 16px;
        line-height: 1.4;
        border-bottom: 0 !important;
        color: #fff !important;
        text-shadow: none;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #menu .subMenu ul li a:focus-visible {
        background-color: rgba(255,255,255,.09);
        outline: 2px solid rgba(255,255,255,.65);
        outline-offset: -2px;
    }

    #menu > ul > li:focus-within > .subMenu {
        display: block;
    }

    /* Keep section selection distinct from the currently open dropdown.
       Important overrides the per-page accent-color border rules. */
    #header #menu > ul > li > a {
        border-bottom: 2px solid transparent !important;
    }

    #header #menu > ul > li[class*="MenuSelected"] > a {
        border-bottom-color: #fff !important;
    }

    #header #menu > ul > li:hover > a,
    #header #menu > ul > li:focus-within > a,
    #header #menu > ul > li:has(> .visibleSubMenu) > a {
        background-color: rgba(255, 255, 255, .09);
    }

    #header #menu > ul > li > a:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .65);
        outline-offset: 2px;
    }

    #contentColumnSingle /* Single content column in 1-column layouts */ {
        max-width: 900px;
    }

    #mobileMenuIcon {
        display: none;
    }

    #mobileMenu {
        display: none;
    }

    #page {
        margin: var(--code-page-offset-desktop, 140px 0 0 0) !important;
    }
    #page.top-header-found {
        margin-top: 250px !important;
    }

    #main {
        top: 110px;
    }

    #header {
        height: var(--code-header-height-expanded, 140px);
    }

        #header.headerSmall {
            height: var(--code-header-height-compact, 50px);
        }

    #logo {
        float: right;
        margin: 5px var(--code-header-inline-inset) 0 0;
        width: var(--code-logo-width-expanded, 200px);
    }

        #logo img {
            width: var(--code-logo-width-expanded, 200px);
            margin-top: 10px;
        }

    #menu {
        display: block;
    }

    #header #login-partial {
        top: calc(var(--code-menu-offset-expanded, 35px) - 6px);
    }

    #header.headerLarge {
        /* The CODE lettering occupies 61px of the 251px-wide logo artwork. */
        --code-avatar-size-expanded: calc(var(--code-logo-width-expanded, 200px) * 61 / 251);
    }

    #header.headerLarge #login-partial {
        top: 10px;
        width: var(--code-avatar-size-expanded);
    }

    #header.headerLarge #login-partial > div:first-child .img-avatar {
        width: var(--code-avatar-size-expanded) !important;
        height: var(--code-avatar-size-expanded);
        object-fit: cover;
    }

    #header.headerLarge #menu {
        margin-right: calc(var(--code-logo-width-expanded, 200px) + var(--code-header-inline-inset) + var(--code-avatar-size-expanded) + 40px);
    }

    #header.headerSmall #login-partial {
        top: calc(var(--code-menu-offset-compact, 10px) - 6px);
    }

    .singleColumnBelowBillboard /* Single content column used below billboards */ {
        max-width: 900px;
    }

        .singleColumnBelowBillboard .leftContent {
            float: left;
            width: 300px;
            margin-right: 50px;
            margin-left: 0;
        }

        .singleColumnBelowBillboard .leftContent2 {
            float: left;
            width: 450px;
            margin-right: 25px;
            margin-left: 0;
        }

        .singleColumnBelowBillboard .leftContent3 {
            float: left;
            width: 550px;
            margin-right: 25px;
            margin-left: 0;
        }

        .singleColumnBelowBillboard .rightContent {
            float: left;
            width: 550px;
            margin-left: 0;
        }

        .singleColumnBelowBillboard .rightContent2 {
            float: left;
            width: 425px;
            margin-left: 0;
        }

        .singleColumnBelowBillboard .rightContent3 {
            float: left;
            width: 325px;
            margin-left: 0;
        }

    #contentColumnHeader h2, .contentColumnHeader h2 {
        font-size: 4.5em;
        width: 800px;
    }

    /* Tighten spacing first; reduce type smoothly only below 1000px. */
    #menu > ul {
        font-size: clamp(16px, calc(2vw - 2px), 18px);
    }

        #menu > ul > li > a {
            padding: 5px clamp(7px, calc(3.5vw - 28px), 14px);
        }

    .smallVideo {
        width: calc(50% - 20px);
        float: left;
        margin-right: 20px;
        border-bottom: 0;
    }
}