.gajraj-one-regular {
    font-family: "Gajraj One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

:root {
    /* Main text column — nav + open menu shells track this + extra gutter */
    --page-column-max: 50rem;
    --nav-shell-extra: 3.5rem;
    --nav-shell-max: calc(var(--page-column-max) + var(--nav-shell-extra));
    --nav-shell-pad-x: clamp(0.75rem, 4vw, 2.5rem);
    /* Bar logo: between ~15px ref (412w) and previous section-title scale — fluid with viewport */
    --nav-logo-bar-fs: clamp(1.0625rem, 0.88rem + 1.25vw, 1.8125rem);
    /* Menu control — aligns with tablet .menu-close in overlay */
    --nav-toggle-hit: clamp(3.75rem, 10.25vmin, 4.5rem);
    --nav-toggle-outer-w: var(--nav-toggle-hit);
    --nav-toggle-outer-h: var(--nav-toggle-hit);

    --base-100: #36835c;
    --base-200: #28b33f;
    --base-300: #222225;
    /* Softer than #FAF9F6 — easier on eyes, still reads as warm light UI */
    --base-paper: #E3DFDB;
    /* software-scramble.js overwrites vw + rem offset from longest phrase — no clamp on size */
    --hero-fs-vw: 5.5;
    --hero-fs-add: 1.75rem;
    /* ~Mobile ref feel: slightly shorter band than old 4.5rem min, still scales with vh/svh */
    /* Min height clears the enlarged menu / close control */
    --nav-h: clamp(4.5rem, 6vmin + 2.4rem, 6.9rem);
    --sticky-title-top: calc(var(--nav-h) + 0.75rem);

    /* Nav h1 + section h2s — same tokens so they scale together */
    --section-title-primary-fs: clamp(1.75rem, 4vw, 2.5rem);
    --section-title-primary-lh: 1.2;
    --section-title-shell-fs: clamp(1.5rem, 3.5vw, 2rem);
    --section-title-shell-lh: 1.35;
}

@media (min-width: 960px) {
    :root {
        /*
         * On large screens we want the sticky scroll label to align with the
         * section column (seamless “stick” effect). Reduce the extra gutter.
         */
        --nav-shell-extra: 0rem;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    /* Avoid iOS text inflation on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: 'Google Sans Flex', sans-serif;
    overflow-x: hidden;
    /* Solid fallback + base layer for gradient crossfade */
    background-color: #010f29;
}

/* Smooth gradient crossfade (background-image itself doesn't animate) */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 300ms ease;
}

body::before {
    opacity: 1;
    background-image: linear-gradient(135deg, #010f29 0%, #00316E 140%);
}

body::after {
    opacity: 0;
    background-image: linear-gradient(135deg, #00316E 0%, #010f29 140%);
}

/* Background bubbles */
:root {
    /* Match site palette (warm paper tone) on dark hero */
    --bubble-rgb: 227, 223, 219; /* == #E3DFDB (var(--base-paper)) */
    --bubble-a: 0.08;
    --bubble-a-2: 0.11;
    --bubble-a-3: 0.15;
    --bubble-float-duration: 25s;
    /* Matches .bg-bubbles li:nth-child(2) */
    --bubble-float-duration-fast: 17s;
    /* Matches .bg-bubbles li:nth-child(8)/(9); slowest float + spin cadence */
    --bubble-float-duration-slow: 40s;
    --bubble-spin-end: 600deg;
    /* Travel just past the top edge so fade-out completes before clipping */
    --bubble-travel: calc(-75vh - 40px);
    /* Matches |--bubble-travel|; used where translateY goes positive downward */
    --bubble-rise-distance: calc(75vh + 40px);
    /* Hero scroll chip: shorter arc than bubbles so it enters view sooner — same linear duration as nth-child(2) */
    --hero-scroll-rise-distance: calc(32vh + 24px);
    /* Don't start fading until near the top */
    --bubble-fade-start: 78%;
}

body.menu-open {
    /*
     * Faint blue on the gradient tint for accents that still read `--bubble-rgb`; actual floats use
     * explicit greens via `body.menu-open .bg-bubbles li` (ambient, fullscreen `--menu`, drawer `--drawer`).
     */
    --bubble-rgb: 0, 49, 110; /* #00316E */
    --bubble-a: 0.07;
    --bubble-a-2: 0.10;
    --bubble-a-3: 0.14;
}

body.menu-open .bg-bubbles li {
    background-color: rgba(54, 131, 96, 0.36);
    background-color: color-mix(in srgb, var(--base-100) 42%, transparent);
}

body.menu-open .bg-bubbles li:nth-child(4),
body.menu-open .bg-bubbles li:nth-child(6) {
    background-color: rgba(54, 131, 96, 0.48);
    background-color: color-mix(in srgb, var(--base-100) 54%, transparent);
}

body.menu-open .bg-bubbles li:nth-child(9) {
    background-color: rgba(40, 179, 63, 0.52);
    background-color: color-mix(in srgb, var(--base-200) 58%, transparent);
}

/* Overlay has its own .menu-logo h1 — hide bar title so only one shows */
body.menu-open .nav-shell .nav-logo {
    visibility: hidden;
    pointer-events: none;
}

body.menu-open::after {
    opacity: 1;
}

.bg-bubbles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    /* `clip` avoids creating a scroll-container context (unlike `hidden`), fixing touch hit-testing
       on iOS Safari for children of position:fixed elements. Falls back to `hidden` on older browsers. */
    overflow: clip;
    pointer-events: none;
}

/*
 * Decorative hero floats stay under page sections (sections z-index 7) so links/buttons
 * aren’t swallowed; below `.nav` (z-index 10). Hero gaps still hit bubbles via `pointer-events`
 * passthrough — see `.hero`.
 */
.bg-bubbles:not(.bg-bubbles--menu):not(.bg-bubbles--drawer) {
    z-index: 6;
    /* Contain promoted layers when tiles respawn — fewer ghost squares after taps (Chrome + WebKit) */
    isolation: isolate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bg-bubbles--menu li,
.bg-bubbles--drawer li {
    pointer-events: none;
}

.bg-bubbles:not(.bg-bubbles--menu):not(.bg-bubbles--drawer) li {
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Cuts double-tap zoom delay; reduces scroll-vs-tap ambiguity on mobile (pairs with script `pointerup`). */
    touch-action: manipulation;
}

/*
 * Debug / DevTools: add ?inspectBubbles=1 to the URL — pauses ambient motion and draws a dashed
 * ring so the inspect picker can latch onto `[data-ambient-float]` tiles.
 */
html.inspect-bubbles-active .bg-bubbles:not(.bg-bubbles--menu):not(.bg-bubbles--drawer) li {
    animation-play-state: paused !important;
    outline: 1px dashed rgba(180, 100, 255, 0.65);
    outline-offset: 2px;
}

/* ?bubbleNums=1 — global indices 1…N in document order: ambient ul, menu ul, drawer ul */
html.bubble-nums-debug-active .bg-bubbles > li .bubble-debug-num {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 4;
    box-sizing: border-box;
    min-width: 1.1em;
    padding: 0 0.1em;
    border-radius: 2px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: clamp(7px, 1.55vmin, 12px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
    color: #0a0f18;
    background: rgba(255, 236, 120, 0.94);
    box-shadow:
        0 0 0 1px rgba(10, 15, 24, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.25);
}

/*
 * `@media (pointer: coarse)` misses many handhelds (`fine` stylus primary, DevTools emulation).
 * `any-pointer: coarse` OR `hover: none` ⇒ treat as touch UI: 44×44 min hit (matches WCAG AA target).
 */
@media (any-pointer: coarse), (pointer: coarse), (hover: none) {
    .bg-bubbles:not(.bg-bubbles--menu):not(.bg-bubbles--drawer) li {
        min-width: 44px;
        min-height: 44px;
        /* Permanent will-change promotes long-lived textures — handheld Chrome/WebKit ghosts on swap */
        will-change: auto;
    }
}

.bg-bubbles li {
    position: absolute;
    display: block;
    width: 28px;
    height: 28px;
    background-color: rgba(var(--bubble-rgb), var(--bubble-a));
    border-radius: 6px;
    bottom: -160px;
    animation:
        bubble-float var(--bubble-float-duration) linear infinite,
        bubble-fade var(--bubble-float-duration) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    will-change: transform, opacity;
}

/* Box sizes → scoring tiers in js/script.js (`AMBIENT_SLOT_SIDE_PX`, same child order). */
.bg-bubbles li:nth-child(1) { left: 10%; }
.bg-bubbles li:nth-child(2) {
    left: 20%;
    width: 56px;
    height: 56px;
    animation-delay: 2s;
    animation-duration: var(--bubble-float-duration-fast);
}
.bg-bubbles li:nth-child(3) { left: 25%; animation-delay: 4s; }
.bg-bubbles li:nth-child(4) {
    left: 40%;
    width: 44px;
    height: 44px;
    animation-duration: 22s;
    background-color: rgba(var(--bubble-rgb), var(--bubble-a-2));
}
.bg-bubbles li:nth-child(5) { left: 70%; }
.bg-bubbles li:nth-child(6) {
    left: 80%;
    width: 72px;
    height: 72px;
    animation-delay: 3s;
    background-color: rgba(var(--bubble-rgb), var(--bubble-a-2));
}
.bg-bubbles li:nth-child(7) {
    left: 32%;
    width: 88px;
    height: 88px;
    animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    animation-delay: 15s;
    animation-duration: var(--bubble-float-duration-slow);
}
.bg-bubbles li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    animation-delay: 2s;
    animation-duration: var(--bubble-float-duration-slow);
    background-color: rgba(var(--bubble-rgb), var(--bubble-a-3));
}
.bg-bubbles li:nth-child(10) {
    left: 90%;
    width: 84px;
    height: 84px;
    animation-delay: 11s;
}

/* Click feedback on ::after only — never replaces li’s bubble-float / bubble-fade */
.bg-bubbles:not(.bg-bubbles--menu):not(.bg-bubbles--drawer) li::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    border-radius: 6px;
    z-index: 1;
}

.bg-bubbles:not(.bg-bubbles--menu):not(.bg-bubbles--drawer) li.bg-bubble--click-flash::after {
    animation: bubble-click-flash 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bubble-click-flash {
    0%,
    38% {
        opacity: 1;
        background-color: color-mix(in srgb, var(--base-200) 68%, transparent);
        box-shadow:
            inset 0 0 clamp(10px, 2.2vmin, 18px) color-mix(in srgb, var(--base-200) 88%, transparent),
            inset 0 0 clamp(3px, 0.9vmin, 6px)
                color-mix(in srgb, var(--base-200) 35%, transparent);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        background-color: transparent;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-bubbles:not(.bg-bubbles--menu):not(.bg-bubbles--drawer) li.bg-bubble--click-flash::after {
        animation: bubble-click-flash-reduce 0.12s ease forwards;
    }
}

@keyframes bubble-click-flash-reduce {
    0% {
        opacity: 1;
        background-color: color-mix(in srgb, var(--base-200) 55%, transparent);
        box-shadow: inset 0 0 8px color-mix(in srgb, var(--base-200) 85%, transparent);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        background-color: transparent;
        box-shadow: none;
    }
}

@keyframes bubble-float {
    /* translate3d forces GPU compositing so touch hit-testing tracks the visual position on mobile */
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { transform: translate3d(0, var(--bubble-travel), 0) rotate(var(--bubble-spin-end)); }
}

@keyframes bubble-fade {
    0% { opacity: 1; }
    /* Don’t start fading until near the top */
    84% { opacity: 1; }
    /* Ease the fade instead of dropping off */
    94% { opacity: 0.45; }
    100% { opacity: 0; }
}

/* Off-canvas rail only: drift in from the viewport-right, exit left/up (vars on `.bg-bubbles--drawer`). */
@keyframes bubble-float-drawer {
    0% {
        transform: translate3d(var(--bubble-drawer-x-in), 0, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(
                var(--bubble-drawer-x-out),
                var(--bubble-drawer-y-travel),
                0
            )
            rotate(var(--bubble-spin-end));
    }
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.35;
}

h3, 
h6 {
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 450;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 3rem);
}

h6 {
    font-size: clamp(1rem, 1.25vw, 1.5rem);
}

p {
    text-transform: uppercase;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25rem;
}

section {
    min-height: 50vh;
}

.hero {
    position: relative;
    /* Above ambient floats (z-index 6); `#hero` is pass‑through except `.hero-title` + scroll chip (`pointer-events` on descendants). */
    z-index: 7;
    pointer-events: none;
    /* Same idea as .bg-bubbles: clip animated overflow so the scroll chip rise
       isn’t painted over the sections below during fast scroll */
    overflow: hidden;
    font-size: 2rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    /* Clear fixed nav + vertical rhythm below bar */
    padding-top: calc(var(--nav-h) + clamp(1.5rem, 5.5vmin, 3.75rem));
    padding-bottom: clamp(2rem, 7vmin, 5rem);
    padding-inline: 0;
    background: transparent;
    /* background: url(/bg.jpg) no-repeat 50% 50%;
    background-size: cover; */
}

#hero,
#about-me,
#experience,
#services,
#fun,
#projects,
#contact-me {
    scroll-margin-top: calc(var(--nav-h) + 0.5rem);
}

.about {
    position: relative;
    /* Above floats (z-index 6): pass-through prose so tiled hits reach bubbles — restore `auto` only on `:is(a,button)` */
    z-index: 7;
    pointer-events: none;
    width: 100%;
    max-width: var(--page-column-max);
    margin: 0 auto;
    padding: clamp(3rem, 8vmin, 6rem) clamp(0.75rem, 4vw, 2.5rem);
    color: var(--base-paper);
    text-align: left;
}

.about-header {
    margin-bottom: clamp(1.5rem, 4vmin, 2.25rem);
    padding-bottom: clamp(1rem, 3vmin, 1.5rem);
    border-bottom: 1px solid rgba(227, 223, 219, 0.2);
}

/*
 * Sticky pattern matches sticky.md: position sticky on the header wrapper only,
 * sibling .sticky-section-body below (titles stay normal flow inside the ribbon).
 */
.sticky-section-head {
    position: sticky;
    top: var(--sticky-title-top);
    z-index: 5;
    padding-block: 0.25rem;
}

.section-shell-head {
    margin-bottom: 0.75rem;
}

.about-title-note,
.work-title-note {
    /* avoid sticky header feeling too tall */
    white-space: nowrap;
}

.about-title {
    margin: 0;
    font-family: Boldonse, sans-serif;
    font-weight: 400;
    font-size: var(--section-title-primary-fs);
    line-height: var(--section-title-primary-lh);
    color: var(--base-paper);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em 0.75em;
}

.about-title-note {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(227, 223, 219, 0.65);
}

.about-body {
    font-family: "Google Sans Flex", sans-serif;
}

.about-body p {
    margin: 0 0 1rem;
    font-size: clamp(0.95rem, 1.55vw, 1.06rem);
    font-weight: 450;
    line-height: 1.65;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(227, 223, 219, 0.9);
}

.about-body p:last-of-type {
    margin-bottom: 0;
}

.about-quote {
    margin: clamp(2rem, 5vmin, 2.75rem) 0 0;
    padding: 0 0 0 clamp(0.85rem, 2.5vw, 1.25rem);
    border-left: 3px solid var(--base-200);
}

.about-quote p {
    margin: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 450;
    font-style: italic;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: var(--base-paper);
}

.about-rule {
    border: 0;
    height: 1px;
    margin: clamp(2rem, 5vmin, 2.75rem) 0 0;
    background: rgba(227, 223, 219, 0.15);
}

.work {
    position: relative;
    z-index: 7;
    pointer-events: none;
    width: 100%;
    max-width: var(--page-column-max);
    margin: 0 auto;
    padding: clamp(3rem, 8vmin, 6rem) clamp(0.75rem, 4vw, 2.5rem);
    color: var(--base-paper);
    text-align: left;
}

.section-shell {
    position: relative;
    z-index: 7;
    pointer-events: none;
    width: 100%;
    max-width: var(--page-column-max);
    margin: 0 auto;
    padding: clamp(3rem, 8vmin, 6rem) clamp(0.75rem, 4vw, 2.5rem);
    color: var(--base-paper);
    text-align: left;
}

.about :is(a, button),
.work :is(a, button),
.section-shell :is(a, button) {
    pointer-events: auto;
}

.section-shell__title {
    margin: 0;
    font-family: Boldonse, sans-serif;
    font-weight: 400;
    font-size: var(--section-title-shell-fs);
    line-height: var(--section-title-shell-lh);
    color: var(--base-paper);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em 0.75em;
}

.section-shell__title-note {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(227, 223, 219, 0.65);
    white-space: nowrap;
}

.section-shell__lede {
    margin: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(227, 223, 219, 0.88);
}

.section-shell__link {
    color: var(--base-200);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.section-shell__prose {
    font-family: "Google Sans Flex", sans-serif;
}

.section-shell__prose p {
    margin: 0 0 1rem;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    font-weight: 450;
    line-height: 1.65;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(227, 223, 219, 0.88);
}

.section-shell__prose p:last-child {
    margin-bottom: 0;
}

.section-shell__figure {
    margin: clamp(1rem, 2.75vmin, 1.35rem) 0;
    max-width: max-content;
}

/* Fun — one full viewport tall; body column grows under sticky title */
.section-shell.section-shell--fun {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.section-shell--fun .fun-shell-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}

.fun-bubble-counter__lobby {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(8rem, 28vmin, 14rem);
}

.fun-bubble-counter__lobby[hidden] {
    display: none !important;
}

.fun-bubble-counter__start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.55rem, 2vmin, 0.85rem) clamp(1.6rem, 5vmin, 2.4rem);
    border: 1px solid color-mix(in srgb, var(--base-200) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--base-200) 12%, transparent);
    font-family: Orbitron, system-ui, sans-serif;
    font-size: clamp(0.95rem, 2.8vmin, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--base-200);
    cursor: pointer;
    text-shadow:
        0 0 clamp(10px, 2vmin, 18px) color-mix(in srgb, var(--base-200) 35%, transparent),
        0 0 1px rgba(1, 15, 41, 0.85);
    box-shadow:
        0 0 clamp(16px, 3.5vmin, 28px) color-mix(in srgb, var(--base-200) 22%, transparent);
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.55s ease,
        transform 0.2s ease;
}

.fun-bubble-counter__start:hover {
    background: color-mix(in srgb, var(--base-200) 20%, transparent);
    border-color: color-mix(in srgb, var(--base-200) 72%, transparent);
}

.fun-bubble-counter__start:focus-visible {
    outline: 2px solid var(--base-200);
    outline-offset: 3px;
}

.fun-bubble-counter__start:disabled {
    opacity: 0.55;
    cursor: wait;
}

.fun-bubble-counter__hud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.55rem, 2.2vmin, 1rem);
    width: 100%;
}

