/* ============================================================
   Artista CEO — Base / reset / shared element styles
   Keep utility-light. Components carry their own styling via tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* — Headings: editorial display — */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }

/* — Long-form column (Cartas / editorial body) — */
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.15em; }

/* — Eyebrow: mono label, the brand's signature meta line — */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin: 0;
}
/* The inline marker ↳ — herança da marca-irmã, usado antes de respostas/passos */
.marker::before { content: "↳"; color: var(--accent); margin-right: 0.5em; }

/* — Display italic for emotional / quote registers — */
.display-italic { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-light); }

/* — Layout helpers — */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }

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