/* =============================================================================
   PlanetSquires Software — styles.css
   Hand-written CSS. No framework, no preprocessor, no build step.

   Layers, in cascade order:
     reset      normalisation
     tokens     design system custom properties (dark + light)
     base       element defaults, typography
     utils      small reusable helpers
     components buttons, cards, code blocks, nav, terminal…
     sections   per-section layout
     motion     animation + prefers-reduced-motion overrides
============================================================================= */
@layer reset, tokens, base, utils, components, sections, motion;

/* ─────────────────────────────────────────────────────────── reset ────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

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

  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }

  /* All lists here are navigational or decorative — none wants a marker, and
     several are flex/grid rows where a marker renders in a nonsense position.
     Matching bare `ul`/`ol` too: the nav and footer lists carry no class, and
     an [class]-only reset left their bullets behind. :where() keeps this at
     zero specificity so a future prose list can opt markers back in. */
  :where(ul, ol) { list-style: none; padding: 0; }

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

  :where(h1, h2, h3, h4) { font-weight: 600; line-height: 1.12; }
}

/* ────────────────────────────────────────────────────────── tokens ────── */
@layer tokens {
  :root {
    /* — palette: dark (default) — */
    --bg:            #0A0C10;
    --bg-alt:        #0C0F15;
    --surface:       #10141B;
    --surface-2:     #141922;
    --elev:          #161C26;
    --border:        #1F2530;
    --border-strong: #2A3241;

    --text:          #E8EDF4;
    --text-2:        #B4BECC;
    /* 7.58:1 on --bg and 7.43:1 on --bg-alt — measured, clears AAA on both */
    --muted:         #98A2B1;

    --accent:        #4C8DFF;
    --accent-2:      #22D3EE;
    --accent-soft:   rgba(76, 141, 255, .12);
    --accent-line:   rgba(76, 141, 255, .32);
    --glow:          rgba(76, 141, 255, .40);

    --grad:          linear-gradient(115deg, var(--accent), var(--accent-2));
    --grad-text:     linear-gradient(105deg, #EAF1FF 10%, #9FC3FF 48%, #6FE6FF 96%);

    /* — syntax tokens — */
    --tk-kw:  #7EA6FF;
    --tk-str: #86D98F;
    --tk-num: #E5B478;
    --tk-com: #67717F;
    --tk-fn:  #22D3EE;
    --tk-typ: #C3A6FF;
    --tk-pp:  #FF9E64;

    /* — glass — */
    --glass:      rgba(12, 15, 21, .72);
    --glass-line: rgba(255, 255, 255, .06);

    /* — shadows: large blur, low alpha, never hard — */
    --sh-1: 0 1px 2px rgba(0,0,0,.30);
    --sh-2: 0 8px 26px -10px rgba(0,0,0,.55);
    --sh-3: 0 26px 60px -22px rgba(0,0,0,.70);

    /* — spacing scale (8px base) — */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 2.5rem; --sp-8: 3rem;
    --sp-10: 4rem;  --sp-12: 5rem;  --sp-16: 7rem;

    /* — radii — */
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

    /* — type — */
    --font: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont,
            "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono",
            Consolas, "Liberation Mono", monospace;

    /* — layout — */
    --wrap: 1200px;
    --nav-h: 66px;
    --section-y: clamp(5.5rem, 11vh, 8.5rem);

    /* — motion — */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .16s; --t: .28s; --t-slow: .6s;

    color-scheme: dark;
  }

  /* — palette: light (a designed second theme, not an inversion) — */
  [data-theme="light"] {
    --bg:            #FFFFFF;
    --bg-alt:        #F7F9FC;
    --surface:       #FFFFFF;
    --surface-2:     #F4F7FB;
    --elev:          #FFFFFF;
    --border:        #E1E7EF;
    --border-strong: #C9D3E0;

    --text:          #0B0F16;
    --text-2:        #3C4655;
    /* 7.68:1 on --bg and 7.28:1 on --bg-alt — measured, clears AAA on both */
    --muted:         #4A5462;

    --accent:        #0B5FFF;
    --accent-2:      #0891B2;
    --accent-soft:   rgba(11, 95, 255, .08);
    --accent-line:   rgba(11, 95, 255, .22);
    --glow:          rgba(11, 95, 255, .20);

    --grad-text:     linear-gradient(105deg, #0B0F16 8%, #0B5FFF 55%, #0891B2 98%);

    --tk-kw:  #2F5FD8;
    --tk-str: #2E7D4F;
    --tk-num: #A85A16;
    --tk-com: #7A8494;
    --tk-fn:  #0E7490;
    --tk-typ: #7038B8;
    --tk-pp:  #B5471C;

    --glass:      rgba(255, 255, 255, .78);
    --glass-line: rgba(11, 15, 22, .07);

    --sh-1: 0 1px 2px rgba(16, 24, 40, .06);
    --sh-2: 0 8px 26px -12px rgba(16, 24, 40, .18);
    --sh-3: 0 26px 60px -24px rgba(16, 24, 40, .24);

    color-scheme: light;
  }
}

/* ──────────────────────────────────────────────────────────── base ────── */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: clamp(.975rem, .35vw + .9rem, 1.0625rem);
    line-height: 1.65;
    letter-spacing: -.005em;
    overflow-x: hidden;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
  }

  body.is-locked { overflow: hidden; }

  p { color: var(--text-2); }
  strong { color: var(--text); font-weight: 600; }

  a { transition: color var(--t-fast) var(--ease); }
  main a:not([class]) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-underline-offset: 3px;
  }
  main a:not([class]):hover { text-decoration-color: currentColor; }

  code { font-family: var(--mono); font-size: .875em; }
  p code, li code {
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: .1em .38em;
    color: var(--text);
  }

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

  ::selection { background: var(--accent); color: #fff; }

  /* Slim, unobtrusive scrollbar — matches the theme both ways. */
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: var(--r-pill);
    border: 3px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
}

