/* ============================================================
   Kush Patel — portfolio
   Hand-written. No framework, no build step, no tracker.

   Palette note: the design was authored in OKLCH; the values
   below are the exact sRGB conversions, so the page renders
   identically in browsers without OKLCH support. A handful of
   greys were darkened from the original to clear WCAG AA —
   see the "contrast-corrected" comments.
   ============================================================ */

/* The `hidden` attribute loses to any explicit `display:` in author CSS,
   which once left the command palette covering the whole page. Anything
   the JS toggles with .hidden needs this to actually disappear. */
[hidden] { display: none !important; }

/* ---------- 0. Fonts, self-hosted ----------
   Both families are variable, so one file covers every weight the page
   uses (Grotesk 400/500/600/700, Mono 400/500/700) — 53 KB for the pair.

   They are served from this repo rather than fonts.gstatic.com on
   purpose. The footer claims "no tracker", and a Google Fonts embed
   hands every visitor's IP to a third party before first paint, which
   would make that claim untrue. It also removes two DNS + TLS
   handshakes from the critical path.

   Space Grotesk (c) Florian Karsten. JetBrains Mono (c) JetBrains s.r.o.
   Both licensed SIL Open Font License 1.1 — see assets/fonts/LICENSE.txt.
   font-display: swap so text paints immediately in the fallback. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;          /* variable axis */
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;          /* variable axis */
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* ---------- 1. Palette ---------- */

:root {
  --bg: #080d11;
  --header-bg: rgba(8, 13, 17, 0.72);
  --fg: #eff2f6;
  --fg-2: #d9dfe5;
  --muted: #b4bbc4;
  --muted-2: #a1a9b1;
  --dim: #808a95;
  --dim-2: #737d88;            /* contrast-corrected (was #5b646f, 3.25:1) */
  --panel: rgba(6, 10, 14, 0.85);
  --panel-soft: rgba(6, 11, 16, 0.7);
  --tile: #070b0f;
  --tile-hover: #0c151d;
  --line: rgba(122, 168, 171, 0.17);
  --line-2: rgba(122, 168, 171, 0.24);
  --line-3: rgba(122, 168, 171, 0.3);
  --line-soft: rgba(122, 168, 171, 0.12);
  --grid-line: rgba(122, 168, 171, 0.07);
  --accent: #2aeae5;
  --accent-hi: #5df9f4;
  --accent-dim: #77b1b0;
  --accent-line: rgba(9, 224, 219, 0.5);
  --accent-line-soft: rgba(9, 224, 219, 0.3);
  --accent-tint: rgba(9, 224, 219, 0.08);
  --accent-wash: rgba(0, 33, 36, 0.72);
  --on-accent: #050f15;
  --amber: #e4b750;
  --amber-2: #eccd8c;
  --amber-line: rgba(228, 183, 80, 0.5);
  --amber-line-soft: rgba(228, 183, 80, 0.3);
  --amber-tint: rgba(228, 183, 80, 0.06);
  --ok: #8ce6a0;
  --ok-line: rgba(117, 215, 141, 0.4);
  --ok-tint: rgba(117, 215, 141, 0.1);
  --glow-1: rgba(0, 58, 60, 0.5);
  --glow-2: rgba(35, 36, 74, 0.35);
  --shadow: rgba(0, 0, 2, 0.85);

  /* The terminal panel is deliberately dark in BOTH themes. */
  --term-bg: #03060a;
  --term-fg: #eff2f6;
  --term-accent: #2aeae5;
  --term-accent-tint: rgba(42, 234, 229, 0.16);
  --term-amber: #eccd8c;
  --term-amber-line: rgba(228, 183, 80, 0.7);
  --term-amber-tint: rgba(228, 183, 80, 0.07);
  --term-dim: #7d8792;
  --term-line: rgba(122, 168, 171, 0.14);
  --term-red: #ff958d;

  --page-pad: 32px;
  --anchor-offset: 84px;
}

