/* ============================================================================
   DESIGN TOKENS - one palette, defined once at :root.
   (Previously colors lived inside [data-theme='light']/[data-theme='dark']
   attribute blocks. That indirection was the root cause of the "elements
   look broken until you click the toggle" bug: color values only existed
   conditionally on an attribute, so anything painted before that attribute
   was fully resolved rendered without them. A single unconditional :root
   block removes that failure mode entirely.)

   Palette: an editorial, "dark canvas + near-white ink" system, with brand
   voltage saved for a few deliberate full-bleed signature cards (navy blue,
   deep navy, cream) rather than gradients or glow.
============================================================================ */
:root {
  /* radius scale */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-full: 9999px;

  /* spacing scale (4px base) */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-section: 96px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 550ms;

  /* signature brand colors - full-bleed accent cards only, never gradients */
  --navy-deep: #0f1e33;
  --accent-light: #9cc0ff;
  --cream: #f5e9d4;
  --cream-ink: #181d26;
  --cream-muted: rgba(24, 29, 38, 0.6);

  /* surfaces */
  --canvas: #14161c;
  --surface: #1c1f28;
  --surface-strong: #262a34;
  --nav-bg: rgba(20, 22, 28, 0.86);

  /* text */
  --ink: #f3f5f9;
  --body: #c7cbd6;
  --muted: #8c93a3;
  --hairline: rgba(255, 255, 255, 0.13);

  /* accent / links */
  --link: #5b8fff;
  --link-active: #85a9ff;

  /* Extra hues used only by the lava-lamp blobs, so the rest of the site's
     palette stays untouched but the animation itself reads as more varied
     than the site's blue/navy/cream accents. */
  --lava-magenta: #ff5da2;
  --lava-teal: #35d6c4;
  --lava-purple: #8b5cf6;
  --lava-gold: #ffc857;
  --lava-coral: #ff7a59;

  /* fixed text-on-color pairs (not theme-relative, always correct) */
  --on-dark: #ffffff;
  --on-light: #14161c;
}

/* ============================================================================
   BASE
============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--canvas);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-xxl); }

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link);
  margin-bottom: var(--sp-sm);
}

h1, h2, h3 { font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 6.2vw, 64px); line-height: 1.06; font-weight: 400; }
h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.12; }
h3 { font-size: 22px; line-height: 1.3; }

.section-hidden { display: none !important; }
.visually-hidden { position: absolute; width: 0; height: 0; overflow: hidden; }

/* reveal-on-scroll: fade + rise, with a couple of directional variants and
   per-item stagger so groups of elements animate in as a sequence rather
   than all at once. Guarded on the JS side so content can never get stuck
   invisible (see main.js initReveal). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left { transform: translateX(-24px); }
.reveal-left.is-visible { transform: translateX(0); }

.reveal-right { transform: translateX(24px); }
.reveal-right.is-visible { transform: translateX(0); }

.reveal-scale { transform: scale(0.94) translateY(10px); }
.reveal-scale.is-visible { transform: scale(1) translateY(0); }

/* stagger helper: JS sets --reveal-i on grouped children (stats, chips,
   cards, links); this converts that index into a small compounding delay. */
[style*="--reveal-i"] { transition-delay: calc(var(--reveal-i, 0) * 70ms); }

/* ============================================================================
   HEADER / NAV
============================================================================ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--sp-xxl);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
header.is-scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; color: var(--ink); }
.logo-mark { width: 26px; height: 26px; border-radius: var(--r-sm); object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08); }

nav.primary-nav { display: flex; align-items: center; gap: var(--sp-xl); }
.nav-links { display: flex; gap: var(--sp-xl); list-style: none; }
.nav-links a {
  font-size: 15px; color: var(--body); position: relative; padding: 4px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--ink); transition: width var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { width: 100%; background: var(--link); }

.nav-toggle {
  display: none; width: 38px; height: 38px; border: none; background: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav-toggle span { width: 20px; height: 1.5px; background: var(--ink); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }

/* ============================================================================
   BUTTONS - a light "confident, final" primary paired with a ghost
   secondary. Text-on-button colors are fixed pairs (--canvas/--ink), never
   theme-relative, so contrast can't silently invert.
============================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; padding: 16px 28px; border-radius: var(--r-lg);
  border: 1px solid transparent; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0px); }
.btn-primary { background: var(--ink); color: var(--canvas); }
.btn-primary:hover { opacity: 0.88; box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-on-color { background: var(--canvas); color: var(--ink); }
.btn-on-color:hover { opacity: 0.9; box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
.btn-on-dark { background: var(--on-dark); color: var(--navy-deep); }
.btn-on-dark:hover { opacity: 0.9; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }

/* ============================================================================
   HERO
============================================================================ */
#hero {
  padding: calc(var(--sp-section) + 40px) 0 var(--sp-section);
  position: relative; overflow: hidden;
}
/* subtle drifting glow behind the hero - restrained, low-opacity, brand
   accent only, never distracting from the copy. */
#hero::before, #hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: 0.16; pointer-events: none; z-index: 0;
}
#hero::before {
  width: 420px; height: 420px; background: var(--link);
  top: -120px; right: 8%;
  animation: drift-a 16s var(--ease-in-out) infinite alternate;
}
#hero::after {
  width: 320px; height: 320px; background: var(--accent-light);
  bottom: -100px; left: 4%;
  animation: drift-b 20s var(--ease-in-out) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 40px) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(24px, -30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  #hero::before, #hero::after { animation: none; }
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-xxl);
  align-items: center;
  position: relative; z-index: 1;
}
.hero-copy .eyebrow { margin-bottom: var(--sp-md); }
.hero-copy h1 { margin-bottom: var(--sp-md); font-weight: 700; }
.hero-copy .role { font-size: 22px; color: var(--body); margin-bottom: var(--sp-lg); }
.hero-copy .intro { max-width: 48ch; margin-bottom: var(--sp-xl); color: var(--body); font-size: 18px; }
.hero-actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

.portrait-wrap {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/5; background: var(--surface);
  border: 1px solid var(--hairline);
}
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.portrait-wrap:hover img { transform: scale(1.04); }
.portrait-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: 500; color: var(--muted); background: var(--surface);
}
.portrait-caption { margin-top: var(--sp-sm); font-size: 12px; color: var(--muted); text-align: center; }

/* ── Flow mode: centers the copy, drops the portrait, and swaps the
   subtle drift glow for the louder animated lava-lamp layer below. ── */
#hero.hero-flow .hero-grid {
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 760px;
  margin: 0 auto;
}
#hero.hero-flow .hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
#hero.hero-flow .hero-copy .intro { margin-left: auto; margin-right: auto; }
#hero.hero-flow .hero-actions { justify-content: center; }
#hero.hero-flow .hero-visual { display: none; }
#hero.hero-flow::before, #hero.hero-flow::after { opacity: 0; }

/* Lava lamp: a handful of blurred, "goo"-filtered blobs in the site's own
   accent colors, drifting and morphing so nearby blobs appear to merge and
   separate the way a real lava lamp does. Hidden and paused entirely
   outside flow mode / under reduced motion, so there's no cost when off. */
