/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY — BENEFICE
   Rural benefices · team ministries · Methodist circuits · yoked charges ·
   anywhere ONE minister serves SEVERAL church buildings.

   The sixth family, and the first one built around a POLITY rather than a
   tradition or a tone. About two-fifths of English parishes are in a benefice
   or team: three to eight buildings, one incumbent, one website. Every
   template on the market — including the five before this one — assumes a
   single church with one address and one set of service times. A benefice
   given such a template either picks a favourite and buries the rest, or runs
   six near-identical mini-sites that have drifted apart within a year.

   TWO THINGS FOLLOW, AND THEY ARE THE WHOLE DESIGN.

   1. THE UNIT OF NAVIGATION IS THE PLACE, NOT THE PAGE. The parishes strip
      sits under the masthead on every page and never moves. It is a map key,
      not a nav item, and the church pages are generated from an array so they
      cannot drift.

   2. THE PLAN IS THE HERO. In a benefice the services rotate, and the only
      question anybody arrives with is "where is there a service this Sunday".
      So the rota is the front page's first CONTENT — nothing is allowed to
      push it off the first screen. "Plan" is the real word: in Methodism the
      Plan is the quarterly document listing which preacher is at which chapel
      on which Sunday, and it is exactly this component.

      That is a rule about PRIORITY, not a ban on pictures — the first version
      had neither, and a template made of a table and a text grid is honest and
      unsellable. A shallow prospect band sits above the plan and each church
      carries its own photograph on its card. The constraint that survives is
      measurable: at 1440×900 the first Sunday must still be on screen. It is,
      at 687px, with three rows fully above the fold.

   THE REGISTER: quiet, rural and clean. Slab lettering, a warm white ground
   with stone and sage tints alternating between sections, one deep forest
   panel, hairline rules and grid-like tables. See the note on --paper-100
   below for what this replaced and why the first attempt was wrong.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Both selectors, always. tokens.css declares :root[data-theme="light"] at
   (0,2,0) and would otherwise revert every token below the moment somebody
   presses the theme toggle. See families/hospitality.css for the full note. */
:root,
:root[data-theme="light"] {
  /* ── Type ───────────────────────────────────────────────────────────────
     A SLAB, which nothing else here uses: Liturgical has an old-style,
     Plain a transitional, Movement and Civic grotesques, Hospitality a
     display Caslon. Source Sans carries the reading text and — the part that
     matters for this family — the rota's figures, which are tabular. */
  --font-display: "Bitter", Rockwell, Georgia, serif;
  --font-body:    "Source Sans 3", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Source Sans 3", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  /* ── Ground ─────────────────────────────────────────────────────────────
     ⚠ THIS REPLACES A MID-TONE GROUND, AND THE REASON IS WORTH KEEPING.
     The first version of this family sat on a card-coloured #D6D3C6 (L 0.866),
     chosen because measurement showed every other family at L 0.905–1.0 — so
     the mid-tone band was the one axis with room left. The measurement was
     right and the conclusion was wrong: UNCLAIMED IS NOT THE SAME AS GOOD. A
     drab ground makes everything standing on it muddy, and the page read as
     cheap however carefully the type was set.
     What actually works is the structure Hospitality arrived at — a CLEAN
     ground, two tints alternating between sections, and ONE deep saturated
     panel doing the heavy lifting. That is a register, not a palette, so
     Circuit borrows the register and keeps its own colours: warm white with
     stone and sage against a deep forest, where Hospitality is pure white with
     oat and blush against an evening blue. */
  --paper-050: #FDFCF9;   /* raised — cards, the legend      */
  --paper-100: #FAF8F2;   /* the page                        */
  --stone-200: #EFEBDF;   /* first tint  — warm              */
  --sage-200:  #E3E9E1;   /* second tint — cool              */
  --line-200:  #DDD8CA;
  --ink-600:   #585D50;
  --ink-800:   #2E332A;
  --ink-900:   #1E2119;

  /* Forest, and its deep sibling for the painted band. Rural, classic, and
     nothing like Civic's flat enamel signage green — that one is a
     desaturated blue-green on institutional grey; this is a saturated
     woodland green on warm white, and in context they do not read alike. */
  --forest:      #31502A;
  --forest-deep: #20321D;
  --forest-light:#9BC57F;   /* only ever used ON the deep panel */
  /* Ochre, for the one thing the eye must find first — "this Sunday" on the
     plan, and a united service. Used sparingly and never alone. */
  --contour:   #7E5B10;

  --bg:          var(--paper-100);
  --bg-raised:   var(--paper-050);
  --bg-sunken:   var(--stone-200);
  --fg:          var(--ink-900);
  --fg-muted:    var(--ink-600);
  --line:        var(--line-200);
  --line-strong: var(--ink-800);

  --bg-invert:    var(--forest-deep);
  --fg-invert:    #E7EDE3;
  --line-invert:  #3D5439;
  --muted-invert: #A8B4A2;

  --accent:      var(--forest);
  --accent-fg:   #FFFFFF;

  /* ── Scale ──────────────────────────────────────────────────────────────
     Modest display sizes. This family's front page is a TABLE, and a table
     that has to compete with a 72px headline loses. The largest type on the
     page is the benefice name in the masthead and nothing else comes close. */
  --t-xs:   0.75rem;
  --t-sm:   0.85rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  --t-xl:   clamp(1.5rem,  1.2rem + 1.3vw, 2rem);
  --t-2xl:  clamp(1.8rem,  1.4rem + 1.9vw, 2.6rem);
  --t-3xl:  clamp(2.1rem,  1.6rem + 2.6vw, 3.2rem);

  --leading-tight: 1.14;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --tracking-label: 0.1em;

  --measure:      36rem;
  --measure-wide: 50rem;
  --plot:         74rem;
  --gutter:       clamp(1rem, 4vw, 2.75rem);

  /* A printed sheet has no rounded corners and casts no shadow. */
  --radius:      0;
  --radius-arch: 0;
  --shadow:      none;

  --hair:  1px solid var(--line);
  --rule:  2px solid var(--ink-900);
  --border:        var(--hair);
  --border-strong: var(--rule);

  --focus: 2px solid var(--forest);
  --focus-offset: 2px;
}