:root[data-theme="light"] {
  --bg: #f6f9fb;
  --header-bg: rgba(246, 249, 251, 0.82);
  --fg: #1a222b;
  --fg-2: #2b343d;
  --muted: #454e58;
  --muted-2: #535c65;
  --dim: #6b727a;              /* contrast-corrected (was #7d848c, 4.41:1) */
  --dim-2: #6c7278;            /* contrast-corrected (was #999fa6, 2.53:1) */
  --panel: rgba(255, 255, 255, 0.86);
  --panel-soft: #f8fafd;
  --tile: #ffffff;
  --tile-hover: #ebf6f7;
  --line: rgba(73, 87, 102, 0.16);
  --line-2: rgba(73, 87, 102, 0.24);
  --line-3: rgba(73, 87, 102, 0.3);
  --line-soft: rgba(73, 87, 102, 0.1);
  --grid-line: rgba(64, 88, 112, 0.06);
  --accent: #006f7d;           /* contrast-corrected (was #007b89 — only 4.32:1 on --accent-tint panels) */
  --accent-hi: #006372;
  --accent-dim: #267c85;       /* contrast-corrected (was #6ba7b0, 3.34:1) */
  --accent-line: rgba(0, 123, 137, 0.45);
  --accent-line-soft: rgba(0, 123, 137, 0.26);
  --accent-tint: rgba(0, 123, 137, 0.07);
  --accent-wash: rgba(215, 241, 244, 0.85);
  --on-accent: #f8fdfd;
  --amber: #955816;
  --amber-2: #7f490c;
  --amber-line: rgba(149, 88, 22, 0.4);
  --amber-line-soft: rgba(149, 88, 22, 0.25);
  --amber-tint: rgba(149, 88, 22, 0.06);
  --ok: #067132;
  --ok-line: rgba(6, 113, 50, 0.35);
  --ok-tint: rgba(6, 113, 50, 0.08);
  --glow-1: rgba(178, 226, 228, 0.55);
  --glow-2: rgba(216, 220, 249, 0.45);
  --shadow: rgba(87, 101, 116, 0.18);

  --term-bg: #11171d;
  --term-dim: #95a0ab;
  --term-line: rgba(176, 192, 209, 0.2);
}

/* ---------- 2. Base ---------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
img { max-width: 100%; }
h1, h2, h3, h4 { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--bg); }

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

.mono, .eyebrow, .kicker, .metric-value, .stat-v, .stat-k, .chip,
.filter-label, .filter-count, .tags li, .pipe-n, .loss-stat,
.xp-period, .xp-scope, .xp-group-label, .cert-code, .card-tests,
.card-open, .router-label, .gpa, .contact-creds, .footer-inner,
.theme-toggle, .nav-github, .nav-resume, .btn-mono, .proof-tick, .btn-sub {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; color: var(--on-accent); }

/* ---------- 3. Decorative backgrounds ---------- */

.bg-glow,
.bg-grid {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
.bg-glow {
  inset: 0;
  background:
    radial-gradient(900px 600px at 78% -10%, var(--glow-1), transparent 70%),
    radial-gradient(700px 500px at 8% 12%, var(--glow-2), transparent 72%);
}
.bg-grid {
  inset: -64px 0 0 0;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: drift 9s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -64px, 0); } }
@keyframes sweep { 0% { transform: translateY(-120%); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(1200%); opacity: 0; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---------- 4. Scroll progress ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 40;
  background: var(--accent);
  pointer-events: none;
  transition: width 0.12s linear;
}

/* ---------- 5. Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px var(--page-pad);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  min-height: 44px;
  flex: 0 0 auto;
}
.brand:hover { color: var(--fg); }
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-tint);
  flex: 0 0 auto;
}
.brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 15px; }

.nav-links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-2);
  white-space: nowrap;
  border-radius: 8px;
}
.nav-links a:hover { color: var(--fg); background: var(--accent-tint); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.theme-toggle,
.nav-github,
.nav-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px;
  font-size: 11px;
  letter-spacing: 0.1em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover,
.nav-github:hover,
.nav-resume:hover {
  border-color: var(--accent-line);
  background: var(--accent-tint);
  color: var(--fg);
}
.nav-resume {
  border-color: var(--accent-line-soft);
  color: var(--accent);
  font-weight: 700;
}
.nav-resume:hover { color: var(--accent-hi); }
.theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-line-soft);
  flex: 0 0 auto;
}

/* ---------- 6. Layout ---------- */

main {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.section { padding: 96px 0 0; }
.section[id] { scroll-margin-top: var(--anchor-offset); }
.project[id] { scroll-margin-top: var(--anchor-offset); }

.eyebrow {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.section h2 {
  margin: 18px 0 0;
  max-width: 900px;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.section-sub {
  margin: 18px 0 0;
  max-width: 700px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted-2);
}
.kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber);
}
.kicker-dim { color: var(--dim); }

/* ---------- 7. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hi); color: var(--on-accent); }
.btn-ghost { border-color: var(--line-3); color: var(--fg); }
.btn-ghost:hover { border-color: var(--accent-line); color: var(--fg); background: var(--accent-tint); }
.btn-mono { font-size: 12.5px; letter-spacing: 0.04em; font-weight: 700; }

.btn-resume {
  border-color: var(--accent-line);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.btn-resume:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-sub {
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.75;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---------- 8. Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0;
}

.hero-copy { min-width: 0; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--accent);
  border: 1px solid var(--accent-line-soft);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--accent-tint);
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
  flex: 0 0 auto;
}

.hero h1 {
  margin: 26px 0 0;
  font-size: clamp(32px, 8vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero h1 em { color: var(--accent); font-style: italic; font-weight: 500; }

.lede {
  margin: 26px 0 0;
  max-width: 560px;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--muted);
}
.lede strong { color: var(--fg); font-weight: 600; }
.lede-2 { margin-top: 14px; }

/* The opening line carries the whole pitch, so it sits a step above the
   paragraphs that explain it. The rest step down slightly — four
   paragraphs at the full lede size overwhelmed the column. */
.hero .lede-open { font-size: 19.5px; line-height: 1.5; color: var(--fg-2); }
.hero .lede-2 { font-size: 16.5px; }

/* Byline: the photo is identity, not decoration — it sits with the name
   and role rather than floating as an ornament. */
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
}
.byline-photo {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-3);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.byline-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.byline-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--fg);
}
.byline-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  line-height: 1.45;
  color: var(--dim-2);
}

