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

/* ── Fonts ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Resistance';
  src: url('../fonts/Resistance.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'At Textual';
  src: url('../fonts/AtTextual-Regular.woff2') format('woff2'),
       url('../fonts/AtTextual-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'At Textual';
  src: url('../fonts/AtTextual-RegularItalic.woff2') format('woff2'),
       url('../fonts/AtTextual-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'At Textual';
  src: url('../fonts/AtTextual-Medium.woff2') format('woff2'),
       url('../fonts/AtTextual-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'At Textual';
  src: url('../fonts/AtTextual-Semibold.woff2') format('woff2'),
       url('../fonts/AtTextual-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'At Textual';
  src: url('../fonts/AtTextual-Bold.woff2') format('woff2'),
       url('../fonts/AtTextual-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'At Textual';
  src: url('../fonts/AtTextual-Bolditalic.woff2') format('woff2'),
       url('../fonts/AtTextual-Bolditalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --black:    #111;
  --white:    #fff;
  --gray-1:   #f4f4f4;
  --gray-2:   #e8e8e8;
  --gray-3:   #aaa;
  --accent:   #111;
  --gap:      1px;
  --font:         'At Textual', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Resistance', serif;
}

html { font-family: var(--font); font-size: 18px; color: var(--black); background: var(--gray-2); }

/* ── Header ────────────────────────────────────────────────────────────────── */

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.1rem 1.5rem 1rem;
  background: var(--black);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
}

header h1 {
  font-family: var(--font-display);
  font-size: 1.50rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#today-label {
  font-family: var(--font-display);
  font-size: 1.0rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-3);
}

/* ── Grid wrapper ──────────────────────────────────────────────────────────── */

.grid-wrapper { /* no overflow — grid fills viewport so sticky works */ }

.grid {
  display: grid;
  grid-template-columns: 2rem repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  background: var(--gray-2);
}

/* On desktop the wrapper is transparent; children join the outer grid */
.cells-2x2 { display: contents; }

/* ── Column headers ────────────────────────────────────────────────────────── */

.col-head-bar {
  display: grid;
  grid-template-columns: 2rem repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  background: var(--gray-2);
  position: sticky;
  top: var(--header-h, 3.4rem);
  z-index: 10;
}

.col-head-spacer {
  background: var(--black);
}

.col-head {
  font-family: var(--font-display);
  background: var(--black);
  color: var(--white);
  padding: 0.3rem 0.9rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.date-sidebar {
  font-family: var(--font-display);
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ── Cells ─────────────────────────────────────────────────────────────────── */

.cell {
  background: var(--white);
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  min-height: 10rem;
}

.cell:hover { background: var(--gray-1); }

.cell.active { background: var(--gray-1); outline: 2px solid var(--black); outline-offset: -2px; z-index: 1; }

.cell.empty { cursor: default; opacity: 0.4; }
.cell.empty:hover { background: var(--white); }

.cell.coming-soon { cursor: default; }
.cell.coming-soon:hover { background: var(--white); }

.coming-soon-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-3);
  margin-bottom: 0.4rem;
}

.coming-soon-time {
  font-size: 0.72rem;
  color: var(--gray-3);
  line-height: 1.4;
}

.cell-date {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-3);
  margin-bottom: 0.35rem;
}

.cell-title {
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.cell-summary {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--gray-3);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Expand panel ──────────────────────────────────────────────────────────── */

.expand-panel {
  grid-column: 1 / -1;
  background: var(--gray-1);
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--gray-2);
  padding: 1.5rem 1.25rem 2rem;
}

.expand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.expand-header .cat-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  padding: 0.2rem 0.5rem;
}

.expand-header .expand-date {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--gray-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.expand-close {
  margin-left: auto;
  background: none;
  border: 1px solid var(--gray-2);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  color: var(--gray-3);
}
.expand-close:hover { border-color: var(--black); color: var(--black); }

/* ── Digest content ────────────────────────────────────────────────────────── */

.digest-stories { max-width: 800px; }

.story { margin-bottom: 1.75rem; }

.story-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}

