/* ==================================================================
   design tokens
================================================================== */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Instrument Serif", "Times New Roman", serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --container-max: 1200px;
  --section-pad: clamp(80px, 10vw, 140px);

  /* ---- palette ----------------------------------------------------
     primary cool (purple-blue) is the brand spine; warm peach is the
     contrast pair. teal + rose are complements that show up in
     accent moments (timeline dots, project highlights, graph nodes)
     so the page never sits on a single hue. */
  --accent:             #8b7cff;
  --accent-strong:      #a594ff;
  --accent-warm:        #ff9b6a;
  --accent-warm-strong: #ffb38a;
  --accent-cool:        #5eead4;   /* teal — education / data nodes */
  --accent-cool-strong: #7af0db;
  --accent-rose:        #f472b6;   /* rose — highlights / projects */
  --accent-rose-strong: #f9a8d4;
  --success:            #4ade80;

  /* slower, softer easings — the whole site should feel calm */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --transition: 320ms var(--ease-out-soft);
  --transition-slow: 600ms var(--ease-out-soft);
  --transition-slower: 900ms var(--ease-out-soft);
}

html[data-theme="dark"] {
  --bg: #0a0a10;
  --bg-elev: #11111b;
  --bg-elev-2: #161623;
  --bg-alt: #0c0c14;
  --border: #1f1f2c;
  --border-strong: #2c2c3d;
  --border-soft: #181824;
  --text: #f1f0f5;
  --text-soft: #a3a3b3;
  --text-faint: #62626f;
  --dot: rgba(255, 255, 255, 0.045);
  --grain-opacity: 0.045;
  --halo-strength: 60%;
}

html[data-theme="light"] {
  --bg: #f6f5f1;
  --bg-elev: #ffffff;
  --bg-elev-2: #fbfaf6;
  --bg-alt: #efeee8;
  --border: #e3e1da;
  --border-strong: #cdcbc2;
  --border-soft: #ecebe5;
  --text: #15151a;
  --text-soft: #565660;
  --text-faint: #8a8a92;
  --dot: rgba(0, 0, 0, 0.05);
  --grain-opacity: 0.025;
  --halo-strength: 38%;
}

/* ==================================================================
   reset & base
================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* scroll-snap removed: it was inconsistent across browsers and would
     occasionally swallow scroll events on long sections. anchor links
     still smooth-scroll; users get full control of the wheel/trackpad. */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .project-card__link--live { animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-slow), color var(--transition);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* faint dot grid sitting behind content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

main, header, footer { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--text); }

/* ==================================================================
   aurora — slow drifting gradient blobs (the new "wow" layer)
================================================================== */
.aurora {
  position: fixed;
  inset: -10vmax;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(80px) saturate(115%);
  opacity: 0.85;
  transform: translate3d(0, calc(var(--aurora-shift, 0) * 1px), 0);
  will-change: transform;
}
.aurora__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: aurora-drift 28s var(--ease-in-out-soft) infinite alternate;
}
html[data-theme="light"] .aurora__blob {
  mix-blend-mode: multiply;
  opacity: 0.32;
}
.aurora__blob--a {
  width: 52vmax; height: 52vmax;
  top: -18vmax; right: -10vmax;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--accent) 70%, transparent),
    transparent 70%);
}
.aurora__blob--b {
  width: 46vmax; height: 46vmax;
  bottom: -16vmax; left: -12vmax;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--accent-warm) 60%, transparent),
    transparent 70%);
  animation-delay: -8s;
  animation-duration: 36s;
}
.aurora__blob--c {
  width: 36vmax; height: 36vmax;
  top: 30vh; left: 20vw;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--accent-cool) 55%, transparent),
    transparent 70%);
  animation-delay: -16s;
  animation-duration: 44s;
  opacity: 0.4;
}
/* fourth blob — soft rose, anchored mid-page so the lower sections
   pick up a third hue. keeps the palette feeling complementary
   instead of being just two bands. */
.aurora__blob--d {
  width: 30vmax; height: 30vmax;
  top: 60vh; right: 18vw;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--accent-rose) 50%, transparent),
    transparent 70%);
  animation-delay: -22s;
  animation-duration: 52s;
  opacity: 0.35;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(-2%,  0%,   0) scale(1);    }
  50%  { transform: translate3d( 3%, -3%,   0) scale(1.06); }
  100% { transform: translate3d(-1%,  4%,   0) scale(1.02); }
}

/* film grain overlay — gives dark mode some texture */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
html[data-theme="light"] .grain { mix-blend-mode: multiply; }

/* ==================================================================
   layout primitives
================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section {
  padding-block: var(--section-pad);
  position: relative;
}
.section--alt { background-color: color-mix(in oklab, var(--bg-alt) 92%, transparent); }
.section + .section { border-top: 1px solid var(--border-soft); }

/* ------------------------------------------------------------------
   split-section — sticky-left, scroll-right editorial layout.
   This is the primary section pattern for the whole site.
------------------------------------------------------------------ */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: flex-start;
}

.split-left {
  position: relative;
  align-self: stretch;
}
.split-left__sticky {
  position: sticky;
  top: clamp(96px, 12vh, 132px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}

/* legacy section-number eyebrow — element removed from markup, hide if any
   future template re-introduces it so it doesn't reappear by surprise. */
.split-left__num { display: none !important; }

.split-left__title {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.split-left__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
  letter-spacing: -0.015em;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-warm-strong));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Each section gets a different gradient on its italic emphasis word.
   The order matches document flow: about → experience → education
   → projects → toolkit → contact, so the page never repeats the same
   colour pair twice in a row. */
#about .split-left__title em {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-cool-strong));
}
#experience .split-left__title em {
  background: linear-gradient(135deg, var(--accent-warm-strong), var(--accent-rose-strong));
}
#education .split-left__title em {
  background: linear-gradient(135deg, var(--accent-cool-strong), var(--accent-strong));
}
#projects .split-left__title em {
  background: linear-gradient(135deg, var(--accent-rose-strong), var(--accent-warm-strong));
}
#skills .split-left__title em {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-rose-strong));
}
#contact .split-left__title em {
  background: linear-gradient(135deg, var(--accent-warm-strong), var(--accent-cool-strong));
}
#about .split-left__title em,
#experience .split-left__title em,
#education .split-left__title em,
#projects .split-left__title em,
#skills .split-left__title em,
#contact .split-left__title em {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.split-left__lead {
  margin: 0;
  color: var(--text-soft);
  font-size: 15.5px;
  max-width: 36ch;
  line-height: 1.6;
}