/* ─────────────────────────────────────────────────────────── utils ────── */
@layer utils {
  .container {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 4vw, 2.5rem);
  }

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  .skip-link {
    position: absolute; top: -100px; left: 1rem; z-index: 200;
    background: var(--accent); color: #fff;
    padding: .7rem 1.1rem; border-radius: var(--r-md);
    font-weight: 600; transition: top var(--t) var(--ease);
  }
  .skip-link:focus { top: 1rem; }

  .eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: .38rem .9rem .38rem .7rem;
  }
  .eyebrow__pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 0 0 var(--glow);
    animation: pulse 2.6s var(--ease) infinite;
  }

  .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
  .chips li {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .01em;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: .22rem .5rem;
  }

  .link-arrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--mono); font-size: .8125rem; font-weight: 500;
    color: var(--accent);
  }
  .link-arrow span { transition: transform var(--t) var(--ease); }
  a:hover .link-arrow span, .link-arrow:hover span { transform: translateX(4px); }
}

/* ────────────────────────────────────────────────────── components ────── */
@layer components {

  /* ── buttons ─────────────────────────────────────────────────────── */
  .btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .8rem 1.4rem;
    border-radius: var(--r-md);
    font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
    border: 1px solid transparent;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
                background-color var(--t) var(--ease), border-color var(--t) var(--ease);
    will-change: transform;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  .btn--primary {
    background: var(--grad); color: #fff;
    box-shadow: 0 6px 20px -8px var(--glow);
  }
  .btn--primary:hover { box-shadow: 0 14px 32px -10px var(--glow); }

  .btn--ghost {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
  }
  .btn--ghost:hover { border-color: var(--accent); background: var(--surface-2); }

  /* Third tier: borderless until hovered, so three CTAs still read as a
     hierarchy rather than as a toolbar. */
  .btn--quiet {
    background: transparent;
    color: var(--muted);
    padding-inline: 1.1rem;
  }
  .btn--quiet:hover { color: var(--text); background: var(--surface); border-color: var(--border); }
  .btn--quiet svg { color: var(--accent-2); }

  /* ripple, injected by app.js */
  .ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    transform: scale(0); opacity: .45;
    background: currentColor;
    animation: ripple .6s var(--ease-out) forwards;
  }
  .btn--primary .ripple { background: #fff; }

  /* ── icon buttons ────────────────────────────────────────────────── */
  .icon-btn {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    color: var(--text-2);
    border: 1px solid transparent;
    transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
  }
  .icon-btn:hover {
    color: var(--text); background: var(--surface-2); border-color: var(--border);
  }

  .theme-toggle__moon { display: none; }
  [data-theme="light"] .theme-toggle__sun  { display: none; }
  [data-theme="light"] .theme-toggle__moon { display: block; }

  /* ── cards ───────────────────────────────────────────────────────── */
  .card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
  }
  /* one hairline gradient rule across the top — the only decorative flourish */
  .card::before {
    content: ""; position: absolute; inset: -1px -1px auto;
    height: 1px; border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--grad);
    opacity: 0; transition: opacity var(--t) var(--ease);
  }
  .card:hover::before { opacity: .8; }
  .card--link:hover, .project:hover, .lang:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-3);
    border-color: var(--border-strong);
  }

  /* ── navigation ──────────────────────────────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .nav.is-stuck {
    border-bottom-color: var(--glass-line);
    box-shadow: var(--sh-2);
  }
  .nav__inner {
    height: var(--nav-h);
    display: flex; align-items: center; gap: var(--sp-5);
  }

  .nav__progress {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    background: var(--grad);
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
    will-change: transform;
  }

  /* brand + animated logo */
  .brand { display: inline-flex; align-items: center; gap: .6rem; }
  .brand__mark { width: 30px; height: 30px; display: block; }
  .brand__mark svg { width: 100%; height: 100%; overflow: visible; }
  .brand__bracket {
    fill: none; stroke: var(--accent); stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .45s var(--ease-out), stroke var(--t) var(--ease);
  }
  .brand__bracket--r { stroke: var(--accent-2); }
  .brand__dot {
    fill: var(--accent-2);
    transform-origin: 16px 16px;
    animation: dot 3.4s var(--ease) infinite;
  }
  .brand:hover .brand__bracket--l { transform: translateX(-2px); }
  .brand:hover .brand__bracket--r { transform: translateX(2px); }

  .brand__text {
    font-weight: 650; font-size: .975rem; letter-spacing: -.02em;
    color: var(--text); white-space: nowrap;
  }
  .brand__text-dim { color: var(--muted); font-weight: 500; margin-left: .3em; }

  .nav__links { margin-left: auto; }
  .nav__links ul { display: flex; align-items: center; gap: .15rem; }
  .nav__links a {
    position: relative;
    display: block; padding: .5rem .8rem;
    font-size: .9rem; font-weight: 500;
    color: var(--muted);
    border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease);
  }
  .nav__links a::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .18rem;
    height: 1.5px; border-radius: 2px; background: var(--grad);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--t) var(--ease);
  }
  .nav__links a:hover { color: var(--text); }
  .nav__links a.is-active { color: var(--text); }
  .nav__links a.is-active::after { transform: scaleX(1); }

  .nav__actions { display: flex; align-items: center; gap: .25rem; }

  /* hamburger */
  .hamburger {
    display: none; width: 38px; height: 38px;
    border-radius: var(--r-md);
    padding: 0 9px;
    flex-direction: column; justify-content: center; gap: 5px;
  }
  .hamburger span {
    display: block; height: 1.8px; width: 100%;
    background: var(--text); border-radius: 2px;
    transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
  }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

  /* ── terminal illustration ───────────────────────────────────────── */
  .terminal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .terminal__bar {
    display: flex; align-items: center; gap: .8rem;
    padding: .68rem .9rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }
  .terminal__dots { display: flex; gap: .38rem; }
  .terminal__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
  .terminal__dots i:first-child { background: var(--accent); opacity: .8; }
  .terminal__dots i:nth-child(2) { background: var(--accent-2); opacity: .6; }
  .terminal__title {
    font-family: var(--mono); font-size: .76rem; color: var(--muted);
  }
  .terminal__body {
    padding: 1.1rem 1.15rem 1.3rem;
    font-family: var(--mono);
    font-size: clamp(.72rem, .55vw + .55rem, .82rem);
    line-height: 1.95;
  }
  /* The resting state is FULLY TYPED. The animation supplies width:0 through
     `backwards` fill during its delay, so the stagger still reads as typing —
     but if animations never run (disabled, paused renderer, print), the lines
     are simply there rather than an empty box. */
  .tl {
    color: var(--text);
    white-space: nowrap; overflow: hidden;
    width: 100%;
    animation: type .5s steps(var(--ch, 30), end) var(--d, 0s) backwards;
  }
  .tl--dim { color: var(--muted); }
  .tl--ok  { color: var(--tk-str); }
  .prompt  { color: var(--accent-2); }
  .blink   { color: var(--accent-2); animation: blink 1.05s steps(1) infinite; }

  /* CSS-only loading dots inside the build line */
  .dots i { opacity: 0; animation: dots 1.4s var(--ease) infinite; }
  .dots i:nth-child(2) { animation-delay: .18s; }
  .dots i:nth-child(3) { animation-delay: .36s; }

  /* ── code blocks (CSS-only syntax highlighting) ──────────────────── */
  .code {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .code__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .8rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono); font-size: .72rem; color: var(--muted);
  }
  .code__lang { color: var(--accent-2); }
  .code pre {
    margin: 0; padding: 1rem 1.1rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: clamp(.7rem, .5vw + .55rem, .795rem);
    line-height: 1.8;
    color: var(--text-2);
    tab-size: 3;
  }
  .tk-kw  { color: var(--tk-kw);  font-weight: 500; }
  .tk-str { color: var(--tk-str); }
  .tk-num { color: var(--tk-num); }
  .tk-com { color: var(--tk-com); font-style: italic; }
  .tk-fn  { color: var(--tk-fn); }
  .tk-typ { color: var(--tk-typ); }
  .tk-pp  { color: var(--tk-pp); }

  /* ── scroll-to-top ───────────────────────────────────────────────── */
  .to-top {
    position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
    z-index: 90;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: var(--sh-2);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
                visibility var(--t), border-color var(--t) var(--ease);
  }
  .to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
  .to-top:hover { border-color: var(--accent); color: var(--accent); }
}

