/* ============================================================
   Matthew Tañada Serrano (wetzuu) — portfolio
   Warm-paper editorial. Instrument Serif italic for accent words,
   Inter for display & body, JetBrains Mono for micro-labels.
   Deep forest-green accent on cream. Soft radii, hairline rules.
   ============================================================ */

:root {
  --bg: #f7f4ed;
  --bg-2: #f1ece1;
  --surface: #fdfbf6;
  --ink: #1d1f1a;
  --muted: #5d6156;
  --faint: #8d8f81;
  --hair: #e5e0d2;
  --hair-2: #d2ccbb;
  --accent: #2e6b48;
  --accent-ink: #1e4a31;
  --accent-dim: rgba(46, 107, 72, 0.08);

  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", "Georgia", serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-fraunces: "Fraunces", var(--font-serif);
  --accent-name: #3a6650;

  /* Corner radii — one scale, used everywhere so nothing looks improvised */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(29, 31, 26, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(29, 31, 26, 0.16);
  --shadow-lg: 0 18px 44px -20px rgba(29, 31, 26, 0.22);

  --container: 1080px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0325rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--accent); color: var(--bg); }

a { color: inherit; }

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

/* ---------- Accent italic (shared by every emphasized word) ---------- */
.hero-accent,
.section-title em,
.contact-lede em,
.timeline-item p em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--accent-ink);
}

/* ---------- Micro-label utility (uppercase mono) ---------- */
.section-label,
.hero-eyebrow,
.timeline-date,
.skill-row dt,
.about-facts dt,
.project-year,
.lang-bar-title,
.hero-stats dd {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  backdrop-filter: blur(12px) saturate(1.4);
  background: rgba(247, 244, 237, 0.72);
  border-bottom: 1px solid transparent; /* the wire the dog walks on */
  transition: border-color 0.3s, background 0.3s;
}
.site-header.scrolled {
  border-bottom-color: var(--hair);
  background: rgba(247, 244, 237, 0.9);
}

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