.split-left__divider {
  height: 1px;
  background: linear-gradient(to right, var(--border-strong), transparent);
  margin: 0;
}

/* small key/value rows on the left for atmospheric detail */
.split-left__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.split-left__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.split-left__meta-row:last-child { border-bottom: 0; padding-bottom: 0; }
.split-left__meta-row strong {
  color: var(--text);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  font-family: var(--font-sans);
  font-size: 13px;
}

/* ------------------------------------------------------------------
   active-card — the live indicator that updates as you scroll.
   Used by Projects and Experience.
------------------------------------------------------------------ */
.active-card {
  position: relative;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-elev) 58%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 13px 14px 12px;
  display: grid;
  gap: 9px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.active-card::after {
  content: "";
  position: absolute;
  inset: -60% -35% auto auto;
  width: 55%;
  height: 140%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 18%, transparent), transparent 72%);
  pointer-events: none;
  opacity: 0.7;
}

.active-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Rolling numeral — a vertical stack of digits transformed by --active-idx.
   Slides like an airport flip board for a smooth, jitter-free transition. */
.active-card__index {
  display: inline-block;
  height: 0.88em;
  overflow: hidden;
  vertical-align: top;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-warm-strong));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.active-card__index-roll {
  display: block;
  transform: translateY(calc(var(--active-idx, 0) * -0.88em));
  transition: transform 720ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.active-card__index-roll > span {
  display: block;
  height: 0.88em;
  line-height: 0.88;
}

.active-card__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  display: inline-flex;
  gap: 4px;
  padding-top: 0;
}
.active-card__count-sep { opacity: 0.5; }
.active-card__count [data-active-idx] {
  color: var(--text);
  transition: color var(--transition);
}

.active-card__divider {
  height: 1px;
  background: linear-gradient(to right, var(--border-strong) 0%, transparent 80%);
  position: relative;
  z-index: 1;
}

/* Crossfade stacks — every variant rendered, only the active one is opaque.
   No timing logic in JS = no flash, no flicker. */
.active-card__name-stack,
.active-card__meta-stack {
  position: relative;
  z-index: 1;
}
.active-card__name-stack { min-height: 1.55em; }
.active-card__meta-stack { min-height: 1.25em; }

.active-card__name,
.active-card__meta {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.active-card__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.25;
}
.active-card__name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.active-card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  transition-delay: 60ms;
}
.active-card__name.is-active,
.active-card__meta.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.active-card__progress {
  height: 1px;
  background: var(--border-soft);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.active-card__progress-fill {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(to right, var(--accent), var(--accent-warm));
  border-radius: inherit;
  transition: width 600ms var(--ease-out-soft);
}

/* ==================================================================
   navigation
================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}
.nav.is-scrolled {
  border-bottom-color: var(--border);
  background-color: color-mix(in oklab, var(--bg) 88%, transparent);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.brand-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 0%, transparent); }
}
.brand-name { color: var(--text); }

.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
}
.nav__links a {
  color: var(--text-soft);
  font-size: 14px;
  position: relative;
  padding-block: 6px;
  transition: color var(--transition);
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.site-search {
  position: relative;
  width: min(24vw, 260px);
}
.site-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px 0 34px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  color: var(--text);
  outline: 0;
  font-size: 13px;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.site-search::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--text-faint);
  border-radius: 50%;
  transform: translateY(-58%);
}
.site-search::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  width: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--text-faint);
  transform: rotate(45deg);
}
.site-search input:focus {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent);
}
.site-search__results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 86vw);
  display: none;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg-elev) 96%, transparent);
  box-shadow: 0 24px 60px -34px color-mix(in oklab, var(--accent) 50%, transparent);
  z-index: 40;
}
.site-search__results.is-open { display: grid; gap: 4px; }
.site-search__results a,
.site-search__empty {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 10px;
  color: var(--text);
}
.site-search__results a:hover { background: color-mix(in oklab, var(--accent) 12%, var(--bg-elev)); }
.site-search__results span,
.site-search__empty {
  color: var(--text-soft);
  font-size: 12px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.icon-btn:hover {
  color: var(--text);
  background: var(--bg-elev);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.icon-btn .icon { width: 18px; height: 18px; }

.icon-sun { display: none; }
.icon-moon { display: block; }
html[data-theme="light"] .icon-sun { display: block; }
html[data-theme="light"] .icon-moon { display: none; }

.nav__menu-btn { display: none; }

/* ==================================================================
   hero — two-column with portrait
================================================================== */
/* Hero is sized to exactly one screen so everything from the nav down
   to the CTA buttons is visible on first paint without scrolling. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;        /* respects mobile browser chrome */
  /* top padding clears the fixed nav; bottom padding is small so the
     content sits visually centred. */
  padding-block: clamp(96px, 12vh, 132px) clamp(28px, 4vh, 56px);
  display: flex;
  align-items: center;
  /* no overflow:hidden — graph nodes can drift slightly past the
     container when the user stretches them, and we don't want an
     invisible bounding box clipping them off. The aurora is fixed
     anyway, so removing this doesn't leak background colour. */
}

.hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  transform: translate3d(0, calc(var(--hero-shift, 0) * 1px), 0);
  will-change: transform;
}

/* Sleeker availability pill — tighter padding, smaller mono caps,
   thinner border so it reads as a label rather than a chunky chip. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 5px 12px 5px 10px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-elev) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 0 30px;
  transition: border-color var(--transition), color var(--transition);
}
.hero__eyebrow:hover { color: var(--text); border-color: var(--border-strong); }
.hero__eyebrow-text { line-height: 1; }

.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 22%, transparent);
  display: inline-block;
  animation: pulse-success 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-success {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 22%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--success) 0%, transparent); }
}

.hero__title {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0 0 22px;
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
  letter-spacing: -0.015em;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-warm-strong));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Single editorial sub-line — affiliation + what i build, with
   per-keyword accent underlines. Replaces the old subtitle + tagline
   pair so the hero stays compact enough to fit one screen. */
