:root {
    --paper: #f1ead6;
    --paper-2: #ebe2c8;
    --ink: #1a1612;
    --ink-soft: #3a322a;
    --muted: #847b6c;
    --rule: #1a1612;
    --red: #a8302a;
    --red-soft: #c25347;
    --highlight: #e6da9a;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 17px;
    line-height: 1.45;
    /* subtle newsprint texture: dot grain + slight vignette */
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 1px, transparent 1.5px),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,0.02) 1px, transparent 1.5px),
      radial-gradient(circle at 90% 20%, rgba(0,0,0,0.02) 1px, transparent 1.5px),
      radial-gradient(ellipse at top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 100%);
    background-size: 7px 7px, 11px 11px, 13px 13px, 100% 100%;
    -webkit-font-smoothing: antialiased;
  }

  .paper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 18px 60px;
  }

  /* ========== MASTHEAD ========== */
  .masthead {
    border-top: 4px double var(--rule);
    border-bottom: 4px double var(--rule);
    padding: 14px 0 10px;
    text-align: center;
    position: relative;
  }
  .masthead-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 12px;
  }
  .masthead-meta span { white-space: nowrap; }
  .masthead-title {
    font-family: 'UnifrakturCook', 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(38px, 9vw, 78px);
    letter-spacing: 0.01em;
    line-height: 0.95;
    margin: 0;
    color: var(--ink);
    text-shadow: 0 0 0.5px rgba(26,22,18,0.4);
  }
  .masthead-tagline {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 6px;
  }
  .masthead-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-top: 1px solid var(--rule);
    margin-top: 10px;
    padding-top: 10px;
    color: var(--ink);
  }
  .date-nav {
    background: transparent;
    border: 1px solid var(--rule);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    color: var(--ink);
    transition: background 0.15s, color 0.15s;
  }
  .date-nav:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
  .date-nav:disabled {
    color: var(--muted);
    border-color: rgba(26,22,18,0.25);
    cursor: not-allowed;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(26,22,18,0.06) 4px,
      rgba(26,22,18,0.06) 8px
    );
  }
  .masthead-banner .date-text {
    font-weight: 600;
    letter-spacing: 0.22em;
    min-width: 14ch;
    text-align: center;
  }

  /* About link in top meta bar */
  .meta-link {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0;
  }
  .meta-link:hover { color: var(--red); border-bottom-color: var(--red); }

  /* ========== SPORT SUBTITLE ========== */
  .sport-subtitle {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 18px;
  }
  .sport-subtitle .sport-rule {
    flex: 1;
    height: 0;
    border-top: 3px double var(--rule);
  }
  .sport-subtitle h2 {
    font-family: 'UnifrakturCook', serif;
    font-weight: 700;
    font-size: clamp(26px, 5vw, 38px);
    margin: 0;
    line-height: 1;
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
  }

  /* ========== LEAGUE TABS (sport selector) ========== */
  .league-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 22px 0 0;
  }
  .league-tab {
    background: transparent;
    border: 1px solid var(--rule);
    border-right: none;
    padding: 8px 18px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .league-tab:last-child { border-right: 1px solid var(--rule); }
  .league-tab:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
  .league-tab.active {
    background: var(--ink);
    color: var(--paper);
  }
  .league-tab:disabled {
    color: var(--muted);
    cursor: not-allowed;
    font-style: italic;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(26,22,18,0.06) 4px,
      rgba(26,22,18,0.06) 8px
    );
  }

  /* ========== DISPATCH BLURB ========== */
  .dispatch {
    margin: 22px 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    position: relative;
  }
  .dispatch::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--rule);
    pointer-events: none;
  }
  .dispatch-label {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dispatch-label::before,
  .dispatch-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--red);
    opacity: 0.5;
  }
  .dispatch h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 4vw, 26px);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 4px 0 8px;
    line-height: 1.15;
    text-align: center;
  }
  .dispatch p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    text-align: justify;
    text-indent: 1.2em;
    column-count: 1;
  }
  @media (min-width: 720px) {
    .dispatch p { column-count: 2; column-gap: 28px; column-rule: 1px solid rgba(26,22,18,0.18); }
  }

  /* ========== TABS ========== */
  .tabs {
    display: flex;
    border: 3px solid var(--rule);
    margin: 24px 0 20px;
    background: var(--paper);
  }
  .tab {
    flex: 1;
    background: transparent;
    border: none;
    border-right: 1px solid var(--rule);
    padding: 12px 6px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .tab:last-child { border-right: none; }
  .tab:hover { background: var(--paper-2); color: var(--ink); }
  .tab.active {
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
  }

  /* ========== SECTION HEADERS ========== */
  .section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 4px 0 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
  }
  .section-head h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
  }
  .section-head .meta {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--muted);
    margin-left: auto;
  }

  /* ========== GAMES GRID ========== */
  .games {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  @media (min-width: 1100px) {
    .games { grid-template-columns: 1fr 1fr; gap: 20px; }
  }

  .game {
    border: 2px solid var(--rule);
    background: var(--paper);
    position: relative;
  }
  .game::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--rule);
    pointer-events: none;
  }

  .game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }
  .game-header .status { font-weight: 700; }
  .game-header .extra-badge {
    background: var(--red);
    color: var(--paper);
    padding: 1px 6px;
    font-weight: 700;
    letter-spacing: 0.15em;
  }

  /* ========== LINE SCORE ========== */
  .scorebox {
    width: 100%;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
    display: block;
  }
  .line-wrap {
    padding: 10px 12px 8px;
    position: relative;
  }
  table.line-score {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier Prime', monospace;
    font-size: 14px;
  }
  .line-score th, .line-score td {
    padding: 3px 2px;
    text-align: center;
    border-bottom: 1px solid rgba(26,22,18,0.2);
    min-width: 18px;
  }
  .line-score thead th {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--rule);
    color: var(--ink-soft);
    padding-bottom: 4px;
  }
  .line-score th.team-col, .line-score td.team-col {
    text-align: left;
    padding-left: 4px;
    width: 30%;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .line-score td.totals {
    font-weight: 700;
    background: var(--paper-2);
    border-left: 1px solid var(--rule);
  }
  .line-score td.totals.r { font-size: 16px; }
  .line-score th.totals {
    background: var(--paper-2);
    border-left: 1px solid var(--rule);
  }
  .line-score td.extra-col {
    background: rgba(168,48,42,0.08);
    color: var(--red);
    font-weight: 700;
  }
  .line-score th.extra-col {
    background: rgba(168,48,42,0.12);
    color: var(--red);
  }
  .line-score tr.winner td.team-col::before {
    content: '▸ ';
    color: var(--red);
    font-weight: 700;
  }
  .line-score tr.winner td.totals.r {
    color: var(--red);
  }

  .expand-cue {
    border-top: 1px dashed var(--rule);
    padding: 6px 12px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .expand-cue .arrow {
    transition: transform 0.25s ease;
    display: inline-block;
  }
  .game.open .expand-cue .arrow { transform: rotate(180deg); }
  .game.open .expand-cue { color: var(--red); }

  /* ========== BOX SCORE (expanded) ========== */
  .boxscore {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
    position: relative;
    z-index: 1;
  }
  .game.open .boxscore { max-height: 4000px; }
  .boxscore-inner {
    padding: 12px 12px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  @media (min-width: 540px) {
    .boxscore-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  }
  .team-block h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--rule);
    text-align: center;
  }
  .stats-label {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--red);
    margin: 10px 0 4px;
    text-align: center;
    border-bottom: 1px dotted var(--rule);
    padding-bottom: 2px;
  }
  table.player-stats {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Courier Prime', monospace;
    font-size: 11.5px;
  }
  .player-stats th {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    padding: 2px 1px;
    border-bottom: 1px solid var(--rule);
    text-align: center;
  }
  .player-stats th:first-child { text-align: left; }
  .player-stats td {
    padding: 2px 1px;
    text-align: center;
    border-bottom: 1px dotted rgba(26,22,18,0.2);
  }
  /* Player name column takes ~60%; the 6 stat columns share the other ~40% evenly */
  .player-stats th:first-child,
  .player-stats td:first-child { width: 60%; }
  .player-stats th:not(:first-child),
  .player-stats td:not(:first-child) { width: 6.67%; }
  .player-stats td:first-child {
    text-align: left;
    font-family: 'Crimson Pro', serif;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .player-stats tr.totals td {
    border-top: 1px solid var(--rule);
    border-bottom: none;
    font-weight: 700;
    padding-top: 3px;
  }
  .player-stats tr.sub-batter td:first-child {
    padding-left: 14px;
    color: var(--ink-soft);
  }

  /* ========== STANDINGS ========== */
  .standings-section-label {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 3px double var(--rule);
  }
  .standings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  @media (min-width: 720px) {
    .standings-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  }
  .wildcard-grid {
    grid-template-columns: 1fr;
  }
  @media (min-width: 720px) {
    .wildcard-grid { grid-template-columns: 1fr 1fr; }
  }
  .division {
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 10px 12px;
  }
  .division h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--rule);
    text-align: center;
  }
  table.standings {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier Prime', monospace;
    font-size: 12.5px;
  }
  .standings th {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    text-align: right;
    padding: 3px 2px;
    border-bottom: 1px solid var(--rule);
  }
  .standings th:first-child { text-align: left; }
  .standings td {
    text-align: right;
    padding: 3px 2px;
    border-bottom: 1px dotted rgba(26,22,18,0.2);
  }
  .standings td:first-child {
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .standings tr:first-child td:first-child {
    color: var(--red);
    font-weight: 700;
  }

  /* Wild card specifics */
  .division.wildcard h4 {
    color: var(--red);
  }
  .standings .rank-cell {
    width: 18px;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
  }
  .standings tr.in-spot .rank-cell {
    color: var(--red);
    font-size: 14px;
  }
  .standings tr.in-spot td:nth-child(2) {
    color: var(--ink);
  }
  .standings tr.chasing td {
    color: var(--ink-soft);
  }
  /* Heavy line under the 3rd wild card to show the cutoff */
  .standings tr.wc-cutoff td {
    border-bottom: 2px solid var(--red);
  }
  .wc-legend {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px dotted var(--rule);
  }
  /* Don't apply the "first row red" rule to wildcard since we use ★ instead */
  .division.wildcard tr:first-child td:first-child {
    color: var(--red);
  }
  .division.wildcard tr:first-child td:nth-child(2) {
    color: var(--ink);
  }

  /* ========== STAT LEADERS ========== */
  .leaders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  @media (min-width: 720px) {
    .leaders-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  }
  .leader-card {
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 12px 14px;
  }
  .leader-card h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 4px;
    text-align: center;
    color: var(--red);
  }
  .leader-card .leader-sub {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--rule);
  }
  table.leaders {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier Prime', monospace;
    font-size: 13px;
  }
  .leaders td {
    padding: 3px 2px;
    border-bottom: 1px dotted rgba(26,22,18,0.18);
  }
  .leaders td.rank {
    width: 22px;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
  }
  .leaders td.name {
    font-family: 'Crimson Pro', serif;
    font-size: 14px;
  }
  .leaders td.team {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    text-align: right;
    width: 36px;
  }
  .leaders td.value {
    font-weight: 700;
    text-align: right;
    width: 50px;
  }
  .leaders tr:first-child td.value { color: var(--red); }

  /* ========== ABOUT PAGE ========== */
  .about-page {
    max-width: 720px;
    margin: 0 auto;
  }
  .about-back {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-soft);
    margin-bottom: 24px;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0;
  }
  .about-back:hover { color: var(--red); border-bottom-color: var(--red); }
  .about-head {
    text-align: center;
    margin-bottom: 28px;
  }
  .about-page h2 {
    font-family: 'UnifrakturCook', serif;
    font-weight: 700;
    font-size: clamp(32px, 6vw, 48px);
    margin: 0;
    line-height: 1;
    display: inline-block;
    border-bottom: 4px double var(--rule);
    padding-bottom: 10px;
  }
  .about-page h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 24px 0 8px;
    color: var(--red);
  }
  .about-page p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 14px;
    text-align: justify;
  }
  .about-page p:first-of-type::first-letter {
    font-family: 'UnifrakturCook', serif;
    font-size: 3.4em;
    float: left;
    line-height: 0.85;
    padding: 4px 8px 0 0;
    color: var(--red);
  }


  footer.colophon {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 4px double var(--rule);
    text-align: center;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--muted);
  }
  footer.colophon .ornament {
    font-family: 'UnifrakturCook', serif;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 6px;
  }

  /* utility */
  [hidden] { display: none !important; }

  /* small screens tighten things */
  @media (max-width: 380px) {
    .line-score { font-size: 12.5px; }
    .line-score td.totals.r { font-size: 14px; }
    .line-score th.team-col, .line-score td.team-col { font-size: 11.5px; }
  }