/* ---------- 9. Terminal (dark in both themes) ---------- */

.terminal {
  position: relative;
  margin: 0;
  border: 1px solid var(--term-line);
  border-radius: 16px;
  background: var(--term-bg);
  box-shadow: 0 40px 80px -30px var(--shadow), inset 0 1px 0 var(--accent-tint);
  overflow: hidden;
  min-width: 0;
}
.terminal-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  background: linear-gradient(var(--term-accent-tint), transparent);
  animation: sweep 6s linear infinite;
  pointer-events: none;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--term-line);
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dot-red { background: #ff6f61; }
.dot-amber { background: #e8b33c; }
.dot-green { background: #4fd07a; }
.terminal-title {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--term-dim);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.terminal-body {
  padding: 22px 20px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.75;
}
.terminal-body p { margin: 0; overflow-wrap: anywhere; }
.terminal-body .t-q { color: var(--term-accent); }
.terminal-body .t-q-2 { margin-top: 18px; }
.terminal-body .t-a { color: var(--term-fg); margin-top: 12px; }
.t-sql {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--term-amber-line);
  background: var(--term-amber-tint);
  color: var(--term-amber);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}
.terminal-body .t-refuse { color: var(--term-red); margin-top: 10px; }

/* flow-root, so the answer block contains its children's top margins.
   Without a block formatting context those margins collapse out of the
   div and offsetHeight under-reports, which made the height the script
   reserves 23px short of what the tallest demo actually needs. */
#t-out { display: flow-root; }
.caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--term-accent);
  animation: blink 1.1s steps(1) infinite;
}
.terminal-body .terminal-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--term-line);
  font-size: 11.5px;
  color: var(--term-dim);
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.5;
}

/* ---------- 10. Metrics band ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric {
  padding: 30px 26px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
}
.metric:last-child { border-right: 0; }
.metric-value {
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1.1;
}
.metric-label {
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.35;
}

/* ---------- 11. Domains ---------- */

/* Same construction as .skills-grid, for two reasons. It matches the
   section next to it, and it removes the latent version of the bug that
   hit Skills: this grid used to paint `gap: 1px` over a --line
   background, which is invisible only while the tile count happens to
   divide evenly. 12 does; a 13th domain would have put a grey slab back
   on the page. Separate cards can't have that failure mode. */
.domain-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 18px;
}
@media (min-width: 700px)  { .domain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .domain-grid { grid-template-columns: repeat(3, 1fr); } }

.domain {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.domain:hover { border-color: var(--accent-line); background: var(--tile-hover); }
.domain-head { display: flex; align-items: baseline; gap: 10px; }
.domain-n { font-size: 11px; color: var(--dim-2); font-family: 'JetBrains Mono', monospace; }
.domain h3 { margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em; }
.domain-ask {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--amber-2);
  font-style: italic;
}
.domain-answer { margin: 10px 0 0; font-size: 14px; line-height: 1.58; color: var(--muted-2); }

/* ---------- 12. Work — router ---------- */

.router {
  margin-top: 34px;
  padding: 22px 26px 24px;
  border: 1px solid var(--accent-line-soft);
  border-radius: 14px;
  background: var(--accent-tint);
}
.router-label { margin: 0; font-size: 10.5px; letter-spacing: 0.16em; color: var(--accent); }
.router-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.router-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-2);
}
.router-if strong { color: var(--fg); font-weight: 600; }
.router-arrow { color: var(--accent); }
/* Rendered as chips, not inline text: an obvious affordance and a
   comfortable thumb target — this is the shortcut a hiring manager
   on a phone is most likely to reach for. */
