/* Koita Reels site: the app's "Honest Tally" look (design/research/design.md). Fonts are self-hosted (SIL OFL). */
@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; }
@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage_condensed.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --ink: #0B0C0E; --surface: #15171A; --hairline: #2B2F35;
  --text: #F2F3F0; --text2: #A3A9B2; --text3: #868D97; --lime: #C6F24E;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 17px/1.6 "Inter", system-ui, sans-serif;
}
a { color: var(--lime); }
.wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; }
header img { width: 40px; height: 40px; border-radius: 10px; }
header a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; }
h1, .hero { font-family: "Bricolage", "Inter", sans-serif; font-weight: 800; letter-spacing: -0.01em; line-height: 1.02; margin: 0 0 20px; }
h1 { font-size: clamp(40px, 9vw, 72px); }
h2 { font-size: 20px; font-weight: 600; margin: 40px 0 8px; }
p, li { color: var(--text2); }
strong { color: var(--text); font-weight: 600; }
.lime { color: var(--lime); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.panel { background: var(--surface); border-radius: 16px; padding: 20px 24px; margin: 32px 0; }
.panel p { margin: 0; }
.soon { display: inline-block; margin-top: 8px; padding: 12px 20px; border: 1px solid var(--lime); border-radius: 16px; color: var(--lime); font-weight: 600; }
footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--text3); }
footer p { color: var(--text3); margin: 6px 0; }
.meta { color: var(--text3); font-size: 14px; }