/* ===== Raquel Galindo — Portfolio ===== */

:root {
  --navy: #1f2a44;
  --navy-deep: #141b2e;
  --gold: #b6873f;
  --gold-soft: #e7d2ab;
  --paper: #faf8f5;
  --paper-dim: #f1ede6;
  --ink: #1b1b1b;
  --ink-soft: #55534d;
  --line: #e2ddd3;
  --radius: 2px;
  --serif: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --max: 880px;
}

[data-theme="dark"] {
  --paper: #14161c;
  --paper-dim: #1b1e26;
  --ink: #eeece7;
  --ink-soft: #a9a69d;
  --line: #2c303a;
  --navy: #8fa3d6;
  --navy-deep: #cdd8f2;
  --gold: #dcb063;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14161c;
    --paper-dim: #1b1e26;
    --ink: #eeece7;
    --ink-soft: #a9a69d;
    --line: #2c303a;
    --navy: #8fa3d6;
    --navy-deep: #cdd8f2;
    --gold: #dcb063;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Every anchor target needs room for the sticky header, or the top of the
   section (its heading) lands hidden underneath it when you jump via a nav
   link — on mobile in particular the heading was landing half-behind the
   header before this. */
section[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

img { max-width: 100%; }

a { color: inherit; }

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

/* ---- Header / nav ---- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

nav.links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}

nav.links a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .15s ease;
  white-space: nowrap;
}
nav.links a:hover { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn.primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn.primary, .theme-toggle { transition: transform .25s cubic-bezier(.2,.8,.2,1), background .15s ease, color .15s ease; }

/* ---- Section rhythm: a faint cool tint on alternating sections so the page
   reads in "chapters" instead of one flat scroll ---- */
section.tint {
  background: color-mix(in srgb, var(--navy) 4%, var(--paper));
}

.theme-toggle {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}


/* Floating CV/LinkedIn shortcut — fixed to the corner, faded out while the
   hero (which already has its own CTAs) is in view, faded in once you've
   scrolled past it, so it's reachable from anywhere without opening the
   nav or the mobile menu. */
.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.floating-actions.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(20, 26, 46, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  text-decoration: none;
  flex: none;
  transition: transform .2s ease, color .15s ease, border-color .15s ease, background .15s ease;
}
.fab:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--ink-soft); }
.fab .icon { width: 18px; height: 18px; }
.fab-glyph { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.fab-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.fab-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
@media (max-width: 480px) {
  .floating-actions { right: 14px; bottom: 14px; gap: 8px; }
  .fab { width: 42px; height: 42px; }
}

/* Language switcher: a globe icon that opens a small dropdown, rather than
   showing every language as its own button all the time — keeps the nav
   uncluttered and is the more familiar pattern (same idea as most sites'
   language pickers). English is the default; Spanish, Catalan and French
   are the other options. */
.lang-switch { position: relative; flex: none; }
.lang-switch-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.lang-switch-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.lang-switch-toggle[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-soft); }
.lang-globe { font-size: 14px; line-height: 1; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 26, 46, .16);
  padding: 5px;
  z-index: 80;
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13.5px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-menu button:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); color: var(--ink); }
.lang-menu button.active { color: var(--navy); font-weight: 700; }

/* Mobile menu is a flyout, so keep the dropdown from opening off the left
   edge of the screen there. */
@media (max-width: 760px) {
  .lang-menu { left: 0; right: auto; }
}

/* Mobile menu toggle: hidden on desktop/tablet, shown below 760px */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Section scaffolding ---- */
section { padding: 96px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow .num { color: var(--ink-soft); }
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; margin: 0; }

/* Justify body copy site-wide — case studies, About, Learnings, AI cards,
   section intros — so paragraphs read as clean, even blocks instead of a
   ragged right edge. Centered captions/notes elsewhere keep their own
   more specific text-align rule, so this doesn't touch them. */
main p { text-align: justify; text-justify: inter-word; }

/* ---- Hero + ticker block: fills the first screen (viewport minus the
   sticky header), so About never peeks in on load and the ticker is
   always docked to the bottom edge — visible with zero scrolling, with
   zero gap between the two, structurally rather than approximated.

   Earlier versions tried to match the hero's height to the available
   space with vh-based math (padding/margins computed from viewport
   height). That worked for one specific piece of text, but broke again
   the moment the language switcher shipped: English, Spanish, Catalan
   and French don't wrap onto the same number of lines, so the hero's
   real content height differs by language, and a formula tuned for one
   language's line count drifted for the others — the exact "gap
   reappears" bug, just triggered by translated text instead of a screen
   height. Fixed properly this time: .hero grows (flex: 1 1 auto) to
   fill exactly whatever room .hero-block has left after the ticker's
   own (fixed) height — so there is structurally no room for a gap to
   appear between them, regardless of viewport height or which language
   is showing. Inside .hero, its content column uses justify-content:
   space-between with a small guaranteed `gap`, so any *extra* room (a
   tall screen, or a language whose text happens to be shorter) becomes
   breathing room BETWEEN the hero's own elements — badge, kicker,
   heading, lede, buttons, stats — instead of a dead zone at the bottom.
   That's computed by the browser from actual rendered sizes, so it's
   correct for any language automatically, not just the one it was
   tuned against. ---- */