.nav-logo {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.nav-logo:hover { color: var(--accent-ink); }

.nav-caret {
  width: 7px;
  height: 0.95em;
  background: var(--accent);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* ---------- Header dachshund (black & tan, like the real one) ---------- */
.header-dog {
  position: absolute;
  left: 0;
  bottom: -1px; /* paws on the header border line */
  pointer-events: none;
  will-change: transform;
  transition: transform 0.35s linear;
}

.dog { display: block; overflow: visible; }
.dog rect { fill: #3a2f26; }              /* dark chocolate coat */
.dog .dog-snout { fill: #b9855a; }        /* tan muzzle */
.dog .dog-brow { fill: #b9855a; }         /* tan eyebrow spot */
.dog .dog-ear { fill: #241c15; }          /* near-black floppy ear */
.dog .dog-nose { fill: #15100b; }
.dog .dog-eye { fill: #0f0c09; }
.dog .dog-collar { fill: var(--accent); } /* little green collar */
.dog .dog-eye {
  transform-origin: 32px 6px;
  animation: dog-blink 4.5s infinite;
}
.dog .dog-tail {
  transform-origin: 3px 10px;
  animation: dog-wag 1.6s ease-in-out infinite alternate;
}

/* faces left when scrolling up */
.header-dog.flip .dog { transform: scaleX(-1); }

/* stubby legs trot only while scrolling */
.dog .dog-legs-a, .dog .dog-legs-b { transform: translateY(0); }
.header-dog.walking .dog-legs-a { animation: dog-step 0.22s steps(1) infinite; }
.header-dog.walking .dog-legs-b { animation: dog-step 0.22s steps(1) infinite reverse; }
.header-dog.walking .dog-tail { animation-duration: 0.5s; } /* excited wag */

@keyframes dog-step {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes dog-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 96% { transform: scaleY(0.12); }
}
@keyframes dog-wag {
  from { transform: rotate(-8deg); }
  to { transform: rotate(14deg); }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
/* Pill hover instead of a hairline underline — reads cleaner at small sizes
   and gives the link a real hit area. */
.nav-menu a {
  position: relative;
  display: block;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--muted);
  padding: 8px 15px;
  border-radius: var(--r-pill);
  transition: color 0.25s, background 0.25s;
}
.nav-menu a:hover { color: var(--ink); background: var(--bg-2); }
/* Current section reads as a quiet outlined chip — no accent colour, so it
   never competes with the green used for actual links and actions. */
.nav-menu a.active {
  color: var(--ink);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-weight: 500;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.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); }

/* ---------- Section rail (fixed scroll-spy index) ---------- */
/* Lives in the right gutter, so it only appears when the viewport is wide
   enough to clear the centered container (see media query below). Items are
   mirrored (label · tick · number) so the numbers align to the right edge. */
.section-rail {
  position: fixed;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  z-index: 40;
  display: none; /* enabled once the gutter has room (see media query) */
}
.section-rail ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* right-align rows of differing width */
  gap: 16px;
}
.section-rail a {
  display: flex;
  flex-direction: row-reverse; /* number sits at the far right edge */
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--faint);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.section-rail:hover a { opacity: 1; }
.rail-num {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease);
}
/* the tick is the "─": a hairline that lengthens and turns accent when active */
.rail-tick {
  width: 14px;
  height: 1px;
  background: var(--hair-2);
  transition: width 0.35s var(--ease), background 0.3s var(--ease);
}
.rail-label {
  letter-spacing: 0.06em;
  color: var(--faint);
  transition: color 0.3s var(--ease), transform 0.35s var(--ease);
}
.section-rail a:hover { opacity: 1; color: var(--muted); }
.section-rail a:hover .rail-tick { width: 22px; }

.section-rail a.active { opacity: 1; }
.section-rail a.active .rail-num { color: var(--accent-ink); font-weight: 500; }
.section-rail a.active .rail-tick { width: 30px; background: var(--accent); }
.section-rail a.active .rail-label { color: var(--ink); transform: translateX(-2px); }

@media (min-width: 1360px) {
  .section-rail { display: block; }
}

/* ---------- Links in body text ---------- */
main a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hair-2);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s, color 0.2s;
}
main a:hover {
  color: var(--accent-ink);
  text-decoration-color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn-solid,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s,
              box-shadow 0.25s, transform 0.25s var(--ease);
}
.btn-solid {
  background: var(--ink);
  color: var(--bg) !important;
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-solid:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.btn-ghost {
  color: var(--ink) !important;
  border: 1px solid var(--hair-2);
  background: var(--surface);
}
.btn-ghost:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.btn-solid:active, .btn-ghost:active { transform: translateY(0); }

/* arrow nudges on hover */
.btn-solid span, .btn-ghost span,
.project-links a span,
.contact-alt a span {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.btn-solid:hover span, .btn-ghost:hover span { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero { padding: 168px 0 0; }

.hero-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Plain text, not a chip — a bordered pill directly above the masthead added
   a second box for the eye to parse before it reached the name. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  margin-bottom: 38px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: status-pulse 2.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 107, 72, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(46, 107, 72, 0); }
}

/* Weight 500 rather than 600: at display sizes Inter 600 reads as a heavy
   slab next to the light serif accent. The size is capped so "Tañada Serrano"
   stays on one line beside the art column — three stacked lines read as
   clutter, two read as a masthead. */
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  margin-bottom: 28px;
}
.hero-line { display: block; }
/* Instrument Serif is a single-weight display face, so it needs a size bump
   to hold its own next to Inter 500 at the same nominal size. The negative
   left margin pulls the italic's sidebearing back so its stem lines up with
   the T below it rather than floating a few pixels right. */
.hero-accent {
  font-size: 1.18em;
  line-height: 0.92;
  margin-left: -0.035em;
  display: inline-block;
}

/* Hero greeting — terminal string literal; scoped to h1 text only */
.hero-greeting {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.hero-greeting__prompt {
  color: var(--faint);
  font-weight: 400;
}

.hero-greeting__str {
  color: var(--accent-ink);
}

.hero-greeting__quote {
  color: var(--accent);
  opacity: 0.78;
}

.hero-greeting__text {
  background: linear-gradient(
    105deg,
    var(--accent-ink) 0%,
    var(--accent-ink) 38%,
    #3a7d58 46%,
    #5fa07a 50%,
    #3a7d58 54%,
    var(--accent-ink) 62%,
    var(--accent-ink) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-greeting-shimmer 6s ease-in-out infinite;
}

.hero-greeting__cursor {
  display: inline-block;
  width: 0.085em;
  height: 0.84em;
  margin-left: 0.05em;
  vertical-align: -0.07em;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0.9;
  animation: hero-greeting-cursor 1.08s step-end infinite;
}

@keyframes hero-greeting-shimmer {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}

@keyframes hero-greeting-cursor {
  0%, 45% { opacity: 0.9; }
  50%, 100% { opacity: 0; }
}

.hero-sub {
  max-width: 520px;
  color: var(--muted);
  margin-bottom: 36px;
}

.hero-name {
  font-family: var(--font-fraunces);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: 0.015em;
  color: var(--accent-name);
  font-size: 1.14em;
}

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

/* ---------- Hero ASCII dog ---------- */
.hero-art-wrap {
  position: relative;
  justify-self: end;
}
/* opacity/colour live on the art itself now, so the callouts layered beside it
   keep their own full-strength styling */
.hero-art {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.05;
  letter-spacing: 0;
  white-space: pre;
  color: var(--accent);
  opacity: 0.6;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  transition: opacity 0.4s;
}
.hero-art-wrap:hover .hero-art { opacity: 0.9; }

/* ---------- Hero stats (hairline row, editorial) ---------- */
.hero-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 84px;
  border-top: 1px solid var(--hair);
}
.hero-stats > div { padding: 26px 24px 30px 0; }
.hero-stats > div + div {
  border-left: 1px solid var(--hair);
  padding-left: 24px;
}
.hero-stats dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero-stats dd {
  color: var(--faint);
  margin-top: 6px;
  line-height: 1.5;
}

/* Tabular figures keep the number from reflowing while the digits shuffle.
   The spinning digits sit muted so the real value reads as the resolution. */
.stat-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease);
}
.stat-num.shuffling { color: var(--faint); }

/* ---------- Ticker ---------- */
/* Sits flush on the page background so it reads as part of the paper rather
   than a band laid over it — only the hairlines mark where it starts and ends. */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--bg);
  padding: 22px 0;
  margin: 84px 0 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: ticker-scroll 36s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  padding-right: 26px;
}
.ticker-track span::after {
  content: "/";
  color: var(--hair-2);
  padding-left: 26px;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Sections ---------- */
.section { padding: 112px 0; scroll-margin-top: 84px; }
.section + .section { border-top: 1px solid var(--hair); }

.section-label {
  color: var(--faint);
  margin-bottom: 18px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 48px;
  max-width: 760px;
}
.section-title em { font-size: 1.08em; }

.section-lede {
  color: var(--muted);
  max-width: 580px;
  margin: -30px 0 56px;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-text p { margin-bottom: 1.25em; color: var(--muted); }
.about-text p:last-child { margin-bottom: 0; }
.about-text strong { color: var(--ink); font-weight: 600; }

.about-facts {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 8px 24px;
  box-shadow: var(--shadow-sm);
}
.about-facts dl { display: grid; }
.about-facts dl > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}
.about-facts dl > div:last-child { border-bottom: 0; }
.about-facts dt {
  color: var(--faint);
  margin-bottom: 4px;
}
.about-facts dd { font-size: 0.94rem; line-height: 1.55; }

/* ---------- Projects (editorial index rows) ---------- */
.projects { display: grid; gap: 8px; }

.project {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 36px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.project:hover {
  background: var(--surface);
  border-color: var(--hair);
  box-shadow: var(--shadow-md);
}
/* hairline separators between rows, but not under the last one */
.project:not(:last-child) { box-shadow: inset 0 -1px 0 var(--hair); }
.project:not(:last-child):hover { box-shadow: var(--shadow-md); }

.project-index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
  padding-top: 9px;
  transition: color 0.3s;
}
.project:hover .project-index { color: var(--ink); }

.project-body { display: grid; gap: 14px; max-width: 720px; }

.project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.project h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: -0.025em;
}
.project h3 a { text-decoration: none; }
.project h3 a:hover { color: var(--accent-ink); }

