@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,700;0,900;1,700;1,900&family=Lato:ital,wght@0,400;0,700;0,900;1,900&display=swap');



:root {
  --surface-base: #fffbf6;
  --surface-raised: #fdf0e2;
  --surface-sunk: #f8dfc6;
  --surface-card: #ffffff;
  --surface-deep: #12224a;
  --surface-overlay: rgba(18, 34, 74, 0.52);

  --text-primary: #1b2b4b;
  --text-secondary: #5a4636;
  --text-inverted: #e8dcd0;
  --text-inverted-strong: #ffffff;

  --action-primary: #9f1239;
  --action-hover: #4c0519;
  --action-quiet: #12224a;
  --accent-warm: #e08a1e;
  --accent-warm-soft: #f4c98a;

  --line-quiet: #ecd9c4;
  --line-deep: rgba(244, 201, 138, 0.24);

  --step-1: 0.5rem;
  --step-2: 0.75rem;
  --step-3: 1rem;
  --step-4: 1.5rem;
  --step-5: 2rem;
  --step-6: 3rem;

  --corner-small: 8px;
  --corner-medium: 12px;
  --corner-large: 24px;

  --motion-quick: 0.2s ease;
  --motion-calm: 0.35s cubic-bezier(0.33, 1, 0.68, 1);

  --reading-width: min(92%, 1200px);
  --lift-soft: 0 12px 32px rgba(90, 70, 54, 0.1);
  --lift-tall: 0 20px 60px rgba(90, 70, 54, 0.18);
  --body-face: 'Fira Sans', 'Segoe UI', Tahoma, sans-serif;
  --latin-face: 'Lato', 'Fira Sans', 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body-face);
  background: var(--surface-base);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--body-face); }

h1 {
  font-size: clamp(2.05rem, 5.4vw, 2.7rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

h2 {
  font-size: clamp(1.55rem, 3.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

p {
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  margin: 0 0 0.75rem;
}

a { color: var(--action-primary); }

img { max-width: 100%; height: auto; }

@media (min-width: 1024px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }
}