:root {
  --bg:#f7faf9; --card:#fff; --ink:#0f1f1c; --muted:#5a6f6a;
  --brand:#0d7a6f; --brand-dark:#095a52; --accent:#e8f5f2; --border:#d5e5e1;
  --score:#c45c26; --radius:14px; --shadow:0 8px 24px rgba(15,31,28,.06);
  --max:1100px; --font:"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.wrap{width:min(100% - 2rem,var(--max));margin-inline:auto}
.site-header{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.02em;text-decoration:none}
.logo span{color:var(--brand)}
.nav-links{display:flex;gap:.85rem;flex-wrap:wrap;font-size:.92rem}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--brand)}
.hero{padding:2.75rem 0 2rem;background:linear-gradient(160deg,#0d7a6f 0%,#0a5c54 55%,#083f3b 100%);color:#fff}
.hero h1{font-size:clamp(1.85rem,4.2vw,2.75rem);line-height:1.12;margin:0 0 .75rem;letter-spacing:-.03em;max-width:18ch}
.hero p{margin:0 0 1.1rem;opacity:.93;max-width:44ch;font-size:1.05rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.35rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.72rem 1.15rem;border-radius:999px;font-weight:700;border:2px solid transparent;cursor:pointer;text-decoration:none;font-size:.95rem}
.btn-primary{background:#fff;color:var(--brand-dark)} .btn-primary:hover{background:var(--accent);text-decoration:none}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn-ghost:hover{background:rgba(255,255,255,.1);text-decoration:none}
.btn-brand{background:var(--brand);color:#fff;border-color:var(--brand)} .btn-brand:hover{background:var(--brand-dark);text-decoration:none}
.btn-outline{background:#fff;color:var(--brand-dark);border-color:var(--border)} .btn-outline:hover{border-color:var(--brand);text-decoration:none}
.signup{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:1rem 1.1rem;max-width:560px}
.signup label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem}
.signup-row{display:flex;gap:.5rem;flex-wrap:wrap}
.signup input{flex:1 1 200px;padding:.7rem .9rem;border-radius:10px;border:0;font-size:1rem}
.signup .hint{font-size:.8rem;opacity:.85;margin-top:.45rem}
.magnet{margin-top:.85rem;font-size:.9rem;opacity:.95}
.magnet a{color:#fff;font-weight:800;text-decoration:underline}
.section{padding:2.25rem 0}
.section h2{margin:0 0 .35rem;font-size:1.55rem;letter-spacing:-.02em}
.section .lede{color:var(--muted);margin:0 0 1.25rem}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.65rem;margin-bottom:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.filters label{display:grid;gap:.3rem;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.filters select,.filters input{padding:.55rem .65rem;border-radius:8px;border:1px solid var(--border);font-size:.95rem;background:#fff;color:var(--ink)}
.race-grid{display:grid;gap:.9rem}
.race-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.15rem;box-shadow:var(--shadow);display:grid;gap:.55rem;transition:border-color .15s,transform .15s}
.race-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.race-card.hidden{display:none}
.race-card.finished{opacity:.72}
.race-top{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}
.race-card h3{margin:0;font-size:1.1rem;letter-spacing:-.01em}
.race-card h3 a{color:var(--ink);text-decoration:none} .race-card h3 a:hover{color:var(--brand)}
.meta{color:var(--muted);font-size:.92rem}
.score-badge{flex-shrink:0;background:var(--accent);color:var(--brand-dark);border-radius:12px;padding:.35rem .65rem;font-weight:800;font-size:.85rem;white-space:nowrap}
.score-badge strong{color:var(--score)}
.score-badge.unscored{background:#f0f0f0;color:var(--muted);font-weight:700}
.score-badge.finished-badge{background:#eee;color:#666}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{font-size:.75rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;background:#eef3f2;color:var(--muted)}
.tag.flag{background:var(--accent);color:var(--brand-dark)}
.tag.swim{background:#e8f0ff;color:#2a4d8f}
.tag.done{background:#f3e8e0;color:#8a4b28}
.empty{text-align:center;padding:2rem;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius);background:var(--card)}
.site-footer{margin-top:2rem;padding:2rem 0;border-top:1px solid var(--border);color:var(--muted);font-size:.9rem}
.footer-grid{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
.sites-we-like{font-size:.9rem;max-width:28ch} .sites-we-like a{font-weight:700}
.prose{max-width:70ch} .prose h1{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 .75rem}
.prose h2{margin-top:1.6rem} .prose table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--border);padding:.55rem .7rem;text-align:left} .prose th{background:var(--accent)}
.breadcrumb{font-size:.88rem;color:var(--muted);margin-bottom:1rem} .breadcrumb a{color:var(--muted)}
.detail-hero{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.detail-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)}
.panel h2{margin:0 0 .65rem;font-size:1.05rem}
.panel dl{margin:0;display:grid;gap:.55rem}
.panel dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.panel dd{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin:1.25rem 0 0}
.stat{background:rgba(255,255,255,.12);border-radius:12px;padding:.85rem} .stat b{display:block;font-size:1.4rem} .stat span{font-size:.82rem;opacity:.85}
.state-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.65rem}
.state-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.state-card:hover{border-color:var(--brand);text-decoration:none} .state-card strong{display:block;color:var(--brand)}
.form-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);max-width:600px}
.form-box label{display:grid;gap:.35rem;font-weight:700;font-size:.9rem;margin-bottom:.85rem}
.form-box input,.form-box textarea,.form-box select{padding:.65rem .75rem;border-radius:8px;border:1px solid var(--border);font:inherit}
.form-box .note{font-size:.85rem;color:var(--muted);font-weight:500}
.offer-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:1.25rem 0}
.offer{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.offer.featured{border-color:var(--brand);box-shadow:0 8px 28px rgba(13,122,111,.15)}
.offer h3{margin:0 0 .35rem;font-size:1.15rem}
.offer .price{font-size:1.45rem;font-weight:800;color:var(--brand-dark);margin:.4rem 0}
.offer .price span{font-size:.9rem;font-weight:600;color:var(--muted)}
.offer ul{margin:.5rem 0 0;padding-left:1.1rem}
.offer li{margin:.35rem 0}
.cta-bar{background:var(--accent);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.15rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin:1.25rem 0}
.proof{font-size:.9rem;color:var(--muted);font-style:italic}
@media(max-width:640px){.nav-links{width:100%}.signup-row{flex-direction:column}.signup-row .btn{width:100%}.hero-actions .btn{width:100%}}