body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--text-body);
  background: var(--bg);
}

h1, h2 {
  font-family: 'Caveat', sans-serif;
  color: var(--text);
  line-height: 1.1;
}

h3, h4, h5, h6 {
  font-family: 'Nunito', sans-serif;
  color: var(--text);
  line-height: 1.2;
}

.display-hero { font-size: clamp(2.8rem, 6.5vw, 5rem);   font-weight: 700; }
.display-xl   { font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 700; }
.display-lg   { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; }
.display-md   { font-size: clamp(1.4rem, 2.5vw, 2rem);   font-weight: 700; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 3px;
  background: var(--blue);
  border-radius: var(--r-full);
}

.text-body { font-size: 1.0625rem; line-height: 1.75; color: var(--text-body); }
.text-sm    { font-size: 0.875rem; }
.text-xs    { font-size: 0.75rem; }
.text-muted { color: var(--text-muted); }

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--blue);
  color: var(--white);
  padding: 0.5rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  z-index: 9999;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

*:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--r-full);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  transition: transform var(--t-bounce), box-shadow var(--t-base);
  cursor: pointer;
  border: none;
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-clay-r);
}
.btn-primary:hover { background: var(--red-dark); box-shadow: 4px 8px 0 rgba(168, 30, 38, 0.35); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2.5px solid rgba(255,255,255,0.7);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: white; }

.btn-blue {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-clay);
}
.btn-blue:hover { background: var(--blue-dark); box-shadow: 4px 8px 0 rgba(43, 91, 168, 0.25); }