/* site.css — the Sept 6 redesign's shared vocabulary (docs/mocks/*.src.html are the reference).
   Tokens match public/chrome.css (county-fair palette). Three registers, one file:
   calm (landing, standings, adopt, why): Montserrat 500 headlines + one Noto Serif Display italic word (em.w);
   campaign (candidate pages): Montserrat 800/900 lockups, flat city-colour bands — see candidate.js;
   the garage (adopt block). Photos are always object-fit:contain (T4). Sun = the one action per page (M1). */
:root{
  --cream:#FFFDF8; --ink:#1A1A1A; --sun:#F5B700; --sun-dark:#E4AA00;
  --sky:#2F7FD1; --sky-text:#2872BD; --tomato:#D9442B; --tomato-text:#C63A22; --wfargo:#377E45; --horace:#7A3F9C;
  --hair:#E8E2D6; --line:#8E8A82; --muted:#5F5B54; --ground:#F3EEE3; --card:#FFFFFF;
  --sans:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Noto Serif Display",Georgia,"Times New Roman",serif;
  --wrap:1120px; --topbar-h:80px;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sky-text);outline-offset:3px}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;
  padding:9px 14px;border-radius:999px;background:var(--card);border:1px solid var(--hair);color:var(--ink);margin:0}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--ink);display:inline-block}
