/* NFL Model — "measure twice" identity.
   The gridiron is itself a measuring instrument: yard lines, hash marks,
   chains. The page borrows that logic — a light, ruled, precise surface
   where the model's number and the market's number are set against each
   other and the gap between them is the only thing printed in warning ink.

   Tokens are defined light-first on :root, redefined under the dark media
   query, then again under :root[data-theme=...] so the viewer's toggle
   wins in both directions. */

:root {
  --paper: #F2F4F3;
  --card: #FFFFFF;
  --card-sunk: #EDF0EE;
  --ink: #121A17;
  --ink-mute: #5D6B64;
  --ink-faint: #8A968F;
  --rule: #DCE3DF;
  --rule-strong: #C3CEC8;
  --accent: #0E6E4E;
  --signal: #C2410C;
  --win: #0E6E4E;
  --loss: #B0301C;
  --push: #8A7640;
  --shadow: 0 1px 2px rgba(18, 26, 23, 0.05), 0 1px 1px rgba(18, 26, 23, 0.04);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0C1210;
    --card: #141C19;
    --card-sunk: #1A2420;
    --ink: #EAEFEC;
    --ink-mute: #94A49B;
    --ink-faint: #6B7B72;
    --rule: #263430;
    --rule-strong: #35453F;
    --accent: #3FBE8B;
    --signal: #F08A4B;
    --win: #3FBE8B;
    --loss: #E4705C;
    --push: #CBB069;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  --paper: #0C1210;
  --card: #141C19;
  --card-sunk: #1A2420;
  --ink: #EAEFEC;
  --ink-mute: #94A49B;
  --ink-faint: #6B7B72;
  --rule: #263430;
  --rule-strong: #35453F;
  --accent: #3FBE8B;
  --signal: #F08A4B;
  --win: #3FBE8B;
  --loss: #E4705C;
  --push: #CBB069;
  --shadow: none;
}

:root[data-theme="light"] {
  --paper: #F2F4F3;
  --card: #FFFFFF;
  --card-sunk: #EDF0EE;
  --ink: #121A17;
  --ink-mute: #5D6B64;
  --ink-faint: #8A968F;
  --rule: #DCE3DF;
  --rule-strong: #C3CEC8;
  --accent: #0E6E4E;
  --signal: #C2410C;
  --win: #0E6E4E;
  --loss: #B0301C;
  --push: #8A7640;
  --shadow: 0 1px 2px rgba(18, 26, 23, 0.05), 0 1px 1px rgba(18, 26, 23, 0.04);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

/* ---------- masthead ---------- */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2.5rem 1.1rem;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
}

.site-header nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-header nav a {
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-mute);
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}

.site-header nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- shell ---------- */

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2.5rem 6rem;
}

.home-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 5rem 2.5rem 7rem;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 1.5rem;
}

.lede {
  font-size: 1.06rem;
  color: var(--ink-mute);
  max-width: 58ch;
  margin: 0 0 2.25rem;
}

.cta {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
}

.cta:hover { background: var(--accent); }

.hero-banner {
  border-left: 3px solid var(--signal);
  background: var(--card-sunk);
  padding: 1rem 1.2rem;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-bottom: 2.25rem;
  max-width: 58ch;
}

.back-link {
  text-decoration: none;
  color: var(--ink-mute);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.back-link:hover { color: var(--accent); }

.section > h1 { margin-top: 0.4rem; }

.subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin: 3rem 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
}

/* ---------- week index ---------- */

.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 1px;
  margin-top: 2.25rem;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.week-card {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: var(--card);
  padding: 1.35rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
}

.week-card:hover { background: var(--card-sunk); }

.week-num {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}

.week-season {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* ---------- game cards ---------- */

.game-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.25rem;
}

.game-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem 1.1rem;
}

.game-card:hover { border-left-color: var(--accent); }

.matchup {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}

.at {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Score rows: a label column, then the two teams' figures. The vertical
   rules between columns are the yard-line motif. */
.score-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 1fr;
  align-items: center;
  padding: 0.42rem 0;
  font-variant-numeric: tabular-nums;
}

.score-row--model {
  border-top: 1px solid var(--rule);
}

.score-row--actual {
  border-top: 1px solid var(--rule);
}

.score-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.score-num {
  font-family: var(--mono);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}

.score-row--model .score-num { color: var(--accent); }
.score-row--actual .score-num { color: var(--ink); }

.meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

.meta-key {
  display: block;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.1rem;
}

.meta-item {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
}

.chip {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.6rem;
  border: 1px solid currentColor;
}

.chip-win { color: var(--win); }
.chip-loss { color: var(--loss); }
.chip-push { color: var(--push); }

.breakdown-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

.breakdown-link:hover { border-bottom-color: var(--accent); }