.router-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.router-to a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--accent-line-soft);
  border-radius: 9px;
  background: var(--panel);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
}
.router-to a:hover { border-color: var(--accent-line); background: var(--tile-hover); color: var(--accent-hi); }

/* ---------- 13. Work — filter bar ---------- */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.filter-label { font-size: 10.5px; letter-spacing: 0.14em; color: var(--dim); white-space: nowrap; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
}
.chip {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.chip:hover { border-color: var(--accent-line); color: var(--fg); }
.chip.is-active {
  border-color: var(--accent-line);
  background: var(--accent-tint);
  color: var(--accent);
}
.filter-count {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--dim);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Sideways-scroll hint. main.js adds .can-scroll-x only when the strip
   really does overflow, and the fade lifts on focus so a tabbed-to link
   is never clipped. */
.can-scroll-x {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.can-scroll-x:focus-within {
  -webkit-mask-image: none;
  mask-image: none;
}

.is-filtered-out { display: none !important; }
.work-empty {
  margin: 40px 0 0;
  padding: 32px;
  border: 1px dashed var(--line-3);
  border-radius: 16px;
  text-align: center;
  color: var(--muted-2);
}

/* ---------- 14. Work — featured pair ---------- */

/* The flagship takes the full width on its own row; everything else sits in the
   three-up card grid below. The old two-up pairing put a long narrative beside a
   short card and left a column of dead space under the shorter one. */
.feature-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Inside the flagship, the prose and the evidence sit side by side so a
   full-width card does not become a full-width paragraph. */
.flagship-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 30px 40px;
  align-items: start;
  margin-top: 20px;
}
.flagship-body .feature-body { max-width: 62ch; }
.flagship-body .feature-body:first-child { margin-top: 0; }
.flagship-aside { min-width: 0; }
.flagship-aside .feature-shot { margin-top: 0; }

@media (max-width: 1000px) {
  .flagship-body { grid-template-columns: 1fr; gap: 22px; }
}

.feature-main {
  padding: 34px;
  border: 1px solid var(--accent-line-soft);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--accent-wash), var(--panel));
  min-width: 0;
}
.feature-main h3 {
  margin: 14px 0 0;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.025em;
  font-weight: 600;
}
.feature-body { margin: 14px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--muted); max-width: 560px; }
.feature-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), max-content));
  justify-content: start;
  gap: 16px 30px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.feature-stats .stat-v { font-size: 22px; }
.feature-main .btn { margin-top: 26px; }

.outcome {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--fg);
  border-left: 2px solid var(--accent-line);
  padding-left: 12px;
}

/* ---------- 15. Work — cards ---------- */

.card-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 24px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  min-width: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.card:hover {
  border-color: var(--accent-line);
  background: var(--tile-hover);
  transform: translateY(-5px);
  box-shadow: 0 28px 55px -28px var(--shadow);
  color: inherit;
}
.card img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  object-position: top left;
  border-bottom: 1px solid var(--line-soft);
}
.feature-side img { height: 250px; border-bottom-color: var(--line); }

.card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card-tests { margin: 0; font-size: 10px; letter-spacing: 0.1em; color: var(--ok); white-space: nowrap; }
.card-body h3 { margin: 11px 0 0; font-size: 20px; letter-spacing: -0.018em; font-weight: 600; }
.feature-side h3 { font-size: clamp(21px, 2.2vw, 25px); letter-spacing: -0.02em; }
.card-text { margin: 11px 0 0; font-size: 14px; line-height: 1.58; color: var(--muted-2); flex: 1; }

.card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stat-v { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--accent); line-height: 1.2; }
.stat-k { margin-top: 3px; font-size: 9.5px; letter-spacing: 0.1em; color: var(--dim); line-height: 1.4; }

.proof {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2);
}
.proof-tick { color: var(--ok); font-size: 12px; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  font-size: 10.5px;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.tag-tests { border-color: var(--ok-line); background: var(--ok-tint); color: var(--ok); }
.feature-main .tags li { font-size: 11px; padding: 6px 10px; }

.card-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* A card can carry a live-demo link as well as its repo link. The second one
   sits under the first without repeating the divider. */
.card-open + .card-open {
  margin-top: 0;
  padding-top: 10px;
  border-top: 0;
}

.card-open-live { color: var(--ok); }

.profile-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 26px 30px;
  border: 1px dashed var(--line-3);
  border-radius: 16px;
  color: var(--muted-2);
}
.profile-cta:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--muted-2); }
.profile-cta strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg);
  margin-bottom: 8px;
}
.profile-cta-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- 16. Method ---------- */