.project-arrow {
  display: inline-block;
  font-size: 0.72em;
  margin-left: 8px;
  color: var(--faint);
  transition: transform 0.35s var(--ease), color 0.35s;
}
.project:hover .project-arrow {
  transform: translate(3px, -3px);
  color: var(--ink);
}

.project-year {
  color: var(--faint);
  white-space: nowrap;
}

.project-desc { color: var(--muted); }

.project-note {
  color: var(--muted);
  font-size: 0.92rem;
  background: var(--bg-2);
  border-left: 2px solid var(--hair-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 16px;
}
.project-note code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(29, 31, 26, 0.07);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

.project-stack {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.project-stack li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.project:hover .project-stack li {
  border-color: var(--faint);
  background: var(--bg);
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-top: 4px;
}
.project-links a {
  color: var(--accent-ink);
  text-decoration: none;
}
.project-links a:hover span { transform: translateX(3px); }
.project-links a:hover { color: var(--accent); }

/* ---------- Experience / timeline ---------- */
.timeline { list-style: none; display: grid; border-top: 1px solid var(--hair); }
.timeline-item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--hair);
}
.timeline-date {
  color: var(--faint);
  padding-top: 7px;
}
.timeline-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.timeline-item p { color: var(--muted); max-width: 620px; }
.timeline-item p + p { margin-top: 12px; }

