/* ============================================================================
 * style.css — marcosseris.com
 * ----------------------------------------------------------------------------
 * Design brief: an engineering document, not a landing page. Hairline rules
 * instead of glow, one accent colour used sparingly, monospace reserved for
 * metadata (numbers, dates, tags) the way a datasheet uses it. Light by
 * default; the dark theme is graphite, not black.
 *
 *   1.  Tokens (light + dark themes)
 *   2.  Reset & base
 *   3.  Utilities: wrap, reveal, buttons, cards, section headings
 *   4.  Scroll progress
 *   5.  Navigation + mobile menu
 *   6.  Hero + stats
 *   7.  About / facts / skills
 *   8.  Projects
 *   9.  Timeline
 *   10. Achievements
 *   11. Contact + form
 *   12. Footer
 *   13. Responsive
 *   14. Reduced motion / print
 * ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Light theme — the default. */
  --bg:         #fbfbfa;
  --surface:    #ffffff;
  --surface-2:  #f4f4f2;
  --line:       #e4e4e0;
  --line-2:     #cfcfc9;
  --text:       #15181d;
  --text-dim:   #474e59;
  --text-mute:  #767d89;

  --accent:      #1a5fb4;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(26, 95, 180, 0.08);
  --accent-line: rgba(26, 95, 180, 0.40);

  --ok:   #2c7a4b;
  --warn: #8a6018;
  --err:  #b3261e;

  --scheme: light;

  /* Type — system stacks only. No web fonts anywhere on this site. */
  --f-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
            'Liberation Mono', monospace;

  /* Layout */
  --wrap: 1060px;
  --pad:  clamp(1.25rem, 5vw, 2.5rem);
  --gap:  clamp(1.5rem, 3vw, 2.25rem);
  --r-sm: 4px;
  --r:    8px;

  /* Motion */
  --e:  cubic-bezier(0.4, 0, 0.2, 1);
  --t:  0.2s var(--e);
}

html[data-theme='dark'] {
  --bg:         #101317;
  --surface:    #171b21;
  --surface-2:  #1d222a;
  --line:       #272d36;
  --line-2:     #38404c;
  --text:       #e6e9ee;
  --text-dim:   #aeb5bf;
  --text-mute:  #848c98;

  --accent:      #7cb0f5;
  --accent-ink:  #0d1014;
  --accent-soft: rgba(124, 176, 245, 0.12);
  --accent-line: rgba(124, 176, 245, 0.42);

  --ok:   #6fce97;
  --warn: #d9ae62;
  --err:  #ef8f88;

  --scheme: dark;
}

html { color-scheme: var(--scheme); }

/* ---------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;    /* clears the sticky nav on anchor jumps */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

ul, ol { list-style: none; }

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

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

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.skip-link {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transform: translateY(-160%);
  transition: transform var(--t);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------------------
   3. UTILITIES
   ------------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
}

/* Section heading: a mono index, the title, then a rule running to the edge. */
.shead {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.shead__num {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.shead__title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.shead__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  align-self: center;
}

.section__lede {
  color: var(--text-dim);
  max-width: 60ch;
  margin: -1rem 0 2rem;
}

.subhead {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin: 3rem 0 1rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.eyebrow .dot,
.eyebrow .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

/* Cards are a single flat surface with a hairline. No shadows, no glow. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t);
}

/* Reveal on scroll. Gated behind `.js` so the page is fully readable with
   JavaScript disabled — without the class nothing is ever hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--e), transform 0.45s var(--e);
  transition-delay: var(--rd, 0ms);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }

.btn--ghost {
  border-color: var(--line-2);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--quiet {
  padding-inline: 0.4rem;
  color: var(--text-dim);
}
.btn--quiet:hover { color: var(--accent); }

.btn--sm { padding: 0.45rem 0.85rem; font-size: 0.86rem; }
.btn--full { width: 100%; }

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-dim);
  transition: border-color var(--t), color var(--t);
}
.iconbtn:hover { border-color: var(--line-2); color: var(--text); }
.iconbtn .icon { width: 1.05rem; height: 1.05rem; }

/* The toggle shows the theme you would switch TO. */
.icon--sun { display: none; }
html[data-theme='dark'] .icon--sun { display: block; }
html[data-theme='dark'] .icon--moon { display: none; }

/* ---------------------------------------------------------------------------
   4. SCROLL PROGRESS
   ------------------------------------------------------------------------ */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), transform 0.3s var(--e);
}

.nav.is-stuck { border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 60px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
}

.nav__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.nav__brandtext { font-weight: 500; letter-spacing: -0.01em; }

.nav__links {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-self: stretch;
  align-items: center;
}

