/* hoplala.app — the brand palette and faces from docs/BRAND.md. Fonts are
   served from this host, never fetched from a third party: a German court
   has treated a runtime Google Fonts request as a GDPR breach. */
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --forest: #014646; --mint: #77CEB0; --mist: #DAF0EA; --cream: #FCF7E8;
  --coral: #FD6C5B; --coral-deep: #CC3F2B; --muted: #4F6B68; --line: #E4E7E0;
}
* { box-sizing: border-box; }
html { background: var(--cream); color: var(--forest); }
body { margin: 0; font: 400 17px/1.6 "Inter", system-ui, sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; }
h1, h2 { font-family: "Fraunces", Georgia, serif; font-variation-settings: "wght" 600, "SOFT" 100, "WONK" 0; letter-spacing: -0.2px; line-height: 1.2; }
h1 { font-size: 36px; margin: 0 0 8px; }
h2 { font-size: 24px; margin: 40px 0 8px; }
p, li { max-width: 62ch; }
a { color: var(--forest); text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wordmark { font-family: "Fraunces", Georgia, serif; font-variation-settings: "wght" 700, "SOFT" 100; font-size: 28px; letter-spacing: -0.5px; text-decoration: none; }
.wordmark b { color: var(--coral); }
.tagline { font-size: 20px; color: var(--muted); margin: 0 0 32px; }
.tagline b { color: var(--coral); font-weight: 400; }
.lede { font-size: 19px; }
.note { background: var(--mist); border-radius: 12px; padding: 14px 18px; }
footer { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 20px; font-size: 15px; color: var(--muted); }
footer a { margin-right: 18px; }
dl dt { font-weight: 600; margin-top: 14px; } dl dd { margin: 2px 0 0; }
.todo { color: var(--coral-deep); font-weight: 600; }