/* ──────────────────────────────────────────────────────── sections ────── */
@layer sections {

  .section { padding-block: var(--section-y); }
  .section--alt {
    background: var(--bg-alt);
    border-block: 1px solid var(--border);
  }

  .section__head { max-width: 62ch; margin-bottom: var(--sp-8); }
  .section__kicker {
    font-family: var(--mono); font-size: .78rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent-2);
    margin-bottom: var(--sp-3);
  }
  .section__title {
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    letter-spacing: -.032em;
    text-wrap: balance;
    margin-bottom: var(--sp-4);
  }
  .section__lead { font-size: 1.0625rem; color: var(--muted); text-wrap: pretty; }

  /* ── 1. hero ─────────────────────────────────────────────────────── */
  .hero {
    position: relative; isolation: isolate;
    padding-block: clamp(3.5rem, 9vh, 6.5rem) clamp(4rem, 10vh, 7.5rem);
    overflow: hidden;
  }
  .hero__inner {
    display: grid; gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }

  .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .5;
    will-change: transform;
  }
  .orb--1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
            top: -14%; left: -10%; background: radial-gradient(circle, var(--accent) 0%, transparent 66%); }
  .orb--2 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
            top: 22%; right: -12%; background: radial-gradient(circle, var(--accent-2) 0%, transparent 68%); opacity: .34; }
  .orb--3 { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
            bottom: -22%; left: 34%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: .22; }

  .grid-mask {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, var(--border) 1px, transparent 1px),
      linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 34%, #000 12%, transparent 76%);
    mask-image: radial-gradient(ellipse 70% 62% at 50% 34%, #000 12%, transparent 76%);
    opacity: .5;
  }

  /* floating geometry */
  .shape { position: absolute; border: 1px solid var(--accent-line); will-change: transform; }
  .shape--sq {
    width: 74px; height: 74px; border-radius: 14px;
    top: 16%; right: 8%;
    transform: rotate(18deg);
    animation: float 11s var(--ease) infinite;
  }
  .shape--ring {
    width: 120px; height: 120px; border-radius: 50%;
    bottom: 12%; left: 4%;
    animation: float 14s var(--ease) infinite reverse;
  }
  .shape--tri {
    width: 0; height: 0; border: none;
    border-left: 26px solid transparent; border-right: 26px solid transparent;
    border-bottom: 44px solid var(--accent-soft);
    top: 62%; right: 22%;
    animation: float 9s var(--ease) infinite;
  }

  .hero__title {
    font-size: clamp(2.5rem, 6.4vw, 4.4rem);
    letter-spacing: -.042em;
    line-height: 1.03;
    margin-block: var(--sp-5) var(--sp-5);
    text-wrap: balance;
  }
  /* Reserve two lines. The rotating words are not the same length, so without
     this the h1 alternates between one and two lines and shoves everything
     below it up and down on every cycle — measured at 145px vs 218px. Two
     lines is the worst case at every width the type scale produces. */
  .hero__typed { display: block; min-height: 2.06em; }
  #typed {
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .caret {
    display: inline-block; width: .06em; height: .82em;
    margin-left: .06em; vertical-align: -.06em;
    background: var(--accent-2);
    animation: blink 1.05s steps(1) infinite;
  }

  .hero__sub { font-size: clamp(1rem, .5vw + .92rem, 1.125rem); max-width: 60ch; text-wrap: pretty; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: var(--sp-6) var(--sp-6); }

  .hero__meta {
    display: flex; flex-wrap: wrap; gap: .45rem 1.4rem;
    font-family: var(--mono); font-size: .74rem; color: var(--muted);
  }
  .hero__meta li { display: flex; align-items: center; gap: .5rem; }
  .hero__meta li + li::before {
    content: ""; width: 3px; height: 3px; border-radius: 50%;
    background: var(--border-strong); margin-right: .9rem;
  }

  /* ── 2. about ────────────────────────────────────────────────────── */
  .about__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  .about__prose p + p { margin-top: var(--sp-4); }

  .about__pills {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: var(--sp-6);
  }
  .about__pills li {
    font-size: .82rem; color: var(--text-2);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: .38rem .85rem;
    transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
  }
  .about__pills li:hover { border-color: var(--accent); color: var(--text); }

  /* track record — shipped products, one rail, no dates */
  .legacy { margin-top: var(--sp-7); }
  .legacy__title {
    font-size: .78rem; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: var(--sp-4);
  }
  .legacy__list { display: grid; gap: var(--sp-4); }
  .legacy__list li {
    position: relative;
    padding-left: var(--sp-5);
    border-left: 1px solid var(--border);
  }
  .legacy__list li::before {
    content: ""; position: absolute; left: -3.5px; top: .55em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 0 3px var(--bg);
  }
  .legacy__name {
    font-weight: 600; font-size: 1rem; color: var(--text);
    letter-spacing: -.015em;
  }
  .legacy__kind {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--accent-2);
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    border-radius: var(--r-sm); padding: .1rem .4rem;
    margin-left: .5rem; vertical-align: 2px;
  }
  .legacy__list p { font-size: .88rem; margin-top: .3rem; }

  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); align-content: start; }
  .stat { padding: var(--sp-5) var(--sp-4); }
  .stat__num {
    display: block;
    font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 650;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stat__label {
    display: block; margin-top: .35rem;
    font-size: .84rem; font-weight: 500; color: var(--text-2);
  }
  .stat__label span { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); margin-top: .15rem; }

  /* ── 3. projects ─────────────────────────────────────────────────── */
  .projects { display: grid; gap: var(--sp-5); }
  .project { display: flex; flex-direction: column; overflow: hidden; }
  .project__media {
    display: block; background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .project__media img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
  }
  .project:hover .project__media img { transform: scale(1.035); }

  .project__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
  .project__tag {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--accent-2);
  }
  .project__title { font-size: 1.3rem; letter-spacing: -.025em; }
  .project__title a { transition: color var(--t-fast) var(--ease); }
  .project:hover .project__title a { color: var(--accent); }
  .project__desc { font-size: .94rem; }
  .project .chips { margin-top: auto; padding-top: var(--sp-2); }
  .project .link-arrow { margin-top: var(--sp-1); }

  /* The credited card carries its accent hairline permanently rather than on
     hover — the attribution should read as deliberate, not incidental. */
  .project--credited { border-color: var(--accent-line); }
  .project--credited::before { opacity: .85; }

  /* AfxNova attribution byline */
  .byline {
    display: flex; align-items: center; gap: .45rem;
    font-size: .8rem; color: var(--accent-2);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    padding: .4rem .65rem;
    margin-top: -.35rem;
  }
  .byline strong { color: var(--text); }

  /* ── 4. languages ────────────────────────────────────────────────── */
  .langs { display: grid; gap: var(--sp-5); }
  .lang { padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
  .lang__head { display: flex; align-items: center; gap: var(--sp-3); }
  .lang__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: none;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent-2);
  }
  .lang__title { font-size: 1.35rem; letter-spacing: -.028em; }
  .lang__meta { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
  .lang__desc { font-size: .94rem; }

  .lang__points { display: grid; gap: .6rem; }
  .lang__points li {
    position: relative; padding-left: 1.5rem;
    font-size: .9rem; color: var(--text-2);
  }
  .lang__points li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; border-radius: 2px;
    background: var(--grad);
  }

  /* secondary skills — quieter than the two primary language cards */
  .skills { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
  .skill { padding: var(--sp-5); background: transparent; }
  .skill h3 { margin-bottom: .5rem; }
  .skill__mono {
    font-family: var(--mono); font-size: 1rem; font-weight: 600;
    color: var(--text);
  }
  .skill p { font-size: .89rem; }

  /* ── 5. open source ──────────────────────────────────────────────── */
  .os { display: grid; gap: var(--sp-6); }
  .repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .5rem; }
  .repos a {
    display: block;
    font-family: var(--mono); font-size: .8rem;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .6rem .75rem;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .repos a:hover {
    color: var(--accent); border-color: var(--accent-line);
    background: var(--accent-soft); transform: translateY(-2px);
  }

  .licences { display: grid; gap: var(--sp-4); }
  .licence { padding: var(--sp-5); display: flex; flex-direction: column; gap: .7rem; }
  .licence h3 { font-family: var(--mono); font-size: .95rem; letter-spacing: -.01em; color: var(--text); }
  .licence p { font-size: .89rem; }
  .licence--credit { border-color: var(--accent-line); background: var(--accent-soft); }

  /* ── 6. contact ──────────────────────────────────────────────────── */
  .contact { display: grid; gap: var(--sp-4); }
  .contact__card { padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: .7rem; overflow: hidden; }
  .contact__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-bottom: .3rem;
    border-radius: var(--r-md);
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    color: var(--accent-2);
  }
  .contact__card h3 { font-size: 1.1rem; letter-spacing: -.022em; }
  .contact__card p { font-size: .9rem; }
  .contact__card .link-arrow { margin-top: auto; padding-top: .5rem; }
  .contact__note {
    margin-top: var(--sp-6);
    font-size: .9rem; color: var(--muted);
    border-left: 2px solid var(--accent-line);
    padding-left: var(--sp-4);
    max-width: 72ch;
  }

  /* ── 7. footer ───────────────────────────────────────────────────── */
  .footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding-top: var(--sp-10); }
  .footer__inner { display: grid; gap: var(--sp-8); padding-bottom: var(--sp-8); }
  .footer__tag { font-size: .89rem; max-width: 42ch; margin-top: var(--sp-4); }
  .brand--footer .brand__text { font-size: 1.05rem; }

  .footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-5); }
  .footer__nav h2 {
    font-size: .78rem; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: var(--sp-3);
  }
  .footer__nav ul { display: grid; gap: .55rem; }
  .footer__nav a { font-size: .89rem; color: var(--text-2); }
  .footer__nav a:hover { color: var(--accent); }

  .footer__legal {
    border-top: 1px solid var(--border);
    padding-block: var(--sp-5) var(--sp-6);
    display: grid; gap: .5rem;
  }
  .footer__legal p { font-size: .8rem; color: var(--muted); }
  .footer__credit a { color: var(--accent); }
}

