/* Site layout. Loaded after base.css. */
body > header, main, body > footer, .hero {
  max-inline-size: 65ch;
  margin-inline: auto;
}

body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block-end: 16px;
  margin-block-end: 32px;
  border-block-end: 2px solid var(--bh-text);
}
.brand { display: inline-flex; align-items: center; min-block-size: 44px; }
.brand img, .footer-brand img { inline-size: auto; max-inline-size: 100%; }

nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 8px; }
nav a[aria-current="page"] { font-weight: 800; text-decoration-thickness: 3px; }

.hero { text-align: center; margin-block-end: 32px; }

main img { max-inline-size: 100%; block-size: auto; }
main ul, main ol { padding-inline-start: 1.5rem; }

body > footer {
  margin-block-start: 48px;
  padding-block-start: 16px;
  border-block-start: 2px solid var(--bh-text);
}
body > footer p { margin-block: 0 16px; }
.settings { display: inline-flex; align-items: center; min-block-size: 44px; }
.footer-brand { display: inline-flex; }

@media (forced-colors: active) {
  body > header, body > footer { border-color: CanvasText; }
}

.legal { font-size: 0.95rem; }

.notice {
  padding-inline-start: 12px;
  border-inline-start: 4px solid var(--bh-accent);
  font-size: 0.95rem;
}