.hero__tagline {
  display: block;
  margin: 0 0 30px;
  max-width: 60ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-soft);
}
.hero__tagline-mark {
  margin-right: 0.35em;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-warm-strong));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: 500;
}
.hero__tagline em {
  font-style: italic;
  background-image: linear-gradient(120deg,
    color-mix(in oklab, var(--accent-cool) 70%, transparent),
    color-mix(in oklab, var(--accent-cool) 70%, transparent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.18em;
  color: var(--text);
  padding: 0 0.05em;
  transition: background-size var(--transition);
}
.hero__tagline em:nth-of-type(2) {
  background-image: linear-gradient(120deg,
    color-mix(in oklab, var(--accent-warm) 70%, transparent),
    color-mix(in oklab, var(--accent-warm) 70%, transparent));
}
.hero__tagline em:nth-of-type(3) {
  background-image: linear-gradient(120deg,
    color-mix(in oklab, var(--accent-rose) 70%, transparent),
    color-mix(in oklab, var(--accent-rose) 70%, transparent));
}
.hero__tagline:hover em { background-size: 100% 0.32em; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==================================================================
   buttons
================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition:
    transform var(--transition),
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--text) 40%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 14px 30px -10px color-mix(in oklab, var(--accent) 55%, transparent);
}

.btn--ghost {
  background: color-mix(in oklab, var(--bg-elev) 60%, transparent);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: var(--bg-elev);
  border-color: var(--accent);
}

/* ==================================================================
   stats strip
================================================================== */
.stats {
  position: relative;
  padding-block: 44px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-alt) 92%, transparent);
}
.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat__value {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}
.stat__value em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
  margin-left: 2px;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* ==================================================================
   marquee (scrolling tech strip)
================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-alt) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.marquee__item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.marquee__item:nth-child(odd)::before { background: var(--accent-warm); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==================================================================
   shared "soft card" base — used by about, experience, edu, projects
================================================================== */
.timeline__content,
.edu-card,
.project-card,
.info-card,
.contact-card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition-slow);
}

/* ==================================================================
   about-rich — long-form editorial right column for the about split
================================================================== */
.about-rich {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.about-rich__intro {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 23px);
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.about-rich__intro strong {
  color: var(--accent-strong);
  font-weight: 600;
}
.about-rich__intro--statement {
  padding: 18px 20px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 9%, var(--bg-elev)),
      color-mix(in oklab, var(--bg-elev) 82%, transparent));
}
.about-rich__intro--statement p {
  margin: 0 0 14px;
}
.about-rich__beliefs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: 0;
}
.about-rich__beliefs li {
  position: relative;
  padding-left: 20px;
  text-wrap: balance;
}
.about-rich__beliefs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 60%, transparent);
}
.about-rich__beliefs li:nth-child(2)::before { background: var(--accent-cool); }
.about-rich__beliefs li:nth-child(3)::before { background: var(--accent-warm); }
.word-cut {
  position: relative;
  display: inline-block;
  color: var(--text-muted);
  font-family: "Instrument Serif", serif;
  font-size: 1.16em;
  font-style: italic;
}
.word-cut::after {
  content: "";
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  top: 54%;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-warm);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-warm) 60%, transparent);
  transform: rotate(-5deg);
}
.word-replace {
  color: var(--accent-strong);
  font-family: "Instrument Serif", serif;
  font-size: 1.22em;
  font-style: italic;
  text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 42%, transparent);
}
.about-rich__body {
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.65;
  max-width: 64ch;
}
.scan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--text-soft);
  max-width: 68ch;
}
.scan-list li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
}
.scan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 12%, transparent);
}
.scan-list li:nth-child(2n)::before { background: var(--accent-warm); }
.scan-list li:nth-child(3n)::before { background: var(--accent-cool); }
.scan-list strong {
  color: var(--text);
  font-weight: 600;
}
.scan-list--compact {
  gap: 7px;
  margin: 0 0 16px;
  font-size: 14.5px;
}
.about-rich__divider {
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    var(--border-strong) 30%,
    var(--border-strong) 70%,
    transparent);
  margin: 4px 0;
}

.about-rich__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.info-card {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px color-mix(in oklab, var(--accent) 24%, transparent);
}
.info-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.info-card__title {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.info-card__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.info-card__sub {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 13.5px;
}

.about-rich__stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-rich__stack-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.about-rich__stack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about-rich__stack-pills span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-soft);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  transition: color var(--transition), border-color var(--transition), transform var(--transition);
}
.about-rich__stack-pills span:hover {
  color: var(--accent-strong);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  transform: translateY(-1px);
}

.about-rich__quote {
  margin: 8px 0 0;
  padding: 28px 32px;
  border-left: 2px solid var(--accent);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 10%, var(--bg-elev)),
    color-mix(in oklab, var(--accent-warm) 6%, var(--bg-elev)));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.about-rich__quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
}
.about-rich__quote em {
  color: var(--accent-strong);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-warm-strong));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.profile-frame {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-elev);
  box-shadow: 0 28px 80px -48px color-mix(in oklab, var(--accent) 65%, transparent);
}
.profile-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, color-mix(in oklab, var(--bg) 72%, transparent), transparent 42%),
    radial-gradient(circle at 20% 18%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 34%);
  z-index: 1;
  pointer-events: none;
}
.profile-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-frame__badge {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 32px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in oklab, var(--bg-elev) 80%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}
.profile-frame__badge--status { top: 14px; left: 14px; }
.profile-frame__badge--role { right: 14px; bottom: 54px; color: var(--accent-strong); }
.profile-frame__badge--availability { left: 14px; bottom: 14px; color: var(--accent-warm-strong); }

