/* ─────────────────────────────────────────────────────────
   X.C.O MEDIA — GLOBAL TYPOGRAPHY SYSTEM
   Awwwards-grade editorial type. Three fonts, one vision.

   HIERARCHY:
   1. SERIF  (Cormorant Garamond) — Display / H1 / Pull quotes
      · Weight: 300 always — never bold
      · Italic: used for contrast, not emphasis
      · Tracking: negative (-0.02 to -0.03em) for display sizes
      · Line-height: tight (0.90–1.05) for headers

   2. SANS  (DM Sans) — Navigation / Body / Buttons / Captions
      · Weights: 300 (body), 400 (UI/nav), 500 (labels/tags/meta)
      · Labels use 500 weight + uppercase + wide tracking
      · Line-height: generous (1.60–1.75) for body

   NOTE: A single font family covers all roles:
         Cormorant Garamond for editorial display,
         DM Sans for everything else at varying weights.
   ───────────────────────────────────────────────────────── */

/* ── Google Fonts import ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300;1,9..40,400&display=swap');

/* ── Base document ─────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

/* ── Utility classes — SERIF ───────────────────────────── */

/* Display — Hero headlines only */
.t-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: var(--type-display);
  line-height: 0.90;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.t-display-i {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--type-display);
  line-height: 0.90;
  letter-spacing: -0.03em;
  color: var(--ash);
}

/* H1 — Section leaders */
.t-h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: var(--type-h1);
  line-height: 1.00;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.t-h1-i {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--type-h1);
  line-height: 1.00;
  letter-spacing: -0.02em;
  color: var(--ash);
}

/* H2 — Sub-sections */
.t-h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: var(--type-h2);
  line-height: 1.10;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* H3 — Cards, rows, sidebars */
.t-h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--type-h3);
  line-height: 1.20;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Pull quote */
.t-pull {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-mid);
}

/* Numbers / stats */
.t-number {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 1.00;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ── Utility classes — SANS ────────────────────────────── */

/* Large intro / lead paragraph */
.t-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body-lg);
  line-height: 1.70;
  letter-spacing: 0.005em;
  color: var(--ash);
}

/* Standard body */
.t-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body);
  line-height: 1.70;
  color: var(--ash);
}

/* UI text — nav, buttons, inputs */
.t-ui {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.40;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Caption / footnote */
.t-caption {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--type-body-sm);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ghost);
}

/* ── Utility classes — MONO ────────────────────────────── */

/* Standard label / tag / eyebrow */
.t-label, .section-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-label);
  line-height: 1.40;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Acented label — gold */
.t-label-gold {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-label);
  line-height: 1.40;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Micro — smallest text on page */
.t-micro {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-micro);
  line-height: 1.40;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Mono data / tabular */
.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

/* ── Element defaults ──────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  font-style: normal;
  margin: 0;
}

p { margin: 0; }

/* Global italic — serif italic, not just slanted */
em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}

strong {
  font-weight: 500;
  font-family: var(--font-sans);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Inline typographic pairs ──────────────────────────── */

/* Typical Awwwards pattern: big upright + italic contrast */
.type-pair {
  display: block;
}
.type-pair-upright {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  color: var(--ink);
}
.type-pair-italic {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  color: var(--ash);
}

/* ── Responsive scale ──────────────────────────────────── */
@media (max-width: 768px) {
  .t-lead { font-size: 16px; }
  .t-body { font-size: 14px; }
}