/* ============================================================
   Noah Gallego — shared page system.
   The home page is the source of truth. Everything here exists to
   extend index.css's language across the rest of the site:
   Apple light ground (#fbfbfd), SF/Inter system type, pill buttons,
   glass nav, soft shadows, generous whitespace.
   Used by about, portfolio, contact, experience.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ---- ground + ink: identical values to index.css ---- */
    --bg:         #fbfbfd;
    --surface:    #ffffff;
    --surface-2:  #f5f5f7;
    --ink:        #1d1d1f;
    --soft:       #6e6e73;
    --faint:      #86868b;
    --line:       rgba(0, 0, 0, 0.09);
    --line-2:     rgba(0, 0, 0, 0.16);
    --glass:      rgba(251, 251, 253, 0.72);

    /* ---- accents: one per role, used for that role and nothing else ---- */
    --ch1: #1d7a4c;   /* Apple          — battery state of charge   */
    --ch2: #c0392f;   /* LLNL           — ECG                       */
    --ch3: #a8348f;   /* Beats by Dre   — review polarity           */
    --ch4: #0f7f96;   /* Stanford       — detection confidence      */
    --ch5: #94690a;   /* Capital One    — ledger                    */
    --ch6: #2563a8;   /* CSU Bakersfield— training loss             */
    --ch6-val: #c2410c;
    --ecg-paper: #fdf5f3;
    --ecg-minor: #f5cec8;
    --ecg-major: #e7a49b;
    --accent: #0071e3;          /* Apple's interactive blue, links only */

    /* ---- type: the home page's stack, verbatim ---- */
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --radius:    18px;
    --radius-sm: 12px;
    --radius-lg: 26px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.04);
    --shadow:    0 10px 30px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.05);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.12);

    --maxw:  1080px;
    --nav-h: 86px;
    --ease:  cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

img, video, svg { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
::selection { background: rgba(0, 113, 227, 0.16); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Type ---------- */
.h-display {
    font-size: clamp(2.6rem, 6.4vw, 4.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0;
}

.h-title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0;
}

.h-section {
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.022em;
    margin: 0;
}

.lead {
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    line-height: 1.55;
    color: var(--soft);
    letter-spacing: -0.014em;
}

.muted { color: var(--soft); }

/* Eyebrow: a quiet label, not instrument silkscreen. */
.eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--faint);
    margin: 0 0 0.9rem;
}

/* Readout: for genuinely technical values (units, axes, parameters) only. */
.readout {
    display: inline-block;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    letter-spacing: 0;
    color: var(--soft);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 5px 12px;
}

.tick { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }
.trailer { font-size: 0.85rem; color: var(--faint); }

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
}

main { position: relative; z-index: 1; }

/* ---------- Page entry ----------
   The ready class is added by the shared effects script, rather than hiding
   content in the base stylesheet. This keeps the complete page visible when
   JavaScript is unavailable, while leaving the fixed nav and background
   effects steady as the page settles in. */
html.js.page-entry-ready body > main,
html.js.page-entry-ready #hero {
    animation: pageEntry .72s var(--ease) both;
    transform-origin: 50% 0;
}

@keyframes pageEntry {
    from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(7px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    html.js.page-entry-ready body > main,
    html.js.page-entry-ready #hero {
        animation: none;
    }
}

html.js.page-leaving body > main,
html.js.page-leaving #hero {
    animation: pageExit .18s ease-in both;
}

@keyframes pageExit {
    to { opacity: 0; transform: translate3d(0, -5px, 0); filter: blur(3px); }
}

@media (prefers-reduced-motion: reduce) {
    html.js.page-leaving body > main,
    html.js.page-leaving #hero {
        animation: none;
    }
}

.section { position: relative; padding-block: clamp(56px, 8vw, 104px); }
.section--soft { background: var(--surface-2); }
.section--tight { padding-block: clamp(40px, 5vw, 68px); }

.page-hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(52px, 8vw, 100px));
    padding-bottom: clamp(44px, 6vw, 78px);
}

/* ---------- Nav: dark graphite glass pill ----------
   Always a dark glass pill over the light page (Apple developer-style).
   Wide at the top of the page, then on scroll it shrinks into a compact
   pill hugging the content — the CTA rides the right edge inward.
   left/right are animated (not width) so margin:auto keeps it centered
   at every viewport width with zero calc() tricks. */
