/* Bugbear — Honey Brutal. Fonts are self-hosted (no third-party requests). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations'),
       url(/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/space-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/space-mono-latin-700-normal.woff2) format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #FFC531;
  color: #161311;
  font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
main { flex: 1 0 auto; }
a { color: #161311; }
h2 { text-wrap: balance; }
.mono { font-family: 'Space Mono', ui-monospace, monospace; }

.btn { transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translate(-2px, -2px) !important; box-shadow: 7px 7px 0 #161311 !important; }
.btn:active { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 #161311 !important; }
a:focus-visible, .btn:focus-visible, .navlink:focus-visible { outline: 3px solid #161311; outline-offset: 4px; }
.on-dark a:focus-visible, .on-dark .btn:focus-visible { outline-color: #FFC531; }

.navlink { text-decoration: none; font-weight: 600; }
.navlink:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

.card { transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translate(-3px, -3px) !important; box-shadow: 9px 9px 0 #161311 !important; }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 10;
  padding: 10px 14px; border-radius: 8px;
  background: #161311; color: #FFC531; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.tag {
  display: inline-block; padding: 3px 9px; border: 2px solid #161311; border-radius: 999px;
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}

/* Long-form pages (privacy) */
.prose { max-width: 760px; }
.prose h2 { margin: 52px 0 14px; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; }
.prose p, .prose li { font-size: 18px; line-height: 1.62; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0; padding-left: 22px; }
.prose a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Small screens: logo and CTA share the first row, nav goes below */
@media (max-width: 720px) {
  .hdr-nav { order: 3; width: 100%; gap: 6px 20px !important; font-size: 16px !important; }
  .hdr-logo { height: 28px !important; }
}
@media (max-width: 400px) {
  .hdr-cta { padding: 0 14px !important; font-size: 15px !important; }
}
@media (max-width: 480px) {
  .hero-bubble { max-width: 160px !important; font-size: 14px !important; }
}