.hero-block {
  /* Capped at 785px: below that, the hero still fills the screen down to
     the ticker like before (short/typical laptop heights). Above it, the
     hero stops growing with the viewport so the gap it leaves above the
     ticker settles at a fixed, deliberate band instead of ballooning
     on tall/desktop screens. */
  min-height: min(calc(100vh - 72px), 785px);
  display: flex;
  flex-direction: column;
}

/* ---- Hero ---- */
.hero {
  flex: 1 1 auto;
  display: flex;
  padding: 18px 0 18px;
  position: relative;
  overflow: hidden;
  border-bottom: none; /* override the generic `section` rule below — the
    hero used to inherit an unwanted divider line right under the stats,
    sitting just above the ticker */
}
.hero .wrap {
  /* flex-start (not space-between): keep the hero's own elements close
     together with a small, fixed gap, and let any extra room on a
     tall/spacious screen collect as one clean block of breathing room
     right before the ticker (via .hero's own bottom padding, above)
     instead of being spread thin between every line of text. */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
}

.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 640px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 320px at 15% 20%, color-mix(in srgb, var(--navy) 20%, transparent), transparent 70%),
    radial-gradient(360px 300px at 85% 10%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%);
  filter: blur(10px);
  animation: driftGlow 16s ease-in-out infinite alternate;
}
@keyframes driftGlow {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(2%, 3%) scale(1.06); }
}

.cursor-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    260px 260px at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--gold) 16%, transparent),
    transparent 70%
  );
}
@media (hover: none) {
  .cursor-glow { display: none; }
}

.available-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 6px 12px 6px 10px;
  border-radius: 20px;
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3fae5c;
  position: relative;
  flex: none;
}
.pulse-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #3fae5c;
  animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.hero-kicker {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: 27ch;
}
.hero h1 em { color: var(--navy); font-style: normal; }
.hero p.lede {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
}
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.stat {
  padding: 9px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat .n {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--navy);
  display: block;
  margin-bottom: 4px;
}
.stat .d { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }

/* ---- Metrics ticker (dark, always-on regardless of theme) ---- */
.ticker-wrap {
  padding: 0;
  border-bottom: 1px solid var(--line);
  /* fixed, theme-independent dark band — var(--navy-deep) flips to a light
     accent color in dark mode, which would wreck contrast here */
  background: #141a2e;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  width: max-content;
  padding: 13px 0;
  animation: tickerScroll 36s linear infinite;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
.ticker-row {
  display: flex;
  align-items: center;
  flex: none;
  gap: 26px;
  padding-right: 26px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: #f2ede3;
}
.ticker-row .dot { color: var(--gold); font-size: 9px; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---- Tool strip (real, verified day-to-day tools) ---- */
.tool-strip { padding: 60px 0; border-bottom: 1px solid var(--line); }
.tool-strip-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 34px;
}
.tool-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 28px;
}
.tool-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 76px;
}
.swatch {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  box-shadow: 0 6px 16px -9px rgba(0,0,0,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.swatch.dark-text { color: #1b1b1b; }
.swatch.wide { font-size: 11px; }
.tool-badge:hover .swatch { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 24px -10px rgba(0,0,0,.45); }
.tool-name {
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: .03em;
  color: var(--ink-soft);
  text-transform: uppercase;
  text-align: center;
}

/* ---- About ---- */
.about-grid {
  display: grid;
  grid-template-columns: 132px 1.05fr 0.85fr;
  gap: 40px;
  align-items: start;
}
.about-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.avatar-ring {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 220deg, var(--gold), var(--navy), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: avatarSpin 14s linear infinite;
  flex: none;
}
@keyframes avatarSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .avatar-ring { animation: none; }
}
.avatar-mono {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--paper);
  /* counter-rotate so the photo itself stays upright while the ring behind it spins */
  animation: avatarSpinBack 14s linear infinite;
}
@keyframes avatarSpinBack { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .avatar-photo { animation: none; }
}
.avatar-caption {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.about-grid p { color: var(--ink-soft); margin: 0 0 16px; }

/* Career path: a scannable "shape of the journey" strip, so the reader
   doesn't have to parse a paragraph of company names to get the chronology. */
.career-path {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.career-path li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 18px 10px 0;
  margin-right: 14px;
  margin-bottom: 10px;
  border-right: 1px dashed var(--line);
  min-width: 108px;
}
.career-path li:last-child { border-right: none; }
.cp-company { font-size: 13px; font-weight: 700; color: var(--ink); }
.cp-role { font-size: 12px; color: var(--ink-soft); }
.cp-date { font-family: var(--mono); font-size: 10.5px; color: var(--gold); letter-spacing: .03em; }

.pull-quote {
  margin: 0 0 18px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: normal;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.believe {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  padding: 26px 26px;
}
.believe h4 { font-size: 14px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 16px; }
.believe ol { margin: 0; padding-left: 20px; color: var(--ink); }
.believe li { margin-bottom: 12px; }
.believe li::marker { color: var(--gold); font-family: var(--mono); }

/* ---- Case studies ---- */
.case {
  padding: 44px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
}
.case:first-of-type { border-top: none; padding-top: 8px; }

.case-meta { position: sticky; top: 90px; align-self: start; }
.case-meta .tag {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.case-meta h3 { font-size: 22px; line-height: 1.2; }
.case-meta .role { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.case-meta .stack { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11px;
  font-family: var(--mono);
  border: 1px solid var(--line);
  padding: 5px 10px 5px 7px;
  color: var(--ink-soft);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.chip:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
.chip .icon { width: 13px; height: 13px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.8; }

.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal="stagger"].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: .02s; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: .10s; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: .18s; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: .26s; }

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy));
  z-index: 100;
  width: 0%;
  transition: width .08s linear;
}

/* ---- Hover lift for cards ---- */
.ai-card, .learning, .funnel-chart {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ai-card:hover, .learning:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.35);
}

