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

html, body {
  margin: 0; padding: 0;
  font: 400 16px/1.5 'Geist', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; }

/* Type helpers */
.h-sans  { font-family: 'Geist', sans-serif; font-weight: 500; letter-spacing: -.02em; line-height: 1.02; }
.h-serif { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* Layout */
.vd-main { display: block; }
.vd-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.vd-section { max-width: var(--wrap); margin: 0 auto; padding: 40px 40px; }

.vd-page { padding-top: 40px; padding-bottom: 64px; }
.vd-page__title { font-size: 44px; margin-bottom: 24px; }
.vd-page__content { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.vd-empty { padding: 60px 0; text-align: center; color: var(--ink-soft); }

/* Grids */
.vd-grid { display: grid; gap: 18px; }
.vd-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vd-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .vd-wrap, .vd-section { padding-left: 24px; padding-right: 24px; }
  .vd-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .vd-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vd-wrap, .vd-section { padding-left: 16px; padding-right: 16px; }
  .vd-grid--4, .vd-grid--3 { grid-template-columns: 1fr; }
}