/* ============================================================
   Sharior Farhan — Portfolio
   style.css — single stylesheet, organized top-to-bottom:
   1. Tokens & reset          5. Sections (about → contact)
   2. Utilities & animations  6. Footer
   3. Nav                     7. Responsive breakpoints
   4. Hero                    8. Reduced motion
   ============================================================ */

/* ---------- 1. Tokens & reset ---------- */
:root {
  /* Palette — restrained, near-monochrome with a cool blue accent */
  --bg: #fafafa;
  --bg-alt: #f2f3f5;
  --ink: #0c0e12;
  --ink-2: #3d434d;
  --ink-3: #6b7280;
  --line: #e4e6ea;
  --card: #ffffff;
  --accent: #2563eb;
  --accent-ink: #1d4ed8;
  --accent-soft: #eff4ff;
  --hero-bg: #05080f;
  --hero-ink: #f5f7fa;
  --hero-ink-2: #9aa4b2;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 12px;
  --radius-lg: 18px;
  --container: 1120px;
  --shadow-card: 0 1px 2px rgba(12, 14, 18, 0.04), 0 8px 24px rgba(12, 14, 18, 0.05);
  --shadow-lift: 0 2px 4px rgba(12, 14, 18, 0.06), 0 16px 40px rgba(12, 14, 18, 0.10);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

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

::selection { background: rgba(37, 99, 235, 0.18); }

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- 2. Utilities & animations ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: 120px 0; }
.section-alt { background: var(--bg-alt); }

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 40px;
}

/* Scroll-reveal: elements start hidden, .in-view added by IntersectionObserver */
.reveal, .reveal-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.in-view, .reveal-up.in-view {
  opacity: 1;
  transform: none;
}

/* Tag / badge rows */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-row li {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), border-color 0.25s var(--ease);
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3), 0 8px 20px rgba(37, 99, 235, 0.22);
}
.btn-primary:hover {
  background: var(--accent-ink);
  color: #fff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3), 0 12px 28px rgba(37, 99, 235, 0.3);
}
.btn-ghost {
  border: 1px solid rgba(154, 164, 178, 0.4);
  color: inherit;
}
.btn-ghost:hover { border-color: currentColor; color: inherit; }
.btn-icon {
  padding: 12px 14px;
  border: 1px solid rgba(154, 164, 178, 0.4);
  color: inherit;
}
.btn-icon:hover { border-color: currentColor; color: inherit; }

/* Click ripple (injected by JS) */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  transform: scale(0);
  animation: btn-ripple 0.6s var(--ease) forwards;
  pointer-events: none;
}
@keyframes btn-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ---------- 3. Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(250, 250, 250, 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
}
/* Over the dark hero the nav text is light */
.nav.on-hero:not(.is-scrolled) { color: var(--hero-ink); }
.nav.on-hero:not(.is-scrolled) .nav-link { color: var(--hero-ink-2); }
.nav.on-hero:not(.is-scrolled) .nav-link:hover,
.nav.on-hero:not(.is-scrolled) .nav-link.is-active { color: var(--hero-ink); }

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 15px;
  color: inherit;
  flex-shrink: 0;
}
.nav-name { white-space: nowrap; }
.nav-brand:hover { color: inherit; }
.nav-mark {
  display: block;
  width: 32px;
  height: 32px;
  /* Circular badge with transparent corners — it needs no plate behind it. */
  object-fit: contain;
  flex-shrink: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}
.nav-link {
  display: block;
  position: relative;
  padding: 8px 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
/* Animated underline */
.nav-link::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease);
}
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { transform: scaleX(1); }

.nav-cta {
  margin-left: 10px;
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--accent-ink); color: #fff; transform: translateY(-1px); }

/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- 4. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--hero-bg);
  color: var(--hero-ink);
  overflow: hidden;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Gradient veil keeps text readable over the ripple */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 560px at 16% 32%, rgba(5, 8, 15, 0.42), transparent 65%),
    linear-gradient(to bottom, rgba(5, 8, 15, 0.12), rgba(5, 8, 15, 0.38) 90%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 140px 32px 100px;
}

