/*
 * nx-chrome.css — the night chrome, complete and self-contained.
 *
 * Owns every style for the global header (floating glass pill, glide-star
 * indicator, descriptive dropdowns, tuck/reveal, entrance cascade), the
 * full-screen overlay menu, and the footer (ridge horizon, aurora glow,
 * star specks, staggered reveal). Replaces the old chrome-night.css override
 * stack — no main.css chrome rules apply to the nx-* family, so there are no
 * body:not(.home) mirrors and no show/hide exceptions.
 *
 * Markup: header.php / footer.php · Behaviour: assets/js/nx-chrome.js.
 * Tokens follow tokens.css. Honours prefers-reduced-motion throughout.
 */

:root {
    --nx-ink: #f4f9ff;
    --nx-body: #b7c7e3;
    --nx-soft: #9fb6da;
    --nx-accent: #6ea8ff;
    --nx-line: rgba(150, 196, 255, 0.18);
    --nx-ease: cubic-bezier(.22, 1, .36, 1);
    /* ★ THE CHROME NOW SPEAKS THE SITE'S OWN FACE (2026-08-31).
       This was "Avenir Next", "Segoe UI", "Trebuchet MS", copied from the
       dark tokens.css that has since been archived. Instrument Sans was
       not in the stack at all, so the navigation and the footer, 45
       elements on every page of the site, were set in a system font that
       matched nothing they wrapped. Worse, the stack resolved differently
       per platform: Avenir Next on a Mac, Segoe UI on Windows. The chrome
       did not even look the same as itself.
       The chrome's COLOURS stay as they are. It is the site's one
       deliberate dark surface and light-on-dark values are correct there. */
    --nx-head-font: var(--a-sans);
    --nx-card: radial-gradient(120% 130% at 14% 0%, rgba(74, 126, 255, 0.16), transparent 48%), linear-gradient(165deg, rgba(26, 45, 84, 0.97), rgba(11, 22, 48, 0.99));
    --nx-shadow: 0 30px 70px rgba(2, 8, 24, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* ════ SKIP LINK ════ */
.nx-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 400;
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    background: var(--nx-accent);
    color: #050a18;
    font: 700 0.9rem/1 var(--nx-head-font);
    text-decoration: none;
    transform: translateY(-300%);
}
.nx-skip:focus-visible { transform: none; outline: 2px solid #fff; outline-offset: 2px; }

/* ════ HEADBAR — floating glass pill ════ */
.nx-header {
    position: fixed;
    top: clamp(10px, 1.6vh, 18px);
    left: 0;
    right: 0;
    z-index: 300;
    padding-inline: clamp(0.9rem, 2.5vw, 2.2rem);
    pointer-events: none; /* the bar itself, not the gutters, takes clicks */
    transition: transform .45s var(--nx-ease);
}
.nx-header.is-tucked { transform: translateY(calc(-100% - 22px)); }

.nx-header__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.6rem);
    max-width: 1320px;
    margin-inline: auto;
    padding: 0.55rem 0.65rem 0.55rem 1.15rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(10, 18, 38, 0.96), rgba(6, 12, 28, 0.9));
    border: 1px solid rgba(150, 196, 255, 0.16);
    box-shadow: 0 18px 50px rgba(2, 8, 24, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: padding .3s var(--nx-ease), background .3s ease, box-shadow .3s ease; /* impeccable-disable-line layout-transition -- header compaction fires once per scroll-state toggle, not per frame; transform would distort bar contents */
}
.nx-header.is-scrolled .nx-header__bar {
    padding-block: 0.4rem;
    background: linear-gradient(180deg, rgba(7, 13, 30, 0.97), rgba(5, 10, 24, 0.94));
    box-shadow: 0 22px 60px rgba(2, 8, 24, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* tucked away it still cast its shadow 60px down the page, a grey smear on every
   scroll. Has to sit after .is-scrolled, which ties it on specificity. */
.nx-header.is-tucked .nx-header__bar { box-shadow: none; }

/* ★ ENTRANCE CASCADE, STATE-INVERTED (2026-08-31).
   This used to be unconditional: opacity 0 plus an animation to undo it. The
   navigation therefore existed only if the animation ran, and a hidden or
   throttled document is enough to stop that. The start state now lives behind
   html.nx-anim, set by an inline pre-paint script in header.php that checks
   prefers-reduced-motion. Default markup = the nav you can use. */
html.nx-anim .nx-logo,
html.nx-anim .nx-menu__item,
html.nx-anim .nx-cta,
html.nx-anim .nx-burger {
    opacity: 0;
    transform: translateY(-10px);
    animation: nx-in .55s var(--nx-ease) forwards;
    animation-delay: calc(0.08s + var(--i, 0) * 45ms);
}
@keyframes nx-in { to { opacity: 1; transform: none; } }

/* logo */
.nx-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.nx-logo img {
    width: auto;
    height: 34px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: opacity .2s ease;
}
.nx-logo:hover img { opacity: 1; }

/* pill nav */
.nx-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.nx-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nx-menu__item { position: relative; }
.nx-menu__item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.78rem 1.05rem;
    border-radius: 999px;
    color: var(--nx-body);
    font: 600 0.92rem/1 var(--nx-head-font);
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.nx-menu__item > a:hover { color: var(--nx-ink); }
.nx-menu__item.is-current > a { color: var(--nx-accent); }

.nx-menu__chev { display: inline-flex; opacity: 0.7; }
.nx-menu__chev svg { width: 11px; height: 11px; transition: transform .25s var(--nx-ease); }
.nx-menu__item:hover .nx-menu__chev svg,
.nx-menu__item:focus-within .nx-menu__chev svg,
.nx-menu__item.is-open .nx-menu__chev svg { transform: rotate(180deg); }

/* the glide-star — rests under the current page, glides to hover/focus */
.nx-star {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 999px;
    background: var(--nx-accent);
    box-shadow: 0 0 10px rgba(110, 168, 255, 0.9), 0 0 22px rgba(110, 168, 255, 0.4);
    opacity: 0;
    transition: transform .45s var(--nx-ease), opacity .3s ease;
    will-change: transform;
    pointer-events: none;
}
.nx-star.is-on { opacity: 1; }

/* dropdown panels — descriptive items, staggered in */
.nx-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 21rem;
    padding: 0.6rem;
    border-radius: 20px;
    background: var(--nx-card);
    border: 1px solid var(--nx-line);
    box-shadow: var(--nx-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .28s var(--nx-ease), visibility 0s linear .28s;
}
/* invisible bridge over the gap so the pointer can cross */
.nx-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nx-menu__item:hover > .nx-panel,
.nx-menu__item:focus-within > .nx-panel,
.nx-menu__item.is-open > .nx-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}
.nx-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.nx-panel li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .35s var(--nx-ease);
    transition-delay: 0s;
}
.nx-menu__item:hover > .nx-panel li,
.nx-menu__item:focus-within > .nx-panel li,
.nx-menu__item.is-open > .nx-panel li {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.05s + var(--ci, 0) * 35ms);
}
.nx-panel a {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.72rem 0.9rem;
    border-radius: 14px;
    text-decoration: none;
    transition: background .2s ease;
}
.nx-panel a:hover, .nx-panel a[aria-current] { background: rgba(110, 168, 255, 0.1); }
.nx-panel a b { color: var(--nx-ink); font: 700 0.92rem/1.3 var(--nx-head-font); }
.nx-panel a[aria-current] b { color: var(--nx-accent); }
.nx-panel a small { color: var(--nx-soft); font-size: 0.78rem; line-height: 1.4; }