/* ---------- Skills ---------- */
.skills-list { display: grid; margin-bottom: 72px; border-top: 1px solid var(--hair); }
.skill-row {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
}
.skill-row dt {
  color: var(--faint);
  padding-top: 5px;
}
.skill-row dd { color: var(--muted); font-size: 0.97rem; }

/* ---------- Language bar ---------- */
.lang-bar-wrap {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 28px 30px 26px;
  box-shadow: var(--shadow-sm);
}
.lang-bar-title {
  color: var(--faint);
  margin-bottom: 16px;
}
.lang-bar {
  display: flex;
  height: 10px;
  gap: 3px;
}
.lang-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  transform-origin: left;
}

.lang-ts    { background: #44618b; }
.lang-java  { background: #97683d; }
.lang-js    { background: #99852d; }
.lang-css   { background: #6d5a9c; }
.lang-astro { background: #9c5876; }
.lang-py    { background: #2e6b48; }

.lang-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}
.lang-legend li { display: flex; align-items: center; gap: 8px; }
.lang-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.lang-caption {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--faint);
}

/* ---------- Contact ---------- */
.section-contact { padding-bottom: 128px; }

.contact-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 64px 44px 56px;
  text-align: center;
}
.contact-card .section-label { margin-bottom: 22px; }

.contact-lede {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.24;
  max-width: 660px;
  margin: 0 auto 40px;
  text-wrap: balance;
}
.contact-lede em { font-size: 1.08em; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.copy-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-pill);
  padding: 14px 20px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.copy-email svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.copy-email:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-ink);
}

.contact-alt {
  margin-top: 26px;
  font-size: 0.9rem;
  color: var(--faint);
}
.contact-alt a { color: var(--muted); }
.contact-alt a:hover span { transform: translateX(2px); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hair);
  padding: 30px 0;
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: color 0.2s;
}
.site-footer a:hover { color: var(--accent-ink); }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
/* Projects keep hover transitions alongside the entry animation */
.project.reveal {
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* gentle stagger for grouped reveals */
.hero-title.reveal { transition-delay: 0.05s; }
.hero-sub.reveal { transition-delay: 0.12s; }
.hero-links.reveal { transition-delay: 0.2s; }
.hero-art-wrap.reveal { transition-delay: 0.28s; }
.hero-stats.reveal { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .header-dog { transition: none; }
  .dog .dog-tail, .dog .dog-eye,
  .header-dog.walking .dog-legs-a, .header-dog.walking .dog-legs-b,
  .nav-caret, .status-dot, .ticker-track { animation: none; }
  .btn-solid:hover, .btn-ghost:hover { transform: none; }
  .rail-tick { transition: background 0.3s; } /* keep color, drop the length animation */
  .section-rail a.active .rail-label { transform: none; }
  .hero-greeting__text {
    animation: none;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--accent-ink);
  }
  .hero-greeting__cursor { animation: none; opacity: 0.9; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 940px) {
  /* not enough room beside the text — hide the decorative art */
  .hero-art-wrap { display: none; }
  .hero-layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .skill-row { grid-template-columns: 1fr; gap: 6px; }
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
  .project { grid-template-columns: 1fr; gap: 8px; padding: 32px 20px; }
  .project-index { padding-top: 0; }
  .contact-card { padding: 48px 26px 44px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 132px; }
  .section { padding: 78px 0; }

  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--hair);
    padding: 8px 20px 20px;
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu li a {
    display: block;
    padding: 14px 16px;
    font-size: 1.05rem;
    border-radius: var(--r-md);
  }
  .nav-menu li + li { border-top: 1px solid var(--hair); }

  .hero-eyebrow { font-size: 0.64rem; margin-bottom: 28px; }
  .hero-title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero-stats { grid-template-columns: 1fr; margin-top: 60px; }
  .hero-stats > div { padding: 20px 0; }
  .hero-stats > div + div {
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
  .hero-links { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .btn-solid, .btn-ghost { justify-content: center; }

  .ticker { padding: 18px 0; margin-top: 60px; }
  .ticker-track span { font-size: 0.85rem; }

  .project-head { flex-direction: column; gap: 4px; }
  .lang-bar-wrap { padding: 24px 20px; }
  .lang-legend { gap: 8px 16px; }

  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions .btn-solid { justify-content: center; }
  .copy-email { justify-content: center; }
}