/* ==================================================================
   timeline (experience)
================================================================== */
/* Geometry shared between the dot and the connecting line so they
   always agree on the centre axis. Change one variable, both move. */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  --tl-gutter: 36px;        /* horizontal space reserved on the left */
  --tl-dot: 14px;           /* dot diameter */
  --tl-dot-top: 30px;       /* dot top from each item's top edge */
  --tl-line-w: 2px;         /* connector line thickness */
  --tl-item-gap: 14px;      /* margin-top between items (kept in sync below) */
  padding-left: var(--tl-gutter);
}
.timeline__item {
  position: relative;
  padding-block: 14px;
}
.timeline__item + .timeline__item { margin-top: var(--tl-item-gap); }

/* connector line drawn per-item from THIS dot's centre to the NEXT
   dot's centre. This guarantees alignment even with variable item
   heights and removes the old "line starts above the first dot" bug.

   Horizontal placement: the dot sits centred in the .timeline gutter,
   so its centre x-coord (relative to .timeline__item) is
     -gutter / 2.
   The line uses the same axis, just thinner. */
.timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--tl-dot-top) + var(--tl-dot) / 2);
  bottom: calc(-1 * (var(--tl-item-gap) + var(--tl-dot-top) + var(--tl-dot) / 2));
  left: calc(-1 * var(--tl-gutter) / 2 - var(--tl-line-w) / 2);
  width: var(--tl-line-w);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--accent) 55%, transparent),
    color-mix(in oklab, var(--accent-warm) 45%, transparent) 50%,
    color-mix(in oklab, var(--accent-cool) 40%, transparent));
  opacity: 0.55;
  border-radius: var(--tl-line-w);
  pointer-events: none;
  z-index: 0;
}

.timeline__marker {
  position: absolute;
  top: var(--tl-dot-top);
  left: calc(-1 * var(--tl-gutter) / 2 - var(--tl-dot) / 2);
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);
  transition: transform var(--transition), box-shadow var(--transition);
  z-index: 1; /* sits over the line */
}
/* Per-item dot colour cycles through the new palette so the timeline
   itself participates in the multi-colour story. */
.timeline__item:nth-child(1) .timeline__marker {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);
}
.timeline__item:nth-child(2) .timeline__marker {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-warm) 14%, transparent);
}
.timeline__item:nth-child(3) .timeline__marker {
  border-color: var(--accent-cool);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-cool) 14%, transparent);
}
.timeline__item:nth-child(4) .timeline__marker {
  border-color: var(--accent-rose);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-rose) 14%, transparent);
}

/* active marker scales up when its card is in view */
.timeline__item.is-active .timeline__marker {
  transform: scale(1.25);
}
.timeline__item.is-active .timeline__content {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
}

.timeline__content {
  padding: 26px 28px;
}
/* gradient border that fades in on hover */
.timeline__content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 60%, transparent),
    transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
.timeline__content:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 22px 50px -22px color-mix(in oklab, var(--accent) 30%, transparent);
}
.timeline__content:hover::before { opacity: 0.7; }

.timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 6px;
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}
.timeline__role {
  font-size: 12px;
  color: var(--accent-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.timeline__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.timeline__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.timeline__desc {
  margin: 0 0 16px;
  color: var(--text-soft);
  max-width: 64ch;
}

.experience-media {
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-alt);
}
.experience-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.experience-media figcaption {
  padding: 8px 11px 9px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.experience-gallery {
  margin: 0 0 16px;
}

.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  transition: color var(--transition), border-color var(--transition);
}
.tag-list li:hover {
  color: var(--accent-strong);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}

/* ==================================================================
   education cards
================================================================== */
.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.edu-card { padding: 28px; }
.edu-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 18%, transparent), transparent);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}
.edu-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -22px color-mix(in oklab, var(--accent) 22%, transparent);
}
.edu-card:hover::after { opacity: 1; }

.edu-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.edu-card__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}
.edu-card__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-strong);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.edu-card__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.edu-card__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.edu-card__org { margin: 0 0 14px; color: var(--text-soft); font-size: 14px; }
.edu-card__desc { margin: 0; color: var(--text-soft); font-size: 14.5px; line-height: 1.65; }

.education-hero {
  padding-bottom: clamp(34px, 6vw, 70px);
}

.education-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
}

.module-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--bg-elev) 78%, transparent);
  padding: 20px;
}

.module-card span {
  display: block;
  margin-bottom: 16px;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.module-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ==================================================================
   projects — vertical stack (split-section right column)
================================================================== */
.projects-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-card {
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: default;
}
.project-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 22%, transparent), transparent);
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  pointer-events: none;
  z-index: 0;
}
.project-card:nth-child(2n)::before {
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent-warm) 22%, transparent), transparent);
  left: auto;
  right: -10%;
  top: -50%;
}
.project-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 62%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 10%, var(--bg-elev)),
      color-mix(in oklab, var(--bg-elev) 88%, transparent));
  box-shadow: 0 28px 70px -28px color-mix(in oklab, var(--accent) 58%, transparent);
}
.project-card:hover::before {
  opacity: 1;
  transform: translateY(20px);
}
.project-card > * { position: relative; z-index: 1; }

/* tiny "in view" pulse on the left edge when this is the active card */
.project-card.is-active {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
}
.project-card.is-active::after {
  content: "";
  position: absolute;
  left: 0; top: 14%;
  width: 2px; height: 72%;
  background: linear-gradient(to bottom, var(--accent), var(--accent-warm));
  border-radius: 0 2px 2px 0;
  z-index: 2;
}

.project-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.project-card__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.project-card__type {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
}
.project-card:nth-child(2n) .project-card__type { color: var(--accent-warm-strong); }

.project-card__title {
  margin: 0;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.project-card__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-strong);
}
.project-card__desc { margin: 0; color: var(--text-soft); font-size: 14.5px; }

/* Lead paragraph: the elevator pitch above the body */
.project-card__lead {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
/* Body paragraphs — short, scannable, generous line-height */
.project-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.project-card__body p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Highlights: small stat strip — three numbers + tiny labels */
.project-card__highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 0;
  margin: 4px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.hl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.hl + .hl { padding-left: 16px; border-left: 1px dashed var(--border); }
.hl__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent-strong);
}
/* cycle accent colours across project highlights so a long list of
   projects feels like a small gallery rather than a single hue. */