.stat { transition: background .2s ease; }
.stat:hover { background: var(--paper-dim); }

.case-body h4 {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-top: 26px;
  margin-bottom: 10px;
}
.case-body h4:first-child { margin-top: 0; }
.case-body p { margin: 0 0 6px; color: var(--ink); }
.case-body ul { margin: 0; padding-left: 20px; color: var(--ink); }
.case-body li { margin-bottom: 6px; }

.impact-row {
  margin-top: 10px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.impact-row .imp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}
.impact-row .imp .n { font-family: var(--serif); font-size: 28px; color: var(--navy); line-height: 1.1; }
.impact-row .imp .d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; max-width: 22ch; }

.funnel-chart {
  margin-top: 18px;
  border: 1px solid var(--line);
  padding: 18px 16px 6px;
  background: var(--paper-dim);
}
.funnel-chart svg { width: 100%; height: auto; display: block; }

/* ---- Chart motion: triggered by the .case scroll-reveal already adding .is-visible ---- */
.funnel-chart svg .svg-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  opacity: 0;
}
.funnel-chart svg .svg-node {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
  opacity: 0;
}
.funnel-chart svg .svg-num { opacity: 0; transform: translateY(8px); }
.funnel-chart svg .svg-line { stroke-dasharray: 100; stroke-dashoffset: 100; }

.funnel-chart.is-charted svg .svg-bar {
  animation: chartBarGrow .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0s);
}
.funnel-chart.is-charted svg .svg-node {
  animation: chartNodeIn .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0s);
}
.funnel-chart.is-charted svg .svg-num {
  animation: chartNumIn .6s ease forwards;
  animation-delay: var(--d, .3s);
}
.funnel-chart.is-charted svg .svg-line {
  animation: chartLineDraw 1.1s ease forwards;
  animation-delay: .05s;
}
@keyframes chartBarGrow { to { transform: scaleY(1); opacity: 1; } }
@keyframes chartNodeIn { to { transform: scale(1); opacity: 1; } }
@keyframes chartNumIn { to { opacity: 1; transform: translateY(0); } }
@keyframes chartLineDraw { to { stroke-dashoffset: 0; } }

/* These are short, one-shot reveals (not looping/parallax), so they stay on
   even under prefers-reduced-motion — only the continuously-looping ticker
   below is paused for that preference. */
.funnel-caption {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 4px 0 2px;
  text-align: center;
  font-style: italic;
}