/* ─────────────────────────────────────────────────────── responsive ───── */
@media (min-width: 640px) {
  .stats { gap: var(--sp-4); }
  .contact { grid-template-columns: repeat(2, 1fr); }
  .footer__legal { grid-template-columns: 1fr; }
}

@media (min-width: 860px) {
  .projects { grid-template-columns: repeat(2, 1fr); }
  .langs    { grid-template-columns: repeat(2, 1fr); }
  .skills   { grid-template-columns: repeat(2, 1fr); }
  .licences { grid-template-columns: repeat(3, 1fr); }
  .contact  { grid-template-columns: repeat(3, 1fr); }
  .about__grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .footer__inner { grid-template-columns: 1.1fr 1.4fr; }
}

@media (min-width: 1024px) {
  /* Copy column carries three CTAs on one line; the terminal's longest line is
     only ~38 monospace characters, so it gives up the width without clipping. */
  .hero__inner { grid-template-columns: 1.12fr .88fr; }
}

/* — mobile navigation — */
@media (max-width: 899px) {
  .hamburger { display: flex; }

  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-3);
    padding: var(--sp-4) clamp(1.15rem, 4vw, 2.5rem) var(--sp-6);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__links ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__links a { padding: .85rem .25rem; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__links a::after { left: .25rem; right: auto; width: 22px; bottom: .5rem; }
}