/* ── Dark ─────────────────────────────────────────────────────────────────
   The two tints survive into the dark theme as the warmer and cooler ends of
   the same near-black, so the alternation between sections is still there. A
   dark theme that flattens every band to one charcoal throws away the idea.

   Each block restates the SEMANTIC MAPPING as well as the palette: redefining
   --paper-100 alone does nothing, because tokens.css's own
   `:root[data-theme="dark"] { --bg: … }` outranks this file's plain :root. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-050: #1B211A;
    --paper-100: #151A15;
    --stone-200: #212721;
    --sage-200:  #1D2620;
    --line-200:  #35402F;
    --ink-600:   #A5B09F;
    --ink-800:   #D2DACE;
    --ink-900:   #E9EFE6;

    --forest:      #9BC57F;
    --forest-deep: #101610;
    --contour:     #D9A63C;

    --bg:          var(--paper-100);
    --bg-raised:   var(--paper-050);
    --bg-sunken:   var(--stone-200);
    --fg:          var(--ink-900);
    --fg-muted:    var(--ink-600);
    --line:        var(--line-200);
    --line-strong: var(--ink-800);
    --accent:      var(--forest);
    --accent-fg:   #10160F;

    --bg-invert:    var(--forest-deep);
    --fg-invert:    #E9EFE6;
    --line-invert:  #2A3527;
    --muted-invert: #9AA894;
    --shadow:       none;
  }
}
:root[data-theme="dark"] {
  --paper-050: #1B211A;
  --paper-100: #151A15;
  --stone-200: #212721;
  --sage-200:  #1D2620;
  --line-200:  #35402F;
  --ink-600:   #A5B09F;
  --ink-800:   #D2DACE;
  --ink-900:   #E9EFE6;

  --forest:      #9BC57F;
  --forest-deep: #101610;
  --contour:     #D9A63C;

  --bg:          var(--paper-100);
  --bg-raised:   var(--paper-050);
  --bg-sunken:   var(--stone-200);
  --fg:          var(--ink-900);
  --fg-muted:    var(--ink-600);
  --line:        var(--line-200);
  --line-strong: var(--ink-800);
  --accent:      var(--forest);
  --accent-fg:   #10160F;

  --bg-invert:    var(--forest-deep);
  --fg-invert:    #E9EFE6;
  --line-invert:  #2A3527;
  --muted-invert: #9AA894;
  --shadow:       none;
}

/* ═══ The plot — this family's container ═════════════════════════════════ */
.plot {
  inline-size: 100%;
  max-inline-size: var(--plot);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.plot--narrow { max-inline-size: var(--measure-wide); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.015em; }

/* ═══ The legend ══════════════════════════════════════════════════════════
   A map's legend names the sheet and explains its keys. Here: the benefice
   name, then the parishes strip. Not a brand-left / links-right bar — four
   of the six families in this system would otherwise be wearing one. */
.legend {
  background: var(--bg-raised);
  border-block-end: var(--rule);
}
.legend__top {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-5) var(--s-4);
}
.legend__name {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--fg);
}
.legend__of {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: var(--s-1);
}
.legend__tools { margin-inline-start: auto; display: flex; gap: var(--s-2); }

