/**
 * KNOT STUDIO — Typography System
 * ============================================================
 * All text styles as composable classes.
 * Mirrors the brand guidelines type scale exactly.
 * ============================================================
 */

/* ── DISPLAY / HEADLINE ──────────────────────────────────── */

/* Section eyebrow — e.g. "01 — What We Do" */
.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-sky);
}

/* H1 — Hero headline */
.text-display {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-none);
  color: var(--color-text-primary);
}

/* H2 — Section headline */
.text-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  color: var(--color-text-primary);
}

/* H3 — Card / feature heading */
.text-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: 1.1;
  color: var(--color-text-primary);
}

/* H4 — Sub-section title */
.text-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  color: var(--color-text-primary);
}

/* H5 — Small title */
.text-h5 {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* H6 — Smallest heading */
.text-h6 {
  font-family: var(--font-heading);
  font-size: var(--text-h6);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--color-text-primary);
}


/* ── BODY TEXT ───────────────────────────────────────────── */

/* Large body — intro paragraphs */
.text-xl {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--color-text-body);
}

/* Standard body */
.text-base {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}

/* Caption / supporting text */
.text-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Label / UI tag */
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Nav link */
.text-nav {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease);
}
.text-nav:hover,
.text-nav.active { color: var(--color-sky); }


/* ── WORDMARK ────────────────────────────────────────────── */

/* Full stacked wordmark — KNOT above STUDIO, left/right aligned */
.wordmark {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1;
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}
.wordmark__knot {
  display: block;
  letter-spacing: 0.38em;    /* tracked wide to match STUDIO width */
  margin-right: -0.38em;     /* compensate trailing space */
}
.wordmark__studio {
  display: block;
  letter-spacing: 0;
}

/* One-line wordmark */
.wordmark--inline {
  display: inline;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

/* Nav size */
.wordmark--nav {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}


/* ── COLOUR MODIFIERS ────────────────────────────────────── */
.text-sky      { color: var(--color-sky) !important; }
.text-night    { color: var(--color-night) !important; }
.text-beige    { color: var(--color-beige) !important; }
.text-stone    { color: var(--color-stone) !important; }
.text-burgundy { color: var(--color-burgundy) !important; }
.text-muted    { color: var(--color-text-muted) !important; }
.text-muted-light { color: var(--color-text-muted-light) !important; }


/* ── ALIGNMENT ───────────────────────────────────────────── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }


/* ── TAGLINE ─────────────────────────────────────────────── */
.tagline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-light);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--color-text-muted-light);
}