/* ────────────────────────────────────────────────────────── motion ────── */
@layer motion {

  /* scroll reveal — one shared IntersectionObserver drives .is-visible */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* stagger children of a revealed grid */
  .projects .reveal:nth-child(2), .contact .reveal:nth-child(2) { transition-delay: .08s; }
  .projects .reveal:nth-child(3), .contact .reveal:nth-child(3) { transition-delay: .16s; }
  .projects .reveal:nth-child(4) { transition-delay: .24s; }
  .langs .reveal:nth-child(2) { transition-delay: .1s; }

  @keyframes enter  { from { opacity: 0; transform: translateY(16px); } }
  @keyframes type   { from { width: 0; } }
  @keyframes blink  { 50% { opacity: 0; } }
  @keyframes dots   { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }
  @keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 var(--glow); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  @keyframes dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(.62); opacity: .55; }
  }

  @keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -22px, 0) rotate(6deg); }
  }

  .shape--sq { animation-name: float; }

  /* Page entrance.
     Deliberately NOT a fade on <body>. Gating the whole document behind a
     transition means any stall — a paused renderer, a failed script — leaves a
     blank page, and it delays LCP for no benefit. Only the hero's own elements
     animate, and they use `backwards` fill on a short delay, so worst case the
     content is simply there. */
  html.js .hero__copy > *,
  html.js .terminal {
    animation: enter .75s var(--ease-out) backwards;
  }
  html.js .hero__copy > *:nth-child(1) { animation-delay: .05s; }
  html.js .hero__copy > *:nth-child(2) { animation-delay: .12s; }
  html.js .hero__copy > *:nth-child(3) { animation-delay: .19s; }
  html.js .hero__copy > *:nth-child(4) { animation-delay: .26s; }
  html.js .hero__copy > *:nth-child(5) { animation-delay: .33s; }
  html.js .terminal                    { animation-delay: .22s; }

  /* ── reduced motion: honour it completely ────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }

    .reveal { opacity: 1; transform: none; }
    .tl { width: 100%; }
    .btn:hover, .card--link:hover, .project:hover, .lang:hover { transform: none; }
    .orb, .shape { animation: none; }
    html.js .hero__copy > *, html.js .terminal { animation: none; }
  }
}