.legend__keys { border-block-start: var(--hair); }
.legend__keys ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.legend__keys a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--fg-muted);
}
.legend__keys a:hover { color: var(--fg); }
.legend__keys a[aria-current="page"] {
  color: var(--fg);
  box-shadow: inset 0 -3px 0 0 var(--forest);
}

/* ═══ The parishes strip ══════════════════════════════════════════════════
   THE SIGNATURE OF THIS FAMILY. Every church in the benefice, on every page,
   in the same order, never collapsed into a dropdown. A benefice website's
   besetting sin is making one church the site and the others a submenu; this
   makes that structurally impossible, because there is nowhere to hide them.

   It scrolls horizontally on a phone rather than wrapping to four lines or
   hiding behind a control — a strip of places is a thing you scan. */
.parishes {
  background: var(--bg-sunken);
  border-block-end: var(--hair);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Mobile first: natural widths, and the band scrolls. A squeezed eight-column
   strip is unreadable and a wrapped one pushes the plan off the first screen. */
.parishes__inner {
  display: flex;
  align-items: stretch;
  min-inline-size: max-content;
  padding-inline: var(--gutter);
}
.parish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: var(--s-3) var(--s-5);
  min-block-size: 3.5rem;
  flex: 0 0 auto;
  border-inline-end: var(--hair);
  font-family: var(--font-ui);
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}

/* Wide enough to fit, the churches SHARE the row as equal columns — a set of
   peers, where letting the one with the longest name take the most space is
   the beginning of the argument this whole family exists to avoid.

   CONSTRAINED TO --plot, exactly like .plot itself, so the strip lines up with
   the masthead above it and the plan below it. The painted band still runs
   edge to edge; only its contents are held in the content column. Spanning the
   full viewport made five churches drift apart on a wide screen and detach
   from everything else on the page.

   The width cap lives HERE and not on .parishes, because .parishes is the
   scroll container: an auto-margined child that overflows its scroll parent
   has its leading edge clipped and cannot be scrolled back to. */
@media (min-width: 52rem) {
  .parishes__inner {
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: var(--plot);
    margin-inline: auto;
  }
  .parish { flex: 1 1 0; }
}
.parish:first-child { border-inline-start: var(--hair); }
.parish:hover { background: var(--bg-raised); }
.parish__name { font-size: var(--t-sm); font-weight: 700; }
.parish__where { font-size: var(--t-xs); color: var(--fg-muted); }
.parish[aria-current="page"] {
  background: var(--bg-raised);
  box-shadow: inset 0 -3px 0 0 var(--forest);
}

/* ═══ The plan ════════════════════════════════════════════════════════════
   The rota. Generated by core/js/rota.js from an ordinal-week pattern, so it
   cannot go stale and cannot disagree with the per-church pages.

   Set as a real table — the data IS tabular, and a church secretary should be
   able to print it and pin it in a porch. Figures are tabular-nums so the
   times form a column you can run an eye down.

   ⚠ ROWS ARE GROUPED BY SUNDAY, NOT BY CHURCH. Grouping by church is the
   obvious layout and it answers the wrong question: nobody asks "when is
   St Mary's open", they ask "where do I go this Sunday". */
.plan { inline-size: 100%; border-collapse: collapse; font-family: var(--font-ui); }
.plan caption {
  text-align: start;
  padding-block-end: var(--s-4);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
.plan th, .plan td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  text-align: start;
  vertical-align: baseline;
  border-block-end: var(--hair);
}
.plan thead th {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  border-block-end: var(--rule);
}
/* The date cell spans its Sunday's services, so one Sunday reads as one block
   however many churches are open in it. */