.site-nav {
    position: fixed;
    top: 16px;
    left: 2.5vw;
    right: 2.5vw;
    margin-inline: auto;
    max-width: none;
    height: 78px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 6px 24px;
    box-sizing: border-box;
    background: rgba(23, 23, 26, 0.66);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1000px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    /* Spring: slow (~0.7s) with a small overshoot so the pill collapses
       past its final size and bounces back before settling. */
    --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
    transition: left .7s var(--spring), right .7s var(--spring),
                height .7s var(--spring), padding .7s var(--spring),
                background-color .5s var(--ease), box-shadow .5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .site-nav { transition: background-color .2s ease, box-shadow .2s ease; }
}

.site-nav.nav--scrolled {
    left: calc(50vw - 480px);
    right: calc(50vw - 480px);
    height: 64px;
    padding: 4px 28px 4px 32px;
    justify-content: space-between;
    background: rgba(23, 23, 26, 0.82);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
}

/* Even spacing: brand + every link treated as equal slots across the pill. */
.site-nav.nav--scrolled .site-nav__links {
    flex: 1;
    justify-content: space-evenly;
    margin-left: 20px;
}

@media (max-width: 1020px) {
    .site-nav.nav--scrolled {
        left: 2.5vw;
        right: 2.5vw;
    }
}

.site-nav__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: #f5f5f7;
    white-space: nowrap;
}

/* Brand lockup v4: folded N monogram + clean text "Noah Gallego" with a
   per-letter SVG stroke-draw + fill reveal on load. Color via currentColor
   (dynamic). On scroll the wordmark fades/slides out, leaving the monogram. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f5f5f7; /* light ink on the dark glass nav */
}

.brand__mark {
    height: 2rem;
    width: auto;
    flex: none;
    transition: transform .6s var(--spring, cubic-bezier(0.34, 1.45, 0.64, 1));
}

.brand__word {
    height: 2.22rem;
    width: auto;
    flex: none;
    display: block;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .45s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1),
                max-width .55s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 360px;
    overflow: hidden;
}

.site-nav__brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }

