/* ============================================================
   ArtHAUS — Base & primitives
   Binds tokens to elements. Quiet defaults, editorial helpers.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-weight: var(--w-ui-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-200); color: var(--ink-900); }

/* ---- Display headings (Cormorant, light italic) ---------- */
.ah-display,
.ah-display-l,
.ah-display-m,
.ah-display-s {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-style: italic;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.ah-display   { font-size: var(--fs-display-xl); }
.ah-display-l { font-size: var(--fs-display-l); }
.ah-display-m { font-size: var(--fs-display-m); }
.ah-display-s { font-size: var(--fs-display-s); }

/* Roman (upright) display variant for restraint */
.ah-display--roman { font-style: normal; }

/* ---- Eyebrow / tracked label ----------------------------- */
.ah-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--w-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.ah-eyebrow--gold { color: var(--text-gold); }

/* ---- Section title (Jost) -------------------------------- */
.ah-title {
  font-family: var(--font-ui);
  font-weight: var(--w-ui);
  font-size: var(--fs-title);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
}

/* ---- Body copy ------------------------------------------- */
.ah-body { max-width: var(--measure); color: var(--text-body); }
.ah-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ---- The gold beam (signature rule) ---------------------- */
.ah-beam {
  display: block;
  width: var(--space-7);
  height: var(--border-beam);
  background: var(--gold-500);
  border: 0;
  margin: 0;
}
.ah-beam--full { width: 100%; }

/* ---- Links ----------------------------------------------- */
.ah-link {
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ah-link:hover { color: var(--accent-strong); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}