.plan__when {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  white-space: nowrap;
  border-block-end: var(--rule);
}
.plan__nth {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}
.plan__time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.plan__where a { color: inherit; font-weight: 600; }
.plan__what { color: var(--fg-muted); }
.plan tbody tr:last-child td { border-block-end: var(--rule); }

/* This Sunday, and only this Sunday. Marked with a rule and a word, never
   with colour alone. */
.plan__group--now .plan__when { color: var(--contour); }
.plan__group--now { background: var(--bg-raised); }
.plan__now {
  display: inline-block;
  margin-inline-start: var(--s-2);
  padding: 0.05em 0.4em;
  background: var(--contour);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
/* A united service — the fifth-Sunday rule. Called out because the whole
   point is that the OTHER churches are dark that day. */
.plan__united { background: color-mix(in srgb, var(--contour) 10%, var(--bg)); }
.plan__dark {
  font-style: italic;
  color: var(--fg-muted);
}

@media (max-width: 44rem) {
  /* A four-column table does not survive a phone. Each Sunday becomes a
     block and each service a row within it. The header row is dropped, so
     nothing depends on a column position that no longer exists.

     ⚠ THE DOUBLE-CLASS SELECTORS BELOW ARE LOAD-BEARING. `.plan td` is
     (0,1,1) and beats a bare `.plan__time` at (0,1,0) — so the obvious
     `.plan__time { display: inline }` loses to the `display: block` above it
     and every cell stacks. And <caption> keeps `display: table-caption` even
     when its table is `display: block`, which puts it in an anonymous table
     box roughly five characters wide. Both looked like layout bugs and were
     really specificity and default-display. */
  .plan, .plan tbody, .plan tr, .plan td { display: block; inline-size: 100%; }
  .plan caption { display: block; }
  .plan thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .plan td { padding-inline: 0; border-block-end: 0; }
  .plan .plan__when { padding-block: var(--s-5) var(--s-1); border-block-end: 0; }
  .plan .plan__time,
  .plan .plan__where { display: inline; }
  .plan .plan__time::after { content: " · "; }
  .plan .plan__what {
    display: block;
    padding-block: var(--s-1) var(--s-3);
    border-block-end: var(--hair);
  }
  .plan .plan__dark { display: block; padding-block-end: var(--s-3); border-block-end: var(--hair); }
}

/* ═══ Tracts — the sections ══════════════════════════════════════════════ */
/* EVERY tract keeps its own padding at both ends — no collapsing between
   adjacent ones. base.css collapses `section + section`, which is right when
   the whole page shares one ground and lands the second band's first line on
   its own painted edge the moment it does not. Four grounds alternate here, so
   there is no case where collapsing is correct. */
.tract { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }
.tract + .tract { padding-block-start: clamp(var(--s-7), 6vw, var(--s-9)); }

/* The variants re-declare the surface tokens, not just a background, so rules,
   muted text, form fields and ghost buttons inside them re-tune to the ground
   they are standing on instead of to the page default. */
.tract--stone {
  background: var(--stone-200);
  --bg: var(--stone-200);
  --bg-raised: var(--paper-050);
  --bg-sunken: #E5E0D1;
}
.tract--sage {
  background: var(--sage-200);
  --bg: var(--sage-200);
  --bg-raised: var(--paper-050);
  --bg-sunken: #D5DED2;
}
.tract--forest {
  background: var(--bg-invert);
  color: var(--fg-invert);
  --bg: var(--bg-invert);
  --fg: var(--fg-invert);
  --fg-muted: var(--muted-invert);
  --line: var(--line-invert);
  --line-strong: var(--muted-invert);
  --accent: var(--forest-light);
  --accent-fg: #10160F;
}

.tract__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  margin-block-end: var(--s-6);
  padding-block-end: var(--s-3);
  border-block-end: var(--rule);
}
.tract__head h2 { font-size: var(--t-xl); }
.tract__head p { font-size: var(--t-sm); color: var(--fg-muted); margin-inline-start: auto; }

/* ═══ The prospect ═══════════════════════════════════════════════════════
   The country the benefice sits in, full width and SHALLOW. A benefice is a
   geography before it is anything else, and a template made of a table and a
   card grid is honest but unsellable — nobody picks it off a page of
   thumbnails.

   The height is the whole design decision. Deep enough to be a photograph,
   shallow enough that the plan's first Sunday is still on the first screen at
   900px — which is the premise this family is built on. Measured, not
   guessed: at 1440×900 the first row lands around 700px with this in place.
   No text over it and no scrim under it; it is a view, not a hero. */
