/* ═══════════════════════════════════════════════════════
   BASE — Typography, Body, Global Styles
   ═══════════════════════════════════════════════════════ */

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 8% 0%, rgba(196, 92, 66, 0.08), transparent 32rem),
    linear-gradient(180deg, var(--color-bg-primary), var(--color-surface-paper));
}

/* ─── Headings ─── */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* ─── Paragraph ─── */

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

/* ─── Strong / Italic ─── */

strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

em {
  font-style: italic;
}

/* ─── Links ─── */

a {
  transition: color var(--duration-fast) var(--ease-gentle);
}

/* ─── Selection ─── */

::selection {
  background: var(--color-gold-pale);
  color: var(--color-text-primary);
}

/* ─── Containers ─── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--text {
  max-width: var(--container-text);
}

/* ─── Sections ─── */

.section {
  padding-block: var(--section-py);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    radial-gradient(circle, rgba(126, 59, 43, 0.18) 1px, transparent 1.2px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* ─── Section Labels ─── */

.section__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-lg);
}

.section__label--accent {
  color: var(--color-olive);
}

.section__label--inverse {
  color: var(--color-gold-pale);
}

/* ─── Section Headlines ─── */

.section__headline {
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.section__headline em {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--color-brown-light);
  font-weight: var(--weight-light);
}

.section__headline::after {
  content: '';
  display: block;
  width: clamp(72px, 12vw, 132px);
  height: 1px;
  margin-top: var(--space-lg);
  background:
    linear-gradient(90deg, var(--color-gold-deep), var(--color-gold-pale), transparent);
  box-shadow: 0 0 18px rgba(184, 149, 106, 0.14);
}

.section__headline[style*="text-align: center"]::after,
.faq__headline::after {
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.section__subheadline {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
}

/* ─── Decorative Elements ─── */

.separator {
  width: 48px;
  height: 1px;
  background: var(--color-gold);
  border: none;
  margin-block: var(--space-xl);
}

.separator--centered {
  margin-inline: auto;
}

/* ─── Visually Hidden (Accessible) ─── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Ambient Glow Orbs ─── */

.ambient-glow {
  position: absolute;
  width: clamp(220px, 34vw, 520px);
  height: clamp(220px, 34vw, 520px);
  border-radius: var(--radius-full);
  filter: blur(80px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.ambient-glow--gold {
  background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
}

.ambient-glow--terracotta {
  background: radial-gradient(circle, var(--color-terracotta) 0%, transparent 70%);
}

.ambient-glow--teal {
  background: radial-gradient(circle, var(--color-teal) 0%, transparent 70%);
}

.ambient-glow--olive {
  background: radial-gradient(circle, var(--color-olive) 0%, transparent 70%);
}