/* ──────────────────────────────────────────────────────────────────────────
   LafataCorp shared styles
   One typeface (Host Grotesk), one palette, three pages: /, /nhl/, /kalshi/.
   Page-specific rules live in each page's own <style> block.
   No em dashes anywhere in rendered copy. Percentages only, never dollars.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --ground:#F1F3F5;
  --ink:#0A0D12;
  --ink-soft:#262C35;
  --muted:#3E4651;
  --muted-dark:#A9B1BB;
  --rule:#CDD3DA;
  --rule-dark:#2A3038;
  --rule-dark-2:#3A414B;
  --card:#FFFFFF;
  --beta:#5A6370;
  --up:#12804A;
  --up-dark:#4CC38A;
  --down:#C8261B;
  --down-dark:#E88379;
  --live:#E0261B;
  --on-dark:#E9EDF1;
  --on-dark-soft:#C9D0D8;
  --white:#FFFFFF;
  --track:#E4E8EC;
  --track-dark:#262C35;
  --wrap:1320px;
  --pad:32px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Host Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:var(--ink)}
button{font:inherit}
img{max-width:100%}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.lbl{font-size:14px;color:var(--muted);margin:0}
.beta{font-weight:400;color:var(--beta);margin-left:5px}
.up{color:var(--up)}
.dn{color:var(--down)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:8px 32px;padding-top:20px;padding-bottom:20px}
.top a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;
  min-height:44px;display:flex;align-items:center}
.top a:hover,.top a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.top nav{display:flex;flex-wrap:wrap;gap:0 28px}
.wordmark{font-weight:700;font-size:16px;letter-spacing:-.01em}
.wordmark span{font-weight:400;color:var(--muted)}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;
  border-radius:999px;font-size:16px;font-weight:500;text-decoration:none}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--ink-soft);color:var(--white)}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--white)}

/* ── scoreboard records (used on home, light; and /nhl/ archive, dark) ───── */
.rec{padding:44px 0;border-top:1px solid var(--rule)}
.rec-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:6px 24px}
.rec-top h3{margin:0;font-size:22px;font-weight:500;color:var(--ink)}
.rec-top .meta{font-size:14px;color:var(--muted)}
.rec-main{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 56px;margin-top:20px}
.rec-big{font-size:clamp(72px,9vw,132px);font-weight:500;letter-spacing:-.055em;
  line-height:.85;color:var(--ink)}
.rec-side{display:flex;flex-wrap:wrap;gap:40px;padding-bottom:8px}
.rec-side b{display:block;font-size:30px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.rec-side b.up{color:var(--up)}
.rec-side b.dn{color:var(--down)}
.rec-side span{font-size:14px;color:var(--muted)}
.rec p{margin:22px 0 0;max-width:60ch;color:var(--muted)}

.split{display:flex;height:14px;margin-top:32px;border-radius:7px;overflow:hidden}
.split .w{background:var(--ink)}
.split .l{background:repeating-linear-gradient(135deg,#8A939E 0 2px,transparent 2px 7px);
  box-shadow:inset 0 0 0 1.5px #8A939E;border-radius:0 7px 7px 0}
.split-k{display:flex;justify-content:space-between;margin-top:10px;font-size:14px;
  color:var(--muted)}

.mini{display:grid;grid-template-columns:150px minmax(0,1fr) 56px;gap:10px 16px;
  align-items:center;margin-top:28px;font-size:14px;max-width:560px}
.mini .t{height:6px;border-radius:3px;background:#DCE1E6;position:relative}
.mini .t i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ink)}
.mini .v{text-align:right}

/* dark variant of the same block */
.dark .rec{border-top-color:var(--rule-dark)}
.dark .rec-top h3{color:var(--white)}
.dark .rec-top .meta{color:var(--muted-dark)}
.dark .rec-big{color:var(--white)}
.dark .rec-side b{color:var(--white)}
.dark .rec-side b.up{color:var(--up-dark)}
.dark .rec-side b.dn{color:var(--down-dark)}
.dark .rec-side span{color:var(--muted-dark)}
.dark .rec p{color:var(--on-dark-soft)}
.dark .split .w{background:var(--white)}
.dark .split .l{background:repeating-linear-gradient(135deg,#6B7480 0 2px,transparent 2px 7px);
  box-shadow:inset 0 0 0 1.5px #6B7480}
.dark .split-k{color:var(--muted-dark)}
.dark .mini .t{background:var(--track-dark)}
.dark .mini .t i{background:var(--white)}

/* ── team logos ──────────────────────────────────────────────────────────── */
.club{flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink);
  font-weight:700;letter-spacing:.02em;color:var(--ink);overflow:hidden}
.club.lg{width:76px;height:76px;font-size:18px}
.club.sm{width:30px;height:30px;font-size:10px;border-radius:7px}
.club.lean{box-shadow:inset 0 0 0 3px var(--ink)}
.club img{display:block;width:72%;height:72%;object-fit:contain}
.club.sm img{width:76%;height:76%}

/* ── result badges ───────────────────────────────────────────────────────── */
.wl{display:inline-flex;align-items:center;justify-content:center;min-width:28px;
  height:26px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:700}
.wl.w{background:#DDF3E6;color:#0D6B3D}
.wl.l{background:#FBE1DE;color:#A31F15}
.wl.p{background:#E4E8EC;color:#3E4651}

/* ── footers ─────────────────────────────────────────────────────────────── */
.foot-slim{background:var(--ink);color:var(--muted-dark);border-top:1px solid var(--rule-dark)}
.foot-slim .wrap{padding-top:28px;padding-bottom:36px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:8px 32px;font-size:14px}
.foot-slim strong{color:var(--white);font-weight:600}
.foot-slim a{color:var(--on-dark)}
.foot-slim span{max-width:72ch}

@media (max-width:520px){
  :root{--pad:20px}
  .mini{grid-template-columns:112px minmax(0,1fr) 46px;font-size:13px}
  .rec-side{gap:24px}
}