/* =====================================================================
   TYPE THEME: "styleguide"  (from awwwards_typography_styleguide.html, Oct 2026)
   Display  = Inter Tight 700–900, tight negative tracking
   Body/UI  = Inter 400–500, line-height 1.6
   Metadata = JetBrains Mono 500, 12px, UPPERCASE, +0.05em
   Exception (Carolyn's call): client-logo ribbon keeps Geist Mono.
   Typography only — the guide's dark color palette is NOT applied.
   ===================================================================== */
:root {
  --serif: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif; /* display role */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;       /* body + UI */
  --mono:  "JetBrains Mono", "SFMono-Regular", Consolas, monospace;      /* metadata */
}
body { font-size: 16px; line-height: 1.6; }

/* ---------- display ---------- */
.wordmark { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; }
h1, .h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(32px, 4.2vw, 52px); } /* was 64 max; -12 per Carolyn */
.hero-h1 { font-size: clamp(32px, 4.2vw, 52px); }
.play-h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(26px, 3.1vw, 40px); }
.footer-cta { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }

/* ---------- section titles (32px) / section headings (24px) ---------- */
.work-head h2, .curious { font-weight: 700; letter-spacing: -0.02em; font-size: 32px; line-height: 1.15; }
.prose h2 { font-weight: 700; letter-spacing: -0.02em; font-size: 32px; line-height: 1.15; }
.prose h3, .svc-name h3 { font-weight: 700; letter-spacing: -0.015em; font-size: 24px; line-height: 1.2; }
.big-link { font-weight: 700; letter-spacing: -0.015em; font-size: 24px; }
.card-title { font-weight: 700; letter-spacing: -0.015em; font-size: 22px; line-height: 1.25; }

/* ---------- body ---------- */
.hero-sub { font-family: var(--sans); font-size: 18px; font-weight: 400; color: var(--gray-dark); }
.prose, .media-note, .play-intro p { font-size: 16px; font-weight: 400; line-height: 1.6; }
.prose strong { font-weight: 600; }
.quote-card p { font-size: 13px; line-height: 1.6; }
.quote-card .attr, .quote-attr { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.site-nav a { font-size: 14px; font-weight: 500; }
.cta-pill, .pill, .submit-btn { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- metadata / tags: JetBrains Mono 500, 12px, caps, +0.05em ---------- */
.niche-label, .tag, .card-cats, .card-services, .card-view,
.proj-meta dt, .back-link, .work-head .for {
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.tag { padding: 6px 12px; }

/* ---------- exception: ribbon stays Geist Mono ---------- */
.logo-marquee span { font-family: "Geist Mono", "SF Mono", Menlo, monospace; }

/* ---------- mobile menu ---------- */
@media (max-width: 860px) {
  .site-nav.open a:not(.pill):not(.always) { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; font-size: 20px; }
}

/* hero subhead: section-heading style */
.hero-subhead { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }

/* case-study section labels: Section Title style, 2px under the 32px H2 */
.prose h4, .media-note h4 {
  font-family: var(--serif); font-weight: 700; font-size: 30px; letter-spacing: -0.02em;
  line-height: 1.15; text-transform: none; color: var(--ink); margin: 1.6em 0 0.5em;
}
.prose h2 + h4 { margin-top: 0.9em; }