/* =========================================================
   NEXEN — design tokens
   Graphite monotone: grayscale drafting-pencil tones, with the primary
   label colour as the single bright accent for CTAs and annotation.
   Five families, each with one job (pages re-theme by overriding these):

     surfaces   --bg / --bg-panel / --bg-raised / --bg-deep
     labels     --label / --label-2 / --label-3 / --label-4
     structure  --separator / --fill*
     type       --fs-*, --tr-*, --lh-*  (size, tracking and leading are ONE decision per step)
     motion     --spring, --spring-bounce, --ease-out

   Fonts: Sora (display) / Figtree (body) / JetBrains Mono (data)
   Logo: Advent Pro (Bold)
   ========================================================= */
:root {
    /* ---- Surfaces: base, grouped content, raised above that. --bg-deep is a sunken well. ---- */
    --bg: #1a1a1a;
    --bg-panel: #232323;
    --bg-raised: #2c2c2c;
    --bg-deep: #101010;

    /* ---- Labels: text is coloured by ROLE, not by shade. Translucent, so it stays correct over
       tinted or blurred surfaces. Pages re-theme by changing --label-rgb alone.
         --label    primary: titles, values, anything to read first
         --label-2  secondary: running text, descriptions
         --label-3  tertiary: metadata and captions. 50% keeps >= 4.5:1 on every surface; Apple's
                    own 30% tertiary fails WCAG AA on the web, so it is raised here
         --label-4  quaternary: decoration and disabled only (~2.5:1), never essential text ---- */
    --label-rgb: 242 242 242;
    --label: rgb(var(--label-rgb));
    --label-2: rgb(var(--label-rgb) / 0.64);
    --label-3: rgb(var(--label-rgb) / 0.5);
    --label-4: rgb(var(--label-rgb) / 0.3);

    /* ---- Structure ---- */
    --separator: rgb(var(--label-rgb) / 0.14);
    --separator-faint: rgb(var(--label-rgb) / 0.06);
    --fill: rgb(var(--label-rgb) / 0.08);
    --fill-2: rgb(var(--label-rgb) / 0.14);
    --fill-3: rgb(var(--label-rgb) / 0.2);
    --accent: var(--label);
    --accent-dim: rgb(var(--label-rgb) / 0.35);
    --highlight: rgb(255, 111, 0);
    --focus: var(--accent);

    /* ---- Materials ---- */
    --nav-bg: rgb(16 16 16 / 0.72);
    --scrim: rgb(3 5 4 / 0.6);
    --shadow-sheet: -30px 0 70px rgb(0 0 0 / 0.55);

    /* ---- Legacy names (kept so older rules and diagrams.css keep working) ----
       --muted is deliberately an OPAQUE grey: SVG strokes in the diagrams overlap, and
       translucent strokes would double up where they cross. Use --label-2/-3 for text. */
    --ink: var(--label);
    --muted: #999999;
    --line: var(--label);
    --line-dim: var(--separator);
    --line-faint: var(--separator-faint);

    /* ---- Type: the only sizes in use. Tracking tightens as size grows and loosens as it
       shrinks, so a step is picked, never hand-tuned: no raw letter-spacing anywhere.
       Rem, so layout follows the reader's text-size setting. ---- */
    --display: "Sora", "Inter", "Noto Sans Khmer", sans-serif;
    --body: "Figtree", "Noto Sans Khmer", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Noto Sans Khmer", monospace;
    --logo: "Advent Pro", "Sora", sans-serif;

    /*                size                                   tracking     leading  */
    --fs-micro: 0.625rem;                                    --tr-micro: 0.05em;      --lh-micro: 1.4;
    --fs-caption: 0.6875rem;                                 --tr-caption: 0.04em;    --lh-caption: 1.45;
    --fs-footnote: 0.75rem;                                  --tr-footnote: 0.03em;   --lh-footnote: 1.5;
    --fs-small: 0.8125rem;                                   --tr-small: 0.02em;      --lh-small: 1.5;
    --fs-callout: 0.875rem;                                  --tr-callout: 0.01em;    --lh-callout: 1.55;
    --fs-subhead: 0.9375rem;                                 --tr-subhead: 0;         --lh-subhead: 1.55;
    --fs-body: 1rem;                                         --tr-body: 0;            --lh-body: 1.6;
    --fs-lede: 1.0625rem;                                    --tr-lede: -0.005em;     --lh-lede: 1.55;
    --fs-headline: 1.25rem;                                  --tr-headline: -0.012em; --lh-headline: 1.3;
    --fs-title-3: 1.5rem;                                    --tr-title-3: -0.016em;  --lh-title-3: 1.25;
    --fs-title-2: clamp(1.75rem, 3.4vw, 2.5rem);             --tr-title-2: -0.022em;  --lh-title-2: 1.15;
    --fs-title-1: clamp(1.875rem, 4.7vw, 3.625rem);          --tr-title-1: -0.026em;  --lh-title-1: 1.08;
    --fs-display: clamp(2.5rem, 6vw, 4.25rem);               --tr-display: -0.03em;   --lh-display: 1.04;
    --fs-logo: 1.625rem;                                     --tr-logo: 0.01em;

    /* ---- Motion ----
       Springs for anything a hand touches (press, hover, release). Critically damped
       (no overshoot) by default; --spring-bounce (damping 0.8) only where a gesture carried
       momentum. response 0.4s -> they settle in ~0.55s. Both are generated from the spring
       equation, not eyeballed. Browsers without linear() get a close cubic-bezier.
       --ease-out is for one-shot scroll reveals, which nobody can grab. */
    --spring: cubic-bezier(0.22, 1, 0.36, 1);
    --spring-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
    --spring-dur: 0.55s;
    --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);

    --edge: 1px solid var(--separator);
    --radius: 2px;
}

