/* ==========================================================================
   Typography — heading scale, lead text, inline elements.
   ========================================================================== */

h1, .h1 { font-size: var(--text-5xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 { font-size: var(--text-base); }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  max-width: 62ch;
}

.text-sm  { font-size: var(--text-sm); }
.text-xs  { font-size: var(--text-xs); }
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-strong { color: var(--text-strong); }

/* Gradient headline accent — used sparingly on key phrases. */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Kicker — small uppercase label above section titles. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.kicker::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
}

.kicker--center::before { display: none; }

/* Inline code */
:not(pre) > code {
  font-size: 0.86em;
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-strong);
}

/* Links inside prose */
.prose a,
a.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.prose a:hover,
a.link:hover {
  text-decoration-color: currentColor;
}

/* Arrow link — inline CTA style */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--accent-strong);
  transition: gap var(--duration-base) var(--ease-out);
}

.link-arrow::after {
  content: "→";
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
  gap: 0.65rem;
}

.link-arrow:hover::after {
  transform: translateX(2px);
}

/* Lists inside prose */
.prose ul,
.prose ol {
  display: grid;
  gap: 0.6rem;
  padding-left: 0;
}

.prose li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-muted);
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-full);
  background: var(--gradient-brand-soft);
  border: 1px solid var(--border-accent);
}

.prose ol { counter-reset: prose-ol; }
.prose ol li { counter-increment: prose-ol; }
.prose ol li::before {
  content: counter(prose-ol);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--surface-2);
}

/* Horizontal rule */
hr.divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: var(--space-8) 0;
}

/* Keyboard */
kbd {
  font-size: var(--text-xs);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface-2);
}

/* Blockquote */
blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-lg);
  font-style: normal;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-overlay);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}