/* ============================================
   DAWN GLOBAL — TYPOGRAPHY & ARCHITECTURAL STYLING
   ============================================ */

/* ─── DISPLAY (BOUTIQUE EDITORIAL) ───────────────────────── */
.display-xl {
  font-family: var(--font-serif);
  font-size: var(--display-xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary-dark);
}

.display-lg {
  font-family: var(--font-serif);
  font-size: var(--display-lg);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary-dark);
}

.display-md {
  font-family: var(--font-serif);
  font-size: var(--display-md);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-primary-dark);
}

.display-sm {
  font-family: var(--font-serif);
  font-size: var(--display-sm);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0em;
  color: var(--text-primary-dark);
}

/* ─── EDITORIAL DISPLAY ─────────────────────── */
.editorial-xl {
  font-family: var(--font-serif);
  font-size: var(--display-lg);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0em;
  font-style: italic;
  color: var(--gold);
}

.editorial-lg {
  font-family: var(--font-serif);
  font-size: var(--display-md);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0em;
  font-style: italic;
  color: var(--gold);
}

/* ─── HEADLINE ────────────────────────────── */
.headline-lg {
  font-family: var(--font-serif);
  font-size: var(--headline-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.headline-md {
  font-family: var(--font-sans);
  font-size: var(--headline-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ─── BODY ────────────────────────────────── */
.body-lg {
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--steel-dark);
}

.body-md {
  font-family: var(--font-sans);
  font-size: var(--body-md);
  font-weight: 400;
  line-height: 1.65;
  color: var(--steel-dark);
}

/* ─── LABEL / ARCHITECTURAL EYEBROW ────────── */
.label {
  font-family: var(--font-sans);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.label-lg {
  font-family: var(--font-sans);
  font-size: var(--body-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ─── ARCHITECTURAL PATHWAY / FLOW SYSTEM ───── */
.capital-flow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.capital-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.capital-flow-step::after {
  content: "→";
  color: var(--steel);
  font-weight: 400;
}

.capital-flow-step:last-child::after {
  content: "";
}

/* ─── COLOUR UTILITIES ────────────────────── */
.text-gold     { color: var(--gold) !important; }
.text-steel    { color: var(--steel) !important; }
.text-ivory    { color: var(--warm-ivory) !important; }
.text-obsidian { color: var(--obsidian) !important; }
.text-white    { color: var(--white) !important; }

/* ─── SPLIT TEXT LINES (for animation) ──────── */
.split-line {
  overflow: hidden;
  display: block;
}

.split-line > span {
  display: block;
  transform: translateY(105%);
  will-change: transform;
}

/* ─── CHAR ANIMATION ──────────────────────── */
.char {
  display: inline-block;
  will-change: transform, opacity;
}

/* ─── NUMBER DISPLAY ──────────────────────── */
.section-number {
  font-family: var(--font-mono);
  font-size: var(--label);
  color: var(--gold);
  letter-spacing: 0.2em;
}

/* ─── GRADIENT TEXT (RESTRAINED ARCHITECTURAL) ─── */
.text-gradient {
  color: var(--dawn-navy-dark);
}

.text-gradient-gold {
  color: var(--gold);
}

/* ─── TITLE PROTECTIONS ───────────────────── */
h1, h2, h3, h4, h5, h6,
.display-xl, .display-lg, .display-md, .display-sm,
.journey-stage-title, .section-headline, .moment-headline, .subpage-hero-title {
  word-break: keep-all;
  hyphens: none;
  overflow-wrap: normal;
}