.project-card:nth-child(4n+1) .hl__num { color: var(--accent-strong); }
.project-card:nth-child(4n+2) .hl__num { color: var(--accent-warm-strong); }
.project-card:nth-child(4n+3) .hl__num { color: var(--accent-cool-strong); }
.project-card:nth-child(4n+4) .hl__num { color: var(--accent-rose-strong); }
.hl__lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  line-height: 1.3;
}

/* Optional photo gallery — drop <figure>s inside .project-card__gallery
   (see HTML for the exact pattern). Falls back to nothing if empty. */
.project-card__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.project-card__gallery:empty { display: none; }
.project-card__gallery .shot {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
  transition: transform var(--transition), border-color var(--transition);
}
.project-card__gallery .shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out-soft);
}
.project-card__gallery .shot:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.project-card__gallery .shot:hover img { transform: scale(1.04); }

/* Clickable showcase tiles. These work as placeholders now and can hold
   real screenshot images later without changing the project layout. */
.project-card__gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.shot {
  appearance: none;
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg-alt) 88%, transparent);
  box-shadow: none;
  aspect-ratio: auto;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}
.shot__visual {
  display: block;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 22% 22%, color-mix(in oklab, var(--accent) 60%, transparent) 0 7%, transparent 8%),
    radial-gradient(circle at 72% 34%, color-mix(in oklab, var(--accent-cool) 50%, transparent) 0 6%, transparent 7%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--bg-elev)), var(--bg-alt));
  position: relative;
}
.shot__visual::before,
.shot__visual::after {
  content: "";
  position: absolute;
  inset: 18% 16%;
  border: 1px solid color-mix(in oklab, var(--text) 14%, transparent);
  border-radius: 10px;
}
.shot__visual::after {
  inset: auto 18% 22% 18%;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm), var(--accent-cool));
  opacity: 0.72;
}
.shot__visual--image {
  background: var(--bg-alt);
}
.shot__visual--image::before,
.shot__visual--image::after {
  display: none;
}
.shot__visual--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 600ms var(--ease-out-soft);
}
.shot:hover .shot__visual--image img {
  transform: scale(1.035);
}
.shot__visual--video {
  background: #050509;
}
.shot__visual--video::before {
  inset: 50% auto auto 50%;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in oklab, var(--text) 24%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in oklab, var(--bg) 48%, transparent);
  z-index: 1;
}
.shot__visual--video::after {
  inset: 50% auto auto 50%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid var(--text);
  background: transparent;
  transform: translate(-35%, -50%);
  z-index: 2;
}
.shot__visual--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  display: block;
}
.shot__visual--mail::before { border-radius: 4px; }
.shot__visual--mail::after { height: 34%; border-radius: 8px; opacity: 0.28; }
.shot__visual--data {
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in oklab, var(--text) 8%, transparent) 14px 15px),
    linear-gradient(135deg, color-mix(in oklab, var(--accent-cool) 18%, var(--bg-elev)), var(--bg-alt));
}
.shot__visual--map {
  background:
    radial-gradient(circle at 58% 46%, color-mix(in oklab, var(--accent-warm) 70%, transparent) 0 5%, transparent 6%),
    linear-gradient(120deg, transparent 0 48%, color-mix(in oklab, var(--accent-cool) 18%, transparent) 49% 52%, transparent 53%),
    linear-gradient(35deg, color-mix(in oklab, var(--accent) 14%, var(--bg-elev)), var(--bg-alt));
}
.shot__visual--chart,
.shot__visual--signal {
  background:
    linear-gradient(135deg, transparent 10%, color-mix(in oklab, var(--accent-cool) 55%, transparent) 11% 13%, transparent 14% 32%, color-mix(in oklab, var(--accent-warm) 55%, transparent) 33% 35%, transparent 36%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--bg-elev)), var(--bg-alt));
}
.shot__visual--search::before { border-radius: 999px; inset: 30% 18% 36%; }
.shot__visual--nodes {
  background:
    radial-gradient(circle at 28% 34%, var(--accent) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 30%, var(--accent-warm) 0 5%, transparent 6%),
    radial-gradient(circle at 55% 70%, var(--accent-cool) 0 6%, transparent 7%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent-rose) 14%, var(--bg-elev)), var(--bg-alt));
}
.shot__visual--vision {
  background:
    radial-gradient(ellipse at 48% 52%, color-mix(in oklab, var(--accent-cool) 55%, transparent) 0 24%, transparent 25%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, var(--bg-elev)), var(--bg-alt));
}
.shot__visual--frames {
  background:
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--text) 10%, transparent) 0 2px, transparent 2px 28px),
    linear-gradient(135deg, color-mix(in oklab, var(--accent-warm) 16%, var(--bg-elev)), var(--bg-alt));
}
.shot__visual--chip::before {
  inset: 26%;
  border-radius: 6px;
  box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent-cool) 10%, transparent);
}
.shot__label {
  display: block;
  padding: 9px 10px 10px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
}
.shot:hover {
  background: color-mix(in oklab, var(--bg-elev) 92%, transparent);
  box-shadow: 0 14px 30px -22px color-mix(in oklab, var(--accent) 55%, transparent);
}
.shot:hover .shot__label { color: var(--text); }

