:root {
    /* Light (default) */
    --bg: #f5f1ea;
    --bg-2: #ece6dc;
    --ink: #1a1814;
    --ink-2: #46423b;
    --ink-3: #7a7468;
    --rule: #d9d2c4;
    --rule-2: #c4bcab;
    --card: #fbf8f2;
    --accent: oklch(62% 0.16 45);          /* warm terracotta */
    --accent-ink: #1a1814;
    --pop: oklch(58% 0.18 240);            /* electric arcade blue */
    --pop-2: oklch(64% 0.18 350);          /* hot pink wink */
    --coin: oklch(78% 0.16 85);            /* coin yellow */
    --shadow: 0 1px 0 rgba(26,24,20,0.04), 0 8px 24px -12px rgba(26,24,20,0.12);

    --f-display: 'Instrument Serif', 'Times New Roman', serif;
    --f-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --f-pixel: 'Press Start 2P', 'JetBrains Mono', monospace;

    --pad: clamp(20px, 4vw, 56px);
    --maxw: 1240px;
    --section-y: clamp(80px, 10vw, 160px);
  }
  [data-theme="dark"] {
    --bg: #14130f;
    --bg-2: #1c1a15;
    --ink: #efeae0;
    --ink-2: #b8b1a2;
    --ink-3: #7c7666;
    --rule: #2b2822;
    --rule-2: #3a362d;
    --card: #1a1814;
    --accent: oklch(70% 0.16 45);
    --accent-ink: #14130f;
    --pop: oklch(68% 0.17 240);
    --pop-2: oklch(72% 0.18 350);
    --coin: oklch(82% 0.16 85);
    --shadow: 0 1px 0 rgba(0,0,0,0.4), 0 12px 32px -12px rgba(0,0,0,0.6);
  }
  /* ===== Dark mode toggle ===== */
  .theme-switch {
    display: inline-flex; align-items: center;
    margin-left: 10px; padding: 3px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 6px;
    cursor: pointer; position: relative;
    font-family: var(--f-pixel);
    transition: border-color .15s ease;
  }
  .theme-switch:hover { border-color: var(--ink); }
  .theme-switch .ts-cell {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 18px;
    color: var(--ink-3);
    transition: color .18s ease;
  }
  .theme-switch .ts-slider {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 18px;
    background: var(--ink);
    border-radius: 3px; z-index: 0;
    transition: transform .22s cubic-bezier(.6,.05,.3,1.05);
  }
  [data-theme="dark"] .theme-switch .ts-slider { transform: translateX(22px); }
  [data-theme="light"] .theme-switch .ts-sun,
  [data-theme="dark"]  .theme-switch .ts-moon { color: var(--bg); }

  .px-sun, .px-moon {
    display: inline-block; width: 2px; height: 2px;
    background: currentColor; image-rendering: pixelated;
  }
  .px-sun {
    box-shadow:
      0 0 0 currentColor, 2px 0 0 currentColor, 0 2px 0 currentColor, 2px 2px 0 currentColor,
      -2px 0 0 currentColor, -2px 2px 0 currentColor, 4px 0 0 currentColor, 4px 2px 0 currentColor,
      0 -2px 0 currentColor, 2px -2px 0 currentColor, 0 4px 0 currentColor, 2px 4px 0 currentColor,
      0 -5px 0 currentColor, 2px -5px 0 currentColor, 0 7px 0 currentColor, 2px 7px 0 currentColor,
      -5px 0 0 currentColor, -5px 2px 0 currentColor, 7px 0 0 currentColor, 7px 2px 0 currentColor;
  }
  .px-moon {
    box-shadow:
      0 -3px 0 currentColor, 2px -3px 0 currentColor,
      -2px -1px 0 currentColor, -2px 1px 0 currentColor, -2px 3px 0 currentColor,
      0 5px 0 currentColor, 2px 5px 0 currentColor,
      0 0 0 currentColor, 0 2px 0 currentColor;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
    /*overflow-x: hidden;*/
  }
  ::selection { background: var(--accent); color: var(--accent-ink); }

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

  .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
  }

  /* ============ NAV ============ */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--rule);
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .brand-mark {
    display: inline-block;
    width: 28px;
    height: 28px;
    position: relative;
    background: var(--ink);
    clip-path: polygon(
      0 0, 100% 0, 100% 18%,
      30% 18%, 30% 42%, 78% 42%, 78% 58%,
      30% 58%, 30% 82%, 100% 82%, 100% 100%,
      0 100%
    );
    image-rendering: pixelated;
  }
  .brand-mark::after {
    content: "";
    position: absolute;
    inset: -3px -3px auto auto;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 1px;
  }
  .brand-name { font-weight: 500; }
  .brand-slash { color: var(--ink-3); }
  .brand-where { color: var(--ink-2); }

  /* ============ PIXEL UTILITIES (hybrid accents) ============ */
  .pixel { font-family: var(--f-pixel); letter-spacing: 0.04em; }
  .pixel-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-pixel);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 3px;
  }
  .pixel-tag.pop { background: var(--pop); color: #fff; }
  .pixel-tag.coin { background: var(--coin); color: var(--ink); }
  .pixel-tag.ghost {
    background: transparent;
    color: var(--ink-2);
    border: 1.5px solid var(--ink);
  }
  .pop-shadow {
    box-shadow:
      4px 4px 0 0 var(--ink),
      8px 8px 0 0 var(--accent);
  }
  .pop-shadow-blue {
    box-shadow:
      4px 4px 0 0 var(--ink),
      8px 8px 0 0 var(--pop);
  }
  .coin-sprite {
    display: inline-block;
    width: 12px; height: 12px;
    background: var(--coin);
    box-shadow:
      -3px 0 0 var(--coin), 3px 0 0 var(--coin),
      0 -3px 0 var(--coin), 0 3px 0 var(--coin);
    animation: coin-spin 1.6s steps(4) infinite;
  }
  @keyframes coin-spin {
    0%   { transform: scaleX(1); }
    25%  { transform: scaleX(0.5); }
    50%  { transform: scaleX(0.1); }
    75%  { transform: scaleX(0.5); }
    100% { transform: scaleX(1); }
  }
  .score-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-family: var(--f-pixel);
    font-size: 9px;
    color: var(--ink-2);
    letter-spacing: 0.08em;
  }
  .score-strip .sep { color: var(--rule-2); }
  .score-strip .v { color: var(--ink); }
  .score-strip .a { color: var(--accent); }
  .score-strip .b { color: var(--pop); }
  .crt-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      rgba(0, 0, 0, 0.12) 2px 3px
    );
    pointer-events: none;
    z-index: 2;
  }
  .hud {
    position: absolute;
    z-index: 3;
    font-family: var(--f-pixel);
    font-size: 9px;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    letter-spacing: 0.08em;
  }
  .hud.tl { top: 14px; left: 16px; }
  .hud.tr { top: 14px; right: 16px; display: flex; gap: 12px; }
  .hud.bl { bottom: 14px; left: 16px; display: flex; gap: 12px; }
  .hud .yellow { color: var(--coin); }
  .hud .pink { color: var(--pop-2); }
  .hud .blue { color: var(--pop); }
  .hud .red { color: oklch(70% 0.2 25); }

  /* ============ ARCADE-STYLE TITLE SCREEN (editorial palette) ============ */
  .title-screen {
    text-align: center;
    padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px) clamp(48px, 6vw, 80px);
    position: relative;
    isolation: isolate;
  }
  .ts-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-pixel);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink);
    padding: 9px 16px 7px;
    border: 2px solid var(--ink);
    background: var(--card);
    margin-bottom: clamp(28px, 4vw, 44px);
  }
  .ts-pill .gear { color: var(--accent); }
  .ts-pill .star { color: var(--pop); }

  .pixel-name {
    font-family: var(--f-pixel);
    font-size: clamp(36px, 9vw, 112px);
    line-height: 1.05;
    color: #ffd23f;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
    text-shadow:
      4px 0 0 #ff4d8d,
      0 4px 0 #ff4d8d,
      4px 4px 0 #1a1033;
  }
  @media (max-width: 600px) {
    .pixel-name {
      text-shadow:
        2px 0 0 #ff4d8d,
        0 2px 0 #ff4d8d,
        2px 2px 0 #1a1033;
    }
  }
  .pixel-name .row { display: block; }

  /* purple aura — full dark stage from pill through stats */
  .ts-aura {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: 18px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 77, 141, 0.20) 0%, transparent 65%),
      radial-gradient(ellipse 65% 55% at 50% 30%, rgba(106, 60, 180, 0.55) 0%, transparent 70%),
      radial-gradient(ellipse 65% 55% at 50% 70%, rgba(74, 40, 140, 0.50) 0%, transparent 70%),
      linear-gradient(180deg, #1a1033 0%, #160c2c 50%, #1a1033 100%);
    mask-image: radial-gradient(ellipse 95% 92% at 50% 50%, #000 55%, rgba(0,0,0,0.85) 72%, rgba(0,0,0,0.4) 88%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 95% 92% at 50% 50%, #000 55%, rgba(0,0,0,0.85) 72%, rgba(0,0,0,0.4) 88%, transparent 100%);
  }
  .ts-aura::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.22) 2px 3px);
  }
  .ts-aura::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.6) 50%, transparent 51%),
      radial-gradient(1px 1px at 86% 28%, rgba(255,255,255,0.45) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 22% 78%, rgba(255,255,255,0.4) 50%, transparent 51%),
      radial-gradient(1px 1px at 78% 82%, rgba(255,255,255,0.55) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 8% 50%, rgba(255,210,63,0.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 92% 60%, rgba(255,77,141,0.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 35% 90%, rgba(46,230,240,0.5) 50%, transparent 51%);
  }
  /* lift text colors that need to read on the dark stage */
  .title-screen .ts-pill {
    background: rgba(26, 16, 51, 0.65);
    color: #fff9f0;
    border-color: rgba(255, 249, 240, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .title-screen .ts-pill .gear { color: #ffd23f; }
  .title-screen .ts-pill .star { color: #ff4d8d; }
  .pixel-sub { color: #fff9f0; }
  .pixel-sub .x { color: #ff4d8d; }
  .pixel-sub .arrow { color: #ffd23f; }
  .press-start { color: #fff9f0; }
  .press-start .start { color: #6ee05e; }
  .press-start .blink-arrow { color: #ffd23f; animation: ts-blink 1.0s steps(2) infinite; }
  @keyframes ts-blink { 50% { opacity: 0; } }
  .ts-stats { color: rgba(255, 249, 240, 0.7); }
  .ts-stats .item:nth-child(1) .num { color: #2ee6f0; }
  .ts-stats .item:nth-child(2) .num { color: #ff4d8d; }
  .ts-stats .item:nth-child(3) .num { color: #ffd23f; }
  .ts-stats .item:nth-child(4) .num { color: #6ee05e; }
  .ts-ribbon { background: repeating-linear-gradient(90deg, #ff4d8d 0 12px, transparent 12px 24px); }

  .title-screen > *:not(.ts-aura) { position: relative; }

  /* on small screens, the meta+side row below stacks */
  @media (max-width: 720px) {
    .title-screen + div + div, header.hero > div > div:last-of-type {
      grid-template-columns: 1fr !important;
    }
    .hero-side { width: 100% !important; }
  }

  /* ribbon below title — pink dashed, sits OUTSIDE the dark stage */
  .ts-ribbon {
    border: none;
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 24px);
    margin: clamp(40px, 5vw, 60px) 0 0;
  }
.nav.scrolled {
  box-shadow: 0 6px 24px -12px rgba(26,24,20,0.18);
  border-bottom-color: color-mix(in oklab, var(--rule) 60%, var(--accent));
}
  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 28px);
    font-family: var(--f-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
  }
  .nav-links a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--ink-2);
    padding: 6px 2px;
    position: relative;
    transition: color .15s ease;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.active { color: var(--ink); }
  .nav-links a .num {
    color: var(--ink-3);
    font-size: 10.5px;
  }
  .nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--ink);
  }
  .nav-links a.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    transition: transform .15s ease, background .15s ease, color .15s ease;
  }
  .nav-links a.nav-cta:hover { transform: translateY(-1px); background: var(--accent); color: #fff; }
  .nav-links a.nav-cta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
  .nav-links a.nav-cta:hover .dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }

  .lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 3px 6px;
    background: var(--card);
  }
  .lang-switcher .lang-link {
    color: var(--ink-3);
    text-decoration: none;
    padding: 1px 3px;
    border-radius: 3px;
    transition: color .12s ease;
    position: static;
  }
  .lang-switcher .lang-link::after { display: none; }
  .lang-switcher .lang-link:hover { color: var(--ink); background: none; }
  .lang-switcher .lang-current {
    color: var(--ink);
    font-weight: 600;
    padding: 1px 3px;
  }
  .lang-switcher .lang-link + .lang-link,
  .lang-switcher .lang-current + .lang-link,
  .lang-switcher .lang-link + .lang-current {
    border-left: 1px solid var(--rule);
    padding-left: 5px;
  }

  @media (max-width: 720px) {
    .nav-links a:not(.active) .label { display: none; }
    .nav-links a .num { display: inline; }
    .lang-switcher { display: none; }
  }

  /* ============ HERO ============ */
  .hero {
    padding: clamp(56px, 9vw, 120px) 0 var(--section-y);
    position: relative;
  }
  .hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 28px;
  }
  .hero-meta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(24px, 5vw, 64px);
    align-items: end;
  }
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
  }

  .hero-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(64px, 11vw, 168px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
  }
  .hero-title .italic { font-style: italic; color: var(--accent); }
  .hero-title .amp {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--ink-3);
  }
  .hero-sub {
    font-family: var(--f-sans);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.5;
    max-width: 46ch;
    color: var(--ink-2);
    margin: 32px 0 0 0;
  }
  .hero-sub b { color: var(--ink); font-weight: 500; }

  .hero-side {
    width: clamp(220px, 22vw, 280px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: var(--ink-2);
  }
  .hero-side .row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    letter-spacing: 0.02em;
  }
  .hero-side .row:last-child { border-bottom: 1px solid var(--rule); }
  .hero-side .row .k { color: var(--ink-3); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.08em; }
  .hero-side .row .v { color: var(--ink); }

  .hero-cta {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    border: 1px solid var(--ink);
    transition: transform .15s ease, background .15s ease, color .15s ease;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn.primary { background: var(--ink); color: var(--bg); }
  .btn.primary:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .btn .arrow { transition: transform .15s ease; }
  .btn:hover .arrow { transform: translate(2px, -2px); }

  /* ============ SECTION CHROME ============ */
  .section { padding: var(--section-y) 0; border-top: 1px solid var(--rule); }
  .section-head {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(20px, 4vw, 64px);
    margin-bottom: clamp(40px, 6vw, 72px);
    align-items: start;
  }
  @media (max-width: 720px) {
    .section-head { grid-template-columns: 1fr; gap: 16px; }
  }
  .section-kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .section-kicker .ix {
    display: inline-block;
    color: var(--accent);
    font-weight: 500;
  }
  .section-title {
    font-family: var(--f-display);
    font-size: clamp(36px, 5.4vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0;
    max-width: 18ch;
    text-wrap: balance;
  }
  .section-title .italic { font-style: italic; color: var(--ink-2); }

  /* ============ EXPERTISE (cards) ============ */
  .expertise {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
  }
  @media (max-width: 820px) {
    .expertise { grid-template-columns: 1fr; }
  }
  .card {
    background: var(--card);
    padding: clamp(24px, 3vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 280px;
    position: relative;
    transition: background .2s ease;
  }
  .card:hover { background: color-mix(in oklab, var(--card) 92%, var(--accent)); }
  .card-num {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
  }
  .card-mark {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ink);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    background: var(--bg);
  }
  .card-title {
    font-family: var(--f-display);
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .card-body {
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
  }
  .card-tags {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 18px;
  }
  .tag {
    font-family: var(--f-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    padding: 4px 8px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
  }

  /* ============ PROJECT SPOTLIGHT ============ */
  .project {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: stretch;
  }
  @media (max-width: 900px) {
    .project { grid-template-columns: 1fr; }
  }
  .project-vis {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background: #2d4d2d;
    border: 2px solid var(--ink);
  }
  .project-vis img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: pixelated;
    display: block;
  }
  .project-vis::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, transparent 55%, rgba(26,24,20,0.18));
    pointer-events: none;
  }
  .vis-pin {
    position: absolute;
    z-index: 2;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: color-mix(in oklab, var(--card) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule-2);
    padding: 5px 10px;
    border-radius: 6px;
    text-transform: uppercase;
  }
  .vis-pin.tl { top: 14px; left: 14px; }
  .vis-pin.br { bottom: 14px; right: 14px; }
  .vis-pin .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-right: 6px; vertical-align: 1px; }

  .project-info { display: flex; flex-direction: column; }
  .project-status {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--rule-2);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .project-status .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 999px; }
  .project-name {
    font-family: var(--f-display);
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 22px 0 8px;
  }
  .project-name .italic { font-style: italic; color: var(--ink-2); }
  .project-desc {
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 50ch;
  }
  .project-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
  }
  .stat {
    background: var(--card);
    padding: 18px 20px;
  }
  .stat .k {
    font-family: var(--f-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    margin-bottom: 8px;
  }
  .stat .v {
    font-family: var(--f-display);
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .project-cta {
    margin-top: auto;
    align-self: flex-start;
  }

  /* ============ BLOG ============ */
  .blog-list { display: flex; flex-direction: column; }
  .post {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: clamp(16px, 3vw, 40px);
    padding: 28px 0;
    border-top: 1px solid var(--rule);
    align-items: center;
    transition: padding .2s ease;
  }
  .post:last-child { border-bottom: 1px solid var(--rule); }
  .post:hover { padding-left: 8px; }
  .post:hover .post-title { color: var(--accent); }
  .post-date {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .post-title {
    font-family: var(--f-display);
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    transition: color .15s ease;
  }
  .post-excerpt {
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
    max-width: 60ch;
  }
  .post-arrow {
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--ink-3);
    transition: transform .15s ease, color .15s ease;
  }
  .post:hover .post-arrow { transform: translateX(4px); color: var(--ink); }
  @media (max-width: 720px) {
    .post { grid-template-columns: 1fr; }
    .post-arrow { display: none; }
  }

  /* ============ SOCIAL + CONTACT split ============ */
  .duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
  }
  @media (max-width: 820px) {
    .duo { grid-template-columns: 1fr; }
  }
  .duo-pane {
    background: var(--card);
    padding: clamp(32px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 320px;
  }
  .duo-kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .duo-title {
    font-family: var(--f-display);
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1;
    letter-spacing: -0.015em;
    margin: 0;
  }
  .duo-title .italic { font-style: italic; color: var(--ink-2); }
  .duo-body {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.55;
    max-width: 38ch;
    margin: 0;
  }
  .duo-cta { margin-top: auto; }

  /* ============ FOOTER ============ */
  .footer {
    border-top: 1px solid var(--rule);
    padding: clamp(40px, 5vw, 64px) 0 32px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 56px;
  }
  @media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  .footer h4 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 16px;
    font-weight: 500;
  }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer a:hover { color: var(--accent); }
  .footer-tag {
    font-family: var(--f-display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 18ch;
    color: var(--ink);
    margin: 0;
  }
  .footer-tag .italic { font-style: italic; color: var(--ink-2); }
  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: var(--ink-3);
  }

  /* Huge wordmark */
  .wordmark {
    font-family: var(--f-display);
    font-size: clamp(120px, 26vw, 380px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px var(--rule-2);
    text-stroke: 1px var(--rule-2);
    user-select: none;
    margin: 0;
    padding: clamp(40px, 6vw, 80px) 0 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .wordmark .italic { font-style: italic; -webkit-text-stroke: 1px var(--accent); }

  /* Density compact mode */
  [data-density="compact"] { --section-y: clamp(56px, 7vw, 96px); }
  [data-density="compact"] .hero { padding: clamp(40px, 6vw, 80px) 0 var(--section-y); }


/* The giant outlined wordmark is the #1 cause of horizontal scroll on phones. */
@media (max-width: 720px) {
  .wordmark { display: none; }
}

/* Nav: collapse non-essential text and tighten gaps. */
@media (max-width: 720px) {
  .nav-row { gap: 8px; }
  .brand-slash, .brand-where { display: none; }
  .nav-links { gap: 6px; }
  .nav-links a.nav-cta {
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .nav-links a.nav-cta .dot { width: 5px; height: 5px; }
  .theme-switch { margin-left: 4px; }
  .theme-switch .ts-cell   { width: 20px; height: 20px; }
  .theme-switch .ts-slider { width: 20px; height: 20px; }
  [data-theme="dark"] .theme-switch .ts-slider { transform: translateX(20px); }
}

/* Very narrow phones (<420px): drop the CTA label, keep the dot only. */
@media (max-width: 420px) {
  .nav-links a.nav-cta { padding: 7px 9px; font-size: 0; }
  .nav-links a.nav-cta .dot { font-size: 10px; }
}

/* Arcade title-screen padding clipped on narrow screens. */
@media (max-width: 720px) {
  .title-screen { padding: clamp(40px, 6vw, 64px) 14px clamp(36px, 5vw, 56px); }
  .pixel-name   { font-size: clamp(28px, 11vw, 56px); }
}

/* ===== Pumpkin highlight pass ===== */

/* 1. Italic accents in titles → from grey to pumpkin (consistency with hero) */
.section-title .italic,
.project-name .italic,
.duo-title .italic,
.footer-tag .italic { color: var(--accent); }

/* 2. Card numbers → from grey to pumpkin */
.card-num { color: var(--accent); }

/* 3. Card-mark badge → pumpkin border + ink */
.card-mark {
  border-color: var(--accent);
  color: var(--accent);
}

/* 4. Pumpkin hairline at the top edge of every card */
.card { overflow: hidden; }
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0.18);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.6,.05,.3,1);
}
.card:hover::before { transform: scaleX(1); }

/* 5. Project name italics → pumpkin, plus an accent pin on the visual */
.vis-pin .dot {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* 6. Footer wordmark italic stroke → already pumpkin; ensure it stays sharp */
.wordmark .italic {
  -webkit-text-stroke-width: 1.5px;
}