/* Entrance animation for hero children (plays on load) */
.hero .reveal-up {
  animation: hero-in 0.9s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 120ms + 150ms);
  opacity: 0;
  transform: none;
  transition: none;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--hero-ink-2);
  padding: 8px 16px;
  border: 1px solid rgba(154, 164, 178, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.hero-title {
  margin: 30px 0 14px;
  font-size: clamp(46px, 7.4vw, 88px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-type {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2vw, 21px);
  color: #7fa8f7;
  min-height: 1.6em;
}
.caret {
  display: inline-block;
  width: 9px;
  height: 1.15em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: #7fa8f7;
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-lede {
  max-width: 560px;
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--hero-ink-2);
}
.hero-lede strong { color: var(--hero-ink); font-weight: 600; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
  margin-top: 34px;
}
.hero-facts dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-facts dd { margin-top: 3px; font-size: 15px; font-weight: 500; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
}
.hero .btn-ghost, .hero .btn-icon { color: var(--hero-ink); }

.hero-scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-scroll:hover { color: var(--hero-ink-2); }
.hero-scroll-line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, transparent, currentColor);
  animation: scroll-hint 2.2s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 5a. About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: start;
}

.about-portrait {
  margin-top: 44px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 380px;
}
.about-portrait img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.about-portrait:hover img { transform: scale(1.03); filter: saturate(1); }

.about-copy p { margin-bottom: 20px; font-size: 16.5px; color: var(--ink-2); }
.about-copy strong { color: var(--ink); }

.about-principles {
  margin-top: 34px;
  border-top: 1px solid var(--line);
}
.about-principles li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 15px;
}
.about-principles span {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 2px;
}

/* Mini runner widget (Chrome-dino homage) — blends into the section,
   no separate card/tab chrome; the canvas's own horizon sits flush
   with the widget's bottom rule. */
.dino-widget {
  margin-top: 56px;
}
.dino-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}
.dino-widget-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.dino-widget-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: right;
}
.dino-canvas {
  display: block;
  width: 100%;
  /* Match the backing store's aspect so the runner never distorts as the
     column narrows; the game simply scales down as a whole. */
  aspect-ratio: 640 / 190;
  height: auto;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.dino-widget-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
}
.dino-reset {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-3);
  transition: border-color 0.2s, color 0.2s;
}
.dino-reset:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- 5b. Experience ---------- */
/* Cartoon drone — flies from beside the heading (top right) down-left
   with scroll, landing on the helipad at the bottom of the section. */
#experience { position: relative; overflow: hidden; }
.drone-flight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.drone-svg { display: block; animation: drone-bob 1.6s ease-in-out infinite; }
.drone-flight.is-landed .drone-svg { animation: none; }
@keyframes drone-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.drone-rotor { animation: drone-spin 0.5s linear infinite; }
.drone-rotor-2 { animation-delay: -0.25s; }
@keyframes drone-spin {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.25); }
}
.drone-flight.is-landed .drone-rotor { animation: drone-spin 1.8s linear infinite; }
.helipad {
  position: absolute;
  bottom: 18px;
  left: 40px;
  pointer-events: none;
}
@media (max-width: 820px) {
  .drone-svg { width: 64px; height: auto; }
  .helipad { left: 16px; bottom: 12px; }
  .helipad svg { width: 84px; height: auto; }
}

.xp-timeline {
  display: grid;
  gap: 18px;
  position: relative;
}

.xp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.xp-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.xp-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  text-align: left;
  border-radius: var(--radius-lg);
}

.xp-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #dbe6fd;
}

.xp-role { display: block; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.xp-org { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); }

.xp-when { text-align: right; }
.xp-dates { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.xp-loc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

.xp-chevron {
  color: var(--ink-3);
  transition: transform 0.35s var(--ease);
}
.xp-head[aria-expanded="true"] .xp-chevron { transform: rotate(180deg); }

/* Expand/collapse via CSS grid rows — GPU-friendly, no height hacks */
.xp-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.xp-head[aria-expanded="true"] + .xp-body { grid-template-rows: 1fr; }
.xp-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 26px;
}
.xp-head[aria-expanded="true"] + .xp-body .xp-body-inner { padding-bottom: 26px; }

.xp-list { display: grid; gap: 10px; margin-bottom: 22px; }
.xp-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--ink-2);
}
.xp-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.7;
}
.xp-list strong { color: var(--ink); }