.loss-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}
.loss { padding: 30px 28px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.loss-stat { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--amber); }
.loss h3 { margin: 16px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.loss p:last-child { margin: 11px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }

.pipeline-panel {
  margin-top: 52px;
  padding: 34px 32px 36px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.pipeline-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 24px 20px;
}
.pipe-step { position: relative; padding-top: 18px; border-top: 2px solid var(--accent-line-soft); }
.pipe-step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.pipe-n { margin: 0; font-size: 10.5px; letter-spacing: 0.12em; color: var(--dim); }
.pipe-step h4 { margin: 9px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.pipe-step p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }

.principle-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 22px;
}
.principle { padding: 24px; border-left: 2px solid var(--amber-line); background: var(--panel-soft); }
.principle h4 { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.principle p { margin: 9px 0 0; font-size: 14px; line-height: 1.58; color: var(--muted-2); }

.method-close {
  margin: 32px 0 0;
  max-width: 780px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted-2);
}
.method-close em { color: var(--fg); }

/* ---------- 17. Experience ---------- */

.xp-list { margin-top: 46px; border-top: 1px solid var(--line); }
.xp {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--line);
}
.xp-meta { flex: 1 1 300px; max-width: 340px; min-width: 0; }
.xp-period { margin: 0; font-size: 11px; letter-spacing: 0.12em; color: var(--amber); }
.xp-dur { color: var(--dim); }
.xp-meta h3 { margin: 12px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.xp-title { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.xp-where { margin: 8px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--dim); line-height: 1.6; }
.xp-scope { margin: 6px 0 0; font-size: 11px; letter-spacing: 0.05em; color: var(--dim); line-height: 1.6; }
.xp-summary { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }

.xp-groups { flex: 3 1 440px; min-width: 0; display: grid; gap: 26px; }
.xp-group-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 13px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.xp-group-label span { white-space: nowrap; }
.xp-group-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.xp-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.xp-group li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 11px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.xp-group li::before {
  content: "▸";
  color: var(--accent-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.95;
}

/* ---------- 18. Education ---------- */

.edu-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
}
.edu-main {
  padding: 32px 30px 34px;
  border: 1px solid var(--accent-line-soft);
  border-radius: 18px;
  background: linear-gradient(155deg, var(--accent-wash), var(--panel));
}
.edu-main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gpa { margin: 0; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.gpa-label { font-size: 11px; letter-spacing: 0.14em; color: var(--accent-dim); }
.gpa-value { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--accent-hi); }
.edu-main h3 { margin: 16px 0 0; font-size: 23px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.edu-org { margin: 8px 0 0; font-size: 15px; color: var(--fg-2); }
.edu-text { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.edu-side { display: grid; gap: 22px; align-content: start; }
.edu-card { padding: 26px 28px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.edu-card h3 { margin: 12px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.018em; }
.edu-card .edu-org { font-size: 14.5px; color: var(--muted); }
.edu-card .edu-text { font-size: 14px; line-height: 1.58; color: var(--muted-2); }
.edu-award { border-color: var(--amber-line-soft); background: var(--amber-tint); }

.cert-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}
.cert {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.cert-dot { margin-top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.cert h4 { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.cert-code { margin: 6px 0 0; font-size: 11px; letter-spacing: 0.08em; color: var(--dim); }
.cert-body { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }

/* ---------- 19. Contact ---------- */

.section-contact { padding-bottom: 110px; }
.contact-panel {
  position: relative;
  overflow: hidden;
  padding: 64px 56px;
  border: 1px solid var(--accent-line-soft);
  border-radius: 22px;
  background: linear-gradient(140deg, var(--accent-wash), var(--panel));
}
.contact-rule {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: linear-gradient(90deg, var(--accent-tint) 1px, transparent 1px);
  background-size: 40px 100%;
}
.contact-inner { position: relative; }
.contact-panel h2 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 600;
}
.contact-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.contact-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--dim);
  line-height: 1.6;
}
.contact-creds .sep { color: var(--dim-2); }

/* ---------- 20. Footer ---------- */

.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); }
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.footer-inner a { color: var(--accent-dim); display: inline-flex; align-items: center; min-height: 44px; }
.footer-inner a:hover { color: var(--accent); }

/* ---------- 21. Availability line ---------- */

.availability {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  max-width: 560px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--fg-2);
}
.availability-dot {
  margin-top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-tint);
  flex: 0 0 auto;
}
.availability-contact { margin-top: 20px; max-width: 620px; }

/* ---------- 22. Compact nav menu (takes over from the strip < 900px) ---------- */

/* No position: relative here on purpose. The panel is wider than this
   button and the button doesn't sit at the right edge of the bar, so
   anchoring to it pushes the panel off-screen. It hangs off the sticky
   header instead, which is the full width of the viewport. */
.nav-menu { display: none; }
.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 13px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--fg-2);
  background: transparent;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.nav-menu-btn::-webkit-details-marker { display: none; }