.story-summary {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 0.65rem;
}

.story-sources { list-style: none; }

.story-sources li {
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.15rem 0;
  border-top: 1px solid var(--gray-2);
}
.story-sources li:last-child { border-bottom: 1px solid var(--gray-2); }

.story-sources .pub-name {
  font-weight: 600;
  margin-right: 0.35rem;
}

.story-sources a { color: var(--black); }
.story-sources a:hover { text-decoration: underline; }

.story-divider {
  border: none;
  border-top: 1px solid var(--gray-2);
  margin: 1.5rem 0 1.75rem;
}

/* ── Scores section (sports) ───────────────────────────────────────────────── */

.scores-section { margin: 1.5rem 0; }

.scores-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: var(--gray-3);
}

.scores-list { list-style: none; }

.scores-list li {
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.2rem 0;
  border-top: 1px solid var(--gray-2);
}
.scores-list li:last-child { border-bottom: 1px solid var(--gray-2); }

.scores-list .score-league { font-weight: 700; margin-right: 0.4rem; }
.scores-list .score-note { color: var(--gray-3); font-size: 0.75rem; margin-left: 0.3rem; }
.scores-list .chicago-flag { color: #cc2200; font-weight: 700; }

/* ── Bonus ─────────────────────────────────────────────────────────────────── */

.bonus {
  margin-top: 1.5rem;
  padding: 0.75rem 0.9rem;
  background: var(--white);
  border-left: 3px solid var(--black);
  font-size: 0.82rem;
  line-height: 1.5;
}

.bonus-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-3);
  display: block;
  margin-bottom: 0.25rem;
}

.bonus a { color: var(--black); }
.bonus a:hover { text-decoration: underline; }
.bonus .bonus-pub { color: var(--gray-3); font-size: 0.76rem; }

/* ── Status / loading ──────────────────────────────────────────────────────── */

.status {
  padding: 3rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--gray-3);
  letter-spacing: 0.05em;
}

.loading-cell {
  text-align: center;
  color: var(--gray-3);
  font-size: 0.7rem;
  padding: 1rem;
}

/* ── Mobile (≤ 599 px) ─────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  /* Col-head bar: 2-row layout matching the 2×2 cell grid
     HTML order: spacer | Politics | Tech | Sports | Culture
     Desired:    spacer | Politics | Sports  (row 1)
                 spacer | Culture  | Tech    (row 2)           */
  .col-head-bar {
    grid-template-columns: 2rem 1fr 1fr;
  }
  .col-head-spacer {
    grid-row: 1 / span 2;
  }
  .col-head-bar > :nth-child(3) { grid-column: 3; grid-row: 2; } /* Tech    */
  .col-head-bar > :nth-child(4) { grid-column: 3; grid-row: 1; } /* Sports  */
  .col-head-bar > :nth-child(5) { grid-column: 2; grid-row: 2; } /* Culture */

  /* Data grid: date sidebar + 2×2 cell block side by side */
  .grid {
    grid-template-columns: 2rem 1fr;
  }
  .date-sidebar {
    align-self: stretch;
  }
  .cells-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    background: var(--gray-2);
    grid-column: 2;
  }
  /* Reorder cells: Politics | Sports (top), Culture | Tech (bottom) */
  .cell[data-cat="politics"] { order: 1; }
  .cell[data-cat="sports"]   { order: 2; }
  .cell[data-cat="culture"]  { order: 3; }
  .cell[data-cat="tech"]     { order: 4; }

  /* Expand panel spans both columns */
  .expand-panel {
    grid-column: 1 / -1;
    padding: 1rem 0.85rem 1.5rem;
  }

  .cell { min-height: 7rem; }
  .cell-summary { -webkit-line-clamp: 3; }
  .digest-stories { max-width: 100%; }
}