.fun-bubble-counter__hud[hidden] {
    display: none !important;
}

.fun-bubble-counter {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.55rem, 2.2vmin, 1rem);
    min-height: 0;
    width: 100%;
    /* Nudge HUD slightly below geometric center under the sticky title */
    padding-top: clamp(1.75rem, 8vmin, 4.5rem);
    /* Room for gag lines docked bottom — avoids pulling the HUD off true vertical center */
    padding-bottom: clamp(5rem, 16vmin, 7.25rem);
    box-sizing: border-box;
    position: relative;
}

.fun-bubble-counter__label {
    display: block;
    margin: 0 auto clamp(0.65rem, 2vmin, 1rem);
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.65rem, 1.85vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(227, 223, 219, 0.55);
}

/* Final score hue after countdown hits 0 (script toggles on #fun-bubble-counter-digits) */
.fun-bubble-counter__digits--time-up .fun-bubble-counter__digit {
    color: #fcd34d;
    text-shadow:
        0 0 clamp(12px, 2.8vmin, 28px) color-mix(in srgb, #fbbf24 42%, transparent),
        0 0 1px rgba(1, 15, 41, 0.85);
}

.fun-bubble-counter__digits {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    /* Gap between glyphs only — avoids `letter-spacing` trailing phantom width on one-char spans */
    gap: clamp(0.1em, 1.85vmin, 0.22em);
    align-self: stretch;
    margin-inline: auto;
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(0.5rem, 2vw, 1rem);
    /* Orbitron: squared / digital — matches headline font load */
    font-family: Orbitron, system-ui, sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    /* Fits two digits (~99 max) inside the column without overflowing narrow viewports */
    font-size: clamp(4.5rem, min(36vw, 32vh), 12rem);
}

.fun-bubble-counter__timer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0;
}

