/* Minimal reset (replaces Tailwind preflight, since this is a static copy of
   the zackhaynie.com stylesheet). */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
:root { --font-sans: "Inter Tight"; }

/* ============================================================
   Palette. Light first, dark honored.
   ============================================================ */

:root {
  --bg: #fbfbfd;
  --bg-card: #f5f5f7;
  --bg-elevated: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --accent: #0066cc;
  --accent-ink: #ffffff;
  /* Secondary accent (tech-help pill). Green, kept dark enough to stay
     high-contrast on the near-white page for older eyes. */
  --accent-2: #0f7a3d;
  --accent-2-ink: #ffffff;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-card: #101012;
    --bg-elevated: #1a1a1c;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #86868b;
    --line: #2a2a2e;
    --line-soft: #1c1c1f;
    --accent: #2997ff;
    --accent-ink: #000000;
    /* Brighter green on the black page for the same reason. */
    --accent-2: #3ddc74;
    --accent-2-ink: #000000;
    --shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

a {
  color: inherit;
}

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

/* ============================================================
   Layout
   ============================================================ */

.wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-narrow {
  max-width: 720px;
}

.section {
  padding: 128px 0;
}

.section-tight {
  padding: 88px 0;
}

.divider {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .section {
    padding: 80px 0;
  }
  .section-tight {
    padding: 56px 0;
  }
}

/* ============================================================
   Type scale
   ============================================================ */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.07;
}

.t-hero {
  font-size: clamp(2.75rem, 7vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.t-section {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing: -0.03em;
}

.t-project {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -0.028em;
}

.t-sub {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--ink-2);
}

.t-body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.t-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.center {
  text-align: center;
}

.measure {
  max-width: 34ch;
  margin-inline: auto;
}

.measure-wide {
  max-width: 62ch;
}

.prose p {
  margin: 0 0 1.2em;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 64ch;
}

.prose p:last-child {
  margin-bottom: 0;
}

.stack-sm > * + * {
  margin-top: 12px;
}
.stack-md > * + * {
  margin-top: 24px;
}
.stack-lg > * + * {
  margin-top: 48px;
}

/* ============================================================
   Navigation
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  gap: 16px;
}

.nav-brand {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-github {
  display: inline-flex;
  align-items: center;
}

/* Swapped in only on phones, where the octocat replaces the word "GitHub". */
.nav-only-sm,
.nav-only-xs {
  display: none;
}

/*
  All five nav items have to survive down to a 320px phone, so the row gets
  squeezed rather than collapsed. Measured at 320px, the full-size row needs
  353px of the 301px available, and the savings come in that order: smaller
  type and tighter gaps first, then "GitHub" down to its icon, then the two
  longest labels shortened below 400px. Change any label here and re-measure,
  because 320px ends up with only 12px of slack.
*/
@media (max-width: 600px) {
  .nav-inner {
    gap: 12px;
  }
  .nav-links {
    gap: 15px;
  }
  .nav-links a {
    font-size: 0.75rem;
  }
  .nav-brand {
    font-size: 0.875rem;
  }
  .nav-links .btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
  .nav-hide-sm {
    display: none;
  }
  .nav-only-sm {
    display: inline-flex;
  }
  .nav-github {
    font-size: 0.9375rem;
  }
}

/* Narrow phones: "Zack Haynie" becomes "Zack", "Email me" becomes "Email". */
@media (max-width: 400px) {
  .nav-links {
    gap: 13px;
  }
  .nav-hide-xs {
    display: none;
  }
  .nav-only-xs {
    display: inline;
  }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 980px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.975);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  opacity: 0.88;
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--bg-card);
}

.btn-sm {
  padding: 7px 16px;
  font-size: 0.8125rem;
}

