@font-face { font-family:"Fraunces"; font-weight:400; src:url(/fonts/fraunces-400.ttf) format("truetype"); font-display:swap; }
@font-face { font-family:"Fraunces"; font-weight:500; src:url(/fonts/fraunces-500.ttf) format("truetype"); font-display:swap; }
@font-face { font-family:"Instrument Sans"; font-weight:400; src:url(/fonts/sans-400.ttf) format("truetype"); font-display:swap; }
@font-face { font-family:"Instrument Sans"; font-weight:500; src:url(/fonts/sans-500.ttf) format("truetype"); font-display:swap; }
@font-face { font-family:"Instrument Sans"; font-weight:600; src:url(/fonts/sans-600.ttf) format("truetype"); font-display:swap; }

:root {
  --paper:#f5f1ea; --surface:#ebe5da; --ink:#1f1c17; --muted:#6f685c; --line:#d9d1c3; --accent:#c4552d;
  --display:"Fraunces", Georgia, serif; --sans:"Instrument Sans", system-ui, sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
button, input { font:inherit; color:inherit; border-radius:0; }
.wrap { max-width:72rem; margin:0 auto; padding:0 20px; }
.site-header { border-bottom:1px solid var(--line); }
.site-header .wrap { height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand svg { width:32px; height:32px; }
.brand span { font-family:var(--display); font-size:1.35rem; font-weight:500; letter-spacing:-.01em; }
.eyebrow { margin:0; font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
h1, h2, h3 { font-family:var(--display); font-weight:400; letter-spacing:-.015em; text-wrap:balance; margin:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 24px; border:0;
       background:var(--ink); color:var(--paper); font-weight:500; cursor:pointer; transition:background .15s; }
.btn:hover { background:#3a362f; }
.btn:disabled { opacity:.4; cursor:default; }
.tag { font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }

/* ---- motion ---- */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes slideIn { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:none; } }
@keyframes p { 50% { opacity:.25; } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes pop { 0% { transform:scale(.6); opacity:0; } 70% { transform:scale(1.08); } 100% { transform:none; opacity:1; } }
@keyframes sway { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }
.btn { transition:background .15s, transform .15s, opacity .15s; }
.btn:active:not(:disabled) { transform:scale(.98); }
.brand svg { transform-origin:50% 90%; }
.brand:hover svg { animation:sway 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

.banner-link { display:block; text-align:center; padding:20px 20px 0; }
.banner { display:inline-block; width:min(100%, 560px); height:auto; animation:rise .8s both; }
.barmeta { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 32px 0; border-bottom:1px solid var(--line); min-height:44px; }
.barmeta .tally { padding-bottom:8px; }