/* ============================================================
   Micah Falde · Portfolio
   Vanilla CSS. Semantic tokens, system-aware dark mode.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Light theme (default) */
  --surface-0: #f7f8f8;   /* page background */
  --surface-1: #ffffff;   /* cards */
  --surface-2: #eef0f1;   /* raised / hover */
  --surface-3: #e2e5e7;   /* borders subtle */
  --text-primary: #14181b;
  --text-secondary: #545d66;
  --text-tertiary: #8a939c;
  --border: #e1e4e7;
  --border-strong: #cfd4d9;

  --accent: #0d9488;          /* teal-600 · accents / decoration */
  --accent-strong: #0f766e;   /* teal-700 · text on light (AA) */
  --accent-deep: #0b6e64;     /* button bg · white text passes AA */
  --accent-deep-hover: #084f48;
  --accent-soft: #ccfbf1;     /* teal-100 */
  --accent-contrast: #ffffff;

  --shadow-sm: 0 1px 2px rgba(20, 24, 27, .06), 0 1px 3px rgba(20, 24, 27, .04);
  --shadow-md: 0 4px 12px rgba(20, 24, 27, .07), 0 2px 4px rgba(20, 24, 27, .05);
  --shadow-lg: 0 12px 32px rgba(20, 24, 27, .10), 0 4px 8px rgba(20, 24, 27, .05);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  --maxw: 1080px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, monospace;

  --step--1: clamp(.82rem, .80rem + .1vw, .88rem);
  --step-0:  clamp(.95rem, .92rem + .15vw, 1.02rem);
  --step-1:  clamp(1.12rem, 1.05rem + .35vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.25rem + .7vw, 1.85rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.6vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3.4vw, 4.6rem);
}

:root[data-theme="dark"] {
  --surface-0: #0c0f12;
  --surface-1: #14181d;
  --surface-2: #1c2228;
  --surface-3: #262d35;
  --text-primary: #eef1f3;
  --text-secondary: #a4afb9;
  --text-tertiary: #6b7682;
  --border: #232a31;
  --border-strong: #313a43;

  --accent: #2dd4bf;          /* desaturated/brighter for dark surfaces */
  --accent-strong: #5eead4;
  --accent-deep: #2dd4bf;     /* dark mode: bright teal + near-black text */
  --accent-deep-hover: #5eead4;
  --accent-soft: #0f2e2a;
  --accent-contrast: #04110f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s ease, color .35s ease;
}

h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.02em; font-weight: 680; margin: 0; overflow-wrap: break-word; }
body { overflow-x: hidden; }
p { margin: 0 0 1rem; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
/* Base link color uses --accent-strong, which is redefined per theme (light teal in dark),
   so it stays readable without a broad dark-mode override that would clobber button text. */

/* focus visibility · survives forced-colors */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-contrast);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-head { margin-bottom: 2.5rem; }
.section-kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .5rem;
}
:root[data-theme="dark"] .section-kicker { color: var(--accent); }
.section-kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.section-title { font-size: var(--step-3); margin-top: .7rem; }
.section-intro { color: var(--text-secondary); max-width: 56ch; margin-top: .8rem; font-size: var(--step-1); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in srgb, var(--surface-0) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { font-weight: 720; letter-spacing: -.03em; font-size: 1.05rem; color: var(--text-primary); display: inline-flex; align-items: center; gap: .55rem; }
.brand:hover { text-decoration: none; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.nav-links { display: flex; align-items: center; gap: .3rem; }
.nav-links a {
  color: var(--text-secondary); font-size: var(--step--1); font-weight: 550;
  padding: .45rem .7rem; border-radius: var(--radius-pill); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text-primary); background: var(--surface-2); text-decoration: none; }
.nav-links a.active { color: var(--accent-strong); }
:root[data-theme="dark"] .nav-links a.active { color: var(--accent); }
.nav-cta { display: none; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

.theme-toggle {
  appearance: none; border: 1px solid var(--border); background: var(--surface-1);
  width: 38px; height: 38px; border-radius: var(--radius-pill); cursor: pointer;
  color: var(--text-secondary); display: grid; place-items: center; transition: all .2s ease;
  margin-left: .4rem;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

@media (max-width: 640px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-weight: 600; font-size: var(--step--1); padding: .68rem 1.15rem;
  border-radius: var(--radius-pill); border: 1px solid transparent; transition: all .2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--accent-deep); color: var(--accent-contrast); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-deep-hover); box-shadow: var(--shadow-md); }
.btn-ghost { background: var(--surface-1); color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn svg { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 78% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 40% at 12% 80%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .4;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
}
.hero-available {
  display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono);
  font-size: var(--step--1); color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--border);
  padding: .4rem .85rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.hero-available .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; }