.nav-menu-btn:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--fg); }
.nav-menu[open] > .nav-menu-btn {
  border-color: var(--accent-line);
  background: var(--accent-tint);
  color: var(--accent);
}

/* Three bars, drawn rather than fetched. */
.nav-menu-bars {
  position: relative;
  width: 14px;
  height: 10px;
  flex: 0 0 auto;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.nav-menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  border-top: 2px solid currentColor;
}

.nav-menu-panel {
  position: absolute;
  right: var(--page-pad);
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 210px;
  max-width: calc(100vw - (var(--page-pad) * 2));
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 26px 50px -22px var(--shadow);
}
.nav-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-2);
}
.nav-menu-panel a:hover { background: var(--accent-tint); color: var(--fg); }

/* ---------- 23. Scrollspy ---------- */

.nav-links a[aria-current="true"],
.nav-menu-panel a[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-tint);
}
.nav-links a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--accent-line); }

/* ---------- 24. Domain tiles as links ---------- */

.domain {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.domain:hover { color: inherit; }
.domain-link {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--accent);
  margin-top: auto;
}
.domain-link-arrow { display: inline-block; transition: transform 0.2s ease; }
.domain:hover .domain-link-arrow { transform: translateX(3px); }

/* ---------- 25. Skills index ---------- */

/* Six cards, so the track count is explicit rather than auto-fit: at
   3/2/1 they always divide evenly and the last row can never leave a
   hole. Critically there is NO background on the grid itself — the old
   version faked hairlines with `gap: 1px` over a --line background,
   which meant every empty cell painted as a solid grey block. Each card
   carries its own border now, so an empty cell is simply nothing. */
/* min-width, not max-width, and the only mobile-first block in the file.
   On a 1.5x display the viewport width is fractional (1099.33px), so
   `max-width: 1099px` misses the boundary by a sub-pixel and you get the
   wrong column count at exactly 1100. `min-width: 1100px` is true iff the
   width really is >= 1100, at any DPR. */
.skills-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr;          /* < 700px */
  align-items: stretch;
  justify-content: start;
  gap: 18px;
}
@media (min-width: 700px)  { .skills-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .skills-grid { grid-template-columns: repeat(3, 1fr); } }

.skill-group {
  display: flex;
  flex-direction: column;
  /* Equal vertical padding, so a short card can't look collapsed. */
  padding: 26px 24px;
  /* Same border + fill as the project cards. What read as a "table grid"
     before was the continuous shared hairlines, not the line weight —
     an 18px gap between rounded boxes fixes that on its own. Going to
     --line-soft here dropped the card to 1.16:1 against its own fill,
     i.e. invisible in dark. */
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.skill-group h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.skill-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--dim-2); }
/* Chips sit directly under the heading and stay there — nothing pushes
   them down, so a 6-chip card and a 12-chip card start at the same line. */
.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;              /* one value: row and column gaps match */
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.skill-list li {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  padding: 5px 9px;
  /* The label never breaks mid-phrase; the container wraps instead. */
  white-space: nowrap;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.skill-list li:hover {
  border-color: var(--accent-line-soft);
  background: var(--accent-tint);
  color: var(--fg);
}

/* Full-width strip under the six cards. Deliberately lighter than they
   are — no fill, dashed rule — so it reads as a footnote to the grid
   rather than a seventh category. */
.skill-honest {
  margin-top: 18px;
  padding: 24px;
  border: 1px dashed var(--amber-line-soft);
  border-radius: 14px;
  background: transparent;
}
.skill-honest-label {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--amber);
}
.skill-honest-body {
  margin: 12px 0 0;
  max-width: 680px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-2);
}
.skill-list-dim li { border-color: var(--amber-line-soft); color: var(--muted-2); }
.skill-honest-foot {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  /* --dim only reaches 4.25:1 on the amber tint in the light theme. */
  color: var(--muted-2);
}

/* ---------- 26. Card zoom + stretched repo link ----------
   The card is no longer one big <a>. The thumbnail is its own
   button (it opens the full capture), and the OPEN REPO link is
   stretched back over the rest of the card so the whole body is
   still one comfortable target. */

