.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: 46rem;
    --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: 0.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 {
    /* Switch bubble color when menu is open */
    --bubble-rgb: 0, 49, 110; /* #00316E */
    --bubble-a: 0.07;
    --bubble-a-2: 0.10;
    --bubble-a-3: 0.14;
}

/* 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;
    pointer-events: none;
}

/* Behind menu overlay (nav z-index 10); above hero/sections (#hero z-index 2) */
.bg-bubbles:not(.bg-bubbles--menu) {
    z-index: 3;
}

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

.bg-bubbles:not(.bg-bubbles--menu) li {
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.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;
}

.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) 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) 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) 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;
    }
}

/*
 * While popped: invisible + no clicks. bubble-float keeps running; JS respawns `<li>`
 * clone on bubble-float iteration so fade + floats restart from CSS on the next lap.
 */
.bg-bubbles:not(.bg-bubbles--menu) li.bg-bubble--vanished {
    pointer-events: none;
}

@keyframes bubble-float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(var(--bubble-travel)) 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; }
}

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;
    z-index: 2;
    /* 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;
    z-index: 2;
    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: 2;
    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: 2;
    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__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 — oversized “odometer” for hero bubble pops */
.section-shell--fun .fun-shell-body {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vmin, 1.75rem);
    min-height: min(78vh, 44rem);
}

.fun-bubble-counter {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: clamp(16rem, 58vmin, 34rem);
    width: 100%;
    padding-block: clamp(0.35rem, 1.25vmin, 0.85rem);
    box-sizing: border-box;
}

.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);
}

.fun-bubble-counter__digits {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: clamp(0.06em, 1.2vmin, 0.14em);
    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.08em;
    line-height: 0.92;
    text-align: center;
    /* Single digit scales up; 2–3 chars still fit comfortably */
    font-size: clamp(7rem, min(62vw, 42vh), 30rem);
}

.fun-bubble-counter__digit {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 0.58em;
    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);
}

/* Staged gag lines — ease in/out at pop milestones (hooked up in script.js). */
.fun-bubble-counter__gags {
    position: relative;
    margin: clamp(0.35rem, 2vmin, 0.95rem) auto 0;
    /* Room for taller “SMH” line without clipping */
    min-height: clamp(3em, 11vmin, 4.75rem);
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    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;
    transition:
        opacity 0.72s cubic-bezier(0.45, 0, 0.55, 1),
        visibility 0s linear 0.72s;
}

.fun-bubble-counter__gag-line--visible {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.72s cubic-bezier(0.45, 0, 0.55, 1),
        visibility 0s linear 0s;
}

.fun-bubble-counter__gag-line--smh {
    font-family: Boldonse, sans-serif;
    font-style: normal;
    font-size: clamp(1.85rem, 6.5vmin, 2.85rem);
    font-weight: 400;
    letter-spacing: clamp(0.22em, 2.5vmin, 0.4em);
    text-transform: uppercase;
    line-height: 1.05;
}

@media (prefers-reduced-motion: reduce) {
    .fun-bubble-counter__gag-line {
        transition-duration: 0.01ms;
        transition-delay: 0ms;
    }

    .fun-bubble-counter__gag-line--visible {
        transition-duration: 0.01ms;
    }
}

/* 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;
    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;
    /* Shrink vs wrap: cap by column width (~uppercase phrase + tracking) */
    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;
}

.hero-headline .software-word,
.hero-headline .engineer-word {
    font-family: Boldonse, sans-serif;
    font-weight: 400;
    /* JS-driven scale capped by hero column (.hero-title container) → shrink instead of wrap */
    --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)) / 11.25)
    );
    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;
}

.nav-logo {
    padding: 0.5rem;
    margin: -0.5rem;
    pointer-events: all;
    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;
    z-index: 1;
    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 tablet+ inside the drawer top row (nav 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);
}

/* Menu overlay bubbles (above curtain, below menu content) */
.bg-bubbles--menu {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.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;
}

/*
 * Tablet+: off-canvas side slide (cf. offcanvas.md) — fixed panel from the right (~375),
 * dimmed backdrop on .menu; fullscreen SVG curtain is disabled here.
 */
@media (min-width: 768px) {
    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;
    }

    .menu-shell {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 1;
        width: min(375px, 92vw);
        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 — without this the panel stays a permanent beige rail at ≥768px */
        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;
    }

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

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

    .menu-col a {
        font-size: clamp(1.65rem, 4.25vmin, 2.5rem);
        line-height: 1.12;
        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: 1rem;
    }
}

@media (max-width: 520px) {
    #hero {
        --hero-fs-vw: 7.1;
        --hero-fs-add: 1.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%;
}

/* 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;
}