.hero-available .pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--accent); opacity: .35; animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(2.4); opacity: 0; } }

.hero h1 { font-size: var(--step-4); font-weight: 720; margin-top: 1.5rem; letter-spacing: -.035em; }
.hero h1 .grad {
  background: linear-gradient(105deg, var(--accent-strong), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tagline { font-size: clamp(1.1rem, .95rem + .8vw, 1.5rem); color: var(--text-secondary); max-width: 60ch; margin-top: 1.3rem; line-height: 1.5; }
.hero-tagline strong { color: var(--text-primary); font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3.5rem;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 680px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface-1); padding: 1.3rem 1.4rem; }
.stat .num { font-size: var(--step-2); font-weight: 720; letter-spacing: -.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat .num .unit { color: var(--accent-strong); }
:root[data-theme="dark"] .stat .num .unit { color: var(--accent); }
.stat .label { font-size: var(--step--1); color: var(--text-tertiary); margin-top: .15rem; }

/* ---------- Projects ---------- */
.projects-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.5rem; display: flex; flex-direction: column; position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent 65%);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card:hover::after { transform: scaleX(1); }
.card.featured { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .card.featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; padding: 2rem; }
}

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-domain {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; padding: .25rem .55rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-strong); white-space: nowrap;
}
:root[data-theme="dark"] .card-domain { color: var(--accent-strong); }
.card-domain.sec { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
:root[data-theme="dark"] .card-domain.sec { color: #fbbf24; }
.card-domain.civic { background: color-mix(in srgb, #6366f1 18%, transparent); color: #4f46e5; }
:root[data-theme="dark"] .card-domain.civic { color: #a5b4fc; }

.card h3 { font-size: var(--step-2); margin-top: .2rem; }
.live-link {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600;
  font-family: var(--font-mono); color: var(--accent-strong); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: .25rem .55rem; border-radius: var(--radius-pill); margin-top: .4rem; white-space: nowrap;
}
.live-link:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.live-link .ldot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
:root[data-theme="dark"] .live-link { color: var(--accent); }
.card-foot { color: var(--text-secondary); font-size: var(--step--1); }
.card .one-liner { color: var(--text-secondary); margin-top: .5rem; font-size: var(--step-0); }
.card .body { display: flex; flex-direction: column; height: 100%; }

.metrics { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 1.1rem 0 0; }
.metric {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--text-primary);
  background: var(--surface-2); border: 1px solid var(--border); padding: .28rem .6rem; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: .35rem;
}
.metric b { color: var(--accent-strong); font-weight: 700; }
:root[data-theme="dark"] .metric b { color: var(--accent); }

.tech { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; }
.tech span { font-size: .72rem; color: var(--text-tertiary); padding: .2rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); }

.card-links { display: flex; gap: 1rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.card-links a { font-size: var(--step--1); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); }
.card-links a:hover { color: var(--accent-strong); text-decoration: none; }
:root[data-theme="dark"] .card-links a:hover { color: var(--accent); }
.card-links svg { width: 14px; height: 14px; }
.card-visual {
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-0);
  aspect-ratio: 16/10; overflow: hidden; position: relative; display: none;
}
@media (min-width: 720px) { .card.featured .card-visual { display: block; } }

/* mock terminal/preview inside featured visual */
.preview { width: 100%; height: 100%; padding: .85rem; font-family: var(--font-mono); font-size: .72rem; line-height: 1.7; color: var(--text-secondary); overflow: hidden; }
.preview .bar { display: flex; gap: .4rem; margin-bottom: .8rem; }
.preview .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.preview .ln { white-space: pre; }
.preview .k { color: var(--accent-strong); }
:root[data-theme="dark"] .preview .k { color: var(--accent); }
.preview .c { color: var(--text-tertiary); }
.preview .s { color: #c2410c; }
:root[data-theme="dark"] .preview .s { color: #fb923c; }

/* ---------- Archive ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter {
  appearance: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--step--1);
  font-weight: 550; padding: .45rem .9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); transition: all .2s ease;
}
.filter:hover { border-color: var(--border-strong); color: var(--text-primary); }
.filter[aria-pressed="true"] { background: var(--accent-deep); color: var(--accent-contrast); border-color: var(--accent-deep); }

.archive-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
.mini {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1.15rem 1.2rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s, opacity .3s;
}
.mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.mini.hide { display: none; }
.mini .m-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.mini h4 { font-size: var(--step-1); }
.mini .m-tag { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); }
.mini p { font-size: var(--step--1); color: var(--text-secondary); margin: 0; }
.mini .m-tech { font-family: var(--font-mono); font-size: .68rem; color: var(--text-tertiary); margin-top: .7rem; }

/* ---------- About ---------- */
.about-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .about-grid { grid-template-columns: 1.4fr 1fr; gap: 3.5rem; } }
.about-body p { font-size: var(--step-1); color: var(--text-secondary); }
.about-body p strong { color: var(--text-primary); font-weight: 600; }
.about-aside { display: flex; flex-direction: column; gap: 1rem; }
.aside-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.aside-card h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary); font-family: var(--font-mono); font-weight: 600; margin-bottom: .8rem; }
.aside-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.aside-card li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step-0); color: var(--text-secondary); }
.aside-card li svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: .25rem; }