.link-arrow {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.0625rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.link-arrow:hover {
  text-decoration: underline;
}

/* A link inside a run of body text. Underlined from the start, because inside
   a paragraph color alone is not a reliable signal that something is a link. */
.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.inline-link:hover {
  text-decoration-thickness: 2px;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding: clamp(72px, 13vw, 152px) 0 clamp(64px, 10vw, 112px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 980px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #30d158;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, #30d158 22%, transparent);
}

.dot-amber {
  background: #ff9f0a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff9f0a 22%, transparent);
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Clickable announcement pill: the first thing a visitor sees, routing
   business owners to the local-business site work below. */
.hero-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 9px;
  border-radius: 980px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.hero-ribbon:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  transform: translateY(-1px);
}

.hero-ribbon-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 980px;
  background: var(--accent);
  color: var(--accent-ink);
}

/* Holds the two hero pills side by side, stacking on narrow screens. */
.hero-ribbons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Secondary pill (tech help): green so it stays easy to see and reads as a
   distinct service from the blue websites pill. */
.hero-ribbon-alt {
  background: color-mix(in srgb, var(--accent-2) 11%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 40%, transparent);
  color: var(--accent-2);
}

.hero-ribbon-alt:hover {
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.hero-ribbon-alt .hero-ribbon-tag {
  background: var(--accent-2);
  color: var(--accent-2-ink);
}

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 52px);
}