.prospect {
  display: block;
  background: var(--bg-sunken);
  border-block-end: var(--hair);
}
/* `img[width][height]` — the attribute selector is load-bearing, not decorative.
   base.css carries `img[width][height] { block-size: auto }` at (0,2,1) as its
   CLS backstop, which outranks a plain `.prospect img` at (0,1,1). Without
   matching that specificity this band renders at the file's own 2200×640
   aspect — 419px tall at 1440 — which pushes the plan's first Sunday exactly
   off the first screen and inverts the one premise this family has. */
.prospect img[width][height] {
  inline-size: 100%;
  block-size: clamp(7rem, 17vw, 13rem);
  object-fit: cover;
  object-position: center 62%;   /* keep the horizon, lose the empty sky */
  display: block;
}

/* A plate — one photograph inside a tract, held to the content column. */
.plate { margin-block-start: var(--s-6); }
.plate img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.plate figcaption {
  padding-block-start: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* ═══ Holdings — one card per church ═════════════════════════════════════
   Deliberately identical in weight. The moment one church gets a bigger card
   than another, a benefice website has started the argument it exists to
   avoid. */
.holdings {
  display: grid;
  gap: var(--s-5);
  /* 11rem, not 15: a benefice is typically three to six churches, and at 15rem
     five of them fall 4 + 1 with a hole where the sixth would be. These are
     peers — a layout that strands one of them on its own row is saying
     something about that church that nobody intended. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.holding {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: var(--hair);
  border-block-start: var(--rule);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.holding:hover { background: var(--bg); }
/* Each church shows its own building. Five text cards read as a spreadsheet;
   five photographs read as five churches, which is what they are — and it is
   the section anybody screenshotting this template will choose. */
.holding__art img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.holding:hover .holding__art img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .holding:hover .holding__art img { transform: none; }
}
.holding__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  flex: 1;
}
.holding__name { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; }
.holding__where {
  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);
}
.holding__next {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  border-block-start: var(--hair);
  font-family: var(--font-ui); font-size: var(--t-sm);
}
.holding__next b { font-variant-numeric: tabular-nums; }
.holding__none { color: var(--fg-muted); font-style: italic; }

/* ═══ The marker — a church page's opener ════════════════════════════════ */
.marker { padding-block: clamp(var(--s-7), 6vw, var(--s-8)); background: var(--bg-raised); border-block-end: var(--hair); }
.marker__grid { display: grid; gap: var(--s-6); }
@media (min-width: 52rem) { .marker__grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.marker h1 { font-size: var(--t-2xl); }
.marker__where {
  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); margin-block-end: var(--s-2);
}
.marker__lede { font-size: var(--t-md); max-inline-size: 44ch; margin-block-start: var(--s-4); }
.marker__art img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Access and practicalities, as a definition list — a rural church's real
   questions are parking, step-free entry, and whether there is a loo. */
.facts { margin: 0; font-family: var(--font-ui); }
.facts div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-block-end: var(--hair);
}
.facts dt {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--fg-muted);
}
.facts dd { margin: 0; font-size: var(--t-sm); }
@media (max-width: 30rem) { .facts div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ═══ The margin — the footer ════════════════════════════════════════════
   A map's margin carries the imprint, the scale and the sheet index. Here it
   carries the benefice, every church, and who to ring. */
.margin {
  padding-block: clamp(var(--s-7), 6vw, var(--s-8)) var(--s-5);
  background: var(--bg-invert);
  color: var(--fg-invert);
  --fg: var(--fg-invert);
  --fg-muted: var(--muted-invert);
  --line: var(--line-invert);
  --accent: var(--forest-light);
}
.margin__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.margin h2 {
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--muted-invert); margin-block-end: var(--s-3);
}
.margin ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.margin li + li { margin-block-start: var(--s-2); }
.margin a { color: inherit; text-decoration: none; }
.margin a:hover { text-decoration: underline; }
.margin__imprint {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  margin-block-start: var(--s-7); padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-invert);
  font-family: var(--font-ui); font-size: var(--t-xs); color: var(--muted-invert);
}

@media (forced-colors: active) {
  .legend, .parishes, .holding, .plan td { border: 1px solid CanvasText; }
}