.card-zoom {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.card-zoom img { pointer-events: none; }
.zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #f2f7f8;
  background: rgba(4, 10, 14, 0.78);
  border: 1px solid rgba(210, 235, 236, 0.28);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.card-zoom:hover .zoom-hint,
.card-zoom:focus-visible .zoom-hint { opacity: 1; transform: translateY(0); }

/* The clinical card is a miniature evidence room: the live overview is the
   door, while two smaller proof plates expose the operational and warehouse
   layers without turning the whole portfolio into a carousel. */
.clinical-live-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(210, 235, 236, 0.3);
  border-radius: 7px;
  color: #f2f7f8;
  background: rgba(4, 10, 14, 0.84);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  pointer-events: none;
}
.clinical-live-flag > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(140, 230, 160, 0.16);
}
.clinical-proof-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 17px;
}
.clinical-proof-shot {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--tile);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.clinical-proof-shot:hover,
.clinical-proof-shot:focus-visible {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}
.card .clinical-proof-shot img {
  height: 88px;
  border: 0;
  object-fit: cover;
  object-position: top left;
}
.clinical-proof-label {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 4px 7px;
  border-radius: 5px;
  color: #f2f7f8;
  background: rgba(4, 10, 14, 0.82);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  pointer-events: none;
}

/* It's a link now, not a caption, so it has to carry a real target size
   even though the stretched ::after makes the whole card clickable. */
a.card-open { color: var(--accent); min-height: 46px; }
a.card-open:hover { color: var(--accent-hi); }
a.card-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card:has(a.card-open:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 27. Lightbox ---------- */

.lightbox {
  width: min(1360px, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  overflow: visible;
  color: var(--fg);
}
.lightbox::backdrop { background: rgba(3, 7, 10, 0.86); backdrop-filter: blur(4px); }
.lightbox-inner {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg);
  padding: 12px;
}
.lightbox img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 9px;
  background: var(--tile);
}
.lightbox-caption {
  margin: 12px 4px 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-2);
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lightbox-close:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent); }

/* ---------- 28. Back to top ---------- */

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  box-shadow: 0 16px 34px -16px var(--shadow);
  transition: background 0.2s ease, transform 0.2s ease;
}
.to-top:hover { background: var(--accent-hi); color: var(--on-accent); transform: translateY(-2px); }
.to-top[hidden] { display: none; }

/* ---------- 29. Mobile bottom bar ---------- */

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 26;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-2);
}
.mobile-bar-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 11px;
  border: 1px solid var(--line-3);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
}
.mobile-bar-btn:hover { color: var(--fg); }
.mobile-bar-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.mobile-bar-primary:hover { color: var(--on-accent); }

/* ---------- 30. Experience caveat / education dates ---------- */

.xp-caveat {
  margin: 22px 0 0;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}
.edu-period {
  margin: 10px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--amber);
}
.edu-card .edu-period { color: var(--dim); }

/* ---------- 31. Footer ---------- */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.footer-updated { color: var(--dim-2); }

/* ============================================================
   32. Responsive — checked at 1024 / 900 / 768 / 620 / 460 / 390 / 360
   ============================================================ */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding: 56px 0; }
  .lede, .feature-body { max-width: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-side img { height: 220px; }
}

@media (max-width: 900px) {
  :root { --page-pad: 24px; --anchor-offset: 76px; }
  .nav-inner { gap: 10px; padding: 8px var(--page-pad); flex-wrap: nowrap; }

  /* The old sideways-scrolling link strip hid its own scrollbar, which
     made it easy to miss entirely. It's replaced by a real disclosure
     menu here and by the sticky bar at the bottom of the screen. */
  .nav-links { display: none; }
  .nav-menu { display: inline-flex; }
  .mobile-bar { display: flex; }

  /* Room for the sticky bar so it never sits on top of the footer. */
  body { padding-bottom: 74px; }
  .to-top { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); right: 16px; }

  .nav-actions { margin-left: auto; min-width: 0; }
  .section { padding: 72px 0 0; }
  .xp { gap: 28px; }
  .xp-meta { max-width: none; flex-basis: 100%; }
  .contact-panel { padding: 48px 32px; }
}

@media (max-width: 768px) {
  .pipeline-panel { padding: 28px 24px 30px; }
  .feature-main { padding: 28px 24px; }
  .card img { height: 180px; }
  .feature-side img { height: 200px; }
  .router { padding: 20px 20px 22px; }
}