.not-played-note {
  margin: 0.9rem 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- record ---------- */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 2.25rem 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--card);
  padding: 1.4rem 1.45rem 1.5rem;
}

.stat-card-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stat-card-value {
  font-family: var(--mono);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-card-sub {
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.pos { color: var(--win); }
.neg { color: var(--loss); }

.context-note {
  border-left: 3px solid var(--signal);
  background: var(--card-sunk);
  padding: 1.05rem 1.25rem;
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 68ch;
}

.context-note strong { color: var(--ink); font-weight: 650; }

/* ---------- tables ---------- */

.box-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--card);
}

.box-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.box-table th {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.9rem 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.box-table td {
  padding: 0.62rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.box-table tbody tr:last-child td { border-bottom: none; }
.box-table tbody tr:hover { background: var(--card-sunk); }

.box-table .stat-val {
  text-align: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.box-table .stat-key {
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.82rem;
}

.record-table th { text-align: left; }
.record-table th:first-child { padding-left: 1.1rem; }
.record-table td:first-child {
  padding-left: 1.1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.record-table td a { color: var(--accent); text-decoration: none; }
.record-table td a:hover { text-decoration: underline; }
.record-table .chip { margin-left: 0; display: inline-block; }

/* ---------- breakdown pages ---------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.col-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.stat-list li {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.stat-name { font-size: 0.92rem; font-weight: 600; }

.stat-line {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.lineup-pos {
  display: inline-block;
  min-width: 2.1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--signal);
}

/* ---------- responsive ---------- */

@media (max-width: 620px) {
  .site-header { padding: 1.1rem 1.25rem 0.9rem; }
  main { padding: 2rem 1.25rem 4rem; }
  .home-hero { padding: 3rem 1.25rem 4.5rem; }
  .two-col { grid-template-columns: 1fr; gap: 1.75rem; }
  .score-row { grid-template-columns: 4.6rem 1fr 1fr; }
  .score-num { font-size: 1.2rem; padding-left: 0.7rem; }
  .game-card { padding: 1.1rem 1.1rem 1rem; }
  .meta-row { gap: 1rem; }
  .chip { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Independent model entrances and original spread archive. */
.model-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:32px 0; max-width:1100px; }
.site-header nav { flex-wrap:wrap; }
@media(min-width:1200px) { .model-picker { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.model-choice { display:block; padding:28px; border:1px solid var(--rule-strong); background:var(--card); color:var(--ink); text-decoration:none; }
.model-choice:hover { border-color:var(--accent); }
.model-choice h2 { font:500 1.8rem var(--serif); margin:14px 0; }
.model-choice p { font:.9rem/1.65 var(--sans); color:var(--ink-mute); margin:0; }
.spread-week-links { display:flex; flex-wrap:wrap; gap:10px; padding:12px 0 25px; }
.spread-week-links a { padding:7px 10px; border:1px solid var(--rule); color:var(--ink-mute); font:.75rem var(--mono); text-decoration:none; }
@media(max-width:650px) { .model-picker { grid-template-columns:1fr; }.site-header { flex-wrap:wrap; }.site-header nav { gap:.8rem; }.model-choice { padding:20px; }.position-heading { align-items:start; flex-direction:column; } }

.spread-validation-notice { border: 1px solid #ad6420; border-left: 4px solid #ad6420; padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: #fff8ed; color: #4f351e; }
.spread-validation-notice p { margin: .5rem 0 0; line-height: 1.6; }
/* Sunday Signals homepage */
body:has(.home-hero){--paper:#0c1015;--card:#141b22;--card-sunk:#10161d;--ink:#e9edf2;--ink-mute:#acb8c6;--ink-faint:#81909f;--rule:#2b3540;--rule-strong:#3d4957;--accent:#ffb347;background:var(--paper);color:var(--ink);font-family:var(--sans)}
body:has(.home-hero) .site-header{background:#0b1015;border-color:var(--rule)}
.home-hero{max-width:1180px;margin:0 auto;padding:64px 32px}.home-hero h1{font-family:var(--sans);letter-spacing:-.04em}.home-hero .model-choice{background:var(--card);border-color:var(--rule);box-shadow:none}.home-hero .model-choice:hover{border-color:var(--accent)}.home-hero .model-choice h2{font-family:var(--sans);color:var(--ink)}.home-hero .lede,.home-hero .model-choice p{color:var(--ink-mute)}
@media(max-width:640px){.home-hero{padding:36px 20px}}
body:has(.home-hero) .wordmark{font:700 18px var(--sans);letter-spacing:-.02em}
body:has(.home-hero) .site-header nav a{font:600 12px var(--sans);letter-spacing:0;text-transform:none}
.pb-combined-leaders button span{font-family:var(--sans);font-weight:600;color:var(--ink)}