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

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

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

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

@font-face {
  font-family: 'Degular Text';
  src: url('../fonts/Degular_Text-Italic.woff2') format('woff2'),
       url('../fonts/Degular_Text-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

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

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

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

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

:root {
  /* Flexoki light */
  --black:    #100F0F;
  --white:    #FFFCF0;
  --gray-1:   #F2F0E5;
  --gray-2:   #E6E4D9;
  --gray-3:   #878580;
  --gap:      1px;
  --font:         'Degular Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Dote', serif;
  --font-mono:    'Commit Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --white:  #1C1B1A;    /* cell/surface backgrounds */
    --gray-1: #282726;    /* hover surfaces */
    --gray-2: #100F0F;    /* page background */
    --gray-3: #878580;    /* muted text — lighter so it reads on dark surfaces */
  }
}

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

@media (prefers-color-scheme: dark) {
  /* Base text */
  html { color: #FFFCF0; }

  /* Structural elements: background stays --black but color: var(--white) is now dark.
     Explicitly reset to paper white so text-on-ink stays legible. */
  header,
  .col-head,
  .date-sidebar,
  .ticker-item,
  .ticker-locked-wrap .ticker-upgrade,
  .ticker-locked-wrap .ticker-upgrade:hover,
  .paywall-upgrade-btn,
  .cat-label,
  .auth-btn,
  .newsletter-btn,
  .newsletter-panel-inner,
  .page-arrow,
  .cal-nav-arrow,
  .cal-header span { color: #FFFCF0; }

  /* date-jump needs -webkit-text-fill-color too */
  .date-jump { color: #FFFCF0; -webkit-text-fill-color: #FFFCF0; }
  .date-jump:focus { border-color: rgba(255,252,240,0.5); }

  /* Header nav */
  .header-nav a { color: rgba(255,252,240,0.6); }
  .header-nav a:hover, .header-nav a.active { color: #FFFCF0; }

  /* Content links that have explicit color: var(--black) */
  .story-sources a, .bonus a { color: #FFFCF0; }
  .expand-share:hover, .expand-close:hover { color: #FFFCF0; border-color: rgba(255,252,240,0.4); }

  /* Read cell summary used --gray-2 which is now #100F0F — invisible */
  .cell.read .cell-summary { color: var(--gray-3); }
}

/* ── 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;
}


/* ── Breaking News Ticker ──────────────────────────────────────────────────── */

.ticker {
  display: flex;
  align-items: center;
  background: var(--black);
  height: 2rem;
  position: sticky;
  top: var(--header-h, 3.4rem);
  z-index: 15;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ticker-label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D14D41;
  padding: 0 0.9rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ticker-content {
  display: inline-flex;
  white-space: nowrap;
  /* animation set by JS based on content width */
}

.ticker:hover .ticker-content {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-size: 0.72rem;
  line-height: 2rem;
  text-decoration: none;
  flex-shrink: 0;
}

.ticker-item:hover {
  text-decoration: underline;
}

.ticker-item .ticker-source {
  font-weight: 700;
  margin-right: 0.3em;
}

.ticker-divider {
  color: rgba(255, 255, 255, 0.3);
  padding: 0 1rem;
  flex-shrink: 0;
  font-size: 0.6rem;
}

/* Paywall: blur items 2 and 3 for free users */
.ticker-item.ticker-locked {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.ticker-locked-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ticker-locked-wrap .ticker-upgrade {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  z-index: 2;
}

.ticker-locked-wrap .ticker-upgrade:hover {
  color: var(--white);
}

/* ticker-scroll keyframes injected by JS (dynamic based on content width) */

/* ── 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(--col-head-top, 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;
  position: relative;
}

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

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

.cell.read .cell-title { color: var(--gray-3); }
.cell.read .cell-summary { color: var(--gray-2); }
.cell::after {
  content: '';
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--black);
}
.cell.read::after { display: none; }
.cell.empty::after { display: none; }
.cell.coming-soon::after { display: none; }

.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); }

/* ── Locked / paywall cell ─────────────────────────────────────────────────── */

.cell.locked {
  cursor: pointer;
  opacity: 0.45;
}
.cell.locked::before {
  content: '🔒';
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  font-size: 0.7rem;
  opacity: 0.6;
}
.cell.locked::after { display: none; } /* hide unread dot */
.cell.locked:hover { background: var(--gray-1); opacity: 0.6; }

/* ── Paywall prompt (inside expand panel) ──────────────────────────────────── */

.paywall-prompt { max-width: 600px; }

.paywall-message {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  margin: 1rem 0 1.5rem;
}

.paywall-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.paywall-upgrade-btn {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.paywall-upgrade-btn:hover { opacity: 0.8; }

.paywall-signin-btn {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  color: var(--black);
  border: 1px solid var(--gray-2);
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.paywall-signin-btn:hover { border-color: var(--black); }

.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 2rem;
}

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

.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-row {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

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

.expand-close {
  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: #D14D41; 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; }

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

.header-left {
  display: flex;
  align-items: baseline;
}

.header-nav {
  display: flex;
  gap: 1rem;
}

.header-nav a {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}

.header-nav a:hover { color: var(--white); }
.header-nav a.active { color: var(--white); }

/* ── Header right group ────────────────────────────────────────────────────── */

.header-right {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

/* On desktop the wrapper is transparent — nav and date join header-right's row */
.header-bottom-row {
  display: contents;
}

/* ── Date jump selector ─────────────────────────────────────────────────────── */

.date-jump {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}

.date-jump:hover { border-color: rgba(255, 255, 255, 0.6); }
.date-jump:focus { outline: none; border-color: var(--white); }

/* ── Auth (sign in / sign out) ───────────────────────────────────────────────── */

.clerk-user {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.user-button-mount {
  display: flex;
  align-items: center;
}

.auth-btn {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.auth-btn:hover { border-color: rgba(255, 255, 255, 0.7); }

.newsletter-btn {
  font-size: 0.85rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 8px;
  cursor: pointer;
  line-height: 1;
}
.newsletter-btn:hover { border-color: rgba(255, 255, 255, 0.7); }

.newsletter-panel {
  background: var(--black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 16px;
  position: relative;
  z-index: 18;
}
.newsletter-panel-inner {
  max-width: 400px;
  margin: 0 auto;
  font-family: var(--font);
  font-size: 0.72rem;
  color: var(--white);
}
.newsletter-panel-inner strong {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.newsletter-desc {
  color: rgba(255, 255, 255, 0.5);
  margin: 4px 0 10px;
  font-size: 0.62rem;
}
.newsletter-panel label {
  display: block;
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
}
.newsletter-panel label:hover { color: rgba(255, 255, 255, 0.8); }
.newsletter-panel input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #D14D41;
}
.newsletter-status {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
  min-height: 1em;
}

/* ── Pagination arrows ──────────────────────────────────────────────────────── */

.page-arrow {
  position: fixed;
  bottom: 1.75rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 50;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}

.page-arrow:hover { opacity: 1; transform: scale(1.08); }

.page-arrow--prev { left: 1.75rem; }
.page-arrow--next { right: 1.75rem; }

.page-arrow.hidden { display: none; }

/* ── 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) {
  /* Ticker mobile */
  .ticker { height: 1.6rem; }
  .ticker-label { font-size: 0.48rem; padding: 0 0.6rem; }
  .ticker-item { font-size: 0.65rem; line-height: 1.6rem; }
  .ticker-divider { padding: 0 0.6rem; }
  .ticker-upgrade { font-size: 0.45rem; }

  /* 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 1.25rem;
  }

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

  /* Mobile header: title on left, two-row stack on right */
  header {
    align-items: flex-start;
    padding: 0.7rem 1rem;
    overflow: hidden;
  }
  .header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    min-width: 0;
    flex-shrink: 1;
  }
  /* Row 2: nav + date side by side */
  .header-bottom-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .page-arrow {
    bottom: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
  .page-arrow--prev { left: 1rem; }
  .page-arrow--next { right: 1rem; }

  /* Sources col-head: no sidebar, same 2×2 order as main page
     HTML order: Politics | Tech | Sports | Culture
     Desired:    Politics | Sports  (row 1)
                 Culture  | Tech    (row 2)            */
  .col-head-bar--no-sidebar {
    grid-template-columns: 1fr 1fr;
  }
  .col-head-bar--no-sidebar > :nth-child(2) { grid-column: 2; grid-row: 2; } /* Tech    */
  .col-head-bar--no-sidebar > :nth-child(3) { grid-column: 2; grid-row: 1; } /* Sports  */
  .col-head-bar--no-sidebar > :nth-child(4) { grid-column: 1; grid-row: 2; } /* Culture */

  .sources-grid-wrapper .grid {
    grid-template-columns: 1fr 1fr;
  }
  .sources-grid-wrapper .cells-2x2 {
    grid-column: 1 / -1;
  }
}

/* ── Sources page col-head override (no date sidebar) ─────────────────────── */

@media (min-width: 600px) {
  .col-head-bar--no-sidebar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Static page (About / Sources) ────────────────────────────────────────── */

.static-page {
  padding: 1.5rem 1.25rem 3rem 2rem;
  background: var(--gray-1);
  border-top: 2px solid var(--black);
  min-height: calc(100vh - 4rem);
}

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

.static-page .expand-header {
  max-width: 800px;
  margin-bottom: 1.5rem;
}

/* Sources page grid — single-row, no date sidebar */
.sources-grid-wrapper .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Publication list in sources expand panel */
.sources-pub-list {
  list-style: none;
  max-width: 800px;
}

.sources-pub-list li {
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.2rem 0;
  border-top: 1px solid var(--gray-2);
}

.sources-pub-list li:last-child { border-bottom: 1px solid var(--gray-2); }

@media (max-width: 599px) {
  .static-page {
    padding: 1rem 0.85rem 2rem 1.25rem;
  }
  .static-page .digest-stories { max-width: 100%; }
  .sources-grid-wrapper .grid {
    grid-template-columns: 1fr 1fr;
  }
  .sources-grid-wrapper .expand-panel {
    grid-column: 1 / -1;
    padding: 1rem 0.85rem 1.5rem 1.25rem;
  }
}

/* ── Calendar / Archive Page ──────────────────────────────────────────────── */

.cal-page {
  background: var(--gray-1);
  border-top: 2px solid var(--black);
  min-height: calc(100vh - 4rem);
  padding: 1.5rem 1.25rem 3rem;
}

/* Month navigation */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.cal-nav-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  min-width: 10rem;
  text-align: center;
}

.cal-nav-arrow {
  background: var(--black);
  color: var(--white);
  border: none;
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.cal-nav-arrow:hover { opacity: 0.8; }
.cal-nav-arrow:disabled { opacity: 0.25; cursor: default; }

/* Paywall overlay */
.cal-paywall {
  text-align: center;
  padding: 3rem 1rem;
}

/* Day-of-week header */
.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 1px;
}

.cal-header span {
  font-family: var(--font-display);
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 0.3rem 0;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Calendar grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--gray-2);
}

/* Day cells */
.cal-cell {
  background: var(--white);
  padding: 0.35rem 0.4rem;
  min-height: 6.5rem;
  position: relative;
  overflow: hidden;
}

.cal-cell--outside {
  background: var(--gray-1);
  opacity: 0.3;
}

.cal-cell--empty {
  opacity: 0.4;
}

.cal-date-num {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--gray-3);
  display: block;
  margin-bottom: 0.2rem;
}

/* Headline entries */
.cal-desktop-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cal-headline {
  font-size: 0.5rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 0.08rem 0;
}

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

.cal-cat-label {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-right: 0.25em;
  font-size: 0.45rem;
  vertical-align: baseline;
}

.cal-cat-label--brk {
  color: #D14D41;
}

.cal-headline--breaking {
  color: #444;
}

.cal-headline--more {
  color: var(--gray-3);
  font-size: 0.42rem;
  font-style: italic;
  cursor: default;
}

/* Mobile dots (hidden on desktop) */
.cal-mobile-dots {
  display: none;
}

.cal-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 2px;
}

.cal-dot--breaking {
  background: #D14D41 !important;
}

/* ── Calendar mobile ──────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .cal-page { padding: 1rem 0.5rem 2rem; }

  .cal-nav-title { font-size: 0.7rem; min-width: 8rem; }
  .cal-nav-arrow { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }

  .cal-cell { min-height: 2.5rem; padding: 0.25rem; }
  .cal-date-num { font-size: 0.48rem; }

  .cal-desktop-content { display: none; }
  .cal-mobile-dots { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 0.15rem; }
}