@media (max-width: 700px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { padding: 22px 20px; border-bottom: 1px solid var(--line-soft); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .domain { padding: 22px 20px; }
  .loss { padding: 24px 22px 26px; }
  .edu-main, .edu-card { padding: 26px 22px 28px; }
  .cert { padding: 22px 20px 24px; }
  .skill-group { padding: 22px 20px; }
  .skill-honest { padding: 20px; }
  /* On a phone there is no hover, so the affordance has to be permanent. */
  .zoom-hint { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  :root { --page-pad: 18px; }
  /* Chips scroll sideways instead of stacking into a wall. */
  .filter-bar { gap: 10px; }
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-basis: 100%;
    padding-bottom: 2px;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .filter-count { flex-basis: 100%; }

  .hero { padding: 40px 0 48px; }
  .cta-row { gap: 10px; margin-top: 26px; }
  .btn { flex: 1 1 auto; padding: 12px 16px; }
  .eyebrow-pill { font-size: 10px; letter-spacing: 0.1em; padding: 8px 12px; }
  .lede { font-size: 16px; }
  /* Keep the opener a step above the paragraphs at every width — the
     generic .lede rule here would otherwise demote it below them. */
  .hero .lede-open { font-size: 18px; }
  .hero .lede-2 { font-size: 15.5px; }
  .section-sub { font-size: 15.5px; }

  .terminal-body { padding: 18px 14px 20px; font-size: 12px; }
  .t-sql { font-size: 11.5px; padding: 10px 12px; }
  .terminal-bar { padding: 10px 12px; }

  .card-body { padding: 20px 18px 22px; }
  .card-stats { gap: 10px; }
  .stat-k { font-size: 9px; letter-spacing: 0.06em; }
  .profile-cta { padding: 22px 20px; gap: 14px; }
  .contact-panel { padding: 36px 22px; }
  .contact-lede { font-size: 15.5px; }
  .pipeline-panel { padding: 24px 18px 26px; }
  .principle { padding: 20px 18px; }
  .xp { gap: 24px; padding: 32px 0 34px; }
  .xp-group li { font-size: 14.5px; }
}

@media (max-width: 460px) {
  :root { --page-pad: 16px; }
  /* GitHub is still reachable from the compact menu, hero, contact and footer. */
  .nav-github { display: none; }
  .brand-name { font-size: 14px; }
  /* Icon-only from here down, so the header row never has to wrap. */
  .nav-menu-btn { padding: 0 11px; gap: 0; }
  .nav-menu-btn span:not(.nav-menu-bars) { display: none; }
  .metric-label { font-size: 11px; letter-spacing: 0.06em; }
  .card-stats { grid-template-columns: repeat(2, 1fr); }
  .card-stats > div:last-child { grid-column: 1 / -1; }
  .feature-main { padding: 24px 18px; }
  .router-list li { gap: 4px 8px; }
  .router-arrow { display: none; }
  .router-to { flex-basis: 100%; }
  .lightbox-close { top: -10px; right: -10px; width: 44px; height: 44px; }
  .footer-links { gap: 2px 14px; }
}

@media (max-width: 400px) {
  .nav-resume { padding: 0 10px; }
  /* Dot only. The button keeps its 44px target and its aria-label. */
  .theme-toggle { padding: 0; width: 44px; justify-content: center; gap: 0; }
  #theme-label { display: none; }
  .brand { gap: 8px; }
}

@media (max-width: 380px) {
  .btn { width: 100%; }
  .to-top { padding: 0 13px; }
  .to-top-text { display: none; }
}

/* ---------- 33. Motion / print ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .bg-grid, .terminal-sweep, .caret, .pulse-dot { animation: none; }
  .caret { opacity: 1; }
  .card:hover { transform: none; }
  .to-top:hover { transform: none; }
  .domain:hover .domain-link-arrow { transform: none; }
  .zoom-hint { transform: none; }
  .lightbox::backdrop { backdrop-filter: none; }
}

@media print {
  .site-header, .bg-glow, .bg-grid, .scroll-progress, .filter-bar, .skip,
  .to-top, .mobile-bar, .lightbox, .nav-menu, .zoom-hint { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  /* Filtering is a screen affordance; paper should show everything. */
  .is-filtered-out { display: block !important; }
  .card, .domain, .skill-group { break-inside: avoid; }
}

/* The flagship sits in the text-only feature slot, so its screenshot needs the
   framing the card layout would otherwise have given it. It also breaks up a
   deliberately long narrative — four paragraphs of unbroken prose is where a
   reader stops. */
.feature-main .feature-shot {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.feature-main .feature-shot img {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: cover;
  object-position: top left;
}
@media (max-width: 900px) {
  .feature-main .feature-shot img { height: 210px; }
}

/* The flagship's measured figures. A portfolio card that says "governed
   metrics" and shows none is asking to be taken on faith; these are the actual
   published numbers, grouped so a reader can scan the half they care about. */
.flagship-metrics {
  margin-top: 22px;
  display: grid;
  gap: 18px;
}
.fm-head {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.flagship-metrics ul { margin: 0; padding: 0; list-style: none; }
.flagship-metrics li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 13px;
}
.flagship-metrics li:last-child { border-bottom: 0; }
.flagship-metrics li span { color: var(--muted-2); }
.flagship-metrics li b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 560px) {
  .flagship-metrics li { font-size: 12.5px; gap: 10px; }
  .flagship-metrics li b { font-size: 11.5px; }
}