.fun-bubble-counter__timer-caption {
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.6rem, 1.5vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(227, 223, 219, 0.48);
}

.fun-bubble-counter__timer-digits {
    font-family: Orbitron, system-ui, sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    font-size: clamp(1.65rem, min(8vw, 6vh), 3.1rem);
    color: var(--base-200);
    text-shadow:
        0 0 clamp(10px, 2vmin, 20px) color-mix(in srgb, var(--base-200) 36%, transparent),
        0 0 1px rgba(1, 15, 41, 0.85);
}

.fun-bubble-counter__timer-digits--done {
    opacity: 0.52;
}

.fun-bubble-counter__reset {
    display: block;
    margin-inline: auto;
    margin-top: 0;
    padding: clamp(0.38rem, 1.25vmin, 0.55rem) clamp(1rem, 3.5vmin, 1.35rem);
    border: 1px solid rgba(227, 223, 219, 0.28);
    border-radius: 999px;
    background: transparent;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.68rem, 1.85vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(227, 223, 219, 0.72);
    cursor: pointer;
    transition:
        color 0.55s ease,
        border-color 0.55s ease,
        background-color 0.55s ease,
        opacity 0.75s ease,
        visibility 0s linear 0.75s,
        box-shadow 0.55s ease;
}

/* Hidden until buzzer; fades in red when round ends */
.fun-bubble-counter__reset--concealed-until-done {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        color 0.55s ease,
        border-color 0.55s ease,
        background-color 0.55s ease,
        opacity 0.75s ease,
        visibility 0s linear 0s,
        box-shadow 0.55s ease;
}

