/* Academy-specific layout on top of Fart.css (https://css.fart.tools). */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  max-width: var(--container-content);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-base) 0;
}

.site-header nav {
  margin: 0;
  padding: 0;
  gap: var(--space-xs) var(--space-base);
  font-size: var(--font-size-sm);
  justify-content: flex-start;
}

.site-header nav a[aria-current] {
  text-decoration: underline;
  color: var(--fart-secondary);
}

.brand {
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  text-decoration: none;
  color: var(--fart-white);
}

.brand:visited {
  color: var(--fart-white);
}

.brand span {
  color: var(--fart-primary);
}

main.fart-section {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

main h1 {
  margin: var(--space-sm) 0 var(--space-base);
  font-size: var(--font-size-3xl);
}

main h2 {
  font-size: var(--font-size-xl);
  margin: var(--space-2xl) 0 var(--space-base);
}

main h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-xs);
}

main ul,
main ol {
  margin: var(--space-base) 0;
}

.kicker {
  margin: 0;
  color: var(--fart-off-white);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.lede {
  font-size: var(--font-size-lg);
  color: var(--fart-white);
}

.actions,
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.callout {
  padding: var(--space-base) var(--space-lg);
  border-left: 3px solid var(--fart-secondary);
  background: var(--fart-dark-primary);
  border-radius: var(--radius-sm);
}

blockquote {
  font-style: normal;
  font-size: var(--font-size-lg);
}

ul.plain,
ul.cites {
  list-style: none;
  padding: 0;
}

ul.plain li,
ul.cites li {
  margin: var(--space-sm) 0;
}

ol.modules {
  list-style: none;
  padding: 0;
  counter-reset: m;
}

ol.modules li {
  counter-increment: m;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--fart-highlight);
}

ol.modules li::before {
  content: counter(m);
  grid-row: span 2;
  color: var(--fart-primary);
  font-weight: var(--font-weight-bold);
}

ol.modules li span {
  color: var(--fart-off-white);
  font-size: var(--font-size-sm);
}

.soon {
  margin: var(--space-lg) 0;
  padding: var(--space-base) var(--space-lg);
  border: 1px dashed var(--fart-highlight);
  border-radius: var(--radius-md);
}

.soon p {
  margin: var(--space-xs) 0;
}

.soon ul {
  margin: var(--space-sm) 0 0;
  color: var(--fart-off-white);
  font-size: var(--font-size-sm);
}

small {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--fart-secondary);
  margin-left: var(--space-xs);
}

ol.timeline {
  list-style: none;
  padding: 0 0 0 var(--space-lg);
  border-left: 2px solid var(--fart-highlight);
}

ol.timeline li {
  position: relative;
  margin: 0 0 var(--space-lg);
}

ol.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) - 6px);
  top: 0.5rem;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--fart-primary);
}

ol.timeline .when {
  font-size: var(--font-size-xs);
  color: var(--fart-off-white);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

ol.timeline p {
  margin: var(--space-xs) 0 0;
}

@media (max-width: 640px) {
  .site-header nav {
    flex-direction: row;
    align-items: baseline;
  }
}