/* === The diocesan factbook, /d/<slug>/ =====================================

   The public record of a see. Same two faces as the front door and no third:
   Garamond carries every sentence, Cinzel in tracked capitals carries every
   label. A reading page, not a dashboard: one column, a real measure, and
   figures set as a list of facts rather than as tiles competing for attention.

   ONE SPINE. The masthead ran to 62rem while the article and the footer ran to
   44rem, so the brand sat a hundred pixels outside the left edge of the first
   sentence and the rule under the masthead overshot the rule over the footer.
   Every band now takes its width and its gutter from the same two tokens, and
   a vertical drawn down the page touches the brand, the title, every section
   label and the footer at the same x.

   ONE ACCENT. Gold was carrying the dateline, all eight section labels, the
   button and the AMDG at once, which is not an accent, it is a second body
   colour. The section labels are quiet now and the gold is spent on the
   dateline, the invitation and the closing line. Black facts on a calm page.

   FIGURES ALIGN. The figures were seven bordered tiles in a three-across grid,
   so the last row was one fact beside two empty slots, and no two numbers in
   the block shared a right edge. They are one column of rows now, the number
   right-aligned in lining tabular numerals, hairline rules between. Digits
   stack. Nothing is boxed except the one thing that is genuinely set apart.

   Light and dark both, keyed to the reader's system. Every colour is defined
   on bare :root first so a page never borrows a ground it did not paint, and
   every text colour clears 4.5:1 on the ground it is actually printed on,
   including the warm ground inside the invitation.
   ========================================================================= */

:root {
  color-scheme: light dark;
  --fb-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --fb-display: "Cinzel", Georgia, serif;

  /* The one measure and the one gutter. Masthead, article, footer take both. */
  --fb-measure: 44rem;
  --fb-gutter: clamp(1.15rem, 5vw, 3rem);

  --bg: #faf9f5;
  --card: #ffffff;
  --card-warm: #f3f2ec;
  --rule: #e2e1d8;
  --rule-strong: #c6c5b6;
  --ink: #232a3d;
  --ink-muted: #46506a;
  /* Raised from #697188 / #7b8098. The old ghost measured 3.7:1 on the page
     and 3.5:1 inside the warm block, and it was carrying every label on the
     page: the row labels, the figure labels, the section notes, the footer. */
  --ink-subtle: #5c6479;
  --ink-ghost: #666e84;
  --marian: #27447e;
  --marian-deep: #1b3160;
  --gold: #a8862f;
  --gold-deep: #7d6420;
  /* The gold that is safe to print words in, on this theme's ground. Four
     separate dark-mode blocks existed only to swap gold-deep for gold. */
  --accent-text: #7d6420;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1420;
    --card: #141a2a;
    --card-warm: #192134;
    --rule: #26304a;
    --rule-strong: #394668;
    --ink: #e7e4d8;
    --ink-muted: #b6b8c8;
    --ink-subtle: #a5aac0;
    --ink-ghost: #9298b0;
    --marian: #8fb0e8;
    --marian-deep: #a9c2ee;
    --gold: #d8ba6a;
    --gold-deep: #b39440;
    --accent-text: #d8ba6a;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body.factbook {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb-serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Oldstyle figures for prose. Every table on this page overrides them. */
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* The tabular set. Any column of numbers takes this, or the digits do not
   share a width and a column of populations reads as a ragged left edge. */
.fig dd, .row dd {
  font-feature-settings: "kern" 1, "liga" 1, "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- the article -------------------------------------------------------- */
.fb-main {
  max-width: var(--fb-measure);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.25rem) var(--fb-gutter) 4rem;
}

/* ---- the front matter --------------------------------------------------- */
.fb-head { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }
.fb-jmj {
  font-family: var(--fb-display);
  /* Was 0.6rem. The floor is measured against the 16px ROOT, not the 18px
     body, so every tracked label on this page was authored as if a rem were
     18px and landed between 9.9px and 10.9px. The label scale below is set in
     rem-at-16px and nothing in it falls under 11px. */
  font-size: 0.6875rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink-ghost);
  text-align: center;
  margin-bottom: 1.5rem;
}
.factbook h1 {
  font-family: var(--fb-serif);
  font-weight: 500;
  font-size: clamp(2.05rem, 5.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}
.fb-latin {
  margin-top: 0.55rem;
  font-style: italic;
  font-size: 1.05rem;
  text-align: center;
  color: var(--ink-subtle);
  text-wrap: balance;
}
/* The one line that says what the see IS, and the page's single accent. */
.fb-dateline {
  margin-top: 1.15rem;
  font-family: var(--fb-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  line-height: 1.85;
  color: var(--accent-text);
}
.fb-summary {
  margin: 1.9rem auto 0;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ---- sections ----------------------------------------------------------- */
/* Space above a heading is larger than the space below it, so a label binds to
   the block it names instead of floating between two of them. */
.sec { margin-top: clamp(2.5rem, 5.5vw, 3.25rem); }
.factbook h2 {
  font-family: var(--fb-display);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 0.9rem;
}
.lead, .prose { font-size: 1.04rem; line-height: 1.68; color: var(--ink-muted); text-wrap: pretty; }
.lead + .lead, .prose + .prose { margin-top: 0.8rem; }
.empty { font-style: italic; color: var(--ink-subtle); text-wrap: pretty; }
.sec-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-ghost);
  text-wrap: pretty;
}
.factbook a { color: var(--marian); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.factbook a:hover { color: var(--marian-deep); border-bottom-color: var(--gold); }
.sec-note a, .empty a { color: inherit; }
.factbook a:focus-visible {
  outline: 2px solid var(--marian);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---- the paired rows: label left, fact right --------------------------- */
.rows { display: grid; gap: 0; }
.row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.5rem 1.25rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
}
.row:first-child { border-top: 0; padding-top: 0; }
.row dt {
  font-family: var(--fb-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  padding-top: 0.3rem;
}
.row dd { font-size: 1.04rem; color: var(--ink); text-wrap: pretty; }
@media (max-width: 32rem) {
  .row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.6rem 0; }
  .row dt { padding-top: 0; }
}

/* ---- the figures ------------------------------------------------------- */
/* One column of rows, not a grid of tiles. The number is right-aligned in
   lining tabular numerals so 960,000 and 1,152,107 and 212 end on the same
   vertical, which is the only way a reader can compare them by eye. */
.figs { display: grid; gap: 0; }
.fig {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1.25rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}
.fig:first-child { border-top: 0; padding-top: 0; }
.fig dt {
  font-family: var(--fb-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}
.fig dd {
  font-size: 1.22rem;
  line-height: 1.25;
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}
/* The qualifier belongs under the label it qualifies, not under the number. */
.fig-note {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--fb-serif);
  font-size: 0.86rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  color: var(--ink-ghost);
  text-wrap: pretty;
}
@media (max-width: 26rem) {
  /* A long figure and a long label cannot share a line at 380px. */
  .fig dd { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- the sees of the province ------------------------------------------ */
/* The city ran inline behind the name, so its x moved with every name length.
   It has its own column now and the block reads as a table of the province. */
.sees { list-style: none; margin-top: 0.7rem; display: grid; gap: 0; }
.sees li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1.25rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule);
}
.sees li:first-child { border-top: 0; }
.sees a { font-size: 1.02rem; border-bottom-color: transparent; }
.sees a:hover { border-bottom-color: var(--gold); }
.sees-city {
  font-family: var(--fb-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-ghost);
}

/* ---- what is kept ------------------------------------------------------- */
/* The only boxed thing on the page, which is what makes the box mean anything. */
.fb-kept {
  background: var(--card-warm);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  padding: 1.5rem clamp(1.15rem, 3vw, 1.85rem) 1.65rem;
}
.fb-kept h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.8rem; color: var(--accent-text); }
.fb-kept .lead { color: var(--ink-muted); }
.fb-gate { margin-top: 1.35rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.35rem; }
/* Same specificity trap: an unqualified .fb-ask lost its bottom border to the
   citation rule, so the button was gold on three sides and grey on the fourth. */
.factbook .fb-ask {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.6rem 1.9rem;
  border: 1px solid var(--gold);
  font-family: var(--fb-display);
  font-size: 0.72rem; font-weight: 650;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text);
}
.factbook .fb-ask:hover { background: var(--card); color: var(--accent-text); border-color: var(--gold); }
/* Specificity, not decoration: .factbook a sets the citation rule on every
   link, so a bare .fb-signin lost to it and the sign-in link carried a
   footnote rule under it. Both selectors below match .factbook a or better. */