.kicker.on-ink{background:rgba(255,253,248,.1);border-color:rgba(255,253,248,.18);color:var(--cream)}
.kicker.on-ink i{background:var(--sun)}
h1,h2{font-weight:500;letter-spacing:-.02em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5.2vw,64px)}
h2{font-size:clamp(30px,4vw,48px)}
em.w{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:0;font-size:1.06em}
.lede{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--muted);max-width:52ch;margin:0}
.on-ink .lede{color:rgba(255,253,248,.82)}
.sec-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:transform .15s ease,background .15s ease}
.pill:hover{transform:translateY(-1px)}
.pill .arr{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;margin-right:-10px;background:rgba(26,26,26,.1);font-size:13px}
.pill.sun{background:var(--sun);color:var(--ink);font-weight:700}
.pill.sun:hover{background:var(--sun-dark)}
.pill.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.pill.ghost-light{background:rgba(255,253,248,.12);border-color:rgba(255,253,248,.45);color:var(--cream)}
.pill.cream{background:var(--cream);color:var(--ink)}
/* topbar: verbatim chrome */
.topbar{background:var(--cream);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:20}
.topbar-in{max-width:960px;margin:0 auto;padding:0 20px;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:14px}
.brandmark{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;color:var(--ink);min-height:44px;justify-content:center}
.brandmark span{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1;opacity:.72;white-space:nowrap}
.brandmark img{width:132px;height:auto;display:block}
.topbar nav{display:flex;align-items:center;gap:2px}
.topbar nav a{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.topbar nav a:hover{background:rgba(26,26,26,.06)}
.topbar nav a[aria-current]{background:rgba(26,26,26,.08)}
.topbar nav a.cta2{background:var(--sun);color:var(--ink);font-weight:700;padding:10px 16px;margin-left:4px}
@media (max-width:520px){:root{--topbar-h:68px}.topbar-in{padding:0 14px;gap:8px}.brandmark img{width:108px}.brandmark span{font-size:8.5px}.topbar nav a{font-size:12.5px;padding:9px 8px}.topbar nav a.cta2{padding:9px 13px}.topbar nav a.home{display:none}}
section.band{padding:72px 0}
section.on-ink{background:var(--ink);color:var(--cream)}
section.on-ground{background:var(--ground)}
/* footer: verbatim chrome (P16) */
.sitefoot{background:var(--ink);color:var(--cream);font-family:var(--sans)}
.sitefoot .bunting{height:8px;background:linear-gradient(90deg,var(--sun) 0 33.34%,var(--sky) 33.34% 66.67%,var(--tomato) 66.67% 100%)}
.sitefoot-in{max-width:960px;margin:0 auto;padding:42px 20px 30px;display:grid;grid-template-columns:1.45fr 1fr 1.25fr;gap:36px}
.sitefoot p{font-size:14px;line-height:1.6;margin:0;color:var(--cream);opacity:.92;max-width:38ch}
.sf-eyebrow,.sf-h{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin:0 0 10px;line-height:1.2}
.sf-brand img{width:208px;height:auto;display:block;filter:brightness(0) invert(1);margin:2px 0 16px}
.sf-col a{display:block;color:var(--cream);text-decoration:none;font-size:15px;font-weight:600;padding:6px 0;width:max-content;max-width:100%}
.sf-link{display:inline-block;margin-top:12px;color:var(--sun);font-weight:700;font-size:14px;text-decoration:none}
.sf-bottom{border-top:1px solid rgba(255,253,248,.14)}
.sf-bottom-in{max-width:960px;margin:0 auto;padding:18px 20px 36px;display:flex;flex-direction:column;gap:6px}
.sf-bottom p{font-size:12px;opacity:.72;max-width:none}
@media (max-width:720px){.sitefoot-in{grid-template-columns:1fr;gap:30px;padding:34px 20px 24px}.sf-brand img{width:184px}}
/* the one card (M8) */
.race{flex:0 0 clamp(250px,24vw,300px);scroll-snap-align:start;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.race .ph{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--tint);display:grid;place-items:center;transition:transform .2s ease}
.race:hover .ph{transform:translateY(-3px)}
.race .ph img{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(26,26,26,.22))}
.race .ph .band{position:absolute;left:0;right:0;top:0;height:9px;background:var(--city)}
.chip{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:var(--card);font-size:12.5px;font-weight:600;line-height:1;box-shadow:0 4px 14px rgba(26,26,26,.12)}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block}
.chip.bl{bottom:14px;left:14px}.chip.br{bottom:14px;right:14px}.chip.tl{top:14px;left:14px}
.race .nm{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0}
.race .nm em.w{font-size:.98em;color:var(--city)}
.race .q{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.race .q::before{content:"“"}.race .q::after{content:"”"}
/* Sept 8: the card carries its own Vote (sun = Vote, M1). The photo + name are one link to the pet;
   the sun pill deep-links to /pet/{id}#vote. A block-level card can't nest two links inside one <a>, so the
   card is a <div class="race"> with <a class="body"> and <a class="pill sun vote">. */
.race .body{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;min-width:0}
.race .vote{justify-content:center;white-space:normal;text-align:center;line-height:1.2;padding:10px 16px;min-height:48px;width:100%}
.race .vote .arr{flex:none}
.row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 0 18px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:600;text-decoration:none;background:transparent}
.filters a i{width:8px;height:8px;border-radius:50%;display:inline-block}
.filters a:hover,.filters a[aria-current]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.winston{display:flex;align-items:center;gap:12px}
.winston img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,253,248,.8)}
.winston p{margin:0;font-size:15px;line-height:1.45}
.winston p small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.78;margin-top:4px}

/* ---------- the ink frame (landing hero, standings scoreboard) ---------- */
.frame{background:var(--ink);padding:12px 12px 0}
@media (max-width:760px){.frame{padding:8px 8px 0}}
/* ---------- campaign-button ring: the pet, contained, never cropped (T4) ---------- */
.coin{border-radius:50%;padding:6px;background:var(--ring,var(--hair));display:block}
.coin>span{display:block;width:100%;height:100%;border-radius:50%;background:var(--ground);padding:7px}
.coin img{width:100%;height:100%;border-radius:50%;object-fit:contain}
/* ---------- skeletons + honest empties (P13): never a fake number ---------- */
.skel{display:inline-block;background:linear-gradient(90deg,var(--hair),var(--ground),var(--hair));background-size:200% 100%;animation:skel 1.2s linear infinite;border-radius:6px;color:transparent}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Vote buttons line up across a row even when one card carries a quote line (Sept 8) */
.race .vote{margin-top:auto;align-self:stretch;justify-content:center}