@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --spring: linear(0, 0.0166, 0.0587, 0.1166, 0.1834, 0.2542, 0.3256, 0.395, 0.4609, 0.5225, 0.5791, 0.6306, 0.6771, 0.7187, 0.7556, 0.7883, 0.8171, 0.8423, 0.8643, 0.8835, 0.9001, 0.9145, 0.9269, 0.9376, 0.9468, 0.9547, 0.9615, 0.9673, 0.9722, 0.9765, 0.9801, 0.9831, 0.9857, 0.9879, 0.9898, 0.9914, 0.9927, 0.9939, 0.9948, 0.9957, 0.9963, 0.9969, 0.9974, 0.9978, 1);
        --spring-bounce: linear(0, 0.0156, 0.0565, 0.1149, 0.1846, 0.2606, 0.3391, 0.4171, 0.4923, 0.5633, 0.629, 0.689, 0.7427, 0.7903, 0.8319, 0.8678, 0.8984, 0.9241, 0.9455, 0.963, 0.9772, 0.9883, 0.997, 1.0035, 1.0082, 1.0115, 1.0136, 1.0147, 1.0152, 1.015, 1.0145, 1.0136, 1.0126, 1.0115, 1.0103, 1.0091, 1.0079, 1.0068, 1.0058, 1.0049, 1.0041, 1.0033, 1.0027, 1.0021, 1);
    }
}

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

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    background: var(--bg);
    color: var(--label);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    /* light-on-dark text renders heavier on macOS by default: this is what native apps do */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
        linear-gradient(var(--separator-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--separator-faint) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* headings break evenly, running text avoids a one-word last line */
h1,
h2,
h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* one focus ring everywhere: keyboard users only, never on mouse press */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.eyebrow {
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    text-transform: uppercase;
    color: var(--label-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.eyebrow::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------------- Nav ---------------- */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px 8px;
    /* a translucent layer with content scrolling beneath it; saturate keeps colour alive under the blur */
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: var(--edge);
}

#navLogo {
    font-family: var(--logo);
    font-weight: 700;
    font-size: var(--fs-logo);
    letter-spacing: var(--tr-logo);
    color: var(--label);
    display: flex;
    align-items: center;
    gap: 8px;
}

#navLogo span {
    color: var(--accent);
}

#navLinks {
    display: flex;
    gap: 32px;
    list-style: none;
}

#navLinks a {
    font-family: var(--mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
    text-transform: uppercase;
    color: var(--label-2);
    transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}

#navLinks a:focus-visible,
#navLinks a.active {
    color: var(--label);
    border-bottom-color: var(--accent);
}

#navLinks a:active {
    opacity: 0.55;
    transition-duration: 0.09s;
}

@media (hover: hover) {
    #navLinks a:hover {
        color: var(--label);
        border-bottom-color: var(--accent);
    }
}

@media (max-width: 900px) {
    #navLinks {
        gap: 20px;
    }
}

.menuToggle {
    display: none;
}

/* ---------------- Path bar (breadcrumb, second row of the nav) ---------------- */
#nav {
    flex-wrap: wrap;
}

#pathBar {
    flex: 0 0 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: var(--edge);
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
}

#pathBar ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

#pathBar li::after {
    content: "/";
    margin: 0 2px;
    color: var(--label-4);
}

