/* ==========================================================================
   Chapters — the repeating editorial section used down the page.
   Built from the layout primitives; nothing here is content-specific.
   ========================================================================== */

.chapters { display: flex; flex-direction: column; }

.chapter {
  border-block-start: 1px solid var(--c-rule);
  padding-block: var(--s7) var(--s8);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s7);
  scroll-margin-block-start: var(--s5);
}

/* --- the head: number, title, and a handwritten note on its status -------- */

.chapter__head {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-items: flex-start;
}

.chapter__no {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 0.9;
  color: var(--c-line);
}

.chapter__title { color: var(--c-ink); }

.chapter__note {
  font-family: var(--f-script);
  font-size: var(--t-script);
  line-height: 1.15;
  color: var(--c-accent);
  text-wrap: balance;
}

/* --- the body ------------------------------------------------------------ */

.chapter__body {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  max-width: 62ch;
}

/* A short list of plain facts, two columns of small caps. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s5);
  color: var(--c-olive);
}
.facts li { display: flex; gap: var(--s2); }
.facts b { font-weight: 500; color: var(--c-ink); }

/* Figures that are not settled yet read as a ruled ledger, not a price list. */
.ledger { display: flex; flex-direction: column; gap: var(--s3); }
.ledger__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  align-items: baseline;
  border-block-end: 1px solid var(--c-line);
  padding-block-end: var(--s3);
}
.ledger__row:last-child { border-block-end: none; }
.ledger__figure { font-family: var(--f-display); font-size: var(--t-title); }

/* What is still to come, stated plainly at the end of a chapter. */
.chapter__status {
  color: var(--c-muted);
  border-block-start: 1px solid var(--c-line);
  padding-block-start: var(--s3);
}

/* --- footer -------------------------------------------------------------- */

.site-foot {
  border-block-start: 1px solid var(--c-rule);
  padding-block: var(--s5) var(--s2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3) var(--s5);
  color: var(--c-olive);
}
.site-foot__mark { color: var(--c-line); }

@media (max-width: 900px) {
  .chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    padding-block: var(--s6) var(--s7);
  }
  .chapter__head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s4);
  }
  .chapter__no { font-size: 2.25rem; }
  .chapter__note { flex-basis: 100%; }
}

@media (max-width: 480px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .ledger__row { flex-direction: column; gap: var(--s1); align-items: flex-start; }
}