/* =========================================================
   BASE — design tokens, reset, typography, shared utilities
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Color */
  --ink: #101312;
  --ink-2: #2a302e;
  --muted: #6f7975;
  --line: #e2e0da;
  --bg: #faf9f6;
  --surface: #ffffff;
  --sand: #f2efe8;
  --accent: #8a6a3d;
  --accent-soft: #c9ab7d;

  /* Color — on dark sections */
  --on-dark: #f3f1ec;
  --on-dark-muted: #a8aeab;
  --on-dark-line: rgba(255, 255, 255, 0.13);

  /* Metrics */
  --max: 1120px;
  --gutter: 44px;
  --r: 14px;
  --section-y: 110px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: Vazirmatn, system-ui, "Segoe UI", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- Typography ---------- */
h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.3rem);
  margin-bottom: 18px;
}

.lead {
  color: var(--muted);
  font-size: 1.03rem;
  font-weight: 300;
  max-width: 62ch;
}

/* ---------- Layout utilities ---------- */
.wrap {
  width: min(100% - var(--gutter), var(--max));
  margin-inline: auto;
}

section {
  padding: var(--section-y) 0;
}

/* Small caps label above every section heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow::after {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--accent-soft);
  opacity: 0.6;
}

/* ---------- Scroll reveal (driven by js/reveal.js) ---------- */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.rv.in {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root {
    --section-y: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .rv {
    opacity: 1;
    transform: none;
  }
}