.gallery-modal {
  width: min(96vw, 1680px);
  max-width: none;
  max-height: 94vh;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 0;
  color: var(--text);
  background: #050509;
  box-shadow: 0 34px 90px -40px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.gallery-modal::backdrop {
  background: rgba(6, 6, 10, 0.82);
  backdrop-filter: blur(12px);
}
.gallery-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  color: var(--text);
}
.gallery-modal__visual {
  position: relative;
  min-height: min(68vh, 820px);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 24%),
    radial-gradient(circle at 70% 46%, color-mix(in oklab, var(--accent-cool) 28%, transparent), transparent 28%),
    linear-gradient(135deg, var(--bg-elev), var(--bg-alt));
}
.gallery-modal__visual::before,
.gallery-modal__visual::after {
  content: "";
  position: absolute;
  inset: 18% 16%;
  border: 1px solid color-mix(in oklab, var(--text) 14%, transparent);
  border-radius: 18px;
}
.gallery-modal__visual::after {
  inset: auto 18% 22% 18%;
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm), var(--accent-cool));
  opacity: 0.72;
}
.gallery-modal__visual--image {
  min-height: min(72vh, 860px);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #050509;
}
.gallery-modal__visual--image::before,
.gallery-modal__visual--image::after {
  display: none;
}
.gallery-modal__visual--video {
  min-height: 0;
  background: #050509;
}
.gallery-modal__visual--video::before,
.gallery-modal__visual--video::after {
  display: none;
}
.gallery-modal__visual--video video {
  display: block;
  width: 100%;
  max-height: min(62vh, 620px);
  background: #050509;
}
.gallery-modal__visual--data {
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in oklab, var(--text) 8%, transparent) 23px 24px),
    linear-gradient(135deg, color-mix(in oklab, var(--accent-cool) 18%, var(--bg-elev)), var(--bg-alt));
}
.gallery-modal__visual--mail::before { border-radius: 8px; }
.gallery-modal__visual--mail::after { height: 34%; border-radius: 14px; opacity: 0.28; }
.gallery-modal__visual--search::before { border-radius: 999px; inset: 30% 18% 36%; }
.gallery-modal__visual--map {
  background:
    radial-gradient(circle at 58% 46%, color-mix(in oklab, var(--accent-warm) 70%, transparent) 0 5%, transparent 6%),
    linear-gradient(120deg, transparent 0 48%, color-mix(in oklab, var(--accent-cool) 18%, transparent) 49% 52%, transparent 53%),
    linear-gradient(35deg, color-mix(in oklab, var(--accent) 14%, var(--bg-elev)), var(--bg-alt));
}
.gallery-modal__visual--chart,
.gallery-modal__visual--signal {
  background:
    linear-gradient(135deg, transparent 10%, color-mix(in oklab, var(--accent-cool) 55%, transparent) 11% 13%, transparent 14% 32%, color-mix(in oklab, var(--accent-warm) 55%, transparent) 33% 35%, transparent 36%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--bg-elev)), var(--bg-alt));
}
.gallery-modal__visual--nodes {
  background:
    radial-gradient(circle at 28% 34%, var(--accent) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 30%, var(--accent-warm) 0 5%, transparent 6%),
    radial-gradient(circle at 55% 70%, var(--accent-cool) 0 6%, transparent 7%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent-rose) 14%, var(--bg-elev)), var(--bg-alt));
}
.gallery-modal__visual--vision {
  background:
    radial-gradient(ellipse at 48% 52%, color-mix(in oklab, var(--accent-cool) 55%, transparent) 0 24%, transparent 25%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, var(--bg-elev)), var(--bg-alt));
}
.gallery-modal__visual--frames {
  background:
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--text) 10%, transparent) 0 2px, transparent 2px 42px),
    linear-gradient(135deg, color-mix(in oklab, var(--accent-warm) 16%, var(--bg-elev)), var(--bg-alt));
}
.gallery-modal__visual--chip::before {
  inset: 28%;
  border-radius: 12px;
  box-shadow: 0 0 0 18px color-mix(in oklab, var(--accent-cool) 10%, transparent);
}
.gallery-modal__nav {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: color-mix(in oklab, var(--bg-elev) 78%, transparent);
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 18px 40px -22px color-mix(in oklab, var(--accent) 60%, transparent);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.gallery-modal__nav:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 64%, transparent);
  background: color-mix(in oklab, var(--accent) 16%, var(--bg-elev));
}
.gallery-modal__nav--prev { left: 18px; }
.gallery-modal__nav--next { right: 18px; }
.gallery-modal__nav[hidden] { display: none; }
.gallery-modal__body {
  position: static;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  align-items: end;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.gallery-modal__body .hero__eyebrow {
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}
.gallery-modal__body h2 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.gallery-modal__body p:last-child {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.45;
  font-size: 14px;
}

/* Footer: links on the left, the "open" arrow on the right */
.project-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
  flex-wrap: wrap;
}
.project-card__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 18%, var(--bg-elev)),
      color-mix(in oklab, var(--bg-alt) 88%, transparent));
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 10px 26px -18px color-mix(in oklab, var(--accent) 70%, transparent);
  transition:
    border-color var(--transition),
    color var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}
.project-card__link svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
}
.project-card__link:hover {
  border-color: color-mix(in oklab, var(--accent) 66%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 28%, var(--bg-elev)),
      color-mix(in oklab, var(--bg-alt) 82%, transparent));
  color: var(--text);
  box-shadow: 0 16px 30px -18px color-mix(in oklab, var(--accent) 85%, transparent);
  transform: translateY(-2px);
}
.project-card:nth-child(2n) .project-card__link:hover {
  border-color: color-mix(in oklab, var(--accent-warm) 50%, transparent);
  background: color-mix(in oklab, var(--accent-warm) 10%, var(--bg-elev));
  color: var(--accent-warm-strong);
}
.project-card__link--live {
  border-color: color-mix(in oklab, var(--success) 54%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--success) 22%, var(--bg-elev)),
      color-mix(in oklab, var(--accent-cool) 12%, var(--bg-alt)));
  color: color-mix(in oklab, var(--success) 72%, var(--text));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--success) 12%, transparent),
    0 0 24px -10px color-mix(in oklab, var(--success) 70%, transparent);
  animation: live-button-pulse 2.6s var(--ease-in-out-soft) infinite;
}
.project-card__link--live:hover {
  border-color: color-mix(in oklab, var(--success) 78%, transparent);
  color: var(--text);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--success) 18%, transparent),
    0 0 32px -8px color-mix(in oklab, var(--success) 82%, transparent);
}
@keyframes live-button-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--success) 12%, transparent),
      0 0 18px -12px color-mix(in oklab, var(--success) 62%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--success) 20%, transparent),
      0 0 30px -8px color-mix(in oklab, var(--success) 82%, transparent);
  }
}

.project-card__arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--text-soft);
  text-decoration: none;
  flex-shrink: 0;
  transition: transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition);
}
.project-card__arrow svg { width: 14px; height: 14px; }
.project-card:hover .project-card__arrow {
  transform: translateX(2px) translateY(-2px) rotate(-45deg);
  color: var(--text);
  background: var(--accent);
  border-color: var(--accent);
}
.project-card:nth-child(2n):hover .project-card__arrow {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}