#pathBar a {
    color: var(--label-2);
    padding: 2px 3px;
    border-radius: var(--radius);
    transition: color 0.25s ease, background-color 0.25s ease;
}

#pathBar a:focus-visible {
    color: var(--label);
    background: var(--fill);
}

#pathBar a:active {
    background: var(--fill-2);
    transition-duration: 0.09s;
}

@media (hover: hover) {
    #pathBar a:hover {
        color: var(--label);
        background: var(--fill);
    }
}

#pathBar a[aria-current="page"] {
    color: var(--accent);
}

/* ---------------- Hero ---------------- */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 160px 0 80px;
    position: relative;
    overflow: hidden;
}

.heroGrid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    width: 100%;
    perspective: 1400px;
}

.heroTitle {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    margin: 18px 0 24px;
}

.heroTitle em {
    font-style: normal;
    color: var(--accent);
}

.heroSub {
    color: var(--label-2);
    font-size: var(--fs-lede);
    letter-spacing: var(--tr-lede);
    line-height: var(--lh-lede);
    max-width: 46ch;
    margin-bottom: 32px;
}

.ctaRow {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn {
    font-family: var(--mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-deep);
    font-weight: 700;
    border: 1px solid var(--accent);
}

.btn-ghost {
    border: var(--edge);
    color: var(--label);
}

/* ---- Press feedback ----
   Everything pressable answers on touch-DOWN, not on release: it shrinks at once, then springs
   back (critically damped) however early the finger lifts, so a press is always interruptible.
   Hover is a fill, and only on devices that can hover, so touch screens never get a stuck state. */
.btn,
#navLogo,
.tab,
.ovCard {
    transition:
        transform var(--spring-dur) var(--spring),
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        filter 0.25s ease,
        opacity 0.25s ease;
}

.btn:active,
#navLogo:active,
.tab:active,
.ovCard:active {
    transform: scale(0.97);
    transition-duration: 0.09s;
    transition-timing-function: ease-out;
}

.btn-ghost:active,
.tab:active {
    background-color: var(--fill-2);
}

.btn-primary:active,
.btn-bk:active,
.btn-lm:active {
    filter: brightness(0.85);
}

@media (hover: hover) {
    .btn-ghost:hover {
        background-color: var(--fill);
        border-color: var(--label-3);
    }

    .btn-primary:hover,
    .btn-bk:hover,
    .btn-lm:hover {
        filter: brightness(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {

    .btn:active,
    #navLogo:active,
    .tab:active,
    .ovCard:active {
        transform: none;
        opacity: 0.7;
    }
}

/* --- hero schematic (signature element) --- */
.schematic {
    position: relative;
    border: var(--edge);
    aspect-ratio: 1 / 1;
    background: var(--bg-panel);
    transform-style: preserve-3d;
    opacity: 0;
    transform: rotateX(-20deg) translateY(200px) rotateY(-5deg);
    transition: transform 1s cubic-bezier(.16, .02, .06, 1), opacity 1s ease-out;
    will-change: transform, opacity;
}

.schematic.tilt-visible {
    opacity: 1;
    transform: rotateY(0deg) translateY(0);
}

.schematic svg {
    width: 100%;
    height: 100%;
}

.regMark {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line-dim);
    border-radius: 50%;
}

.regMark::before,
.regMark::after {
    content: "";
    position: absolute;
    background: var(--line-dim);
}

.regMark::before {
    left: 50%;
    top: -6px;
    bottom: -6px;
    width: 1px;
    transform: translateX(-50%);
}

.regMark::after {
    top: 50%;
    left: -6px;
    right: -6px;
    height: 1px;
    transform: translateY(-50%);
}

.regMark.tl {
    top: -11px;
    left: -11px;
}

.regMark.tr {
    top: -11px;
    right: -11px;
}

.regMark.bl {
    bottom: -11px;
    left: -11px;
}

.regMark.br {
    bottom: -11px;
    right: -11px;
}

.schematicLabel {
    position: absolute;
    bottom: 16px;
    left: 16px;
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--label-3);
    letter-spacing: var(--tr-caption);
}

.schematicLabel b {
    color: var(--label);
}

/* ---------------- Hero entrance (plays once, on load) ---------------- */
@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#hero .heroGrid>div:first-child>* {
    opacity: 0;
    animation: heroRise 0.85s var(--ease-out) forwards;
}

#hero .heroGrid>div:first-child>*:nth-child(1) {
    animation-delay: 0.1s;
}

