Golden Ratio Grid

:root {
  --base: 8px;
  --phi: 1.618;
  /* Golden ratio spacing scale */
  --space-1: 8px;
  --space-2: 13px;
  --space-3: 21px;
  --space-4: 34px;
  --space-5: 55px;
  --space-6: 89px;
  --space-7: 144px;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 13px;
  max-width: 1103px;
  margin-inline: auto;
  padding-inline: 21px;
}

/* Golden ratio content areas */
.content-area {
  display: grid;
  grid-template-columns: 62fr 38fr; /* 62% / 38% */
  gap: 13px;
}

/* Typography scale (golden ratio) */
:root {
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 39px;
  --text-3xl: 63px;
}