/* Scroll: wordmark collapses away; monogram stays. */
.nav--scrolled .brand__word {
    opacity: 0;
    transform: translateX(-8px);
    max-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .brand__mark, .brand__word { transition: none; }
    .nav--scrolled .brand__word { display: none; }
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Sliding active/hover blob behind the links — JS moves it via
   --pill-x / --pill-w. Hidden until positioned (no-js or pre-measure).
   The blob squashes & stretches: it overshoots into position with a
   strong spring, and while gliding JS briefly scales/skews it along
   the direction of travel so it feels liquid, not mechanical. */
.site-nav__pill {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--pill-w, 0px);
    height: calc(100% - 6px);
    border-radius: 999px;
    background: linear-gradient(120deg, #0a84ff 0%, #0071e3 45%, #5e5ce6 100%);
    box-shadow: 0 2px 12px rgba(10, 132, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translate(var(--pill-x, 0px), -50%) scaleX(var(--pill-sx, 1)) skewX(var(--pill-skew, 0deg));
    opacity: 0;
    transition: transform .65s var(--spring), width .65s var(--spring), opacity .25s ease;
    pointer-events: none;
    z-index: 0;
    will-change: transform, width;
}

.site-nav__pill.is-visible { opacity: 1; }

.site-nav__links li { position: relative; z-index: 1; }

.site-nav__links a {
    display: block;
    color: rgba(235, 235, 240, 0.88);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    transition: color .2s ease;
}

.site-nav__links a:hover { color: #fff; }
.site-nav__links a[aria-current="page"] { color: #fff; }

/* The checkbox must stay reachable by keyboard: `hidden` or display:none at
   mobile width drops it from the tab order and locks keyboard users out. */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

@media (max-width: 760px) {
    /* Mobile: same pill, slightly tighter. The pill itself grows into ONE
       continuous rounded container when the menu opens — links live inside
       it, not in a separate card below. */
    .site-nav,
    .site-nav.nav--scrolled {
        top: 12px;
        left: 12px;
        right: 12px;
        height: auto;
        min-height: 52px;
        padding: 4px 6px 4px 16px;
        flex-wrap: wrap;
        align-content: flex-start;
        border-radius: 999px;
        transition: left .7s var(--spring), right .7s var(--spring),
                    padding .7s var(--spring), border-radius .45s var(--spring),
                    background-color .5s var(--ease), box-shadow .5s var(--ease);
    }

    /* When expanded, the pill morphs into a soft rounded rect so the links
       sit inside one continuous shape — still soft, but less egg-like when
       it's tall. */
    .site-nav:has(.nav-toggle:checked),
    .site-nav.nav--scrolled:has(.nav-toggle:checked) {
        border-radius: 26px;
    }

    .nav-toggle-label {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 8px;
        margin: 0 0 0 auto;
        position: relative;
        z-index: 2;
    }

    /* Keep the menu control in a fixed right-side slot while the wordmark
       collapses on scroll. Without this, space-between redistributes the
       free space whenever .brand__word disappears. */
    .site-nav__brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-toggle {
        display: block;
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .nav-toggle:focus-visible ~ .nav-toggle-label {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 6px;
    }

    .nav-toggle-label span {
        width: 22px;
        height: 2px;
        background: #f5f5f7;
        border-radius: 2px;
        transition: transform .25s var(--ease), opacity .2s var(--ease);
    }

    /* Links flow INSIDE the pill on a new row. Collapsed: max-height 0 so
       the pill stays a compact pill. Expanded: grows smoothly with a spring
       so the whole nav morphs into a single rounded blob. */
    .site-nav__links {
        flex: 0 0 100%;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: max-height .5s var(--spring),
                    opacity .3s var(--ease),
                    transform .45s var(--spring),
                    padding .45s var(--spring);
    }

    .site-nav.nav--scrolled .site-nav__links {
        flex: 0 0 100%;
        margin-left: 0;
    }

    .nav-toggle:checked ~ .site-nav__links {
        max-height: 480px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        padding: 8px 4px 10px;
    }

    /* Solid dark pill — no translucent white card. Links sit on the pill's
       own dark glass, so the whole thing reads as one continuous surface. */
    .site-nav__links a {
        display: block;
        padding: 12px 16px;
        font-size: 1.05rem;
        color: rgba(235, 235, 240, 0.92);
        border-radius: 14px;
        transition: background-color .2s var(--ease), color .2s var(--ease);
    }

    .site-nav__links a:hover,
    .site-nav__links a:active {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .site-nav__links a[aria-current="page"] {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    /* The sliding desktop blob doesn't belong on mobile — it would be
       positioned off the column layout. Hide it. */
    .site-nav__pill { display: none; }

    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Buttons: the home page pills ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn--primary { background-color: var(--ink); color: #fff; }
.btn--primary:hover { background-color: #000; color: #fff; transform: translateY(-1px); }
.btn--ghost { background-color: rgba(255, 255, 255, .6); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background-color: #fff; border-color: rgba(0, 0, 0, .34); color: #000; transform: translateY(-1px); }
.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.btn__arrow { transition: transform .18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn.magnetic-active { transition: transform .12s ease; }

/* ---------- Cards: soft, rounded, lightly shadowed ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---------- Widgets (Apple / macOS dashboard feel) ---------- */
.widget {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    /* subtle top highlight */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), var(--shadow-sm);
}

.widget:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), var(--shadow); }
.widget__body { padding: 24px 26px; }
.widget__title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.widget__text { color: var(--soft); line-height: 1.55; margin: 0; }
.widget__text + .widget__text { margin-top: 0.7rem; }
.widget__media {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
}
.widget__media img,
.widget__media video { width: 100%; height: 100%; object-fit: cover; }
.widget__footer { padding: 18px 24px 20px; border-top: 1px solid var(--line); }

.widget--soft { background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,.04); }
.widget--soft:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 30px rgba(0,0,0,.06); }
.widget--glass { background: var(--glass); }
.widget--accent { background: var(--ink); color: #fff; border-color: rgba(255,255,255,0.06); }
.widget--accent .widget__text { color: rgba(255,255,255,0.78); }
.widget--accent .widget__title { color: #fff; }
.widget--tint { background: color-mix(in srgb, var(--tint, var(--ch1)) 7%, var(--surface)); border-color: color-mix(in srgb, var(--tint, var(--ch1)) 15%, var(--line)); }

.widget-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---------- Cursor glow ---------- */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    margin-left: -260px;
    margin-top: -260px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 90;
    background: radial-gradient(circle, rgba(29, 29, 31, 0.06) 0%, rgba(29, 29, 31, 0) 70%);
    opacity: 0;
    transform: translate3d(calc(var(--x, -9999) * 1px), calc(var(--y, -9999) * 1px), 0);
    transition: opacity 0.3s ease;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .cursor-glow { display: none; }
}

/* ---------- Fluid canvas on non-home pages ---------- */
#fluid-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.18;
}

.bento-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}
.bento-grid .widget { height: 100%; }
.bento-grid--3 { grid-template-columns: repeat(3, 1fr); }

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

.pill {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--soft);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 5px 12px;
}

/* ---------- Org labels: a soft tinted chip, not an instrument block ---------- */
.ch-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--soft);
}

.ch-label__id {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--chip, var(--ink));
    background: color-mix(in srgb, var(--chip, var(--ink)) 12%, transparent);
}

.ch-label--ch1 { --chip: var(--ch1); }
.ch-label--ch2 { --chip: var(--ch2); }
.ch-label--ch3 { --chip: var(--ch3); }
.ch-label--ch4 { --chip: var(--ch4); }
.ch-label--ch5 { --chip: var(--ch5); }
.ch-label--ch6 { --chip: var(--ch6); }

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-block: 40px;
    color: var(--faint);
    font-size: 0.9rem;
}

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

.site-footer a { color: var(--soft); }
.site-footer a:hover { color: var(--ink); }
.social-row { display: flex; gap: 18px; font-size: 1.2rem; }
.social-row a { color: var(--soft); transition: color .2s var(--ease), transform .2s var(--ease); }
.social-row a:hover { color: var(--ink); transform: translateY(-2px); }

/* ---------- Reveal ----------
   Gated on `.js`: without the gate a JS-disabled visitor, or a print job
   (which never fires IntersectionObserver), gets a blank page below the fold. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: none; }

.stagger,
[data-stagger] {
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js .stagger,
.js [data-stagger] {
    opacity: 0;
    transform: translateY(20px);
    transition-delay: calc(var(--i, 0) * 80ms);
}

.reveal.in .stagger,
.reveal.in [data-stagger] { opacity: 1; transform: none; }

.js .reveal.in .stagger,
.js .reveal.in [data-stagger] { opacity: 1; transform: none; }

.fa-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    display: inline-block;
    flex-shrink: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 12px 22px;
}

.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Next page CTA ---------- */
.page-next { padding-bottom: clamp(48px, 7vw, 88px); }
.page-next__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.page-next__label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--faint);
}
.page-next__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 2.25rem;
    background-color: var(--ink);
    color: #fff;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 550;
    letter-spacing: -0.02em;
    transition: transform .15s ease, background-color .2s ease;
}
.page-next__link:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-2px);
}
.page-next__link:active { transform: scale(0.98); }
.page-next__title {
    display: inline-flex;
    align-items: center;
}
.page-next__arrow {
    font-weight: 400;
    transition: transform .18s var(--ease);
}
.page-next__link:hover .page-next__arrow { transform: translateX(4px); }