/* CTA — the light pill */
.nx-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.78rem 1.35rem;
    border-radius: 999px;
    text-decoration: none;
    font: 700 0.92rem/1 var(--nx-head-font);
    color: #0b1d3a;
    background: linear-gradient(180deg, #eaf3ff, #b9d4ff);
    box-shadow: 0 8px 24px rgba(39, 77, 138, 0.35);
    transition: transform .25s var(--nx-ease), box-shadow .25s ease, background .25s ease;
}
.nx-cta svg { width: 0.95em; height: 0.95em; transition: transform .25s var(--nx-ease); }
.nx-cta:hover {
    background: linear-gradient(180deg, #f4f9ff, #cfe2ff);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(39, 77, 138, 0.45);
}
.nx-cta:hover svg { transform: translateX(3px); }

/* burger (hidden on desktop) */
.nx-burger {
    display: none;
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(150, 196, 255, 0.3);
    background: rgba(8, 18, 40, 0.6);
    cursor: pointer;
}
.nx-burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--nx-ink);
    transition: transform .3s var(--nx-ease);
}
.nx-burger span:first-child { transform: translate(-50%, calc(-50% - 3.5px)); }
.nx-burger span:last-child { transform: translate(-50%, calc(-50% + 3.5px)); }
.nx-burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.nx-burger[aria-expanded="true"] span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* keyboard focus */
.nx-header a:focus-visible,
.nx-header button:focus-visible,
.nx-overlay a:focus-visible,
.nx-footer a:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: var(--a-focus-off);
    border-radius: 8px;
}