.fun-bubble-counter__reset--visible-after-done {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    color: #f87171;
    border-color: color-mix(in srgb, #f87171 55%, rgba(227, 223, 219, 0.25));
    background: color-mix(in srgb, #f87171 10%, transparent);
    box-shadow:
        0 0 clamp(14px, 2.8vmin, 24px) color-mix(in srgb, #f87171 35%, transparent),
        0 1px 4px rgba(1, 15, 41, 0.45);
}

.fun-bubble-counter__reset--visible-after-done:hover {
    color: #fca5a5;
    border-color: color-mix(in srgb, #fca5a5 65%, transparent);
    background: color-mix(in srgb, #f87171 16%, transparent);
}

.fun-bubble-counter__reset--visible-after-done:focus-visible {
    outline: 2px solid #fca5a5;
    outline-offset: 3px;
}

.fun-bubble-counter__digit {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    letter-spacing: 0;
    text-align: center;
}

/* Idle state: single 0 — matches --bubble-rgb (hero + body.menu-open tint) */
.fun-bubble-counter__digit--inactive {
    color: rgba(var(--bubble-rgb), 0.92);
    text-shadow:
        0 0 clamp(10px, 2.2vmin, 22px) rgba(var(--bubble-rgb), 0.28),
        0 2px clamp(8px, 1.75vw, 16px) rgba(1, 15, 41, 0.45);
}

/* Once counting: all digits accent green */
.fun-bubble-counter__digit--active {
    color: var(--base-200);
    text-shadow:
        0 0 clamp(12px, 2.8vmin, 28px) color-mix(in srgb, var(--base-200) 38%, transparent),
        0 0 1px rgba(1, 15, 41, 0.85);
}

/* Timed gag lines — countdown windows + brief Reset note (script.js) */
.fun-bubble-counter__gags {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(0.75rem, 4vmin, 1.75rem);
    margin: 0 auto;
    min-height: clamp(4rem, 14vmin, 7rem);
    width: 100%;
    max-width: 22rem;
    pointer-events: none;
}

.fun-bubble-counter__gag-line {
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.72rem, 2.1vw, 0.95rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.03em;
    line-height: 1.38;
    text-align: center;
    color: rgba(227, 223, 219, 0.78);
    opacity: 0;
    visibility: hidden;
}

/* Shown instantly; reveal is TextScramble-driven (script.js) */
.fun-bubble-counter__gag-line--visible {
    opacity: 1;
    visibility: visible;
}

/* Post-buzzer line — same digital face as pop counter + clock */
.fun-bubble-counter__gag-line--orbitron-done {
    font-family: Orbitron, system-ui, sans-serif;
    font-style: normal;
    font-size: clamp(1.25rem, 5.25vmin, 2.15rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
    text-transform: none;
    line-height: 1.15;
    color: var(--base-200);
    text-shadow:
        0 0 clamp(10px, 2.2vmin, 20px) color-mix(in srgb, var(--base-200) 36%, transparent),
        0 0 1px rgba(1, 15, 41, 0.85);
}

.fun-bubble-counter__gag-line--reset-note {
    font-style: italic;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
}

/* Plain linked image — no frame around the screenshot */
.section-shell__shot-link {
    display: inline-block;
    line-height: 0;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: rgba(40, 179, 63, 0.25);
    transition: opacity 140ms ease, transform 140ms ease;
}

.section-shell__shot-link:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.section-shell__shot-link:focus-visible {
    outline: 2px solid var(--base-200);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Larger thumb; scales to fit (full image visible) */
img.section-shell__shot {
    width: auto;
    height: auto;
    max-width: min(18rem, 58vw);
    max-height: min(14rem, 46vw);
    object-fit: contain;
    object-position: center;
    display: block;
}

.section-shell__figcaption {
    margin: 0.7rem 0 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.9rem, 1.35vw, 1rem);
    font-weight: 450;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(227, 223, 219, 0.82);
}

.work-header {
    margin-bottom: clamp(2rem, 5vmin, 3rem);
    padding-bottom: clamp(1rem, 3vmin, 1.5rem);
    border-bottom: 1px solid rgba(227, 223, 219, 0.2);
}

.work-title {
    margin: 0 0 0.5rem;
    font-family: Boldonse, sans-serif;
    font-weight: 400;
    font-size: var(--section-title-primary-fs);
    line-height: var(--section-title-primary-lh);
    color: var(--base-paper);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em 0.75em;
}

.work-title-note {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(227, 223, 219, 0.65);
}

@media (max-width: 639px) {
    :root {
        --section-title-primary-fs: clamp(1.3rem, 4.5vw, 1.55rem);
        --section-title-primary-lh: 1.15;
        --section-title-shell-fs: clamp(1.15rem, 3.8vw, 1.35rem);
        --section-title-shell-lh: 1.25;
    }

    .sticky-section-head {
        padding-block: 0.15rem;
    }

    .about-header,
    .work-header {
        padding-bottom: clamp(0.65rem, 2vmin, 1rem);
    }

    .about-header {
        margin-bottom: clamp(1rem, 3vmin, 1.35rem);
    }

    .work-header {
        margin-bottom: clamp(1.25rem, 3.5vmin, 2rem);
    }

    .section-shell-head {
        margin-bottom: 0.55rem;
    }
}

.work-entry {
    padding: clamp(1.5rem, 4vmin, 2rem) 0;
    border-bottom: 1px solid rgba(227, 223, 219, 0.12);
}

.work-entry--last {
    border-bottom: none;
    padding-bottom: 0;
}

.work-role {
    margin: 0 0 0.35rem;
    font-family: Boldonse, sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.8vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--base-paper);
}

.work-meta {
    margin: 0 0 0.85rem;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.85rem, 1.4vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--base-200);
}

.work-sep {
    margin-inline: 0.35em;
    font-weight: 500;
    opacity: 0.6;
}

.work-summary {
    margin: 0 0 1rem;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(227, 223, 219, 0.88);
}

.work-list {
    margin: 0;
    padding-left: 1.15rem;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(0.85rem, 1.4vw, 0.95rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    color: rgba(227, 223, 219, 0.88);
}

.work-list li {
    margin-bottom: 0.45em;
}

.work-list li:last-child {
    margin-bottom: 0;
}

.hero-shell {
    position: relative;
    /* Let pointer events reach ambient bubbles underneath; headline + chip opt back in below */
    pointer-events: none;
    width: 100%;
    max-width: var(--nav-shell-max);
    margin-inline: auto;
    padding-inline: var(--nav-shell-pad-x);
    box-sizing: border-box;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.hero-scroll-float {
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: clamp(2rem, 7vmin, 5rem);
    margin-inline-start: clamp(3.1rem, 6.75vmin + 1.85rem, 7.5rem);
    margin-block-end: clamp(0.45rem, 1.6vmin, 1rem);
    box-sizing: border-box;
    width: 56px;
    height: 56px;
}

.hero-scroll-float__rise {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* Same paced drift as fastest bubbles — travel is shorter (--hero-scroll-rise-distance) */
    animation: hero-scroll-float-rise var(--bubble-float-duration-fast) linear forwards;
    animation-delay: 0s;
}

.hero-scroll-float__spin {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    rotate: none;
    backface-visibility: hidden;
    /* `rotate` (not nested in transform): linear infinite repeats at 360° with no seam */
    animation: hero-scroll-spin-forever
        calc(var(--bubble-float-duration-fast) * (360 / 600)) linear infinite;
    animation-delay: 0s;
    will-change: transform;
}

.hero-scroll-float__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    /* Size tokens for cqw/cqh–bound type that scales with the 56×56 chip */
    container-type: size;
    padding: clamp(2px, 5.5cqw, 5px);
    border: none;
    border-radius: 6px;
    isolation: isolate;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    background-color: color-mix(in srgb, var(--base-200) 46%, transparent);
    color: #fafaf8;
    font-family: "Google Sans Flex", sans-serif;
    /* Prefer larger type; min(cqw,cqh) keeps two lines inside the square */
    font-size: clamp(10px, 1.9vmin, 12px); /* coarse fallback without cq units */
    font-weight: 800;
    font-variation-settings: "wght" 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
}

.hero-scroll-float__box:focus-visible {
    outline: 2px solid #fafaf8;
    outline-offset: 3px;
}

@supports (font-size: 1cqw) {
    .hero-scroll-float__box {
        font-size: clamp(9px, min(21cqw, 29cqh), 12px);
    }
}

@keyframes hero-scroll-float-rise {
    0% {
        transform: translate3d(0, var(--hero-scroll-rise-distance), 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-scroll-spin-forever {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 1turn;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-float__spin {
        animation: none;
        rotate: none;
    }

    .hero-scroll-float__rise {
        animation: none;
        transform: translate3d(0, 0, 0);
    }
}

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding-block-end: 7rem;
    /*
     * cqw/cqh for hero lines — shrink font to fit column width instead of wrapping.
     */
    container-type: inline-size;
}

.hero-scramble {
    width: 100%;
    max-width: 100%;
    /* Lifts the headline block in the centered hero column */
    padding-block-end: clamp(0.85rem, 2.5vmin, 1.85rem);
}

.hero-scramble-label {
    margin: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 600;
    font-size: clamp(0.68rem, 1.05vw, 0.82rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(227, 223, 219, 0.55);
    line-height: 1.2;
}

.hero-scramble-label.engineer {
    align-self: center;
    font-family: Orbitron, "Google Sans Flex", sans-serif;
    color: green;
    /* Orbitron subline under Boldonse h2 — not the main scramble phrase size tokens */
    font-size: clamp(0.62rem, 2.4vw + 0.42rem, 1.5rem);
    font-size: min(
        clamp(0.62rem, 2.4vw + 0.42rem, 1.5rem),
        calc((100cqw - clamp(2rem, 8vw, 4rem)) / 22)
    );
    padding-top: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-inline: auto;
    text-align: center;
    box-sizing: content-box;
    white-space: nowrap;
    max-width: 100%;
}

/* Scramble wraps glyphs in spans (matches .hero-headline) */
.hero-scramble-label.engineer span {
    display: inline-block;
    line-height: inherit;
    vertical-align: baseline;
}

.hero-title--has-scramble-labels .hero-scramble-label--bottom {
    margin-top: clamp(0.3rem, 1vmin, 0.5rem);
}

.hero-title .hero-scramble-label--bottom {
    padding-block-end: clamp(1rem, 2.75vmin, 2.25rem);
}

.hero-headline {
    margin: 0;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.03em, 0.02em + 0.55vmin, 0.22em);
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    color: var(--base-paper);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Boldonse h2 pair — size from `--hero-fs-*` (+ `software-scramble.js`) and container cap below */
.hero-headline .software-word,
.hero-headline .engineer-word {
    font-family: Boldonse, sans-serif;
    font-weight: 400;
    /* JS sets `--hero-fs-vw/add` on `<html>`; `#hero { … }` overrides add on narrow widths */
    --hero-word-fs-unclamped: calc(
        var(--hero-fs-vw, 5.5) * (0.58vmin + 0.42vw) + var(--hero-fs-add)
    );
    font-size: var(--hero-word-fs-unclamped);
    font-size: min(
        var(--hero-word-fs-unclamped),
        calc((100cqw - clamp(2rem, 9vw, 4.5rem)) / 9.75)
    );
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    white-space: nowrap;
}

/* Scramble wraps each glyph in <span> — give glyphs room so lines don’t crash */
.hero-headline .software-word span,
.hero-headline .engineer-word span {
    display: inline-block;
    line-height: inherit;
    vertical-align: baseline;
}

/* Centered bar: matches section column + extra elbow room (same horizontal padding as sections) */
/* Above .menu (z-index 10) so burger/close stays visible when overlay is open */
.nav-shell {
    position: relative;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 3vw, 1.75rem);
    width: 100%;
    max-width: var(--nav-shell-max);
    margin-inline: auto;
    padding-inline: var(--nav-shell-pad-x);
    min-height: var(--nav-h);
    box-sizing: border-box;
    pointer-events: none;
}

.nav-shell > * {
    pointer-events: auto;
}

/* Overrides `> *` above: flex spacer must not swallow taps meant for bubbles/hero underneath. */
.nav-shell > .nav-logo {
    pointer-events: none;
}

.nav-logo {
    padding: 0.5rem;
    margin: -0.5rem;
    position: relative;
    /* Grow into space between shell edge and toggle — avoid artificial 14rem cap + ellipsis */
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
}

.nav-toggle-shell {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
}

/* Burger / close stacks two SVG layers; GSAP swaps opacity */
.nav-toggle {
    position: relative;
    flex-shrink: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--nav-toggle-hit);
    height: var(--nav-toggle-hit);
    padding: 0;
    margin: 0;
    pointer-events: all;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    cursor: pointer;
    color: var(--base-paper);
    transition: color 0.35s ease;
}

.nav-toggle-shell:hover .nav-toggle,
.nav-toggle:focus-visible {
    color: var(--base-200);
}

body.menu-open .nav-toggle {
    color: var(--base-200);
}

body.menu-open .nav-toggle-shell:hover .nav-toggle,
body.menu-open .nav-toggle:focus-visible {
    color: rgb(var(--bubble-rgb));
}

.nav-toggle:focus-visible,
.menu-close:focus-visible {
    outline: none;
    outline-offset: 0;
}

.nav-toggle:focus:not(:focus-visible),
.menu-close:focus:not(:focus-visible) {
    outline: none;
}

.nav-toggle-menu,
.nav-toggle-close {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.nav-toggle-menu svg,
.nav-toggle-close svg,
.menu-close__icon svg {
    width: clamp(34px, 9vmin, 48px);
    height: auto;
    display: block;
}

.nav-toggle-close {
    opacity: 0;
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 10;
    isolation: isolate;
}

.nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    /* Transparent fade (no blur) — blends into background */
    background: linear-gradient(
        to bottom,
        rgba(1, 15, 41, 0.78) 0%,
        rgba(1, 15, 41, 0.58) 60%,
        rgba(1, 15, 41, 0.12) 92%,
        rgba(1, 15, 41, 0) 100%
    );
    backdrop-filter: blur(32px) saturate(1.12);
    -webkit-backdrop-filter: blur(32px) saturate(1.12);
    pointer-events: none;
    z-index: -1;
}

.menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    padding: 0;
    display: block;
    color: var(--base-300);
    pointer-events: none;
    z-index: 10;
}

/* Same horizontal band + max width as .nav-shell; columns live below */
.menu-shell {
    position: relative;
    /* Above fullscreen / drawer deco (z-index 1); dim is `.menu::before` z0 */
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--nav-shell-max);
    min-height: 100%;
    margin-inline: auto;
    padding-inline: var(--nav-shell-pad-x);
    /* Flush top band with .nav-shell — old uniform padding pushed .menu-shell__top down */
    padding-top: 0;
    padding-bottom: 2.5rem;
    box-sizing: border-box;
    pointer-events: none;
}

/*
 * `.menu { pointer-events: none }` does NOT disable nested elements — anchors default to
 * `auto`, so they sat on an invisible fullscreen layer and swallowed page clicks.
 * Toggle real hit targets only when the overlay is open.
 */
.menu:not(.is-open) .menu-shell,
.menu:not(.is-open) .menu-shell * {
    pointer-events: none !important;
}

.menu.is-open .menu-shell__top,
.menu.is-open .menu-shell__top *,
.menu.is-open .menu-shell__cols,
.menu.is-open .menu-shell__cols * {
    pointer-events: auto !important;
}

.menu-shell__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 3vw, 1.75rem);
    min-height: var(--nav-h);
}

/*
 * In-overlay close — hidden on mobile (bar toggle stays primary).
 * Visible laptop+ (off-canvas) inside the drawer top row (bar toggle hides while open).
 */
.menu-close {
    display: none;
    flex-shrink: 0;
    width: var(--nav-toggle-hit);
    height: var(--nav-toggle-hit);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    cursor: pointer;
    color: var(--base-200);
    transition: color 0.35s ease;
}

.menu-close:hover,
.menu-close:focus-visible {
    color: rgb(var(--bubble-rgb));
}

.menu-shell__cols {
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
    gap: clamp(1rem, 3vh, 2rem);
    align-items: stretch;
    min-height: 0;
}

.menu.is-open {
    pointer-events: all;
}

.menu-bg-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
}

#menu-path {
    fill: var(--base-paper);
}