.factbook .fb-signin {
  display: inline-flex; align-items: center; min-height: 44px;
  font-style: italic; font-size: 0.98rem;
  border-bottom-color: transparent; color: var(--ink-subtle);
}
.factbook .fb-signin:hover { color: var(--marian); border-bottom-color: var(--gold); }

/* ---- footer ------------------------------------------------------------- */
.fb-foot {
  max-width: var(--fb-measure);
  margin: 0 auto;
  padding: 1.85rem var(--fb-gutter) 3.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-ghost);
  text-wrap: pretty;
}
.fb-foot p + p { margin-top: 0.75rem; }
.fb-amdg {
  font-family: var(--fb-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.fb-foot a { color: inherit; border-bottom-color: var(--rule-strong); }
.fb-links { margin-top: 0.9rem; }
.fb-links a { display: inline-flex; align-items: center; min-height: 2.25rem; }

/* ---- touch -------------------------------------------------------------- */
/* min-height on an inline box does nothing at all, so the old floor here was
   inert on every link it named. The links that are targets rather than
   citations are laid out as flex boxes above; this raises them to 44px. */
@media (pointer: coarse) {
  .fb-ask, .fb-signin, .fb-links a { min-height: 44px; }
  .sees li { padding: 0.55rem 0; }
  .sees a { display: inline-flex; align-items: center; min-height: 44px; }
  .fb-gate { gap: 0.5rem 1.35rem; }
}

/* ---- print -------------------------------------------------------------- */
/* A factbook gets printed. Only the navigation goes, because it is the one
   thing on the page that carries no fact. */
@media print {
  .ci-mast { display: none; }
  body.factbook { background: #fff; color: #000; font-size: 11pt; }
  .fb-main, .fb-foot { max-width: none; }
  .factbook a { color: #000; border-bottom: 0; }
  .sec, .fig, .row, .sees li { break-inside: avoid; }
  .factbook h2 { break-after: avoid; }
  .fb-kept { background: none; border: 1px solid #999; }
}