/* ============================================================
   Bespoke editorial layer — Massachusetts Psychotherapy
   A warm, hand-set print sensibility laid over the existing
   markup: a characterful old-style serif for headlines
   (Fraunces), a soft newsprint serif for body copy (Newsreader),
   a restrained typewriter accent on small eyebrow labels
   (Special Elite), and a single clean hand-drawn underline.
   Loaded after each page's inline <style>, so it wins the
   cascade. Intentionally understated — the character comes from
   the type and palette, not from heavy effects.
   ============================================================ */

:root {
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-type: 'Special Elite', 'Courier New', monospace;

  /* one smooth hand-drawn stroke, used sparingly as an accent */
  --hand-clay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M3 7 C32 3 52 9 80 6 S128 3 157 7' fill='none' stroke='%23a85e29' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hand-sage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M3 7 C32 3 52 9 80 6 S128 3 157 7' fill='none' stroke='%23425d34' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .002em;
}

h1, h2, h3,
.nav-logo, .footer-brand,
.service-price, .fee-amount {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -.012em;
  /* Pin a moderate optical size so Fraunces' large display glyphs (the
     swashy, "warped"-looking lowercase f in particular) stay calm and even
     at big heading sizes. WONK/SOFT held at 0 keeps the letterforms regular. */
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}
h1 { font-weight: 400; }
h2 { font-weight: 460; }
h3 { font-weight: 500; }

/* The accent word in headlines reads upright — the underline carries the
   emphasis, so the italic (which read as cheesy) is dropped. */
.hero h1 em, .blog-hero h1 em, .article-hero h1 em {
  font-style: normal;
  font-weight: 400;
}

/* Pull-quotes lean into Fraunces' character */
.about-pullquote, .pullquote, .hero-quote {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

/* ---------- A single typewriter accent: the eyebrow labels ---------- */
.section-label, .hero-label {
  font-family: var(--font-type);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .14em;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
/* a short, crisp printed dash before the label — no filters */
.section-label::before, .hero-label::before {
  content: '';
  width: 1.8rem;
  height: 1.5px;
  flex: none;
  background: currentColor;
  opacity: .65;
}

/* centered eyebrow contexts re-center the dash + text */
.hero-label,
#faq .section-label,
#schedule .section-label,
.blog-hero .section-label,
.blog-cta .section-label,
.article-cta .section-label {
  display: inline-flex;
  justify-content: center;
}

/* ---------- One clean hand-drawn underline under the accent word ---------- */
.hero h1 em, .blog-hero h1 em, .article-hero h1 em {
  background-image: var(--hand-sage);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 102% .5em;
  padding-bottom: .16em;
}
.hero h1 em { background-image: var(--hand-clay); }

/* ---------- Quiet refinements that read as "considered" ---------- */
/* warmer, slightly inkier card borders than the default hairline */
.service-card, .group-card, .blog-card, .insurance-info {
  border-color: var(--stone-300);
}

/* pull-quote rule a touch heavier, like a printer's sidebar mark */
.about-pullquote, .pullquote {
  border-left-width: 4px;
}

/* prices and fee amounts in the display serif feel set, not typed */
.service-price span { font-style: italic; }

/* read-more keeps a quiet underline rather than the wobble */
.read-more { text-decoration: none; }

/* ---------- Mobile: keep the eyebrow dash tidy ---------- */
@media (max-width: 900px) {
  .section-label, .hero-label { gap: .5rem; }
  .section-label::before, .hero-label::before { width: 1.3rem; }
}