/* ---- Learnings ---- */
.learning {
  border: 1px solid var(--line);
  padding: 24px 26px;
  margin-bottom: 18px;
  background: var(--paper-dim);
}
.learning .tag { font-family: var(--mono); font-size: 12px; color: var(--gold); margin-bottom: 10px; display: block; }
.learning p { margin: 0; color: var(--ink); }
.learning .lesson { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.learning .lesson strong { color: var(--ink); }

/* ---- AI practice ---- */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.ai-card {
  border: 1px solid var(--line);
  padding: 24px;
}
.ai-card h4 { font-family: var(--sans); font-size: 16px; margin-bottom: 10px; }
.ai-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.ai-card .stack { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- AI tools table ---- */
.ai-tools-table-wrap { margin-top: 56px; }
.ai-tools-table-wrap .subhead { font-size: 21px; margin-bottom: 10px; }
.ai-tools-table-wrap .table-note {
  color: var(--ink-soft);
  font-size: 14px;
  max-width: 68ch;
  margin: 0 0 22px;
}
.ai-tools-table-wrap .table-note .chip.dashed.small {
  padding: 2px 9px;
  font-size: 10.5px;
  margin: 0 2px;
}
.ai-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.table-scroll-hint { display: none; }
.ai-tools-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.ai-tools-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold);
  background: color-mix(in srgb, var(--navy) 10%, var(--paper-dim));
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ai-tools-table td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink);
}
.ai-tools-table tbody tr:last-child td { border-bottom: none; }
.ai-tools-table tbody tr:hover { background: var(--paper-dim); }
.ai-tools-table td:first-child { font-weight: 600; white-space: nowrap; }
.ai-tools-table td:nth-child(3) { color: var(--ink-soft); }
.tool-cell { display: flex; flex-wrap: wrap; gap: 6px; }

.chip.solid {
  border-color: var(--navy);
  color: var(--ink);
  background: color-mix(in srgb, var(--navy) 7%, var(--paper));
  font-weight: 600;
}
.chip.dashed {
  border-style: dashed;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
  background: transparent;
  font-weight: 500;
}

/* ---- Skills ---- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 8px;
  max-width: 900px;
}
.skills-grid h4 {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold);
  margin-bottom: 14px;
}
.skills-grid ul { list-style: none; margin: 0; padding: 0; }
.skills-grid li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.skills-grid li strong { color: var(--ink); font-weight: 600; }

/* ---- Contact ---- */
.contact-block h2 { font-size: clamp(28px, 4.4vw, 42px); max-width: 16ch; }
.contact-block p.lede { color: var(--ink-soft); font-size: 18px; max-width: 52ch; margin-top: 16px; }
.contact-links { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- Bonus arcade game — deliberately reads as a playful interlude, not
   another CV section: a dashed "cabinet" frame instead of the usual clean
   card style used everywhere else on the site. ---- */
.arcade-section { padding-top: 72px; }
.arcade-section .lede { max-width: 60ch; }
.arcade-frame {
  margin-top: 28px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  background: var(--paper-dim);
}
.arcade-frame canvas {
  display: block;
  width: 100%;
  height: clamp(170px, 28vw, 260px);
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.arcade-frame canvas:focus-visible { box-shadow: 0 0 0 2px var(--navy); }
.arcade-hud {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.arcade-hud b { color: var(--ink); font-weight: 600; }
.arcade-instructions {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  text-align: left !important; /* override the site-wide justify on main p */
}

footer.site {
  padding: 32px 0 60px;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Responsive: tablet — nav items get tight between ~761-900px before
   the mobile menu takes over, so tighten spacing/type here rather than
   letting labels wrap onto two lines ---- */
@media (min-width: 761px) and (max-width: 900px) {
  .nav-inner { padding: 10px 18px; gap: 10px; }
  .brand { font-size: 11.5px; letter-spacing: 0.05em; }
  nav.links { gap: 12px; font-size: 12.5px; }
  .btn { padding: 8px 13px; font-size: 13px; }
  .lang-switch-toggle { padding: 5px 9px; font-size: 11px; }
  .skills-grid { gap: 28px; max-width: none; }
}


/* ---- Responsive ---- */
@media (max-width: 760px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; gap: 18px; }
  .case-meta { position: static; }
  .ai-grid { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; gap: 32px; }
  .nav-toggle { display: flex; }
  nav.links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 28px 20px;
  }
  header.site.menu-open nav.links { display: flex; }
  nav.links a { width: 100%; padding: 11px 0; font-size: 15px; }
  nav.links .theme-toggle { margin: 6px 0; }
  nav.links .btn.primary { margin-top: 6px; width: 100%; justify-content: center; }
  nav.links .lang-switch { margin-top: 10px; align-self: flex-start; }
  .tool-strip { padding: 44px 0; }
  .tool-grid { gap: 16px 18px; }
  .tool-badge { width: 62px; }
  .swatch { width: 44px; height: 44px; font-size: 12px; border-radius: 12px; }
  .swatch.wide { font-size: 9.5px; }
  .ticker-row { font-size: 12px; gap: 20px; padding-right: 20px; }
  .table-scroll-hint {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
}