:root {
  --ink: #202326;
  --deep: #171a1c;
  --core: #6b6258;
  --paper: #f4f3f0;
  --muted: #5c6368;
  --line: rgba(32, 35, 38, .14);
}

header,
footer,
.article-cta {
  background: #171a1c;
}

.hero {
  background: linear-gradient(130deg, #171a1c, #292c2f 62%, #111315);
}

.hero .eyebrow,
.hero h1 em {
  color: #d8cbbb;
}

.article-cta a {
  color: #fff;
  background: #171a1c;
}

.category-grid article {
  padding: 0;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.category-grid article:hover,
.category-grid article:focus-within {
  border-color: var(--core);
  box-shadow: 0 20px 55px rgba(16, 44, 45, .1);
  transform: translateY(-3px);
}

.category-grid article > a {
  display: block;
  height: 100%;
  padding: 32px;
}

.review-note {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 48px;
  padding: 20px 24px;
  color: #55351d;
  border: 1px solid #d7a17b;
  border-radius: 16px;
  background: #f9e8da;
}

.review-note span {
  font-size: 13px;
}

.article-shell article > ul,
.article-shell article > ol {
  padding-left: 22px;
}

.article-shell article > li,
.article-shell article > ul li,
.article-shell article > ol li {
  margin-bottom: 10px;
}

.article-sources a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .review-note {
    flex-direction: column;
  }
}
:root header img, :root footer img { width: 200px; }