/* Small additions used by the editable, framework-free copy in index.html. */

.mobile-nav {
  border-top: 1px solid hsl(var(--brand-line));
  background: hsl(var(--brand-paper));
}

.mobile-nav ul {
  display: grid;
  gap: 0.25rem;
  margin-inline: auto;
  max-width: 72rem;
  padding: 0.75rem 1rem 1rem;
}

.mobile-nav a {
  display: block;
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  background: hsl(var(--brand-red-soft));
  color: hsl(var(--brand-red));
  outline: none;
}

@media (min-width: 48rem) {
  .mobile-nav {
    display: none !important;
  }
}