/* ==================================================================
   project showcase page
================================================================== */
.showcase-hero {
  position: relative;
  padding-block: clamp(100px, 16vh, 170px) clamp(48px, 8vw, 86px);
}
.showcase-hero__inner { max-width: 880px; }
.showcase-hero__title {
  margin: 0 0 22px;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.showcase-hero__lead {
  margin: 0;
  max-width: 68ch;
  color: var(--text-soft);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
}
.showcase-section { padding-block: clamp(36px, 6vw, 78px); }
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.showcase-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg-elev) 82%, transparent);
  padding: 26px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.showcase-card::before {
  content: "";
  position: absolute;
  inset: -45% -35% auto auto;
  width: 65%;
  height: 75%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.showcase-card > * { position: relative; z-index: 1; }
.showcase-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 54%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, var(--bg-elev));
  box-shadow: 0 24px 80px -54px color-mix(in oklab, var(--accent) 58%, transparent);
}
.showcase-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.showcase-card__top a { color: var(--accent-strong); }
.showcase-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.showcase-actions .project-card__link {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 11px;
}
.showcase-card h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.showcase-card p {
  margin: 0 0 16px;
  color: var(--text-soft);
}
.showcase-card ul {
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--text-soft);
}
.showcase-card li + li { margin-top: 7px; }
.showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.showcase-tags span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.showcase-section--compact { border-top: 1px solid var(--border-soft); }
.showcase-heading {
  max-width: 720px;
  margin-bottom: 26px;
}
.showcase-heading h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.experience-showcase {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.experience-showcase article {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--bg-elev) 78%, transparent);
  padding: 20px;
}
.experience-showcase span {
  display: block;
  margin-bottom: 16px;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.experience-showcase h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.experience-showcase ul {
  margin: 0;
  padding-left: 17px;
  color: var(--text-soft);
  font-size: 13.5px;
}
.experience-showcase li + li { margin-top: 7px; }

/* ==================================================================
   dedicated experience timeline page
================================================================== */
.experience-hero {
  padding-bottom: clamp(34px, 6vw, 70px);
}

.experience-page-section {
  padding-block: clamp(34px, 6vw, 86px) clamp(80px, 10vw, 130px);
}

.experience-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: grid;
  gap: clamp(30px, 5vw, 58px);
}

.experience-timeline::before {
  content: "";
  position: absolute;
  top: 54px;
  bottom: 54px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--accent) 58%, transparent),
    color-mix(in oklab, var(--accent-warm) 48%, transparent) 34%,
    color-mix(in oklab, var(--accent-cool) 42%, transparent) 68%,
    color-mix(in oklab, var(--accent-rose) 44%, transparent));
  opacity: 0.62;
}

.experience-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: start;
}

.experience-timeline__item:last-child::before {
  content: "";
  position: absolute;
  top: 42px;
  bottom: 0;
  left: 50%;
  width: 12px;
  transform: translateX(-50%);
  background: var(--bg);
  z-index: 1;
}

.experience-timeline__item:nth-child(odd) .experience-timeline__card {
  grid-column: 1;
  justify-self: end;
}

.experience-timeline__item:nth-child(even) .experience-timeline__card {
  grid-column: 3;
  justify-self: start;
}

.experience-timeline__card {
  width: min(100%, 520px);
  padding: clamp(22px, 3vw, 30px);
}

.experience-timeline__dot {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 5px color-mix(in oklab, var(--accent) 14%, transparent),
    0 0 28px color-mix(in oklab, var(--accent) 30%, transparent);
  z-index: 2;
}

.experience-timeline__item:nth-child(2n) .experience-timeline__dot {
  border-color: var(--accent-warm);
  box-shadow:
    0 0 0 5px color-mix(in oklab, var(--accent-warm) 14%, transparent),
    0 0 28px color-mix(in oklab, var(--accent-warm) 28%, transparent);
}

.experience-timeline__item:nth-child(3n) .experience-timeline__dot {
  border-color: var(--accent-cool);
  box-shadow:
    0 0 0 5px color-mix(in oklab, var(--accent-cool) 14%, transparent),
    0 0 28px color-mix(in oklab, var(--accent-cool) 28%, transparent);
}

.experience-timeline__item:nth-child(4n) .experience-timeline__dot {
  border-color: var(--accent-rose);
  box-shadow:
    0 0 0 5px color-mix(in oklab, var(--accent-rose) 14%, transparent),
    0 0 28px color-mix(in oklab, var(--accent-rose) 28%, transparent);
}

.experience-timeline__card::after {
  content: "";
  position: absolute;
  top: 36px;
  width: 38px;
  height: 2px;
  background: color-mix(in oklab, var(--border-strong) 74%, transparent);
}

.experience-timeline__item:nth-child(odd) .experience-timeline__card::after {
  right: -38px;
}

.experience-timeline__item:nth-child(even) .experience-timeline__card::after {
  left: -38px;
}

/* small-screen tweaks for the new bits */
@media (max-width: 720px) {
  .project-card__highlights { grid-template-columns: 1fr 1fr; }
  .hl:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 8px; border-top: 1px dashed var(--border); }
  .project-card__gallery { grid-template-columns: 1fr; }
  .gallery-modal {
    width: calc(100vw - 18px);
    max-height: 92vh;
    border-radius: 14px;
  }
  .gallery-modal__visual,
  .gallery-modal__visual--image {
    min-height: 62vh;
  }
  .gallery-modal__body {
    display: block;
    padding: 16px;
  }
  .gallery-modal__body h2 { margin-top: 8px; }
  .gallery-modal__nav {
    top: 34%;
    width: 38px;
    height: 38px;
    font-size: 25px;
  }
  .gallery-modal__nav--prev { left: 10px; }
  .gallery-modal__nav--next { right: 10px; }
  .showcase-grid { grid-template-columns: 1fr; }
  .experience-timeline {
    gap: 22px;
    padding-left: 28px;
  }
  .experience-timeline::before {
    left: 8px;
    top: 38px;
    bottom: 38px;
  }
  .experience-timeline__item {
    display: block;
  }
  .experience-timeline__item:last-child::before {
    left: 8px;
    top: 38px;
  }
  .experience-timeline__item:nth-child(odd) .experience-timeline__card,
  .experience-timeline__item:nth-child(even) .experience-timeline__card {
    width: 100%;
  }
  .experience-timeline__dot {
    left: 8px;
    top: 30px;
  }
  .experience-timeline__card::after {
    left: -20px !important;
    right: auto !important;
    width: 20px;
  }
}