.xp-metrics {
  display: flex;
  gap: 40px;
  padding: 18px 22px;
  margin-bottom: 20px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.metric-num {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.metric-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- 5c. Projects ---------- */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.proj-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.proj-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.proj-media {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #eef1f6, #e3e8f2);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.proj-media::after {
  /* subtle grid texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(12, 14, 18, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12, 14, 18, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.proj-media-note {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 6px 12px;
  border: 1px dashed rgba(107, 114, 128, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.proj-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 24px;
  flex: 1;
}
.proj-body h3 { font-size: 18.5px; font-weight: 650; letter-spacing: -0.015em; }
.proj-body > p { font-size: 14.5px; color: var(--ink-2); }

.proj-facts { display: grid; gap: 9px; }
.proj-facts dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.proj-facts dd { font-size: 13.5px; color: var(--ink-2); margin-top: 1px; }

.proj-links {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  gap: 18px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- 5d. Tech stack ---------- */

/* REMOVED_CUBE_START
.cube-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 46px 58px;
  padding: 34px 10px 44px;
  margin-bottom: 48px;
  perspective: 900px;
}

.tech-cube {
  --size: 74px;
  position: relative;
  width: var(--size);
  height: var(--size);
  padding: 0;
  transform-style: preserve-3d;
  outline-offset: 14px;
}

.cube {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(24deg);
  transition: transform 0.5s var(--ease);
  animation: cube-idle 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.15s);
  will-change: transform;
}
@keyframes cube-idle {
  0%, 100% { transform: rotateX(-18deg) rotateY(20deg) translateY(0); }
  50%      { transform: rotateX(-14deg) rotateY(40deg) translateY(-7px); }
}

.tech-cube:hover .cube { animation-play-state: paused; transform: rotateX(-20deg) rotateY(42deg) translateY(-6px); }

/* Jump on click */
.tech-cube.is-jumping .cube {
  animation: cube-jump 0.9s var(--ease);
}
@keyframes cube-jump {
  0%   { transform: rotateX(-18deg) rotateY(24deg) translateY(0); }
  18%  { transform: rotateX(-16deg) rotateY(50deg) translateY(6px) scale(1.04, 0.92); }
  50%  { transform: rotateX(-24deg) rotateY(204deg) translateY(-46px) scale(0.96, 1.06); }
  78%  { transform: rotateX(-18deg) rotateY(360deg) translateY(4px) scale(1.05, 0.94); }
  100% { transform: rotateX(-18deg) rotateY(384deg) translateY(0); }
}

.cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-ink);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 244, 255, 0.88));
  border: 1px solid #cfdcfa;
  border-radius: 10px;
  backface-visibility: hidden;
}
.cf-front  { transform: translateZ(calc(var(--size) / 2)); }
.cf-back   { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.cf-left   { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.cf-right  { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
.cf-top    { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); background: linear-gradient(145deg, #ffffff, #f0f4fd); }
.cf-bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); background: #dde6f8; }

/* Grounding shadow that reacts to the jump */
.cube-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -26px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 14, 18, 0.22), transparent);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.tech-cube.is-jumping .cube-shadow { animation: shadow-jump 0.9s var(--ease); }
REMOVED_CUBE_END
@keyframes shadow-jump {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.55); opacity: 0.45; }
}

/* Unified spec-sheet panel — one bordered surface, hairline rows,
   instead of eight repeated category cards. */
