/* ============================================================
   BLACK RIVER DESIGN SYSTEM — Type Scale
   Punk volume names: Scream → Scratch
   ============================================================ */

/* ── HEADLINE SCALE (Barlow Condensed) ──────────────────────
   Scream  — Splash / breaking / hero headlines
   Shout   — Section leads, major stories
   Yell    — Standard article headlines
   Bark    — Card headlines, secondary stories
   ──────────────────────────────────────────────────────────── */

.type-scream {
  font-family: var(--font-headline);
  font-weight: var(--weight-extrabold);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.type-shout {
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.type-yell {
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  font-size: clamp(1.35rem, 2vw + 0.5rem, 2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.type-bark {
  font-family: var(--font-headline);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.1rem, 1.5vw + 0.4rem, 1.5rem);
  line-height: 1.1;
  text-transform: uppercase;
}

/* ── BODY SCALE (Space Grotesk) ─────────────────────────────
   Speak   — Body text, article paragraphs
   Mutter  — Secondary text, summaries, teasers
   Whisper — Captions, metadata, timestamps
   Scratch — Fine print, legal, tags
   ──────────────────────────────────────────────────────────── */

.type-speak {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 1.125rem;
  line-height: 1.65;
}

.type-mutter {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.type-whisper {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.type-scratch {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── TAGS ───────────────────────────────────────────────────
   Category labels above headlines. River blue. Condensed.
   ──────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-river);
  margin-bottom: var(--space-1);
}

/* Punk variant: skewed */
.tag--punk {
  transform: skewX(-2deg);
  background: var(--color-river);
  color: var(--color-bg);
  padding: var(--space-1) var(--space-2);
}

/* Opinion variant */
.tag--opinion {
  color: var(--color-opinion);
}

/* Sport variant */
.tag--sport {
  color: var(--color-sport);
}

/* ── ARTICLE KICKER (pre-headline teaser) ──────────────── */

.article-kicker {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

/* ── HEADLINE LINKS ─────────────────────────────────────── */

.headline-link {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.headline-link:hover {
  color: var(--color-river-bright);
}

/* ── RESPONSIVE ADJUSTMENTS ─────────────────────────────── */

/* Small phones (≤400px) */
@media (max-width: 400px) {
  .type-scream { font-size: 2.25rem; }
  .type-shout  { font-size: 1.625rem; }
  .type-yell   { font-size: 1.25rem; }
  .type-bark   { font-size: 1.05rem; }
  .type-speak  { font-size: 1rem; }
}

/* Tablets (≥600px) */
@media (min-width: 600px) {
  .type-scream { font-size: 3.25rem; }
  .type-shout  { font-size: 2.25rem; }
}

/* Desktop (≥900px) */
@media (min-width: 900px) {
  .type-scream { font-size: 4rem; }
  .type-shout  { font-size: 2.75rem; }
  .type-yell   { font-size: 1.875rem; }
}

/* Wide (≥1280px) */
@media (min-width: 1280px) {
  .type-scream { font-size: 4.5rem; }
  .type-shout  { font-size: 3rem; }
}