/* ==================================================================
   skills
================================================================== */
.skills-block {
  display: grid;
  gap: 20px;
}
.skills-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border);
  scroll-margin-top: 96px;
}
.skills-row:last-child { border-bottom: 0; padding-bottom: 0; }

.skills-row__label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.skills-row__label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--border-strong);
}
/* tint the leading dash per row so the skills section threads each
   group through a different accent colour. */
.skills-row:nth-child(4n+1) .skills-row__label::before { background: var(--accent-strong); }
.skills-row:nth-child(4n+2) .skills-row__label::before { background: var(--accent-warm-strong); }
.skills-row:nth-child(4n+3) .skills-row__label::before { background: var(--accent-cool-strong); }
.skills-row:nth-child(4n+4) .skills-row__label::before { background: var(--accent-rose-strong); }
.skills-row__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-pill {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition),
              transform var(--transition), color var(--transition);
}
.skill-pill:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, var(--bg-elev));
  color: var(--accent-strong);
  transform: translateY(-2px);
}

/* ==================================================================
   contact (CTA card)
================================================================== */
.contact-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(800px 400px at 100% 0%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, color-mix(in oklab, var(--accent-warm) 16%, transparent), transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--border);
}
.contact-card--compact {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 44px);
}
.contact-card--compact .contact-card__title {
  font-size: clamp(32px, 4.5vw, 52px);
}
.contact-card--compact .contact-card__lead {
  margin-bottom: 22px;
}
.contact-card--compact .contact-card__actions {
  margin-bottom: 24px;
}
.contact-page-section {
  padding-top: 0;
}

.contact-card__title {
  margin: 0 0 18px;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.contact-card__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-warm-strong));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-card__lead {
  color: var(--text-soft);
  font-size: 17px;
  margin: 0 0 32px;
  max-width: 56ch;
}

.contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.contact-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
.contact-card__meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.contact-card__value {
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* ==================================================================
   footer
================================================================== */
.footer {
  padding-block: 32px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13px;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__hint { font-family: var(--font-mono); font-size: 11px; }
.footer__links { display: flex; gap: 16px; }
.footer__links a {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color var(--transition);
}
.footer__links a:hover { color: var(--text); }

/* ==================================================================
   cursor-following spotlight
================================================================== */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--accent) 70%, transparent),
    transparent 65%
  );
  opacity: 0;
  filter: blur(40px);
  transform: translate3d(
    calc(var(--mx, 50vw) - 260px),
    calc(var(--my, 50vh) - 260px),
    0
  );
  transition: opacity 600ms ease;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
html[data-theme="light"] .cursor-glow {
  mix-blend-mode: multiply;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--accent) 50%, transparent),
    transparent 65%
  );
}
body.cursor-active .cursor-glow { opacity: 0.16; }
html[data-theme="light"] body.cursor-active .cursor-glow { opacity: 0.2; }

@media (hover: none), (pointer: coarse), (max-width: 720px) {
  .cursor-glow { display: none; }
}

/* ==================================================================
   project card mouse tilt (driven by --rx / --ry from script.js)
================================================================== */
@media (hover: hover) and (pointer: fine) {
  .project-card {
    transform-style: preserve-3d;
    transform:
      perspective(900px)
      rotateX(calc(var(--ry, 0) * 1deg))
      rotateY(calc(var(--rx, 0) * 1deg));
  }
  .project-card:hover {
    transform:
      perspective(900px)
      rotateX(calc(var(--ry, 0) * 1deg))
      rotateY(calc(var(--rx, 0) * 1deg))
      translateY(-3px);
  }
}

/* ==================================================================
   reveal-on-scroll — calmer + slightly staggered
================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 800ms var(--ease-out-soft),
    transform 800ms var(--ease-out-soft);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* stagger siblings inside common groups */
.projects-stack .project-card.reveal:nth-child(2) { transition-delay: 80ms; }
.projects-stack .project-card.reveal:nth-child(3) { transition-delay: 160ms; }
.projects-stack .project-card.reveal:nth-child(4) { transition-delay: 240ms; }

.about-rich .info-card.reveal:nth-child(2) { transition-delay: 80ms; }

.cards-grid .edu-card.reveal:nth-child(2) { transition-delay: 100ms; }

.timeline__item.reveal:nth-child(2) { transition-delay: 100ms; }
.timeline__item.reveal:nth-child(3) { transition-delay: 200ms; }

.stats__inner .stat.reveal:nth-child(2) { transition-delay: 80ms; }
.stats__inner .stat.reveal:nth-child(3) { transition-delay: 160ms; }
.stats__inner .stat.reveal:nth-child(4) { transition-delay: 240ms; }

/* ==================================================================
   responsive
================================================================== */
@media (max-width: 1080px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(48px, 7vw, 80px);
    text-align: left;
  }
}

@media (max-width: 980px) {
  /* collapse split-grid → single column, drop the sticky/active behavior */
  .split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .split-left__sticky {
    position: static;
    padding-bottom: 0;
    gap: 16px;
  }
  .split-left__lead { max-width: 60ch; }
  .split-left__meta { display: none; }
  .active-card { display: none; }   /* indicator only makes sense with sticky 2-col */

  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .about-rich__cards { grid-template-columns: 1fr; }
  .education-page-grid,
  .module-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav__menu-btn { display: inline-grid; }
  .nav__links {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 20px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
  }
  .nav__links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav.is-open .nav__links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-search {
    width: min(46vw, 220px);
  }

  .skills-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .skills-row__label { padding-top: 0; }
  .skills-row__label::before { display: none; }

  .split-left__title { font-size: clamp(32px, 8vw, 42px); }
  .about-rich__intro { font-size: 18px; }
  .project-card { padding: 24px 22px; }

  .hero__tagline { font-size: 18px; }
}