#hero .heroGrid>div:first-child>*:nth-child(2) {
    animation-delay: 0.22s;
}

#hero .heroGrid>div:first-child>*:nth-child(3) {
    animation-delay: 0.36s;
}

#hero .heroGrid>div:first-child>*:nth-child(4) {
    animation-delay: 0.48s;
}

#hero .heroGrid>div:first-child>*:nth-child(5) {
    animation-delay: 0.58s;
}

/* ---------------- Sections (shared) ---------------- */
section {
    padding: 96px 0;
    border-top: var(--edge);
}

.sectionHead {
    margin-bottom: 48px;
    max-width: 60ch;
}

.sectionTitle {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-title-2);
    line-height: var(--lh-title-2);
    letter-spacing: var(--tr-title-2);
    margin-top: 12px;
}

.sectionLede {
    color: var(--label-2);
    margin-top: 16px;
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    letter-spacing: var(--tr-lede);
}

.fadeUp {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.fadeUp.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------- Revision log (the pivot story) ---------------- */
.revTable {
    border: var(--edge);
    font-family: var(--mono);
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
}

.revRow {
    display: grid;
    grid-template-columns: 90px 100px 1fr;
    gap: 24px;
    padding: 18px 20px;
    border-bottom: var(--edge);
}

.revRow:last-child {
    border-bottom: none;
}

.revRow.head {
    color: var(--label-3);
    text-transform: uppercase;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    background: var(--bg-panel);
}

.revTag {
    color: var(--accent);
    font-weight: 700;
}

.revDate {
    color: var(--label-2);
}

.revDesc {
    color: var(--label);
    font-family: var(--body);
    font-size: var(--fs-subhead);
    letter-spacing: var(--tr-subhead);
    line-height: var(--lh-subhead);
}

.revDesc strong {
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    color: var(--label-3);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

/* ---------------- Product bits shared by the landing cards ---------------- */
.productsGrid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.statusPill {
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    border: 1px solid var(--accent-dim);
    color: var(--accent);
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.release {
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    color: var(--label-3);
    text-align: center;
}

.productDesc {
    color: var(--label-2);
    max-width: 56ch;
}

/* ---------------- Collaboration credit (BCKUP//ENRGY page + landing page) ---------------- */
.collab {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 720px;
    margin-bottom: 36px;
    padding: 14px 18px 14px 14px;
    border: var(--edge);
    background: var(--bg-panel);
}

/* Electronic Labs logo is a near-square JPG: crop to the wordmark band */
.collabLogo {
    flex: 0 0 auto;
    width: 170px;
    height: auto;
    aspect-ratio: 3.2 / 1;
    object-fit: cover;
    border: var(--edge);
    border-radius: var(--radius);
}

.collabTxt {
    color: var(--label-2);
    font-size: var(--fs-callout);
    letter-spacing: var(--tr-callout);
    line-height: var(--lh-callout);
}

.collabLabel {
    display: block;
    margin-bottom: 4px;
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    color: var(--accent);
}

@media (max-width: 560px) {
    .collab {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------- Team ---------------- */
.teamGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.teamCard {
    border: var(--edge);
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;

}

.teamPhoto {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-dim);
    filter: grayscale(0.3);
    margin-bottom: 20px;
    transition: filter 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
    .teamCard:hover .teamPhoto {
        filter: grayscale(0);
        border-color: var(--accent-dim);
    }
}

.teamRole {
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    color: var(--label-3);
}

.teamName {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-title-3);
    line-height: var(--lh-title-3);
    letter-spacing: var(--tr-title-3);
    margin: 10px 0 12px;
}

.teamBio {
    color: var(--label-2);
    font-size: var(--fs-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--tr-subhead);
    margin-bottom: 16px;
}

.stamp {
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    color: var(--accent);
    border: 1px dashed var(--accent-dim);
    padding: 5px 10px;
    transform: rotate(-2deg);
    margin: 0 0 30px;
}

@media (max-width: 720px) {
    .teamGrid {
        grid-template-columns: 1fr;
    }
}

/* ---------------- Footer ---------------- */
footer {
    border-top: var(--edge);
    padding: 48px 0;
}

.footRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.footLinks {
    display: flex;
    gap: 24px;
    font-family: var(--mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
    color: var(--label-2);
}

@media (hover: hover) {
    .footLinks a:hover {
        color: var(--label);
    }
}

.footNote {
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    color: var(--label-3);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
    .heroGrid {
        grid-template-columns: 1fr;
    }

    .schematic {
        max-width: 340px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .wrap {
        padding: 0 20px;
    }

    /* ---- Mobile menu: drawer slides in and sharpens out of a blur, the page
       behind it dims and softens, links rise in one by one, and the burger
       turns into an X. Same easing + blur language as the page transitions. ---- */
    #navLinks {
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        width: min(280px, 82vw);
        height: 100vh;
        height: 100dvh;
        background: var(--bg-deep);
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 28px;
        gap: 26px;
        border-left: var(--edge);
        transform: translateX(100%);
        opacity: 0;
        filter: blur(10px);
        visibility: hidden;
        transition:
            transform var(--spring-dur) var(--spring),
            opacity 0.3s ease,
            filter 0.35s ease,
            visibility 0s linear 0.45s;
    }

    .menuToggle:checked~#navLinks {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
        visibility: visible;
        box-shadow: var(--shadow-sheet);
        transition:
            transform var(--spring-dur) var(--spring),
            opacity 0.45s ease,
            filter 0.6s ease,
            visibility 0s;
    }

    #navLinks li {
        opacity: 0;
        transform: translateX(26px);
        filter: blur(6px);
        transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    }

    .menuToggle:checked~#navLinks li {
        opacity: 1;
        transform: none;
        filter: blur(0);
        transition: opacity 0.6s ease, transform 0.7s var(--ease-out), filter 0.6s ease;
    }

    .menuToggle:checked~#navLinks li:nth-child(1) { transition-delay: 0.14s; }
    .menuToggle:checked~#navLinks li:nth-child(2) { transition-delay: 0.20s; }
    .menuToggle:checked~#navLinks li:nth-child(3) { transition-delay: 0.26s; }
    .menuToggle:checked~#navLinks li:nth-child(4) { transition-delay: 0.32s; }
    .menuToggle:checked~#navLinks li:nth-child(5) { transition-delay: 0.38s; }
    .menuToggle:checked~#navLinks li:nth-child(6) { transition-delay: 0.44s; }
    .menuToggle:checked~#navLinks li:nth-child(7) { transition-delay: 0.50s; }

    /* page behind: dimmed by a scrim and softly blurred; scrolling locked */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 90;
        background: var(--scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    body>:not(#nav):not(script):not(.pageVeil) {
        transition: filter 0.5s ease;
    }

    body:has(.menuToggle:checked) {
        overflow: hidden;
    }

    body:has(.menuToggle:checked)::after {
        opacity: 1;
        pointer-events: auto;
    }

    body:has(.menuToggle:checked)>:not(#nav):not(script):not(.pageVeil) {
        filter: blur(5px);
    }

    .hamburger {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 8px 0;
        cursor: pointer;
        z-index: 200;
    }

    .hamburger span {
        width: 24px;
        height: 2px;
        background: var(--label);
        transform-origin: center;
        transition: transform var(--spring-dur) var(--spring), opacity 0.25s ease, background 0.3s ease;
    }

    .menuToggle:checked~.hamburger span {
        background: var(--accent);
    }

    .menuToggle:checked~.hamburger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menuToggle:checked~.hamburger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .menuToggle:checked~.hamburger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    #hero {
        padding-top: 148px;
    }

    .revRow {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (min-width: 641px) {
    .hamburger {
        display: none;
    }
}

/* ---------------- Page transitions ----------------
   Cross-document View Transitions: every page that loads this file
   cross-fades to the next one instead of hard-cutting, so the theme swap
   (e.g. graphite -> neon green on BCKUP//ENRGY) blends in. Browsers without
   support navigate normally; script.js adds a fade-to-dark fallback for them. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* Keep the nav pinned in place during the transition; only its colors blend. */
#nav {
    view-transition-name: siteNav;
}

::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation: vtOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
    animation: vtIn 0.9s var(--ease-out) 0.12s both;
}

/* Shared logo morph. Only timing is set here: the browser's built-in group
   animation (which moves/resizes the logo from the card to the hero) must
   keep its own keyframes, so never replace it with `animation: ...`. */
::view-transition-group(bckupLogo),
::view-transition-old(bckupLogo),
::view-transition-new(bckupLogo) {
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(.19,0,0,1);
    animation-delay: 0.12s;
}

@keyframes vtOut {
    to {
        opacity: 0;
        filter: blur(6px);
        transform: scale(0.98);
    }
}

@keyframes vtIn {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: scale(1.02);
    }
}

/* Fallback veil (see script.js) */
.pageVeil {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg-deep);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.pageVeil.active {
    opacity: 1;
    pointer-events: all;
}