.stack-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.stack-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s var(--ease);
}
.stack-row:last-child { border-bottom: none; }
.stack-row:hover { background: var(--bg-alt); }
.stack-row-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-row li {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.badge-row li:hover { border-color: var(--accent); color: var(--accent-ink); }
.badge-row .badge-core {
  background: var(--accent-soft);
  border-color: #dbe6fd;
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- 5d-2. Pac-Man arcade strip (bottom of Tech Stack) ---------- */
.pac-arcade {
  margin-top: 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pac-arcade canvas {
  display: block;
  width: 100%;
  height: 80px;
}

/* ---------- 5e. Achievements ---------- */
.ach-intro {
  max-width: 620px;
  margin-bottom: 44px;
  font-size: 16px;
  color: var(--ink-2);
}

/* Vertical timeline — mirrors the Education timeline's rhythm so both
   "life narrative" sections read as one system; the champion entry
   is picked out with an accent dot and tag instead of a separate card. */
.ach-timeline {
  position: relative;
  display: grid;
  gap: 36px;
  padding-left: 8px;
}
.ach-timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
/* Paper plane that flies down the line as you scroll */
.ach-plane {
  position: absolute;
  left: 23.5px;
  top: 0;
  z-index: 1;
  color: var(--accent);
  filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.35));
  transition: transform 0.25s ease-out;
  will-change: transform;
  pointer-events: none;
}
.ach-plane svg { display: block; transform: rotate(180deg); transition: transform 0.35s var(--ease); }
.ach-plane.is-up svg { transform: rotate(0deg); }
.ach-t-item {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding-left: 44px;
}
.ach-t-dot {
  position: absolute;
  left: 11px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line);
}
.ach-t-featured .ach-t-dot {
  width: 13px;
  height: 13px;
  left: 9px;
  top: 5px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px #dbe6fd, 0 0 0 9px rgba(37, 99, 235, 0.12);
}
.ach-t-when {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  padding-top: 2px;
}
.ach-t-featured .ach-t-when { color: var(--accent-ink); font-weight: 600; }
.ach-t-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.ach-t-tag-quiet {
  color: var(--ink-3);
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.ach-t-body h3 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.ach-t-featured .ach-t-body h3 { font-size: 20px; }
.ach-t-title { display: flex; align-items: center; gap: 9px; }
.ach-sat-icon { color: var(--accent); flex-shrink: 0; }
.ach-t-body p { font-size: 14.5px; color: var(--ink-3); max-width: 560px; }

/* ---------- 5e-2. Achievement gallery ---------- */
/* The timeline above makes the claims; this grid is the evidence for them.
   All five photographs are 4:3, so equal-width tiles at that ratio show
   every one of them whole — nothing cropped — and as large as the grid
   allows. Two on top, three below. The labels stay small and sit under the
   photo rather than on it: in every frame the cheque or certificate sits
   low, which is exactly where an overlaid caption would land. */
.ev-grid {
  /* The gallery is allowed to outgrow the text column it sits in — the
     photographs are the content here, not an illustration beside it.
     Collapses to zero below the container width. */
  --ev-bleed: clamp(0px, calc((100vw - var(--container)) / 2), 84px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 18px;
  margin-top: 44px;
  margin-left: calc(var(--ev-bleed) * -1);
  margin-right: calc(var(--ev-bleed) * -1);
}
.ev-tile-lg { grid-column: span 3; }
.ev-tile-sm { grid-column: span 2; }

.ev-fig { margin: 0; }

.ev-open {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  cursor: zoom-in;
}
.ev-open img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.ev-open:hover img,
.ev-open:focus-visible img { transform: scale(1.03); }

/* Wall label: name, then the particulars in the same mono the timeline
   uses for its dates. */
.ev-plate { display: block; padding-top: 14px; }
.ev-event {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.ev-meta {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.ev-tile-lg .ev-event { font-size: 17px; }

/* ---------- 5e-3. Gallery lightbox ---------- */
.ev-lb {
  /* Hug the photo: a fixed width would letterbox portrait and 4:3 shots
     against the dialog's own background. */
  width: fit-content;
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  overflow: visible;
}
.ev-lb::backdrop { background: rgba(5, 8, 15, 0.72); }
/* A backdrop-filter samples the page behind it but NOT a top-layer
   ::backdrop, so the scrolled nav would re-composite the undimmed page
   over the dialog's scrim and float above it. Drop the filter while the
   lightbox is open and the nav dims with everything else. */
.ev-lb-open .nav.is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border-bottom-color: transparent;
}
.ev-lb-fig { margin: 0; }
.ev-lb-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: calc(92vh - 88px);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-alt);
}
.ev-lb-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.ev-lb-event { font-size: 15px; font-weight: 600; }
.ev-lb-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }

.ev-lb-btn {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: background 0.2s, color 0.2s;
}
.ev-lb-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ev-lb-close { top: -14px; right: -14px; }
.ev-lb-prev { top: 50%; left: -20px; margin-top: -20px; }
.ev-lb-next { top: 50%; right: -20px; margin-top: -20px; }

/* The 2-up/3-up structure holds all the way down; only the spacing needs
   to tighten. Reflowing to two columns here would orphan the fifth tile at
   half width. */