.lava-lamp {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
#hero.hero-flow .lava-lamp { opacity: 1; }
.lava-blobs {
  position: absolute; inset: -10%;
  filter: url(#lava-goo) blur(46px);
}
.lava-blob {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  animation-play-state: paused;
}
#hero.hero-flow .lava-blob { animation-play-state: running; }

/* Each blob layers three independent, linear, looping animations so the
   passes never feel like a back-and-forth bounce:
     1. a float that carries it well past the section's edges and back
        around, so it genuinely drifts off-screen and re-enters
     2. a color-cycle stepping through the site's accent + lava hues
     3. a shape-cycle morphing the circle into soft irregular blob shapes
   Differing durations and negative delays keep the ten blobs from ever
   lining up, so the mix of colors/shapes/sizes on screen keeps changing. */
.lava-blob.b1 {
  width: 240px; height: 240px; left: 8%; top: 18%;
  animation-name: lava-float-1, lava-color-cycle, lava-shape-cycle;
  animation-duration: 173.3s, 133.3s, 226.7s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b2 {
  width: 190px; height: 190px; left: 58%; top: 8%;
  animation-name: lava-float-2, lava-color-cycle, lava-shape-cycle;
  animation-duration: 206.7s, 160s, 193.3s;
  animation-delay: 0s, -40s, -66.7s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b3 {
  width: 210px; height: 210px; left: 34%; top: 46%;
  animation-name: lava-float-3, lava-color-cycle, lava-shape-cycle;
  animation-duration: 153.3s, 180s, 166.7s;
  animation-delay: 0s, -80s, -26.7s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b4 {
  width: 170px; height: 170px; left: 70%; top: 52%;
  opacity: 0.7;
  animation-name: lava-float-4, lava-color-cycle, lava-shape-cycle;
  animation-duration: 226.7s, 126.7s, 206.7s;
  animation-delay: 0s, -20s, -93.3s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b5 {
  width: 200px; height: 200px; left: 4%; top: 62%;
  animation-name: lava-float-5, lava-color-cycle, lava-shape-cycle;
  animation-duration: 186.7s, 146.7s, 180s;
  animation-delay: 0s, -60s, -40s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b6 {
  width: 150px; height: 150px; left: 46%; top: 24%;
  animation-name: lava-float-2, lava-color-cycle, lava-shape-cycle;
  animation-duration: 166.7s, 173.3s, 146.7s;
  animation-delay: -53.3s, -100s, -13.3s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b7 {
  width: 180px; height: 180px; left: 20%; top: 40%;
  animation-name: lava-float-4, lava-color-cycle, lava-shape-cycle;
  animation-duration: 200s, 140s, 220s;
  animation-delay: -86.7s, -6.7s, -120s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b8 {
  width: 160px; height: 160px; left: 82%; top: 22%;
  animation-name: lava-float-1, lava-color-cycle, lava-shape-cycle;
  animation-duration: 160s, 153.3s, 186.7s;
  animation-delay: -60s, -120s, -53.3s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b9 {
  width: 140px; height: 140px; left: 60%; top: 66%;
  animation-name: lava-float-3, lava-color-cycle, lava-shape-cycle;
  animation-duration: 140s, 186.7s, 133.3s;
  animation-delay: -33.3s, -26.7s, -73.3s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}
.lava-blob.b10 {
  width: 150px; height: 150px; left: 12%; top: 78%;
  animation-name: lava-float-5, lava-color-cycle, lava-shape-cycle;
  animation-duration: 180s, 166.7s, 160s;
  animation-delay: -106.7s, -66.7s, -106.7s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: infinite;
}

/* Full loops (0% and 100% match) rather than alternating back and forth,
   so the motion reads as a steady, one-way drift. The travel distances are
   in vw/vh and comfortably exceed the section's bounds, so each blob
   genuinely exits the visible area before looping back around. */
@keyframes lava-float-1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(38vw, 22vh) scale(1.2); }
  50%  { transform: translate(8vw, 46vh) scale(0.85); }
  75%  { transform: translate(-34vw, 14vh) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lava-float-2 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-40vw, 18vh) scale(0.88); }
  50%  { transform: translate(-14vw, -38vh) scale(1.18); }
  75%  { transform: translate(30vw, -12vh) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lava-float-3 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(32vw, -30vh) scale(1.15); }
  50%  { transform: translate(-10vw, -50vh) scale(0.82); }
  75%  { transform: translate(-38vw, -10vh) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lava-float-4 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-28vw, -34vh) scale(1.1); }
  50%  { transform: translate(20vw, -18vh) scale(0.9); }
  75%  { transform: translate(36vw, 26vh) scale(1.16); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes lava-float-5 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(34vw, 10vh) scale(0.9); }
  50%  { transform: translate(12vw, -34vh) scale(1.18); }
  75%  { transform: translate(-30vw, -18vh) scale(0.86); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Cycles through the site's blue accents plus the added magenta / teal /
   purple / gold / coral hues, one solid color at a time. */
@keyframes lava-color-cycle {
  0%    { background-color: var(--link); }
  16%   { background-color: var(--lava-magenta); }
  33%   { background-color: var(--lava-teal); }
  50%   { background-color: var(--lava-purple); }
  66%   { background-color: var(--lava-gold); }
  83%   { background-color: var(--lava-coral); }
  100%  { background-color: var(--link); }
}

/* Morphs the circle into soft, irregular blob outlines and back. */
@keyframes lava-shape-cycle {
  0%   { border-radius: 50%; }
  20%  { border-radius: 58% 42% 33% 67% / 62% 32% 68% 38%; }
  40%  { border-radius: 40% 60% 68% 32% / 48% 62% 38% 52%; }
  60%  { border-radius: 65% 35% 45% 55% / 35% 65% 40% 60%; }
  80%  { border-radius: 32% 68% 58% 42% / 68% 42% 58% 32%; }
  100% { border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lava-blob { animation: none !important; }
}

/* ============================================================================
   ABOUT
============================================================================ */
#about { padding: var(--sp-section) 0; background: var(--canvas); }
.about-grid { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xxl); }
.about-heading { text-align: center; }
.about-body { width: 100%; }
#about-paragraphs { display: flex; flex-direction: column; gap: var(--sp-md); align-items: center; text-align: center; }
#about-paragraphs p { font-size: 18px; color: var(--body); }

/* stats use the cream signature-card treatment: a warm, fixed-contrast
   surface that reads correctly regardless of the page's own palette. */
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(24, 29, 38, 0.14); border-radius: var(--r-md);
  overflow: hidden; margin-top: var(--sp-xl);
}
.stat { background: var(--cream); padding: var(--sp-xl) var(--sp-lg); }
.stats-row.is-hidden { display: none; }
.stat-value { font-size: 40px; font-weight: 500; color: var(--cream-ink); }
.stat-value .suffix { color: var(--navy-deep); }
.stat-label { font-size: 13px; color: var(--cream-muted); margin-top: 4px; }

/* Skills spread out as one full-width horizontal band rather than a
   wrapped cluster of chips, so the row uses the whole section width. */
.skills-row {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
  gap: 60px; margin-top: var(--sp-xl); width: 100%;
}
.skill-chip {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-full);
  padding: 8px 20px 8px 8px; font-size: 14px; color: var(--body); background: var(--surface);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.skill-chip:hover { transform: translateY(-3px); border-color: var(--link); color: var(--ink); }
.skill-chip .glyph {
  width: 45px; height: 45px; border-radius: var(--r-full); background: var(--surface-strong);
  color: var(--ink); font-size: 20px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.skill-chip .glyph img { width: 100%; height: 100%; object-fit: contain; padding: 7px; box-sizing: border-box; }

/* ============================================================================
   PROJECTS
============================================================================ */
#projects { padding: var(--sp-section) 0; background: var(--surface); }
.section-head { margin: 0 auto var(--sp-xxl); max-width: 60ch; text-align: center; }

.project-featured {
  background: var(--navy-deep); color: var(--on-dark); border-radius: var(--r-lg);
  padding: var(--sp-xxl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xxl);
  align-items: center; margin-bottom: var(--sp-xl); overflow: hidden;
}
.project-featured .project-image { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; background: rgba(255,255,255,0.14); }
.project-featured .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.project-featured:hover .project-image img { transform: scale(1.05); }
.project-featured .tag { display: inline-block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-bottom: var(--sp-sm); }
.project-featured h3 { color: var(--on-dark); font-size: 32px; margin-bottom: var(--sp-sm); }
.project-featured p { opacity: 0.92; margin-bottom: var(--sp-lg); max-width: 48ch; font-size: 17px; }

.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
.project-card {
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.project-card:hover { border-color: var(--link); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.28); }
.project-card .project-image { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-strong); }
.project-card .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.project-card:hover .project-image img { transform: scale(1.04); }
.project-card .project-body { padding: var(--sp-xl); }
.project-card .tag { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-xs); display: block; }
.project-card h3 { font-size: 22px; }
.project-card p { font-size: 15px; color: var(--body); margin-bottom: var(--sp-md); }

.image-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500; color: var(--muted); background: var(--surface-strong);
}
.project-featured .image-fallback { background: rgba(255,255,255,0.16); color: var(--on-dark); }

.link-row { display: flex; gap: var(--sp-lg); flex-wrap: wrap; }
.link-row a { font-size: 14px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.project-featured .link-row a { color: var(--on-dark); }
.project-card .link-row a { color: var(--link); }

/* ============================================================================
   ADVENTURES - a lighter, photo-forward grid: four landscape shots each
   paired with a short caption, for a bit of life outside the work itself.
============================================================================ */
/* 
#adventures { padding: var(--sp-section) 0; background: var(--canvas); }
.adventures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.adventure-card {
  border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.adventure-card:hover { border-color: var(--link); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.28); }
.adventure-image { aspect-ratio: 4/3; overflow: hidden; background: var(--surface-strong); }
.adventure-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.adventure-card:hover .adventure-image img { transform: scale(1.05); }
.adventure-body { padding: var(--sp-lg); }
.adventure-body h3 { font-size: 18px; margin-bottom: 4px; }
.adventure-body p { font-size: 15px; color: var(--body); }
*/ 

/* ============================================================================
   CONTACT - closes the page on the navy signature card: a fixed, brand
   color rather than a theme-relative token, so it can never end up the
   wrong shade regardless of what the rest of the page is doing.
============================================================================ */
#contact { padding: var(--sp-section) 0; background: var(--navy-deep); color: #dbe4f0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xxl); align-items: start; }
#contact h2 { color: #ffffff; }
#contact .eyebrow { color: var(--accent-light); }
.contact-desc { max-width: 42ch; margin: var(--sp-md) 0 var(--sp-xl); font-size: 17px; }

.contact-links { display: flex; flex-direction: column; gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.contact-link-row { display: flex; gap: var(--sp-md); align-items: baseline; transition: transform var(--dur-fast) var(--ease-out); }
.contact-link-row:hover { transform: translateX(4px); }
.contact-link-row .label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); width: 76px; flex-shrink: 0; }
.contact-link-row a { font-size: 17px; color: #ffffff; border-bottom: 1px solid transparent; }
.contact-link-row a:hover { border-color: currentColor; }

.availability {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-full);
  padding: 10px 18px; font-size: 13px; color: #dbe4f0;
}
.availability .dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--accent-light); }

.contact-form { display: flex; flex-direction: column; gap: var(--sp-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.field input, .field textarea {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-sm);
  padding: 14px 16px; color: #ffffff; font: inherit; font-size: 15px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-light); }
.field textarea { min-height: 130px; resize: vertical; }
.form-status { font-size: 14px; min-height: 18px; color: var(--accent-light); }

/* ============================================================================
   FOOTER
============================================================================ */
footer {
  padding: var(--sp-xl) var(--sp-xxl); border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-md);
  background: var(--canvas);
}
.footer-line { font-size: 14px; color: var(--muted); }
.footer-socials { display: flex; gap: var(--sp-lg); }
.footer-socials a { font-size: 14px; color: var(--muted); transition: color var(--dur-fast) var(--ease-out); }
.footer-socials a:hover { color: var(--ink); }

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width: 860px) {
  .container { padding: 0 var(--sp-lg); }
  header { padding: 16px var(--sp-lg); }
  .nav-links { position: fixed; top: 68px; left: 0; right: 0; background: var(--canvas);
    flex-direction: column; padding: var(--sp-lg); gap: var(--sp-lg); border-bottom: 1px solid var(--hairline);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-toggle { display: flex; }
  .hero-grid, .contact-grid, .project-featured, .form-row { grid-template-columns: 1fr; }
  .skills-row { flex-wrap: wrap; justify-content: center; }
  .portrait-wrap { max-width: 320px; margin: 0 auto; }
  .projects-grid { grid-template-columns: 1fr; }
  /* .adventures-grid { grid-template-columns: 1fr 1fr; } */
  .stats-row { grid-template-columns: 1fr 1fr; }
  #hero, #about, #projects, #adventures, #contact { padding: 64px 0; }
}
/* 
@media (max-width: 520px) {
  .adventures-grid { grid-template-columns: 1fr; }
}
  */