:root {
  --fair-blue: #1f5d7a;
  --fair-blue-dark: #17475e;
  --statcast-gold: #b97918;
  --ink: #20272b;
  --muted: #667074;
  --paper: #fbf8f1;
  --paper-deep: #f2ecdf;
  --rule: #d9d2c4;
}

html { background: var(--paper); }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.72;
}

h1, h2, h3, h4, .navbar, .quarto-title-meta, .toc-title, table,
.answer-brief, .model-card, .player-card, .evidence-status, .margin-note {
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3 { color: var(--ink); letter-spacing: -0.025em; }
h2 { margin-top: 3.4rem; font-size: 1.75rem; }
h3 { margin-top: 2.2rem; }
a { color: var(--fair-blue); text-underline-offset: 0.15em; }
a:hover { color: var(--fair-blue-dark); }

.navbar {
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}
.navbar-brand { font-weight: 700; letter-spacing: 0.01em; }
.navbar .nav-link { font-size: 0.93rem; font-weight: 560; }

#quarto-content { background: var(--paper); }
.page-columns { column-gap: 2.3rem; }
.content { max-width: 760px; }
.quarto-title-block .quarto-title-banner { background: transparent; }
.quarto-title h1.title { font-size: clamp(2.45rem, 6vw, 4.7rem); line-height: 0.98; max-width: 950px; }
.subtitle { color: #4f5b5f; font-size: 1.35rem; line-height: 1.45; max-width: 820px; }
.quarto-title-meta { color: var(--muted); font-size: 0.9rem; }

.hero-figure { margin: 1.5rem auto 2.2rem; max-width: 980px; }
.hero-figure img { width: 100%; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hero-figure .image-credit {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.76rem;
  line-height: 1.45;
}

.answer-brief {
  border-top: 3px solid var(--fair-blue);
  border-bottom: 1px solid var(--rule);
  padding: 1.35rem 1.45rem 1.1rem;
  margin: 1.8rem 0 0.45rem;
  background: rgba(31, 93, 122, 0.045);
}
.answer-brief h2 { margin: 0 0 0.85rem; font-size: 1.15rem; letter-spacing: 0; }
.answer-brief ul { margin-bottom: 0; padding-left: 1.2rem; }
.answer-brief li { margin: 0.5rem 0; }
.evidence-status { color: var(--muted); font-size: 0.82rem; margin: 0 0 2.2rem 0.2rem; }

.model-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem;
  margin: 1.7rem 0;
  border: 1px solid var(--rule);
  background: #fffdf8;
}
.model-card > div { padding: 0.2rem 0.35rem; }
.model-card strong { display: block; color: var(--fair-blue); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.model-card span { display: block; margin-top: 0.2rem; font-size: 0.95rem; line-height: 1.45; }

.margin-note, .limitations-box {
  border-left: 3px solid var(--statcast-gold);
  background: rgba(185, 121, 24, 0.07);
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  color: #4b4438;
  font-size: 0.9rem;
  line-height: 1.55;
}
.margin-note strong, .limitations-box strong { color: var(--ink); }

.player-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; margin: 1.6rem 0; }
.player-card { border: 1px solid var(--rule); background: #fffdf8; padding: 1.25rem; }
.player-card.fast { border-top: 5px solid var(--fair-blue); }
.player-card.slow { border-top: 5px solid var(--statcast-gold); }
.player-card .eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; }
.player-card h3 { margin: 0.25rem 0 0; font-size: 1.45rem; }
.player-card .season { color: var(--muted); font-size: 0.88rem; }
.player-card .card-number { font-size: 2rem; font-weight: 720; line-height: 1.15; color: var(--fair-blue); margin-top: 1rem; }
.player-card.slow .card-number { color: var(--statcast-gold); }
.player-card dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 1rem 0 0; font-size: 0.88rem; }
.player-card dt { color: var(--muted); font-weight: 500; }
.player-card dd { margin: 0; font-weight: 650; }

.figure { margin: 2rem 0 2.4rem; }
.figure-caption { color: #586265; font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.88rem; line-height: 1.5; }

table { font-size: 0.86rem; }
thead { border-bottom: 2px solid var(--fair-blue); }
.data-link { font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.82rem; }
.fine-print { color: var(--muted); font-size: 0.84rem; }

#TOC { position: sticky; top: 5.2rem; font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.82rem; }
.toc-active { border-left-color: var(--fair-blue) !important; color: var(--fair-blue) !important; }
.mobile-toc { display: none; }

.nav-footer { border-top: 1px solid var(--rule); background: var(--paper-deep); }
.nav-footer-left { max-width: 700px; font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.83rem; line-height: 1.5; }

@media (max-width: 767px) {
  body { font-size: 1rem; line-height: 1.65; }
  .quarto-title h1.title { font-size: 2.65rem; }
  .subtitle { font-size: 1.15rem; }
  .model-card, .player-cards { grid-template-columns: 1fr; }
  .answer-brief { padding: 1rem; }
  h2 { margin-top: 2.8rem; font-size: 1.55rem; }
  .nav-footer { padding: 1.2rem; }
  .hero-figure .image-credit { font-size: 0.72rem; }
  .mobile-toc {
    display: block;
    margin: 1.2rem 0 1.7rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0.8rem 0;
    font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9rem;
  }
  .mobile-toc summary { color: var(--fair-blue); cursor: pointer; font-weight: 700; }
  .mobile-toc ul { margin: 0.8rem 0 0; padding-left: 1.1rem; }
  .mobile-toc li { margin: 0.35rem 0; }
}