/* ═══════════════════════════════════════════════════════════════════════════
   THRESHOLD — the furniture that sits on the sheet.

   Page architecture (rail · sheet · plate · paste) is in families/movement.css.
   What is here is the ladder, the tally, the listing and the places.

   None of these share a class name with Cornerstone's components, and that is
   the point: a shared `.card` or `.service` is how two templates end up looking
   alike no matter what colours they are painted.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The ladder ─────────────────────────────────────────────────────────────
   A real sequence — you cannot join a group before you have come once — so it
   is numbered. The numeral hangs in the margin, outline only, like a rule
   number on a printed bill. */
.ladder { list-style: none; padding: 0; margin-block-start: var(--s-5); display: grid; gap: 0; }
.rung {
  display: grid;
  grid-template-columns: minmax(3.5rem, 5rem) 1fr;
  column-gap: var(--s-5);
  row-gap: 0;
  padding-block: var(--s-5);
  border-block-start: 3px solid var(--fg);
  align-items: start;
}
.rung > * { grid-column: 2; }
.rung__n {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  font-variant-numeric: lining-nums;
}
.rung__name { font-size: var(--t-lg); }
.rung__body { font-family: var(--font-body); color: var(--fg-muted); margin-block-start: var(--s-2); }
.ladder--large .rung { padding-block: var(--s-6); }
.ladder--large .rung__name { font-size: var(--t-xl); }
@media (max-width: 40rem) {
  .rung { grid-template-columns: 1fr; row-gap: var(--s-2); }
  .rung > *, .rung__n { grid-column: 1; }
}

/* ── The tally ──────────────────────────────────────────────────────────────
   Figures stacked with a rule between, not a row of stat boxes. The numbers
   are the argument, so they take the display face at size. */
.tally { display: grid; gap: 0; margin-block-start: var(--s-4); }
.tally .figure {
  display: grid;
  /* renderFigures emits value, label and note as three siblings. Without the
     column assignment below the note wraps onto a new row back in the value
     column — the same trap the numbered lists hit. */
  grid-template-columns: minmax(5.5rem, 8rem) 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
}
.tally .figure__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.tally .figure__label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--t-sm);
}
.tally .figure__label, .tally .figure__note { grid-column: 2; }
.tally .figure__value { grid-column: 1; grid-row: span 2; }
.tally .figure__note {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  display: block;
  margin-block-start: 0.15rem;
}

/* ── The listing ────────────────────────────────────────────────────────────
   Messages and dates share one shape: a stamped date in the margin, the thing
   itself, and an action. */
.listing { list-style: none; padding: 0; margin-block-start: var(--s-4); display: grid; gap: 0; }
.listing li {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
}
.listing__when {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-sm);
  color: var(--accent);
}
.listing h3 { font-size: var(--t-lg); }
.listing h3 a { text-decoration: none; }
.listing h3 a:hover { color: var(--accent); }
.listing p {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  margin-block-start: 0.2rem;
  text-transform: none;
}
.listing__tag {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted);
}
@media (max-width: 44rem) {
  .listing li { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ── Places ─────────────────────────────────────────────────────────────────
   Three locations is a short list, so each takes the full width instead of
   being squeezed into a card grid — three places, not three products. */
.places { display: grid; gap: 0; }
.place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-6);
  border-block-start: 3px solid var(--fg);
  align-items: start;
}
.place__name { grid-row: span 4; font-size: var(--t-xl); }
.place__times {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: var(--t-lg); color: var(--accent);
}
.place__addr { font-size: var(--t-sm); color: var(--fg-muted); }
.place__note { font-family: var(--font-body); max-inline-size: 46ch; }
@media (max-width: 48rem) {
  .place { grid-template-columns: 1fr; }
  .place__name { grid-row: auto; }
}

/* ── Questions ──────────────────────────────────────────────────────────────
   Two columns on wide screens so the answer sits beside its question rather
   than leaving a dead strip down the right. */
.qa { display: grid; gap: 0; margin-block-start: var(--s-4); border-block-start: 3px solid var(--fg); }
.qa dt {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: var(--t-md); padding-block-start: var(--s-4);
}
.qa dd {
  margin: 0; padding-block: var(--s-2) var(--s-4);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-body); color: var(--fg-muted);
}
@media (min-width: 56rem) {
  .qa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: var(--s-6); }
  .qa dt { grid-column: 1; padding-block: var(--s-4); border-block-end: 1px solid var(--line); }
  .qa dd { grid-column: 2; padding-block: var(--s-4); }
}

/* ── Chart and embed, in the family's idiom ─────────────────────────────── */
.bars { margin-block-start: var(--s-2); }
.bars__fill { border-radius: 0; }
.bars__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.bars__value { font-family: var(--font-display); font-weight: 700; }

.giving__embed { min-block-size: 14rem; }
.giving__embed:empty::after {
  border: 3px dashed var(--line);
  font-family: var(--font-body);
  min-block-size: 14rem;
}

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