/* ═══════════════════════════════════════════════════════════════════════════
   PLAINSONG — the components that belong to this template only.
   The page architecture is in families/plain.css; this is the furniture.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The table of contents on the front page ────────────────────────────────
   A book lists what is in it. So does this. Dotted leaders and folio numbers,
   which is the one navigation pattern that is genuinely native to print and
   which no church website uses. */
.contents-page { list-style: none; margin: 0; padding: 0; }
.contents-page li { border-block-end: 1px dotted var(--line); }
.contents-page li:first-child { border-block-start: 1px dotted var(--line); }

.contents-page a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--s-4);
  padding-block: var(--s-4);
  text-decoration: none;
}
.contents-page a:hover .contents-page__name { color: var(--accent); }

.contents-page__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
}
.contents-page__folio {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--rubric);
}
.contents-page__note {
  grid-column: 1 / -1;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  max-inline-size: 46ch;
  margin-block-start: var(--s-1);
}

/* ── The hymn board ─────────────────────────────────────────────────────────
   The physical object at the front of a meeting house: a numeral in a ruled
   slot, and the text beside it. */
.board { border-block: var(--rule); padding-block: var(--s-5); }
.board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
}
.board__head h2 { font-size: var(--t-lg); }
.board__head time, .board__head span { font-style: italic; color: var(--fg-muted); font-size: var(--t-sm); }

.board { container-type: inline-size; }
.board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
/* Two up only when the BOARD is wide, not when the window is. On the front
   page it sits in a half-width column, where two columns turned every hymn
   title into a three-line stack. */
@container (min-width: 34rem) {
  .board__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
}

.hymn {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: start;
  gap: var(--s-4);
}
.hymn__no {
  display: grid;
  place-items: center;
  min-block-size: 3rem;
  border: var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--rubric);
  border-color: var(--rubric);
}
.hymn__body { display: flex; flex-direction: column; gap: var(--s-1); }
.hymn__slot {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}
.hymn__title { font-size: var(--t-md); line-height: 1.3; }
.hymn__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}
.hymn__metre { font-variant-numeric: tabular-nums; }

/* ── Service times, set as a printed list rather than as cards ──────────── */
.times { list-style: none; margin: 0; padding: 0; }
.times li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px dotted var(--line);
}
.times li:first-child { border-block-start: 1px dotted var(--line); }
.times__when { display: flex; flex-direction: column; gap: 1px; }
.times__day {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rubric);
}
.times__time {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
}
.times__what { font-size: var(--t-md); }
.times__note { font-size: var(--t-sm); color: var(--fg-muted); display: block; margin-block-start: var(--s-1); }

/* ── The concordance ────────────────────────────────────────────────────── */
.sermon-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 62rem) {
  .sermon-page { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .sermon-page__index { position: sticky; inset-block-start: 5rem; }
}

.concordance__testament {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--rubric);
  padding-block-end: var(--s-2);
  border-block-end: var(--rule);
  margin-block: var(--s-5) var(--s-3);
}
.concordance__testament:first-child { margin-block-start: 0; }
.concordance__list { list-style: none; margin: 0; padding: 0; }

.concordance__book {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  min-block-size: 2.5rem;
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  border-block-end: 1px dotted var(--line);
  text-align: start;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-base);
}
.concordance__book:hover .concordance__name { color: var(--accent); }
.concordance__book[aria-pressed="true"] { background: var(--bg-sunken); }
.concordance__book[aria-pressed="true"] .concordance__name { color: var(--rubric); font-style: italic; }

/* The tally: one hand-ruled tick per sermon. A count you can read at a
   glance without it pretending to be a chart. */
.concordance__ticks { display: flex; gap: 2px; }
.tick {
  display: block;
  inline-size: 2px;
  block-size: 0.75em;
  background: var(--rubric);
  opacity: 0.75;
}
.concordance__n {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  min-inline-size: 1.25rem;
  text-align: end;
}
.concordance__all {
  margin-block-start: var(--s-4);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
  min-block-size: 2.75rem;
}

/* ── The sermon list ────────────────────────────────────────────────────── */
.sermons { list-style: none; margin: 0; padding: 0; }
.sermon {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding-block: var(--s-5);
  border-block-end: var(--hair);
}
.sermon:first-child { border-block-start: var(--rule); }
@media (min-width: 40rem) {
  .sermon { grid-template-columns: 8rem 1fr; gap: var(--s-5); }
}
.sermon__date {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  padding-block-start: 0.4em;
}
.sermon__title { font-size: var(--t-md); font-weight: 600; }
.sermon__meta {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  margin-block-start: var(--s-1);
}
.sermon__ref { color: var(--rubric); font-weight: 600; }

