/* Page-level rules lifted out of the design's <helmet> block. */
body { margin: 0; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
figure { margin: 0; }

/* The design is authored at desktop width with inline styles and no
   breakpoints. These override the inline grid/type at narrow widths; the
   !important is required to beat the style attributes in the markup. */
@media (max-width: 1000px) {
  .site > header, .site > section, .site > section > div, .site > footer > div {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .site h1 { font-size: 44px !important; max-width: none !important; }
  .site h2 { font-size: 32px !important; max-width: 24ch !important; }
  .grid-2col { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  .site > header, .site > section, .site > section > div, .site > footer > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .site > section, .site > section > div { padding-top: 56px !important; padding-bottom: 56px !important; }
  .site h1 { font-size: 34px !important; }
  .site h2 { font-size: 26px !important; }
  .site > header { flex-wrap: wrap; gap: 14px !important; padding-top: 18px !important; padding-bottom: 18px !important; }
  .site nav { gap: 16px !important; flex-wrap: wrap; font-size: 13px; }
  .grid-3, .grid-4, .grid-cards { grid-template-columns: minmax(0, 1fr) !important; }
  .grid-3 > figure { height: 200px !important; }
}