/* ════════════════════════════════════════════════════════════
   BRAND MARK — static red + yellow logo in the header
   The header text keeps its difference blend; the mark sits in
   its own layer above it so its colours never invert.
   (added — does not change any existing rule)
════════════════════════════════════════════════════════════ */
#navLogo > svg { visibility: hidden; }   /* the original stays for layout + clicks */

.nav-mark {
    position: fixed;
    top: 24px;
    left: 32px;
    width: 36px;
    z-index: 201;            /* just above the header (200), below the menu (500+) */
    pointer-events: none;    /* clicks fall through to the header logo */
    line-height: 0;
}

.nav-mark svg { width: 100%; height: auto; display: block; }

@media (max-width: 768px) {
    .nav-mark { top: 18px; left: 20px; }
}

/* ════════════════════════════════════════════════════════════
   MENU — smaller type, list centred vertically (still left-aligned),
   clear space above "Follow us on", and hover effects.
════════════════════════════════════════════════════════════ */
.menu-links {
    margin-top: auto;
    margin-bottom: auto;
    padding: 24px 0 40px;
    gap: 2px;
}

.menu-links a {
    position: relative;
    width: fit-content;
    font-size: clamp(1.7rem, min(3.3vw, 5.4vh), 2.9rem);
    line-height: 1.2;
    transition: color 0.3s ease, padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}

/* gold square marker, a nod to the menu's pixel grid */
.menu-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.3em;
    height: 0.3em;
    background: #F3CB1B;
    transform: translateY(-50%) scale(0);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

/* red underline drawing in from the left */
.menu-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.08em;
    height: 2px;
    background: #9C2527;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the page you're on */
.menu-links a.is-current { color: #9C2527; padding-left: 0.55em; }
.menu-links a.is-current::before { transform: translateY(-50%) scale(1); }

@media (hover: hover) {
    .menu-links a:hover { opacity: 1; color: #9C2527; padding-left: 0.55em; }
    .menu-links a:hover::before { transform: translateY(-50%) scale(1); background: #9C2527; }
    .menu-links a:hover::after { transform: scaleX(1); left: 0.55em; }
    /* the rest of the list steps back */
    .menu-links:hover a:not(:hover) { color: #bdbdbd; }
}

.menu-links a:focus-visible { outline: none; color: #9C2527; padding-left: 0.55em; }
.menu-links a:focus-visible::before { transform: translateY(-50%) scale(1); }

.menu-social { flex-shrink: 0; }

@media (max-width: 768px) {
    .menu-links { padding: 16px 0 32px; }
    .menu-links a { font-size: clamp(1.6rem, min(8vw, 5.2vh), 2.4rem); }
}

/* featured-project circles: dragging shouldn't pick up the photo */
.fx-pc-circle img { -webkit-user-drag: none; user-select: none; }
.fx-pc-track { user-select: none; }

/* over a red area the red outline would vanish — it switches to white there */
.nav-mark path, .nav-mark circle[stroke] { transition: stroke 0.25s ease; }
.nav-mark.on-red path, .nav-mark.on-red circle[stroke] { stroke: #fff; }