/* ============================================================
   Sunaly Moura Advogados — Design System
   Editorial dark/cream + gold. Built to migrate cleanly into
   Next.js, Astro, or static HTML.
   ============================================================ */

:root {
  /* Tokens — change here to retheme everything */
  --ink: #0b0a08;
  --ink-2: #14120e;
  --ink-3: #1c1a14;
  --paper: #f4efe6;
  --paper-2: #ebe4d6;
  --paper-3: #d9d0bd;
  --gold: #c9a24a;
  --gold-2: #d9b35e;
  --gold-deep: #8a6a26;
  --line: rgba(11, 10, 8, 0.14);
  --line-dark: rgba(244, 239, 230, 0.14);
  --muted: #6b6657;
  --muted-dark: #9c937c;

  --serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
  --sans: "DM Sans", "Söhne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1440px;
  --gutter: clamp(24px, 4vw, 64px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Disable discretionary ligatures so "a e" doesn't render as "æ" */
  font-variant-ligatures: common-ligatures;
}
h1, h2, h3, .hero-title, .h-1, .h-2, .h-3, .manifesto-quote, .voice-quote, .contato-title, .member-name, .area-title {
  font-variant-ligatures: no-discretionary-ligatures no-historical-ligatures no-contextual;
  font-feature-settings: "liga" 1, "dlig" 0, "hlig" 0;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow .num { color: var(--muted); margin-right: 12px; }

.h-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
}
.h-1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0;
}
.h-2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.h-3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  margin: 0;
}
.italic { font-style: italic; font-weight: 400; }
.lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
}
.body { font-size: 16px; line-height: 1.62; color: var(--ink); }
.body-muted { color: var(--muted); }
.body-sm { font-size: 14px; line-height: 1.5; }
.caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: clamp(80px, 10vw, 160px) 0; position: relative; }
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 96px);
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: 1fr 2fr; gap: 64px; }
}

.divider {
  height: 1px;
  background: var(--line);
  width: 100%;
}
.divider-dark { background: var(--line-dark); }

.dark { background: var(--ink); color: var(--paper); }
.dark .eyebrow { color: var(--gold-2); }
.dark .eyebrow .num { color: var(--muted-dark); }
.dark .body-muted { color: var(--muted-dark); }
.dark .divider { background: var(--line-dark); }
.dark .h-1, .dark .h-2, .dark .h-3, .dark .lede { color: var(--paper); }