/* Images are content, not draggable artifacts */
img {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   Mobile perf overrides — kill expensive animations on coarse pointers.
   ============================================================ */
@media (pointer: coarse) {
    .site-nav__pill,
    .cursor-glow,
    .btn,
    .card,
    .widget,
    .social-row a,
    .page-next__link,
    .reveal,
    .reveal [data-stagger] {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .card:hover,
    .widget:hover,
    .btn:hover {
        transform: none !important;
        box-shadow: var(--shadow-sm) !important;
    }
    .site-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(251, 251, 253, 0.92) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    }
    /* The perf override above swaps the dark glass pill for a light one.
       The hamburger and mobile links are near-white by default (designed
       for the dark pill), so they must flip to dark ink here or they
       render white-on-white. */
    .nav-toggle-label span {
        background: #1d1d1f !important;
    }
    .site-nav__links a {
        color: rgba(29, 29, 31, 0.88) !important;
    }
    .site-nav__links a:hover,
    .site-nav__links a:active {
        background: rgba(0, 0, 0, 0.05) !important;
        color: #1d1d1f !important;
    }
    .site-nav__links a[aria-current="page"] {
        background: rgba(0, 0, 0, 0.06) !important;
        color: #1d1d1f !important;
    }
    /* Brand monogram + wordmark use currentColor, but .brand-lockup and
       .site-nav__brand carry their own explicit near-white color (for the
       dark pill) which overrides inheritance. Flip every level to dark ink
       so the logo isn't invisible on the light pill. */
    .site-nav__brand,
    .brand-lockup,
    .brand__mark,
    .brand__word {
        color: #1d1d1f !important;
    }
}