.nav__links a {
  font-size: 0.92rem;
  color: var(--text-dim);
  transition: color var(--t);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--text); }

/* A 1px rule that slides under the current link — no pill, no fill. */
.nav__indicator {
  position: absolute;
  bottom: 12px;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  opacity: 0;
  transition: transform 0.25s var(--e), width 0.25s var(--e), opacity var(--t);
}
.nav__indicator.is-on { opacity: 1; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav__burger { display: none; }

/* Mobile menu */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  align-content: start;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.25s var(--e);
}
.mmenu[hidden] { display: none; }
.mmenu.is-open { opacity: 1; }

.mmenu__panel {
  display: grid;
  gap: 0.25rem;
  padding: 6rem var(--pad) 2rem;
  max-width: var(--wrap);
  width: 100%;
  margin-inline: auto;
}

.mmenu__panel a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line);
}

.mmenu__panel a span {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   6. HERO + STATS
   ------------------------------------------------------------------------ */
.hero {
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 6vw, 4.5rem);
}

.hero__inner {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  max-width: var(--wrap);
}

.hero__title {
  font-size: clamp(2.4rem, 7vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.hero__role {
  font-family: var(--f-mono);
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  color: var(--accent);
  letter-spacing: -0.01em;
}

.hero__tagline {
  max-width: 62ch;
  font-size: 1.06rem;
  color: var(--text-dim);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.hero__socials {
  display: flex;
  gap: 0.5rem;
}

.hero__socials a,
.footer__socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-mute);
  transition: color var(--t), border-color var(--t);
}
.hero__socials a:hover,
.footer__socials a:hover { color: var(--accent); border-color: var(--accent-line); }

.hero__socials .icon,
.footer__socials .icon { width: 1.05rem; height: 1.05rem; }

/* Stats: a plain measured row, divided by hairlines. The track count follows
 * however many entries content.js supplies — auto-fit collapses the tracks it
 * doesn't need, so removing a counter doesn't leave a hole in the row. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  width: 100%;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: 1.15rem 1.25rem;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; padding-left: 0; }

.stat__v {
  font-family: var(--f-mono);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
}

.stat__l {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--text-mute);
}

/* ---------------------------------------------------------------------------
   7. ABOUT / FACTS / SKILLS
   ------------------------------------------------------------------------ */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.about__heading {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  margin-bottom: 1rem;
}

.prose {
  display: grid;
  gap: 1rem;
  max-width: 66ch;
  color: var(--text-dim);
}

.about__side {
  position: sticky;
  top: 5rem;
}

/* If a portrait is added, it sits above the facts in the same panel. */
.about__side img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 1rem;
}

.facts {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

.fact {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
}
.fact:first-child { border-top: none; }

.fact dt {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

.fact dd { font-size: 0.92rem; }

.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.skillgroup { padding: 1.15rem 1.25rem; }

.skillgroup h4 {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---------------------------------------------------------------------------
   8. PROJECTS
   ------------------------------------------------------------------------ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.filter {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--text-mute);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.filter:hover { color: var(--text); border-color: var(--line-2); }

.filter.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Case study — the one project that gets room to explain itself. */
.cs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  margin-bottom: 1rem;
}

.cs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.cs__intro { flex: 1 1 24rem; }

.cs__title {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin: 0.5rem 0 0.6rem;
}

.cs__lede {
  color: var(--text-dim);
  max-width: 68ch;
  font-size: 0.98rem;
}

.cs__figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 1.5rem 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.cs__fig {
  background: var(--surface);
  padding: 0.9rem 1rem;
}

.cs__fig dt {
  font-family: var(--f-mono);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--text);
}

.cs__fig dd {
  font-size: 0.78rem;
  color: var(--text-mute);
}

.cs__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--line);
}

.cs__tab {
  position: relative;
  padding: 0.6rem 0.9rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  color: var(--text-mute);
  transition: color var(--t), border-color var(--t);
}
.cs__tab:hover { color: var(--text); }

.cs__tab[aria-selected='true'] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.cs__panel { padding-top: 1.25rem; }
.cs__panel:focus-visible { outline-offset: 4px; }

.cs__list {
  display: grid;
  gap: 0.6rem;
  max-width: 78ch;
  color: var(--text-dim);
  font-size: 0.94rem;
}

.cs__list li {
  position: relative;
  padding-left: 1.1rem;
}

.cs__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

.cs__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}

.grid__empty {
  color: var(--text-mute);
  padding: 2rem 0;
}

.pcard {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem;
  opacity: 0;
  transform: translateY(8px);
}

/* Cards are hidden by their own observer, so they need the same `.js` gate
   the reveal utility has — with JS off they must simply be visible. */