@media (max-width: 940px) {
  .ev-grid { gap: 32px 14px; }
  .ev-tile-lg .ev-event { font-size: 16px; }
  .ev-event { font-size: 14px; }
  .ev-meta { font-size: 11px; }
}
/* One column: the photos get the full measure, still uncropped. */
@media (max-width: 620px) {
  .ev-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ev-tile-lg, .ev-tile-sm { grid-column: span 1; }
  .ev-tile-lg .ev-event { font-size: 15px; }
  /* Off-canvas arrows have nowhere to sit on a phone; paging falls back to
     closing and choosing another tile. */
  .ev-lb-prev, .ev-lb-next { display: none; }
  .ev-lb-close { top: -12px; right: -12px; }
  .ev-lb-cap { padding: 13px 16px; }
}

@media (max-width: 720px) {
  .rocket-launch svg { width: 34px; height: auto; }
  .pac-arcade { margin-top: 30px; }
}

/* ---------- 5e-2. Rocket launch (Achievements) ---------- */
#achievements { position: relative; overflow: hidden; }
.rocket-launch {
  position: absolute;
  right: 7%;
  bottom: -100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.rocket-flame {
  width: 10px;
  height: 26px;
  margin-top: -4px;
  border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
  background: linear-gradient(to bottom, #f59e0b, #ef4444 60%, transparent);
  transform-origin: 50% 0;
  animation: rocket-flame-flicker 0.12s linear infinite alternate;
}
@keyframes rocket-flame-flicker {
  from { transform: scaleY(0.75) scaleX(0.9); opacity: 0.8; }
  to   { transform: scaleY(1.15) scaleX(1.05); opacity: 1; }
}
.rocket-launch.is-flying {
  animation: rocket-fly 2.8s cubic-bezier(0.5, 0, 0.85, 0.4) forwards;
}
@keyframes rocket-fly {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(calc(-100vh - 700px)); opacity: 1; }
}
.rocket-sentinel { height: 1px; }

/* ---------- 5f. Education ---------- */
.edu-timeline {
  position: relative;
  display: grid;
  gap: 40px;
  padding-left: 8px;
}
.edu-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.edu-item {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  padding-left: 44px;
}
.edu-dot {
  position: absolute;
  left: 11px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg-alt), 0 0 0 5px var(--line);
}
.edu-when {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  padding-top: 2px;
}
.edu-body h3 { font-size: 17.5px; font-weight: 650; letter-spacing: -0.01em; }
.edu-org { margin: 3px 0 8px; font-size: 14.5px; color: var(--accent-ink); font-weight: 500; }
.edu-body p:last-child { font-size: 14px; color: var(--ink-3); }

/* ---------- 5g. Contact ---------- */
/* Built from the same parts as the project cards — white surface, hairline
   border, 18px radius, mono label above the value — so the closing section
   reads as part of the same system rather than a different site. The email
   card spans two columns and carries the availability pill; everything
   else is one column wide. */
.ct-lede {
  max-width: 52ch;
  margin-top: 18px;
  color: var(--ink-2);
}

.ct-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.ct-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 24px 26px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.ct-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}
.ct-card-lead { grid-column: span 2; }

.ct-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.ct-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ct-value {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ct-note { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 44ch; }

/* The résumé card is built like a project card — media band on top, body
   below — rather than the icon-chip layout the other channels use. The
   image is page one of the actual PDF, rendered at build time and cropped
   to the part the window shows, tilted so it reads as a document rather
   than a screenshot. */
.ct-card-doc { padding: 0; overflow: hidden; }
.ct-doc-preview {
  position: relative;
  /* The card centres on align-items:flex-start, which would collapse this
     to zero width — its only child is absolutely positioned. */
  align-self: stretch;
  height: 158px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ct-doc-preview::after {
  /* Fades the page into the card instead of letting it end on a hard
     crop halfway down a line of text. */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 54px;
  background: linear-gradient(to bottom, rgba(242, 243, 245, 0), var(--bg-alt));
}
.ct-doc-preview img {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 64%;
  transform: translateX(-50%) rotate(-3.5deg);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(12, 14, 18, 0.16);
  transition: transform 0.5s var(--ease);
}
.ct-card-doc:hover .ct-doc-preview img { transform: translateX(-50%) rotate(-1.5deg) translateY(-5px); }

.ct-doc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 4px;
  flex: 1;
  padding: 20px 26px 26px;
}

/* The address is the one thing on the page worth setting large, and mono
   is how the rest of the site sets data. */
.ct-card-lead .ct-value {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2.5vw, 29px);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 5px;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.ct-card-lead .ct-value:hover,
.ct-card-lead .ct-value:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }

/* Availability, pinned to the lead card and reusing the hero's pulse dot. */
.ct-status {
  position: absolute;
  top: 22px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.ct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.ct-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.ct-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ct-btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.ct-btn-primary.is-copied { background: #047857; border-color: #047857; color: #fff; }

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

@media (max-width: 920px) {
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-card-lead { grid-column: span 2; }
}
@media (max-width: 580px) {
  .ct-grid { grid-template-columns: 1fr; gap: 16px; }
  .ct-card-lead { grid-column: span 1; }
  /* The pill would collide with the icon in a single-column card. */
  .ct-status {
    position: static;
    order: -1;
    margin-bottom: 16px;
  }
  .ct-card-lead .ct-icon { display: none; }
  .ct-actions > .ct-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 6. Footer ---------- */
.footer {
  background: var(--hero-bg);
  color: var(--hero-ink-2);
  padding: 30px 0;
  font-size: 14px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-social { display: flex; gap: 6px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--hero-ink-2);
  transition: color 0.2s, background 0.2s;
}
.footer-social a:hover { color: var(--hero-ink); background: rgba(255, 255, 255, 0.06); }

.back-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(154, 164, 178, 0.3);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hero-ink-2);
  transition: color 0.2s, border-color 0.2s, transform 0.25s var(--ease);
}
.back-top:hover { color: var(--hero-ink); border-color: var(--hero-ink-2); transform: translateY(-2px); }

/* ---------- 7. Responsive ---------- */
@media (max-width: 1024px) {
  .section { padding: 96px 0; }
  .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { gap: 48px; }
}

/* Collapse to hamburger nav earlier than the main mobile breakpoint —
   gives the desktop nav room to breathe at laptop/tablet widths where
   7 links + CTA would otherwise get cramped against the brand mark. */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-name { display: none; }
  .nav-menu {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 22px 22px;
    background: rgba(250, 250, 250, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0s 0.3s;
  }
  .nav-menu.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav-menu .nav-link { color: var(--ink-2); padding: 13px 6px; font-size: 16px; white-space: normal; }
  .nav-cta { margin: 12px 0 0; text-align: center; }
  .nav.on-hero:not(.is-scrolled) .nav-menu .nav-link { color: var(--ink-2); }
}

@media (max-width: 820px) {
  .container, .nav-inner { padding-left: 22px; padding-right: 22px; }
  .section { padding: 80px 0; }

  /* Mobile nav (superseded by the 900px breakpoint above; kept so this
     block still fully describes the collapsed nav state on its own) */
  .nav-toggle { display: flex; }
  .nav-name { display: none; }
  .nav-menu { flex-shrink: initial; }
  .nav-menu {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 22px 22px;
    background: rgba(250, 250, 250, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0s 0.3s;
  }
  .nav-menu.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav-menu .nav-link { color: var(--ink-2); padding: 13px 6px; font-size: 16px; }
  .nav-cta { margin: 12px 0 0; text-align: center; }
  .nav.on-hero:not(.is-scrolled) .nav-menu .nav-link { color: var(--ink-2); }

  .about-grid { grid-template-columns: 1fr; }
  .ach-timeline { gap: 28px; }
  .ach-t-item { grid-template-columns: 1fr; gap: 6px; }
  .about-portrait { max-width: 320px; }

  .xp-head { grid-template-columns: auto 1fr auto; }
  .xp-when { display: none; }
  .xp-body-inner { padding: 0 22px; }

  .stack-row { grid-template-columns: 1fr; gap: 10px; }

  .edu-item { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 520px) {
  .proj-grid { grid-template-columns: 1fr; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { flex: 1; justify-content: center; }
  .hero-facts { gap: 12px 28px; }
  .xp-metrics { gap: 26px; flex-wrap: wrap; }
  .footer-inner { justify-content: center; text-align: center; }
}

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-up { opacity: 1; transform: none; }
  /* The blanket rule above only makes the zoom instant; drop it outright. */
  .ev-open:hover img, .ev-open:focus-visible img { transform: none; }
  .ct-card-doc:hover .ct-doc-preview img { transform: translateX(-50%) rotate(-3.5deg); }
}