/* Shared type primitives used across all pages. */
/* ---------- display + mono ---------- */
.sh-display {
  font-family: var(--sh-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.96;
}

.sh-mono {
  font-family: var(--sh-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- eyebrow label ---------- */
.sh-eyebrow {
  font-family: var(--sh-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sh-orange);
}

/* ---------- body copy ---------- */
.sh-body-copy {
  color: color-mix(in srgb, var(--sh-bone) 72%, var(--sh-taupe));
  max-width: 65ch;
  line-height: 1.6;
}

/* ---------- email CTA link ---------- */
/* Shared by the nav overlay footer (partials/navbar.html scopes its own
   size/color override on top of this). Kept here rather than in
   footer.css since the page footer no longer uses this class itself. */
.sh-email-cta {
  font-family: var(--sh-mono);
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  letter-spacing: 0.04em;
  color: var(--sh-bone);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sh-orange) 70%, transparent);
  padding-bottom: 3px;
}

.sh-email-cta:hover {
  color: var(--sh-orange);
}

/* ---------- availability line + social links ---------- */
/* Used on the contact page directly (the footer no longer needs these
   itself, but kept global since they read as reusable link/status utilities). */
.sh-avail {
  font-family: var(--sh-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-taupe);
}

.sh-avail i {
  font-style: normal;
  color: var(--sh-orange);
}

.sh-socials {
  display: flex;
  gap: 1.5rem;
}

.sh-socials a {
  font-family: var(--sh-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-taupe);
  text-decoration: none;
  transition: color 0.25s ease;
}

.sh-socials a:hover {
  color: var(--sh-orange);
}