/* PETVITY · Blog typography override · v1
 * Replaces decorative Italiana display font with Fraunces — a modern,
 * editorial, variable serif — for better long-form readability.
 *
 * Italiana is kept on marketing pages (homepage, membership, etc.)
 * where its luxury-display character earns its place.
 *
 * Load this AFTER assets/style.css on every blog page.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..800,0..100&family=Inter:wght@300;400;500;600;700&display=swap');

/* Override Italiana → Fraunces for all blog content */
.article-wrap h1,
.article-wrap h2,
.article-wrap h3,
.article-wrap h4,
.article-wrap h5,
.article-wrap blockquote,
.blog-hero h1,
.article-card .title,
[class*="blog"] h1,
[class*="blog"] h2,
[class*="blog"] h3,
[class*="blog"] h4 {
  font-family: 'Fraunces', 'Charter', 'Iowan Old Style', Georgia, serif !important;
  font-style: normal !important;
  font-feature-settings: 'ss01', 'ss02';
}

/* Tighten letter-spacing slightly — Fraunces feels best a touch tighter */
.article-wrap h1 { letter-spacing: -0.02em; font-weight: 600; }
.article-wrap h2 { letter-spacing: -0.015em; font-weight: 500; }
.article-wrap h3 { letter-spacing: -0.01em; font-weight: 600; }
.article-wrap h4 { letter-spacing: -0.005em; font-weight: 600; }

/* Italic em inside headings — use Fraunces italic for the gold accent */
.article-wrap h1 em,
.article-wrap h2 em,
.article-wrap h3 em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 500;
}

/* Blockquote: editorial pull-quote style */
.article-wrap blockquote {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 3vw, 28px) !important;
  line-height: 1.45 !important;
}

/* Body text — keep Inter but slightly improve reading */
.article-wrap p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: #2d3a32;
}

/* Lede paragraph */
.article-wrap .lede {
  font-family: 'Inter', sans-serif !important;
  font-size: 19px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: #5a6b62;
}

/* Lists */
.article-wrap ul, .article-wrap ol {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px;
  line-height: 1.8;
}

/* Citations / sources */
.article-wrap .citations-list,
.article-wrap .citations-list * {
  font-family: 'Inter', sans-serif !important;
}

.article-wrap .citations-list h4 {
  font-family: 'Fraunces', serif !important;
  font-weight: 600;
}

/* Blog listing cards */
.article-card .title {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.blog-hero h1 {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

.blog-hero h1 em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
}

/* Eyebrow + meta — keep Inter, tighten */
.article-wrap .eyebrow,
.article-wrap .meta-bar {
  font-family: 'Inter', sans-serif !important;
}

/* Article CTA card heading */
.article-cta h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
}

/* Optional: subtle dropcap on first paragraph (editorial touch) */
.article-wrap > p.dropcap::first-letter,
.article-wrap .lede + p::first-letter {
  /* Disabled by default — uncomment for editorial moods */
  /* font-family: 'Fraunces', serif; font-weight: 600; font-size: 3.6em; line-height: 0.9; float: left; padding: 6px 10px 0 0; color: var(--gold-warm); */
}