.card-elevated {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

/* ---- how I work ---- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

.pillar {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 28px 24px;
}

.pillar h3 {
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.pillar p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---- projects ---- */

.project {
  padding: clamp(56px, 9vw, 96px) 0;
}

.project + .project {
  border-top: 1px solid var(--line-soft);
}

/* A screenshot of the thing running. The images are dark game captures, so the
   frame stays hairline-thin in both themes rather than boxing them in. */
.shot {
  margin: 0 0 40px;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
}

.shot figcaption {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---- build note ----
   A native <details>, so it opens with no JavaScript and is keyboard and screen
   reader accessible without any help from us. */

.note {
  margin: 16px 0 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
}

.note summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
  transition: background 0.15s ease;
}

/* Safari still paints its own triangle without this. */
.note summary::-webkit-details-marker {
  display: none;
}

.note summary:hover {
  background: var(--bg-card);
}

.note summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.note-tag {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 3px 9px;
}

/* Chevron, drawn in CSS so there is no icon dependency. */
.note summary::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.note[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.note-body {
  padding: 4px 20px 22px;
}

.note-body p {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.note-body p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .note summary,
  .note summary::after {
    transition: none;
  }
}

.role-note {
  margin: 28px 0 0;
  padding: 18px 22px;
  background: var(--bg-card);
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.role-note strong {
  color: var(--ink);
  font-weight: 600;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px 20px;
  margin: 40px 0 0;
  padding: 0;
}

.fact dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.fact dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ---- skills bars ----
   One series, so one hue for every bar. Length is the only value encoding,
   and the tier name repeats it in text so nothing is colour-or-length alone. */

.key {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.key li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.key strong {
  color: var(--ink);
  font-weight: 600;
}

.key-bar {
  flex: none;
  height: 8px;
  border-radius: 4px;
  background: var(--accent);
}

.key-bar-3 { width: 42px; }
.key-bar-2 { width: 28px; }
.key-bar-1 { width: 14px; }

.skillgrid {
  display: grid;
  gap: 14px;
}

.skillrow {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 9.5rem);
  align-items: center;
  gap: 18px;
}

.skillname {
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.skilltrack {
  height: 8px;
  border-radius: 4px;
  /* Mixed from the ink rather than a fixed line token, so the empty track
     stays equally visible on the light card and the near-black dark one. */
  background: color-mix(in srgb, var(--ink) 13%, transparent);
  overflow: hidden;
}

.skillbar {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
}

/* Extra air where the tier changes, so the groups read without a rule. */
.skillrow-new {
  margin-top: 16px;
}

.skilltier {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  text-align: right;
}

@media (max-width: 720px) {
  /* Stack the label above the bar, and let the tier name sit inline with the
     skill name rather than getting squeezed into an unreadable column. */
  .skillrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }
  .skilltier {
    grid-column: 2;
    grid-row: 1;
  }
  .skilltrack {
    grid-column: 1 / -1;
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.chip {
  font-size: 0.8125rem;
  padding: 5px 13px;
  border-radius: 980px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---- compact list ---- */

.rows {
  border-top: 1px solid var(--line-soft);
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}

.row h3 {
  font-size: 1.1875rem;
}

/* Proof links on a compact row: the live site, the source, or both. Spans both
   columns and sits under the tagline rather than beside the kind label, so it
   never competes with the title for the eye on a scan down the list. */
.row-links {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.row-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
}

.row-link:hover {
  text-decoration: underline;
}

.row p {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}

.row span {
  font-size: 0.8125rem;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ============================================================
   Website cards
   ============================================================ */

.site-grid {
  display: grid;
  /* 3 across on desktop, 2 on a tablet, 1 on a phone. The min is tuned so all
     three sit on one row inside the 980px container rather than leaving one
     card orphaned on a second row. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 40px;
}

.site-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

/* A faux browser chrome so the screenshot below reads immediately as a live
   website rather than a floating image. Just a bar and three dots. */
.site-frame {
  border-bottom: 1px solid var(--line-soft);
}

.site-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-elevated);
}

.site-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.site-shot {
  display: block;
  width: 100%;
  height: auto;
}

.site-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 22px 22px;
  flex: 1;
}

.site-name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.site-loc {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Pushed to the bottom so cards of uneven text still align their actions. */
.site-cta {
  margin-top: auto;
  padding-top: 16px;
}

.site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.site-link:hover {
  text-decoration: underline;
}

.site-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ============================================================
   Agent
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
}

.stat {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
}

.stat-n {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-l {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.35;
}

.match {
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 26px;
}

.match + .match {
  margin-top: 14px;
}

.match-top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.match-co {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.match-title {
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
}

.match-title a {
  text-decoration: none;
}

.match-title a:hover {
  color: var(--accent);
}

.score {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  background: var(--bg-card);
}

.score-high {
  background: var(--accent);
  color: var(--accent-ink);
}

.match p {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.opener {
  margin: 18px 0 0;
  padding: 18px 20px;
  background: var(--bg-card);
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink-2);
}

.opener .t-label {
  display: block;
  margin-bottom: 8px;
}

.notice {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 36px;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* ============================================================
   Contact
   ============================================================ */

.contact {
  padding: clamp(88px, 13vw, 144px) 0;
  text-align: center;
  background: var(--bg-card);
}

.email-xl {
  display: inline-block;
  font-size: clamp(1.4rem, 4.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}

.email-xl:hover {
  text-decoration: underline;
}

.foot {
  padding: 40px 0;
  font-size: 0.8125rem;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.foot a {
  color: var(--ink-3);
  text-decoration: none;
}

.foot a:hover {
  color: var(--ink);
}

/* ============================================================
   Motion. Respects reduced-motion
   ============================================================ */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rise {
  animation: rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.d1 {
  animation-delay: 0.06s;
}
.d2 {
  animation-delay: 0.12s;
}
.d3 {
  animation-delay: 0.18s;
}

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

/* ============================================================
   ZH Tech tweaks: clickable tab-style nav
   ============================================================ */

.nav-inner { height: 60px; }

.nav-links { gap: 6px; }

.nav-tab {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 980px;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-tab:hover {
  background: var(--bg-card);
  color: var(--ink);
}

.nav-links .btn-sm { margin-left: 6px; }

@media (max-width: 560px) {
  .nav-links { gap: 2px; }
  .nav-tab { padding: 7px 10px; font-size: 0.85rem; }
  .nav-links .btn-sm { margin-left: 4px; }
}
@media (max-width: 400px) {
  .nav-brand { font-size: 0.9rem; }
  .nav-tab { padding: 6px 8px; font-size: 0.78rem; }
  .nav-links .btn-sm { padding: 6px 11px; }
}
/* On the tiniest phones, drop the Contact tab (still reachable via Text me
   and the footer) so the row never overflows. */
@media (max-width: 350px) {
  .nav-tab-opt { display: none; }
}