/**
 * BH Coastal — Typography
 * ------------------------
 * Serif carries the brand's voice (headings, pull quotes); the sans
 * is the quiet utility face for body copy, nav, and labels. Nav and
 * kickers use wide letter-spacing and small caps — a nod to signage
 * and tailoring labels rather than a startup UI face.
 */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: var(--fw-medium); }

p {
  margin: 0 0 var(--space-3);
  max-width: var(--content-max-width);
}

p.lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
}

small, .text-small {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Kicker — the recurring editorial device: a small, wide-tracked
   uppercase label that precedes a heading (section eyebrows, page
   labels, nav wordmark treatment). This is the one structural motif
   repeated across the site, standing in for the brand's tailoring-
   label vernacular rather than a generic numbered-step marker. */
.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-style: italic;
  color: var(--color-navy-soft);
}

/* Links — restrained underline reveal, not a color-change hover.
   The underline is a hairline sitting slightly clear of the text,
   widening from a muted rule to full accent on hover/focus. */
a {
  color: var(--color-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-standard);
  padding-bottom: 1px;
}

a:hover,
a:focus-visible {
  background-size: 100% 1px;
}

a.no-underline {
  background-image: none;
}

a:focus-visible {
  outline: 1px solid var(--color-navy);
  outline-offset: 3px;
}

::selection {
  background: var(--color-navy);
  color: var(--color-ivory);
}