/* Lecture pages: two-column layout and the readings ledger.
   Uses only the tokens in theme.css and the two faces head.html already loads
   (Lato for text, Courier Prime as the utility face for figures and labels). */

/* ---- Page width ---------------------------------------------------------
   Lecture pages carry a readings column, so they run wider than the site's
   35rem measure (main.css). The footer widens with them so their left/right
   edges keep lining up. */

body.layout-lecture #content,
body.layout-lecture #site-footer {
  max-width: 53rem;
}

.lecture-eyebrow {
  font-family: "Courier Prime", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cardinal);
  margin: 0 0 0.35rem;
}

body.layout-lecture h1.title {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.lecture-meta {
  font-family: "Courier Prime", monospace;
  font-size: 0.78rem;
  color: #555;
  margin: 0 0 0.15rem;
}

/* Matches the schedule's slides column (calendar.css .cal-slides a). */
.lecture-slides {
  font-family: "Courier Prime", monospace;
  font-size: 0.78rem;
  margin: 0 0 0.15rem;
}

.lecture-guest::before {
  content: " \00b7 ";
}

.lecture-unit {
  font-size: 0.82rem;
  font-style: italic;
  color: #666;
  margin: 0 0 1.25rem;
}

.lecture-summary--tbd {
  color: #777;
  font-style: italic;
}

/* ---- Two-column grid ---------------------------------------------------- */

@media (min-width: 64rem) {
  .lecture-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2.5rem;
    align-items: start;
  }
}

/* ---- Readings ledger ----------------------------------------------------
   The page counts are the point: every figure the syllabus states is set in
   Courier Prime and right-aligned into a single column, with each group's
   running total in its header. Readings the syllabus gives no count for print
   an em dash, so the column stays aligned and the gap stays visible. */

.readings {
  border-top: 2px solid var(--cardinal);
  margin-top: 2rem;
}

@media (min-width: 64rem) {
  .readings {
    margin-top: 0.35rem;   /* optically aligns the rule with the eyebrow */
  }
}

/* The group headers (REQUIRED / SUPPLEMENTARY) name the box; a second visible
   "Readings" title on top of them would be one accessory too many. Kept in the
   markup for screen readers and the document outline. */
.readings-h {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.readings-note {
  font-size: 0.72rem;
  font-style: italic;
  color: #666;
  margin: 0.5rem 0 0.35rem;
}

.readings-group--privacy,
.readings-group--supplementary {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  margin-top: 1.5rem;
}

.readings-group-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-family: "Courier Prime", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cardinal);
  margin: 0;
  padding: 0.45rem 0;
}

.readings-total {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #666;
  white-space: nowrap;
}

.readings-tbd {
  font-size: 0.85rem;
  font-style: italic;
  color: #777;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  margin: 0;
  padding: 0.5rem 0;
}

.readings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cancel the global en-dash bullet (main.css) inside the ledger. */
.readings-list li::before {
  content: none;
}

.reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  padding: 0.5rem 0;
  margin: 0;
}

.reading-authors {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #444;
}

.reading-title {
  display: block;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.3;
  margin: 0.1rem 0;
}

.reading-venue {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #666;
}

.reading-ledger {
  font-family: "Courier Prime", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.reading-year {
  display: block;
  font-size: 0.68rem;
  color: #999;
}

.reading-pages {
  display: block;
  font-size: 0.85rem;
  color: #333;
}

/* The unit sits back so the count still reads as a figure, the same way
   .reading-year sits back from the title. */
.reading-pages-unit {
  font-size: 0.72rem;
  color: #777;
}

/* Supplementary sits one step quieter than required. */
.readings-group--supplementary .reading-title {
  font-size: 0.8rem;
}

.readings-group--supplementary .reading-pages {
  color: #666;
}

/* ---- Dark mode ----------------------------------------------------------
   Same border/muted values the module cards already use (calendar.css). */

:root[data-theme="dark"] {
  .lecture-eyebrow {
    color: var(--cardinal-light);
  }

  .lecture-meta,
  .lecture-unit,
  .readings-note,
  .readings-total,
  .reading-venue {
    color: #aaa;
  }

  .lecture-summary--tbd,
  .readings-tbd {
    color: #999;
  }

  .readings {
    border-top-color: var(--cardinal-light);
  }

  .readings-group-h {
    color: var(--cardinal-light);
  }

  .readings-group--privacy,
  .readings-group--supplementary {
    border-top-color: rgba(255, 255, 255, 0.3);
  }

  .reading,
  .readings-tbd {
    border-top-color: rgba(255, 255, 255, 0.14);
  }

  .reading-authors {
    color: #ccc;
  }

  .reading-year {
    color: #888;
  }

  .reading-pages {
    color: #ddd;
  }

  .reading-pages-unit {
    color: #999;
  }

  .readings-group--supplementary .reading-pages {
    color: #aaa;
  }
}

/* ---- Print --------------------------------------------------------------
   The readings are the substance of the page, so they print with it: drop the
   grid and let the ledger follow the lecture down the page. */

@media print {
  .lecture-grid {
    display: block;
  }

  .readings {
    margin-top: 1.5rem;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .reading {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* main.css prints link hrefs after every <a>; inside a citation list that
     would double the length of the ledger. */
  .readings a::after {
    content: none;
  }
}

/* ---- /lectures/ index ---------------------------------------------------
   Week headings with their lectures underneath. The lecture number is the one
   place a figure is load-bearing here: the syllabus skips 14, so the sequence
   itself is information. */

.lecture-index {
  margin: 1.5rem 0 0;
}

.lecture-index-week {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cardinal);
  border-bottom: 2px solid var(--cardinal);
  padding-bottom: 0.2rem;
  margin: 1.75rem 0 0;
}

/* .lecture-index already supplies the leading; week 1 must not add to it. */
.lecture-index-week:first-of-type {
  margin-top: 0;
}

.lecture-index-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  padding: 0.5rem 0;
  margin: 0;
}

.lecture-index-item::before {
  content: none;
}

.lecture-index-num {
  font-family: "Courier Prime", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: #999;
  text-align: right;
}

.lecture-index-date {
  font-family: "Courier Prime", monospace;
  font-size: 0.75rem;
  color: #666;
  white-space: nowrap;
}

:root[data-theme="dark"] {
  .lecture-index-week {
    color: var(--cardinal-light);
    border-bottom-color: var(--cardinal-light);
  }

  .lecture-index-item {
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  .lecture-index-num {
    color: #888;
  }

  .lecture-index-date {
    color: #aaa;
  }
}