/* ─── Reset minimal ─── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ─── Typography ─── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text);
  line-height: var(--lh-tight);
}
.h-display { font-size: clamp(36px, 5vw, var(--fs-5xl)); line-height: var(--lh-tight); }
.h1 { font-size: clamp(28px, 4vw, var(--fs-4xl)); }
.h2 { font-size: var(--fs-3xl); }
.h3 { font-size: var(--fs-2xl); }
.h4 { font-size: var(--fs-xl); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-accent { color: var(--accent); }
.text-primary { color: var(--primary); }
.text-center { text-align: center; }
.italic { font-style: italic; }
.serif { font-family: var(--font-serif); }
.sans { font-family: var(--font-sans); }
.semibold { font-weight: var(--fw-semibold); }
.bold { font-weight: var(--fw-bold); }

/* ─── Layout helpers ─── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}
.section { padding: var(--sp-2xl) 0; }
.section-tight { padding: var(--sp-xl) 0; }
@media (max-width: 640px) {
  .section { padding: var(--sp-xl) 0; }
  .section-tight { padding: var(--sp-lg) 0; }
}

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, var(--sp-sm)); }
.stack-md > * + * { margin-top: var(--sp-md); }
.stack-lg > * + * { margin-top: var(--sp-lg); }

.row { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }

.grid { display: grid; gap: var(--sp-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ─── Visually hidden ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}