/* ---------- Skills ---------- */
.skills-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .skills-grid { grid-template-columns: repeat(3, 1fr); } }
.skill-col { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.skill-col .icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 1rem; }
:root[data-theme="dark"] .skill-col .icon { color: var(--accent-strong); }
.skill-col .icon svg { width: 21px; height: 21px; }
.skill-col h3 { font-size: var(--step-1); margin-bottom: .25rem; }
.skill-col > p { font-size: var(--step--1); color: var(--text-tertiary); margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font-size: .76rem; font-family: var(--font-mono); padding: .3rem .6rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); }

/* ---------- Experience ---------- */
.exp { position: relative; padding-left: 2rem; border-left: 2px solid var(--border); }
.exp-item { position: relative; padding-bottom: 2.2rem; }
.exp-item:last-child { padding-bottom: 0; }
.exp-item::before { content: ""; position: absolute; left: calc(-2rem - 7px); top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface-0); box-shadow: 0 0 0 1px var(--border); }
.exp-item .role { font-size: var(--step-1); font-weight: 650; }
.exp-item .org { color: var(--accent-strong); font-weight: 600; }
:root[data-theme="dark"] .exp-item .org { color: var(--accent); }
.exp-item .when { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-tertiary); margin: .1rem 0 .8rem; }
.exp-item ul { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); }
.exp-item li { margin-bottom: .4rem; }
.exp-item li::marker { color: var(--accent); }

/* ---------- Education & Certs ---------- */
.edu-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .edu-grid { grid-template-columns: 1fr 1.3fr; gap: 2rem; align-items: start; } }
.panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.panel h3 { font-size: var(--step-1); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .55rem; }
.panel h3 svg { width: 19px; height: 19px; color: var(--accent); }
.degree { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.degree:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.degree .d-name { font-weight: 640; font-size: var(--step-0); }
.degree .d-school { color: var(--text-secondary); font-size: var(--step--1); }
.degree .d-year { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-tertiary); }
.cert-note { color: var(--text-tertiary); font-size: var(--step--1); margin-bottom: 1rem; }
.cert-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.cert {
  font-size: .76rem; font-weight: 600; font-family: var(--font-mono);
  padding: .35rem .7rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: .4rem;
}
.cert .vendor { color: var(--accent-strong); }
:root[data-theme="dark"] .cert .vendor { color: var(--accent); }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  padding: clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden;
}
.contact-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6;
  background: radial-gradient(60% 80% at 50% 0%, var(--accent-soft), transparent 70%);
}
.contact-card > * { position: relative; z-index: 1; }
.contact h2 { font-size: var(--step-3); }
.contact p { color: var(--text-secondary); font-size: var(--step-1); max-width: 46ch; margin-inline: auto; margin-top: .8rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding-block: 2rem; color: var(--text-tertiary); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: var(--step--1); }
.footer a { color: var(--text-secondary); }
.footer .built { font-family: var(--font-mono); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }