/* Setern monochrome brand system for generated editorial pages. */
:root {
  --bg: #000000;
  --panel: #000000;
  --paper: #ffffff;
  --muted: rgb(255 255 255 / 66%);
  --faint: rgb(255 255 255 / 46%);
  --line: rgb(255 255 255 / 16%);
  --accent: #c68a45;
}

html,
body {
  color: #ffffff;
  background: #000000;
}

.learn-header {
  background: rgb(0 0 0 / 94%);
  border-color: rgb(255 255 255 / 14%);
}

.learn-nav a,
.learn-hero > p:last-child,
.article-card p,
.article-dek,
.article-meta,
.article-aside,
.article-body p,
.article-body li,
.learn-footer {
  color: rgb(255 255 255 / 66%);
}

.learn-nav a:hover,
.learn-nav a:focus-visible,
.learn-nav a[aria-current='page'],
.learn-brand,
.article-card h2,
.article-card span,
.article-head h1,
.article-body h2,
.article-body h3,
.related h2,
.related a,
.learn-footer a {
  color: #ffffff;
}

.learn-nav-cta {
  color: #000000 !important;
  background: #ffffff;
  border-color: #ffffff;
}

.learn-nav-cta:hover,
.learn-nav-cta:focus-visible {
  color: #000000 !important;
  background: var(--accent);
  border-color: var(--accent);
}

.article-card,
.related a,
.article-body blockquote,
.article-body .note {
  background: #000000;
  border-color: rgb(255 255 255 / 16%);
}

.article-card:hover,
.article-card:focus-visible,
.related a:hover,
.related a:focus-visible {
  background: rgb(255 255 255 / 6%);
}

.article-body blockquote,
.article-body .note {
  color: #ffffff;
}

.learn-kicker,
.article-card small,
.related small {
  color: var(--accent);
}

::selection {
  color: #000000;
  background: var(--accent);
}