/* Fullscreen SVG curtain floats — hidden once off-canvas activates (≥1024px, matches script). */
.bg-bubbles--menu {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* When the menu is closed, hide the menu bubbles so they don't stack as unclickable ghost
   boxes on top of the ambient layer at <1024px viewports. */
.menu:not(.is-open) .bg-bubbles--menu {
    display: none;
}

/* Laptop+ list (hidden <1024): own motion + timing in the 1024 media block. */
.bg-bubbles--drawer {
    display: none;
}

.menu-logo {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0.5rem;
    margin: -0.5rem;
    opacity: 0;
}

.menu-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.menu-col-links {
    flex: 1.5;
    min-height: 0;
}

.menu-col a {
    text-decoration: none;
    color: var(--base-100);
    font-family: "Boldonse";
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.35;
    width: max-content;
    overflow: visible;
}

.menu-col p {
    color: var(--base-200);
    margin-bottom: 1rem;
}

.menu a .char,
.menu-col h3,
.menu-col h6,
.menu-col p {
    will-change: transform, opacity;
}

/*
 * Laptop+ (1024px): off-canvas rail from the right — min 425px sheet, dimmed backdrop; fullscreen
 * SVG curtain + `.bg-bubbles--menu` disabled (see script `matchesOffcanvasDrawerLayout`).
 */
@media (min-width: 1024px) {
    body.menu-open {
        overflow: hidden;
    }

    .menu {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .menu::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: rgba(1, 15, 41, 0.55);
        opacity: 0;
        transition: opacity 0.28s ease;
        pointer-events: none;
    }

    .menu.is-open::before {
        opacity: 1;
        pointer-events: auto;
    }

    .menu-bg-svg {
        display: none;
    }

    .bg-bubbles--menu {
        display: none;
    }

    /*
     * Drawer floats sit inside `.menu-shell` (absolute inset) so they paint under the opaque
     * paper panel; sibling `fixed` + z-index kept them permanently behind `.menu-shell` (z 2).
     */
    .menu.is-open .bg-bubbles--drawer {
        display: block;
        position: absolute;
        inset: 0;
        width: auto;
        max-width: none;
        height: 100%;
        min-height: 100%;
        z-index: 0;
        /* Faster laps than fullscreen 25–40s floats; ingress from viewport-right (+X), sweep left/up */
        --bubble-drawer-dur: 12s;
        --bubble-drawer-dur-fast: 8s;
        --bubble-drawer-dur-slow: 17.5s;
        --bubble-drawer-x-in: clamp(72px, 34%, 240px);
        --bubble-drawer-x-out: calc(-152% - 36px);
        --bubble-drawer-y-travel: calc(-92vh - 72px);
    }

    /*
     * Dedicated drawer `<li>` motion (same 10 markup as fullscreen menu floats, unrelated lane math).
     * Replaces default `bubble-float` (rise from bottom) with `bubble-float-drawer`; keeps `bubble-fade`.
     */
    .bg-bubbles--drawer li {
        bottom: -120px;
        animation:
            bubble-float-drawer var(--bubble-drawer-dur) linear infinite,
            bubble-fade var(--bubble-drawer-dur) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    }

    .bg-bubbles--drawer li:nth-child(2) {
        animation-duration:
            var(--bubble-drawer-dur-fast),
            var(--bubble-drawer-dur-fast);
        animation-delay: 0.45s, 0.45s;
    }

    .bg-bubbles--drawer li:nth-child(3) {
        animation-delay: 1s, 1s;
    }

    .bg-bubbles--drawer li:nth-child(4) {
        animation-duration:
            calc(var(--bubble-drawer-dur) * 0.72),
            calc(var(--bubble-drawer-dur) * 0.72);
        animation-delay: 0.2s, 0.2s;
    }

    .bg-bubbles--drawer li:nth-child(5) {
        animation-delay: 1.4s, 1.4s;
    }

    .bg-bubbles--drawer li:nth-child(6) {
        animation-duration:
            var(--bubble-drawer-dur-fast),
            var(--bubble-drawer-dur-fast);
        animation-delay: 0.75s, 0.75s;
    }

    .bg-bubbles--drawer li:nth-child(7) {
        animation-delay: 1.85s, 1.85s;
    }

    .bg-bubbles--drawer li:nth-child(8) {
        animation-duration:
            var(--bubble-drawer-dur-slow),
            var(--bubble-drawer-dur-slow);
        animation-delay: 0.3s, 0.3s;
    }

    .bg-bubbles--drawer li:nth-child(9) {
        animation-duration:
            var(--bubble-drawer-dur-slow),
            var(--bubble-drawer-dur-slow);
        animation-delay: 0.6s, 0.6s;
    }

    .bg-bubbles--drawer li:nth-child(10) {
        animation-delay: 1.1s, 1.1s;
    }

    .menu-shell {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 2;
        isolation: isolate;
        width: max(425px, min(92vw, 560px));
        min-width: 425px;
        max-width: none;
        height: 100%;
        min-height: 100svh;
        margin-inline: 0;
        padding-inline: var(--nav-shell-pad-x);
        padding-bottom: 2.5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--base-paper);
        box-shadow: -12px 0 40px rgba(1, 15, 41, 0.2);
        box-sizing: border-box;
        /* Closed: peel off-screen — permanent rail glitch if omitted */
        transform: translateX(100%);
        transition: transform 0.38s cubic-bezier(0.22, 0.94, 0.32, 1);
    }

    .menu.is-open .menu-shell {
        transform: translateX(0);
        will-change: transform;
    }

    .menu-shell__top,
    .menu-shell__cols {
        position: relative;
        z-index: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        .menu-shell {
            transition: none;
        }

        .menu.is-open .menu-shell {
            will-change: auto;
        }

        .bg-bubbles--drawer li {
            animation: none;
            opacity: 0.5;
            transform: none;
        }
    }

    /* Drawer had `line-height: 1.12`, which tightened link rows vs fullscreen `1.35`. */
    .menu-col a {
        font-size: clamp(1.65rem, 4.25vmin, 2.5rem);
        line-height: 1.35;
        letter-spacing: -0.015em;
        width: auto;
        max-width: 100%;
    }

    .menu-col-info h3 {
        font-size: clamp(1rem, 3.75vmin, 1.35rem);
        line-height: 1.25;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Close lives inside the drawer; hide duplicate X at viewport rail */
    body.menu-open .nav-toggle-shell {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .menu-close {
        display: grid;
        place-items: center;
    }
}

@media (max-width: 1000px) and (max-height: 700px) {
    /* Short-height phones (SE): avoid column-reverse pinning links awkwardly near the top */
    .menu-shell {
        flex-direction: column;
        padding-top: clamp(6.25rem, 22vmin, 8.5rem);
        padding-inline: clamp(1rem, 4vmin, 1.75rem);
        padding-bottom: clamp(1rem, 3vmin, 1.75rem);
        gap: clamp(0.75rem, 2.5vmin, 1.25rem);
    }

    .menu-shell__cols {
        gap: clamp(0.75rem, 2.5vmin, 1.25rem);
    }

    .menu-shell__top {
        min-height: 0;
    }

    .menu-col a {
        /* Bigger tap targets/text on SE-sized screens — keep inside the fullscreen menu bounds */
        font-size: clamp(1.7rem, min(10vmin, 9vw), 3rem);
        line-height: 1.12;
        letter-spacing: -0.015em;
        max-width: 100%;
        width: auto;
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .menu-col-links {
        flex: 1;
        justify-content: flex-end;
    }

    .menu-col-info {
        justify-content: flex-start;
        flex: 0 0 auto;
    }

    .menu-col-info h3 {
        font-size: clamp(1rem, 4.2vmin, 1.5rem);
        line-height: 1.2;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .menu-col-info br {
        display: none;
    }
}

@media (max-width: 1000px) and (max-height: 620px) {
    .menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Hero only — keep separate from fullscreen menu styling */
@media (max-width: 768px) {
    #hero {
        --hero-fs-vw: 6.85;
        --hero-fs-add: 2rem;
    }
}

@media (max-width: 520px) {
    #hero {
        --hero-fs-vw: 7.1;
        --hero-fs-add: 2.05rem;
    }

    .hero-headline .software-word,
    .hero-headline .engineer-word {
        line-height: 1.2;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .hero {
        padding-top: clamp(3.25rem, 16vmin, 5rem);
        padding-bottom: clamp(1.25rem, 6vmin, 2rem);
    }

    .hero-scroll-float {
        bottom: clamp(1.25rem, 6vmin, 2rem);
        margin-inline-start: clamp(2.85rem, 11vmin + 1.35rem, 7.5rem);
    }

    .hero-headline {
        gap: 0.04em;
    }

    .hero-headline .software-word,
    .hero-headline .engineer-word {
        line-height: 1.05;
    }
}




.nav-logo-link,
.menu-logo-link {
    display: block;
    max-width: 100%;
}

.nav-shell .nav-logo-link {
    pointer-events: auto;
    touch-action: manipulation;
}

/* Bar + open menu logo: same type scale; paper on bar, green in open menu */
.nav-logo h1,
.menu-logo h1 {
    font-family: Boldonse, sans-serif;
    font-weight: 400;
    font-size: var(--nav-logo-bar-fs);
    line-height: 1.22;
    letter-spacing: normal;
    max-height: none;
    margin: 0;
    text-shadow: none;
}

.nav-logo h1 {
    color: var(--base-paper);
}

.menu-logo h1 {
    color: var(--base-100);
}

.nav-logo-title {
    display: block;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Match .about-title layout when mirroring About + note */
.nav-logo-title.nav-logo-title--with-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em 0.75em;
    white-space: normal;
}

.nav-logo-title__note {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(227, 223, 219, 0.65);
}

a {
    text-decoration: none;
}