/* ── The bulletin ───────────────────────────────────────────────────────── */
.bulletin { max-inline-size: var(--measure-wide); }
.bulletin__list { list-style: none; margin: 0; padding: 0; counter-reset: line; }
.bulletin__line {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-block-end: 1px dotted var(--line);
}
.bulletin__line:first-child { border-block-start: var(--rule); }
@media (min-width: 40rem) {
  .bulletin__line { grid-template-columns: 13rem 1fr; gap: var(--s-5); align-items: baseline; }
}
.bulletin__item {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.bulletin__detail { font-size: var(--t-md); }
.bulletin__rubric {
  display: block;
  font-size: var(--t-sm);
  color: var(--rubric);
  margin-block-start: var(--s-1);
}

/* ── The ledger ─────────────────────────────────────────────────────────── */
.ledger { inline-size: 100%; font-variant-numeric: oldstyle-num; }
.ledger caption {
  text-align: start;
  font-style: italic;
  color: var(--fg-muted);
  font-size: var(--t-sm);
  padding-block-end: var(--s-3);
}
.ledger th, .ledger td { padding: var(--s-3) var(--s-3) var(--s-3) 0; }
.ledger thead th { border-block-end: var(--rule); }
.ledger .num { text-align: end; padding-inline-end: 0; }
.ledger__label { display: block; }
.ledger__note {
  display: block;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  margin-block-start: var(--s-1);
  max-inline-size: 38ch;
}
.ledger tfoot th, .ledger tfoot td {
  border-block-start: var(--rule);
  border-block-end: 0;
  font-weight: 700;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  padding-block-start: var(--s-4);
}

/* ── The roster ─────────────────────────────────────────────────────────── */
.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 46rem) { .roster { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
.roster__person { border-block-start: var(--rule); padding-block-start: var(--s-4); }
.roster__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.roster__name { font-size: var(--t-md); }
.roster__role {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rubric);
}
.roster__since {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  margin-block-start: var(--s-1);
}
.roster__note { font-size: var(--t-sm); margin-block-start: var(--s-3); }

/* ── The almanac ────────────────────────────────────────────────────────── */
.almanac { list-style: none; margin: 0; padding: 0; }
.almanac__entry {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-block-end: var(--hair);
}
.almanac__entry:first-child { border-block-start: var(--rule); }
.almanac__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--s-2);
  border: var(--hair);
  block-size: fit-content;
}
.almanac__day {
  font-family: var(--font-ui);
  font-size: var(--t-lg);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.almanac__month {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rubric);
}
.almanac__name { font-size: var(--t-md); }
.almanac__time {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  margin-block-start: var(--s-1);
}
.almanac__note { font-size: var(--t-sm); margin-block-start: var(--s-2); max-inline-size: 52ch; }

/* ── An article in the gutter: a heading and its paragraph, glossed ─────── */
.article__head {
  font-size: var(--t-md);
  margin-block-end: var(--s-2);
}

/* NOTE: do not add a top margin to `.article + .marginal` here. In the stacked
   layout the gutter's own `> * + *` rule already spaces them, and in the grid
   layout a margin on the gloss pushes it off the row it is meant to annotate —
   every reference after the first drifted about 16px below its heading. */

/* ── Small pieces ───────────────────────────────────────────────────────── */
.lede {
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--fg-muted);
  max-inline-size: var(--measure-wide);
}
.note-panel {
  border: var(--hair);
  border-inline-start: 3px solid var(--rubric);
  padding: var(--s-5);
  background: var(--bg-raised);
  max-inline-size: var(--measure-wide);
}
.note-panel h3 { font-size: var(--t-md); margin-block-end: var(--s-2); }
.note-panel p + p { margin-block-start: var(--s-3); }

.two-col { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
@media (min-width: 52rem) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT — the bulletin is meant to come off a parish printer on a Saturday
   morning and be folded down the middle. Everything that is not the order of
   service gets out of the way.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  @page { size: letter portrait; margin: 14mm; }

  .no-print, .btn, .contents-page, .tip-in, .board__head time { display: none !important; }

  body { font-size: 10.5pt; line-height: 1.45; }
  .opening-head { padding-block: 0 8pt; border-block-end: 1pt solid #000; }
  .opening-head h1 { font-size: 20pt; }
  .opening-head__lede { font-size: 11pt; }

  .bulletin { max-inline-size: none; }
  .bulletin__line {
    grid-template-columns: 34% 1fr;
    padding-block: 5pt;
    break-inside: avoid;
    border-block-end: 0.5pt dotted #999;
  }
  .bulletin__item { font-size: 8pt; }
  .bulletin__detail { font-size: 10.5pt; }
  .bulletin__rubric { color: #555; font-size: 9pt; }

  .board { border-block: 1pt solid #000; padding-block: 8pt; }
  .hymn__no { border-color: #000; color: #000; min-block-size: 2rem; }
  .board__list { grid-template-columns: 1fr 1fr; }
}

/* Demo only — added by build/demo.mjs, not present in the downloadable zip. */
.photo-credit {
  padding-block: var(--s-4) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}
.photo-credit a { color: inherit; }