:root {
  color-scheme: light;
  --resource-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --resource-muted: #59636b;
  --resource-rule: #e9ebed;
}
html { font-size: 100%; }
body > .container { max-width: 848px; }
.resources-page { max-width: 760px; font-family: var(--resource-font); }
.resources-header { margin: 0 0 24px; }
.resources-header h1 {
  margin: 0 0 10px;
  font: 650 2.25rem/1.2 var(--resource-font);
  letter-spacing: -.035em;
}
.resources-header p {
  max-width: 64ch;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--resource-muted);
}
.resource-list { list-style: none; padding: 0; margin: 0; }
.resource-list > li {
  padding: 17px 0 18px;
  margin: 0;
  border-top: 1px solid var(--resource-rule);
}
.resource-list h2 {
  display: block;
  margin: 0;
  font: 600 1rem/1.5 var(--resource-font);
  letter-spacing: -.015em;
  text-wrap: initial;
}
.resource-list h2 a {
  color: var(--minimal-blue);
  text-decoration: underline;
  text-decoration-color: #c3d0d8;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.resource-author {
  display: block;
  margin-top: 3px;
  color: var(--resource-muted);
  font-size: .8125rem;
  line-height: 1.55;
}
.resource-list p {
  max-width: 80ch;
  margin: 5px 0 0;
  color: #434b52;
  font-size: .90625rem;
  line-height: 1.55;
}
.resource-list .resource-group-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 18px;
  margin-top: 7px;
  font-size: .875rem;
  line-height: 1.6;
}
.resource-group-links a {
  display: inline-block;
  max-width: 100%;
  min-height: 26px;
  padding-block: 2px;
  color: var(--minimal-blue);
  text-decoration: none;
}
.resource-link-title {
  text-decoration: underline;
  text-decoration-color: #c3d0d8;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.resource-credit { color: var(--resource-muted); font-size: .8125rem; }
.resource-list a:hover { color: var(--minimal-blue-hover); text-decoration-color: currentColor; }
.resource-group-links a:hover .resource-link-title { text-decoration-color: currentColor; }
.resource-list a:focus-visible { outline: 2px solid var(--minimal-blue); outline-offset: 4px; border-radius: 2px; }
.skip-link {
  position: absolute;
  left: -10000px;
  top: 8px;
  padding: 12px;
  background: white;
  z-index: 100;
  font: .875rem/1.5 var(--resource-font);
}
.skip-link:focus { left: 12px; }
@media (max-width: 759px) {
  body > .container { max-width: 720px; padding: 12px 24px 28px; }
  .resources-header { margin-top: 8px; margin-bottom: 20px; }
  .resources-header h1 { font-size: 2rem; }
  .resource-list > li { padding-block: 15px 16px; }
}
@media (max-width: 480px) {
  body > .container { padding-inline: 20px; }
  .section-nav-links { flex-wrap: wrap; overflow: visible; gap: 0 12px; }
  .section-nav a { min-height: 32px; padding: 4px 0; }
  .section-nav a[aria-current] { padding-inline: 6px; }
  .resource-list .resource-group-links { column-gap: 16px; }
  .resource-group-links a { min-height: 32px; padding-block: 4px; }
}