/* ════ FULL-SCREEN OVERLAY MENU ════ */
.nx-overlay {
    position: fixed;
    inset: 0;
    z-index: 290;
    display: none;
}
.nx-overlay.is-open { display: block; }
.nx-overlay__scrim { position: absolute; inset: 0; background: rgba(3, 7, 18, 0.6); }
.nx-overlay__sheet {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: calc(clamp(10px, 1.6vh, 18px) + 78px) clamp(1.4rem, 6vw, 3rem) 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    background:
        radial-gradient(60% 40% at 80% 0%, rgba(74, 126, 255, 0.14), transparent 70%),
        radial-gradient(40% 30% at 10% 18%, rgba(88, 214, 141, 0.05), transparent 70%),
        radial-gradient(1px 1px at 18% 32%, rgba(244, 249, 255, 0.5), transparent 100%),
        radial-gradient(1px 1px at 72% 56%, rgba(244, 249, 255, 0.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 74%, rgba(244, 249, 255, 0.35), transparent 100%),
        radial-gradient(1px 1px at 88% 26%, rgba(244, 249, 255, 0.45), transparent 100%),
        linear-gradient(180deg, #081127, #050a18);
}
.nx-overlay__group {
    opacity: 0;
    transform: translateY(14px);
}
.nx-overlay.is-open .nx-overlay__group,
.nx-overlay.is-open .nx-overlay__foot {
    animation: nx-rise .5s var(--nx-ease) forwards;
    animation-delay: calc(0.05s + var(--i, 0) * 60ms);
}
@keyframes nx-rise { to { opacity: 1; transform: none; } }
.nx-overlay__link {
    display: inline-block;
    color: var(--nx-ink);
    font: 800 clamp(1.7rem, 6vw, 2.2rem)/1.15 var(--nx-head-font);
    letter-spacing: -0.02em;
    text-decoration: none;
}
.nx-overlay__link[aria-current] { color: var(--nx-accent); }
.nx-overlay__subs {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0 0 0 1rem;
    border-left: 1px solid var(--nx-line);
    display: grid;
    gap: 0.45rem;
}
.nx-overlay__subs a {
    color: var(--nx-body);
    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;
    display: inline-block;
    padding-block: 0.15rem;
}
.nx-overlay__subs a:hover { color: var(--nx-ink); }
.nx-overlay__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(14px);
}
.nx-cta--wide { padding: 0.95rem 1.7rem; font-size: 1rem; }
.nx-overlay__mail { color: var(--nx-accent); font-weight: 700; text-decoration: none; }
.nx-overlay__mail:hover { color: #9cc2ff; }

/* body lock while the overlay is open */
html.nx-lock, html.nx-lock body { overflow: hidden; }

/* ════ FOOTER — the ground under the night sky ════ */
.nx-footer {
    position: relative;
    margin-top: 0;
    color: var(--nx-body);
    background:
        radial-gradient(42% 180px at 16% 0%, rgba(110, 168, 255, 0.12), transparent 70%),
        radial-gradient(36% 150px at 74% 0%, rgba(88, 214, 141, 0.06), transparent 70%),
        radial-gradient(1px 1px at 12% 38%, rgba(244, 249, 255, 0.4), transparent 100%),
        radial-gradient(1px 1px at 54% 22%, rgba(244, 249, 255, 0.3), transparent 100%),
        radial-gradient(1.5px 1.5px at 83% 48%, rgba(244, 249, 255, 0.3), transparent 100%),
        radial-gradient(1px 1px at 33% 72%, rgba(244, 249, 255, 0.25), transparent 100%),
        linear-gradient(180deg, #081127, #050a18);
    z-index: 3;
}
.nx-footer__ridge {
    display: block;
    width: 100%;
    height: 56px;
    margin-bottom: -8px;
}
.nx-footer__ridge path {
    stroke: rgba(150, 196, 255, 0.35);
    stroke-width: 1.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 0; /* drawn by default; JS arms the draw-in */
    transition: stroke-dashoffset 1.4s var(--nx-ease);
}
.nx-footer.is-armed .nx-footer__ridge path { stroke-dashoffset: 1; }
.nx-footer.is-armed.is-inview .nx-footer__ridge path { stroke-dashoffset: 0; }

/* The footer's edge is the one every page is measured against, because it is
   the last thing under the content. It sat at 1240/100 while every page above
   it sat at 1200/120, so the footer logo started 20px outside the column it
   was closing. One shell for both.

   The rest of this rule used to live in eight page stylesheets, each declaring
   the same position/z-index/padding and its own alias for the one font we use.
   Every page had been built alone, so every page re-decided the footer. The
   footer decides now. */
.nx-footer__shell {
    position: relative;
    z-index: 2;
    width: var(--a-shell);
    margin-inline: auto;
    padding-top: 48px;
    font-family: var(--a-sans);
}
.nx-footer__main {
    display: grid;
    grid-template-columns: minmax(14rem, 1.3fr) repeat(4, minmax(0, 0.9fr));
    gap: 2.2rem;
    padding: 2.4rem 0 3rem;
    border-bottom: 1px solid rgba(150, 196, 255, 0.12);
}

/* staggered reveal on first view (armed by JS; visible by default) */
.nx-footer.is-armed .nx-footer__brand,
.nx-footer.is-armed .nx-footer__col {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s var(--nx-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.nx-footer.is-armed.is-inview .nx-footer__brand,
.nx-footer.is-armed.is-inview .nx-footer__col {
    opacity: 1;
    transform: none;
}

.nx-footer__logo {
    width: auto;
    height: 38px;
    margin-bottom: 1.1rem;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.nx-footer__brand p {
    margin: 0 0 1rem;
    max-width: 18rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--nx-soft);
}
.nx-footer__mail {
    display: inline-block;
    padding-block: 0.3rem;
    color: var(--nx-accent);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
}
.nx-footer__mail:hover { color: #9cc2ff; }
.nx-footer__where {
    display: block;
    margin-top: 0.45rem;
    font: 600 0.82rem/1.3 var(--nx-head-font);
    color: rgba(159, 182, 218, 0.78);
}
.nx-footer__reach {
    display: block;
    margin-top: 0.4rem;
    max-width: 17rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(159, 182, 218, 0.78);
}

/* sentence case at normal tracking (Lachlan, 30 Oct): the last tracked
   uppercase labels on the site were these column heads */
.nx-footer__col h2 {
    margin: 0 0 0.9rem;
    color: var(--nx-soft);
    font: 600 0.9rem/1.2 var(--nx-head-font);
}
.nx-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}
/* 30 Oct audit: the links were 21px tall, under the 24px target floor.
   The padding makes each one a 30px target (44px on phones) without
   moving the visual rhythm; the star's top follows the padding. */
.nx-footer__col a {
    --nx-fpad: 0.2rem;
    position: relative;
    display: inline-block;
    padding-block: var(--nx-fpad);
    color: var(--nx-body);
    font-size: 0.88rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color .2s ease, translate .25s var(--nx-ease);
}
/* a tiny star appears ahead of the hovered link */
.nx-footer__col a::before {
    content: "";
    position: absolute;
    left: -11px;
    top: calc(var(--nx-fpad) + 0.55em);
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--nx-accent);
    box-shadow: 0 0 8px rgba(110, 168, 255, 0.8);
    opacity: 0;
    transition: opacity .2s ease;
}
.nx-footer__col a:hover {
    color: var(--nx-ink);
    translate: 8px 0;
}
.nx-footer__col a:hover::before { opacity: 1; }

.nx-footer__bottom {
    display: flex;
    align-items: center;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    padding: 1.5rem 0 1.7rem;
    font-size: 0.78rem;
    color: rgba(244, 249, 255, 0.62);
}
/* color: inherit beats the global `p { color: var(--ink-soft) }` (#324256), which
   dropped the class-less copyright <p> to a 1.9:1 ratio — below WCAG AA. */
.nx-footer__bottom p { margin: 0; color: inherit; }
.nx-footer__legal {
    display: inline-block;
    padding-block: 0.35rem;
    color: rgba(244, 249, 255, 0.55);
    text-decoration: none;
}
.nx-footer__legal:hover { color: var(--nx-ink); }
.nx-footer__top {
    display: inline-flex;
    align-items: center;
    padding-block: 0.35rem;
    gap: 0.45rem;
    margin-left: auto;
    color: rgba(244, 249, 255, 0.55);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}
.nx-footer__top svg { width: 0.9em; height: 0.9em; transition: transform .25s var(--nx-ease); }
.nx-footer__top:hover { color: var(--nx-ink); }
.nx-footer__top:hover svg { transform: translateY(-2px); }

/* ════ HOME + ABOUT in-page navs stay hidden (their files untouched) ════ */
body.apex-home .aad-nav,
body.apex-home .ah-topline,
body.apex-home .aad-footer,
body.page-id-508 .aad-nav,
body.page-id-508 .aad-footer {
    display: none !important;
}

/* ════ RESPONSIVE ════ */
@media (max-width: 1080px) {
    .nx-nav, .nx-cta { display: none; }
    .nx-burger { display: inline-flex; margin-left: auto; }
    .nx-header__bar { padding: 0.45rem 0.5rem 0.45rem 1rem; }
    .nx-cta.nx-cta--wide { display: inline-flex; } /* the overlay keeps its CTA */
}
@media (max-width: 600px) {
    .nx-logo img { height: 28px; }
    .nx-footer__shell { width: calc(100% - 2.6rem); }
    .nx-footer__bottom { padding-bottom: 2.2rem; }
    .nx-footer__top { margin-left: 0; }
}
@media (max-width: 1080px) and (min-width: 601px) {
    .nx-footer__main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .nx-footer__main { grid-template-columns: 1fr; gap: 1.8rem; }
    .nx-footer__col ul { gap: 0 }
    .nx-footer__col a { --nx-fpad: 0.72rem }
    .nx-footer__col h2 { margin-bottom: 0.5rem }
}

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce) {
    .nx-logo, .nx-menu__item, .nx-cta, .nx-burger {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .nx-header, .nx-star, .nx-panel, .nx-panel li,
    .nx-burger span, .nx-cta, .nx-cta svg,
    .nx-footer__ridge path,
    .nx-footer__brand, .nx-footer__col,
    .nx-footer__col a, .nx-footer__top svg {
        transition: none !important;
    }
    .nx-overlay.is-open .nx-overlay__group,
    .nx-overlay.is-open .nx-overlay__foot {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .nx-footer.is-armed .nx-footer__brand,
    .nx-footer.is-armed .nx-footer__col { opacity: 1; transform: none; }
    .nx-footer.is-armed .nx-footer__ridge path { stroke-dashoffset: 0; }
}

/* ════ 10 NOV: THE HEADER AT EVERY WIDTH ════ */
/* The menu sat in the space between the logo and the button, so the wider button
   pushed it about 50px left of the bar's centre. Three columns put it on centre. */
@media (min-width: 1081px) {
    .nx-header__bar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
    .nx-logo { justify-self: start; }
    .nx-nav { justify-self: center; }
    .nx-header__bar > .nx-cta { justify-self: end; }
}
/* Tablets kept only the burger, so the page's main button was a tap away. It stays
   beside the burger until a phone is too narrow for both. */
@media (max-width: 1080px) and (min-width: 601px) {
    .nx-header__bar > .nx-cta { display: inline-flex; margin-left: auto; padding: 0.7rem 1.15rem; }
    .nx-header__bar > .nx-cta ~ .nx-burger { margin-left: 0; }
    html.nx-lock .nx-header__bar > .nx-cta { visibility: hidden; }
}
/* the button's label never wraps: at 1081px the grid squeezed it onto two lines */
.nx-cta { white-space: nowrap; }
/* The entrance plays once. Crossing 1080px brought the menu back from display:none,
   which restarted the animation and blanked the menu while it replayed. */
html.nx-anim.nx-entered .nx-logo,
html.nx-anim.nx-entered .nx-menu__item,
html.nx-anim.nx-entered .nx-cta,
html.nx-anim.nx-entered .nx-burger { animation: none; opacity: 1; transform: none; }
/* the overlay's top links had no space between them */
.nx-overlay__nav { display: grid; gap: 0.9rem; }
@media (max-height: 480px) {
    .nx-overlay__nav { gap: 0.5rem; }
    .nx-overlay__subs { gap: 0.15rem; }
}
/* When the menu scrolls (a phone on its side, a short phone), the links slid up
   behind the header pill and showed in the gaps around it. The night background
   moves to the overlay itself, which doesn't scroll, and the sheet fades out just
   under the pill. */
.nx-overlay.is-open {
    background:
        radial-gradient(60% 40% at 80% 0%, rgba(74, 126, 255, 0.14), transparent 70%),
        radial-gradient(40% 30% at 10% 18%, rgba(88, 214, 141, 0.05), transparent 70%),
        radial-gradient(1px 1px at 18% 32%, rgba(244, 249, 255, 0.5), transparent 100%),
        radial-gradient(1px 1px at 72% 56%, rgba(244, 249, 255, 0.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 74%, rgba(244, 249, 255, 0.35), transparent 100%),
        radial-gradient(1px 1px at 88% 26%, rgba(244, 249, 255, 0.45), transparent 100%),
        linear-gradient(180deg, #081127, #050a18);
}
.nx-overlay__sheet {
    background: none;
    -webkit-mask-image: linear-gradient(180deg, transparent calc(clamp(10px, 1.6vh, 18px) + 62px), #000 calc(clamp(10px, 1.6vh, 18px) + 74px));
    mask-image: linear-gradient(180deg, transparent calc(clamp(10px, 1.6vh, 18px) + 62px), #000 calc(clamp(10px, 1.6vh, 18px) + 74px));
}