/* Big Yikes Bot's public pages (About, Terms, Privacy), in the site's design system: brand.css loads first and provides
   the tokens, fonts, links and skip link. The wording lives in the HTML and was reviewed for Discord; change style here,
   never the text, without re-checking it against the bot's behaviour (see the bot repo's docs/legal/README.md). */
body { background: var(--ground); color: var(--ink); }

header { max-width: 760px; margin: 0 auto; padding: 24px 24px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 400 1.5rem/1 var(--display); letter-spacing: .01em; }
.brand img { width: 48px; height: 48px; border-radius: 50%; }
header nav { display: flex; flex-wrap: wrap; gap: 4px; }
header nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--muted);
  font: 800 .8125rem/1 var(--body); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; transition: color var(--ease), background-color var(--ease); }
header nav a:hover { color: var(--ink); background: var(--surface); }
/* where you are: the site's small raised coin before the label */
header nav a[aria-current="page"] { color: var(--ink); }
header nav a[aria-current="page"]::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--yikes); box-shadow: 0 2px 0 var(--yikes-lip); }

main { max-width: 760px; margin: 0 auto; padding: 36px 24px 24px; }
main h1 { font: 400 var(--fs-hero)/1.08 var(--display); margin: 0 0 18px; text-wrap: balance; }
main h2 { font: 400 var(--fs-xl)/1.2 var(--display); margin: 44px 0 12px; }
main h3 { font-size: var(--fs-lg); font-weight: 800; margin: 28px 0 8px; }
main p, main li { max-width: 68ch; line-height: 1.65; }
main ul, main ol { padding-left: 1.2em; }
main li + li { margin-top: 6px; }
main strong { font-weight: 800; }

footer { max-width: 760px; margin: 32px auto 0; padding: 22px 24px 40px; border-top: 2px solid var(--line); color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }
footer a { color: var(--muted); }

@media (max-width: 560px) {
  header { padding-inline: 16px; }
  header nav { width: 100%; }
  header nav a { padding: 0 10px; }
  main { padding-inline: 16px; }
  footer { padding-inline: 16px; }
}