/* ============================================================
   KN Constructions — Typography (Luxury Edition)
   ============================================================ */

html {
  font-family: var(--kn-font-sans);
  font-size: 100%;
  color: var(--kn-ink-soft);
  background-color: var(--kn-paper);
}

body {
  font-size: var(--kn-fs-base);
  line-height: var(--kn-lh-relaxed);
  font-weight: var(--kn-fw-regular);
  color: var(--kn-ink-soft);
  letter-spacing: 0.01em; /* Slightly wider tracking for Outfit */
}

/* ---------- Headings (Cormorant Garamond) ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kn-font-serif);
  font-weight: 600; /* Bumped to 600 because Cormorant is delicate */
  color: var(--kn-ink);
  line-height: 1.1; /* Tighter line height for elegance */
  letter-spacing: -0.01em;
}

h1 { font-size: var(--kn-fs-4xl); }
h2 { font-size: var(--kn-fs-3xl); }
h3 { font-size: var(--kn-fs-2xl); }
h4 { font-size: var(--kn-fs-xl); }
h5 { font-size: var(--kn-fs-lg); }
h6 {
  font-size: var(--kn-fs-sm);
  font-family: var(--kn-font-sans);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kn-slate);
}

/* ---------- Body Copy ---------- */
p {
  font-size: var(--kn-fs-base);
  line-height: var(--kn-lh-relaxed);
  color: var(--kn-ink-muted);
}

p + p { margin-top: var(--kn-space-4); }

.lead {
  font-size: var(--kn-fs-lg);
  line-height: var(--kn-lh-snug);
  color: var(--kn-ink-soft);
  font-weight: 400;
}

/* ---------- Small caps / eyebrow label ---------- */
.eyebrow {
  font-family: var(--kn-font-sans);
  font-size: var(--kn-fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kn-brass);
}

/* ---------- Links ---------- */
a {
  color: inherit;
  transition: color var(--kn-dur-fast) var(--kn-ease-out);
}

.link-underline {
  position: relative;
  display: inline-block;
  color: var(--kn-ink);
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kn-dur-base) var(--kn-ease-out);
}
.link-underline:hover::after {
  transform: scaleX(1);
}

/* ---------- Selection ---------- */
::selection {
  background: var(--kn-brass);
  color: var(--kn-paper);
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--kn-brass-ring);
  outline-offset: 3px;
  border-radius: var(--kn-radius-sm);
}