/* DOG PPL — Typography tokens
   Editorial serif (Newsreader) for display + emotional headlines.
   Neutral grotesque (Hanken Grotesk) for body & UI.
   Typewriter mono (Space Mono) for eyebrows, labels, nav & meta.
   Handwritten (Caveat) for photo annotations only. */
:root {
  /* Families */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Montserrat Alternates', ui-monospace, 'SFMono-Regular', monospace;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Fluid display scale (serif) */
  --text-display-xl: clamp(3.5rem, 8vw, 7rem);   /* hero "DOG PPL" */
  --text-display-lg: clamp(2.75rem, 5.5vw, 5rem);/* big section quotes */
  --text-display-md: clamp(2rem, 3.6vw, 3.25rem);/* section headings */
  --text-display-sm: clamp(1.6rem, 2.4vw, 2.25rem);

  /* Body scale (sans) */
  --text-xl: 1.375rem;   /* 22 — lead paragraph */
  --text-lg: 1.125rem;   /* 18 — body large */
  --text-md: 1rem;       /* 16 — body */
  --text-sm: 0.875rem;   /* 14 */
  --text-xs: 0.75rem;    /* 12 */

  /* Mono label scale */
  --label-md: 0.8125rem; /* 13 — nav, buttons */
  --label-sm: 0.6875rem; /* 11 — eyebrows / meta */

  /* Line heights */
  --lh-tight: 1.02;      /* @kind font */
  --lh-snug: 1.14;       /* @kind font */
  --lh-normal: 1.5;      /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-display: -0.02em; /* tighten large serif @kind font */
  --ls-label: 0.16em;    /* mono eyebrows @kind font */
  --ls-label-wide: 0.24em; /* @kind font */
}

/* Reusable typographic roles ------------------------------------ */
.dp-display { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--text-heading); }
.dp-display-italic { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-regular); line-height: var(--lh-tight); color: var(--text-heading); }
.dp-heading { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--text-heading); }
.dp-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); }
.dp-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-xl); line-height: var(--lh-relaxed); color: var(--text-body); }
.dp-eyebrow { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--label-sm); letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-muted); }
.dp-label { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--label-md); letter-spacing: var(--ls-label); text-transform: uppercase; }
.dp-hand { font-family: var(--font-hand); font-weight: var(--fw-semibold); color: var(--text-body); }