html:not(.js) .pcard,
.pcard.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--e), transform 0.45s var(--e), border-color var(--t);
  transition-delay: var(--rd, 0ms);
}

.pcard:hover { border-color: var(--line-2); }

.pcard--featured { grid-column: span 2; }

.pcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-mute);
}

.pcard__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.68rem;
}

.pcard__status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pcard__status[data-status='Live']        { color: var(--ok); }
.pcard__status[data-status='In progress'] { color: var(--warn); }

.pcard__title { font-size: 1.08rem; }

.pcard__blurb {
  color: var(--text-dim);
  font-size: 0.94rem;
  flex: 1;
}

.pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pcard__tag {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-mute);
}
.pcard__tag::before { content: '#'; opacity: 0.55; }

.pcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.pcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--accent);
}
.pcard__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   9. TIMELINE
   ------------------------------------------------------------------------ */
.timeline {
  display: grid;
  gap: 2.25rem;
  padding-left: 1.35rem;
  border-left: 1px solid var(--line);
}

.tl { position: relative; }

/* A small square node, aligned to the rule. Squares read as schematic;
   circles read as decoration. */
.tl::before {
  content: '';
  position: absolute;
  left: calc(-1.35rem - 3.5px);
  top: 0.55rem;
  width: 6px;
  height: 6px;
  background: var(--bg);
  border: 1px solid var(--line-2);
}

.tl:first-child::before {
  background: var(--accent);
  border-color: var(--accent);
}

.tl__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.7rem;
}

.tl__role { font-size: 1.05rem; }

.tl__org {
  color: var(--accent);
  font-size: 0.95rem;
}

.tl__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-mute);
}

.tl__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tl__points {
  display: grid;
  gap: 0.4rem;
  color: var(--text-dim);
  font-size: 0.94rem;
  max-width: 68ch;
}

.tl__points li {
  position: relative;
  padding-left: 1.1rem;
}

.tl__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--line-2);
}

/* ---------------------------------------------------------------------------
   10. ACHIEVEMENTS
   ------------------------------------------------------------------------ */
.awards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.award {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem 0.9rem;
  padding: 1.25rem;
}

.award__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--accent);
}
.award__icon .icon { width: 1.05rem; height: 1.05rem; }

.award__title { font-size: 1rem; }

.award__meta {
  margin-top: 0.15rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-mute);
}

.award__desc {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
   11. CONTACT + FORM
   ------------------------------------------------------------------------ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.contact__heading {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin-bottom: 0.75rem;
}

.contact__blurb {
  color: var(--text-dim);
  max-width: 46ch;
  margin-bottom: 1.5rem;
}

.mailchip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-family: var(--f-mono);
  font-size: 0.86rem;
  color: var(--text-dim);
  transition: border-color var(--t), color var(--t);
}
.mailchip:hover { border-color: var(--accent-line); color: var(--text); }

.mailchip__check { display: none; color: var(--ok); }
.mailchip.is-copied .mailchip__copy { display: none; }
.mailchip.is-copied .mailchip__check { display: block; }

.contact__socials {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.5rem;
}

.contact__socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 0.92rem;
  color: var(--text-dim);
  transition: color var(--t);
}
.contact__socials a:hover { color: var(--accent); }

.form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.field { display: grid; gap: 0.35rem; }

.field label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  transition: border-color var(--t), box-shadow var(--t);
}

.field textarea { resize: vertical; min-height: 7rem; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--err); }

/* Honeypot: bots fill it, humans never see it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  font-size: 0.86rem;
  color: var(--text-mute);
  min-height: 1.3em;
}
.form__note.is-ok  { color: var(--ok); }
.form__note.is-err { color: var(--err); }

/* ---------------------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 2rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.footer__left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.86rem;
  color: var(--text-mute);
}

.footer__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--text-mute);
}

.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.footer__top:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: inline-grid; }

  .about,
  .contact { grid-template-columns: 1fr; }

  .about__side { position: static; }

  .pcard--featured { grid-column: auto; }
}

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }

  .stat { border-left: none; padding-inline: 0; }
  .stat:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  /* An odd number of counters would otherwise leave the last one in a
   * half-empty row — let it take the full width instead. */
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .grid { grid-template-columns: 1fr; }

  .hero__cta .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   14. REDUCED MOTION / PRINT
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal],
  .pcard { opacity: 1; transform: none; }
}

@media print {
  .nav, .mmenu, .scroll-progress, .footer__top,
  .hero__cta, .form, .filters { display: none !important; }

  body { background: #fff; color: #000; }

  .section { padding-block: 1.5rem; border-color: #ccc; }

  .card,
  .facts { border-color: #ccc; break-inside: avoid; }

  .js [data-reveal],
  .pcard { opacity: 1 !important; transform: none !important; }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }
}