/* ============================================================
   TOWPATH CREATIVE — TYPOGRAPHY
   typography.css — detailed type rules and overrides
   ============================================================ */

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Display heading (hero-scale) */
.heading-display {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Section headings */
.heading-1 { font-size: var(--text-3xl); }
.heading-2 { font-size: var(--text-2xl); }
.heading-3 { font-size: var(--text-xl); }
.heading-4 { font-size: var(--text-lg); }

/* Italic variant (Playfair has beautiful italics) */
.heading-italic,
.pull-quote {
  font-style: italic;
  font-weight: 400;
}

/* Body copy */
.body-lg { font-size: var(--text-md); line-height: 1.75; }
.body-base { font-size: var(--text-base); line-height: 1.7; }
.body-sm { font-size: var(--text-sm); line-height: 1.65; }

/* Muted text */
.text-muted { color: var(--color-text-muted); }
.text-stone  { color: var(--color-stone); }
.text-gold   { color: var(--color-gold); }
.text-linen  { color: var(--color-linen); }
.text-primary { color: var(--color-primary); }

/* Label / caps style */
.label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Pull quote */
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.4;
  color: var(--color-primary);
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-xl);
  margin: var(--space-2xl) 0;
}

/* On dark sections, headings and text colors flip */
.section-dark .body-lg,
.section-dark .body-base,
.section-dark p {
  color: rgba(234, 224, 200, 0.8);
}

.section-green .body-lg,
.section-green .body-base,
.section-green p {
  color: rgba(234, 224, 200, 0.85);
}

/* Anchor styles in body copy */
.post-body a {
  color: var(--color-accent);
  border-bottom: 1px solid rgba(74, 122, 53, 0.35);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.post-body a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Strong / em */
strong { font-weight: 600; }
em     { font-style: italic; }

/* Lists in post body */
.post-body ul li::marker { color: var(--color-accent); }
.post-body ol li::marker { color: var(--color-gold); font-weight: 700; }

/* Table typography */
.comparison-table { font-family: var(--font-body); }
.comparison-table th { font-family: var(--font-label); }

/* Caption / small text */
.caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.5;
}

/* Highlight text */
.highlight {
  background: rgba(196, 154, 58, 0.15);
  color: var(--color-primary);
  padding: 0 4px;
  border-radius: 3px;
}

/* Number / stat typography */
.big-number {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Responsive type */
@media (max-width: 768px) {
  .heading-display { font-size: var(--text-3xl); }
  .heading-1       { font-size: var(--text-2xl); }
  .heading-2       { font-size: var(--text-xl); }
  .pull-quote      { font-size: var(--text-xl); }
}

@media (max-width: 480px) {
  .heading-display { font-size: 34px; }
  .pull-quote      { font-size: var(--text-lg); }
}