/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY — MINSTER
   Cathedrals · minsters · abbeys · major civic churches — anywhere the
   building has TWO audiences at once: a congregation that worships in it and
   several hundred people a day who came to look at it.

   ── WHY THIS ONE HAS ITS OWN PAGE ARCHITECTURE ────────────────────────────
   The other four templates on this register share a page: porch, split
   welcome, then a stack of full-width bands. That stack is right when a church
   has one thing to say at a time. A cathedral does not — at eleven on a
   Tuesday it is simultaneously open to visitors, saying the office, running a
   shop, rehearsing a choir and charging for the tower, and a page that makes
   you scroll past four of those to reach the fifth is answering the wrong
   question.

   So Minster keeps the REGISTER and replaces the STACK:

     · the front page opens as a BROADSHEET — an asymmetric hairline-ruled
       grid where the lead, two briefs and the day's timetable sit side by
       side and are read in whatever order the visitor needs, not top to
       bottom in the order we chose.
     · the HORARIUM runs down the right of it: the building's whole day, hour
       by hour, from the first office to close. It answers "is it open", "what
       will I walk into" and "when is Evensong" in one column.
     · an OPEN STRIP above everything states, in words, whether the doors are
       open right now.

   Everything else is the shared register — families/_chrome-editorial.css
   supplies the porch, the plates, the accordion, the footer and the shared
   furniture, so this reads as the same house with a different plan.

   ── PAINT ─────────────────────────────────────────────────────────────────
   Claret at H 345, measured at 42° from the nearest of the nine accents in
   use — the widest gap left on the circle. Ground is stone; the second tint is
   lead, the colour of the roof and the cames. Instrument Serif for display: a
   high-contrast face at ONE weight with a real italic, which is what a
   broadsheet masthead wants.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"] {
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body:    "Libre Franklin", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Libre Franklin", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 400;

  --stone-050: #F8F7F4;
  --stone-100: #F1F0EC;
  --stone-200: #E6E4DE;   /* first tint  — warm stone */
  --lead-200:  #E3E5E8;   /* second tint — the roof and the cames */
  --line-200:  #D2CFC6;
  --ink-600:   #585A56;
  --ink-800:   #2E302C;
  --ink-900:   #1C1D1B;

  --claret:      #552B44;
  --claret-deep: #1A1C22;
  --claret-lift: #D8A8C0;   /* only ever used ON the deep panel */

  --tint-1:        var(--stone-200);
  --tint-1-raised: var(--stone-050);
  --tint-1-sunken: #DBD8D0;
  --tint-2:        var(--lead-200);
  --tint-2-raised: var(--stone-050);
  --tint-2-sunken: #D6D9DD;

  --bg:          var(--stone-100);
  --bg-raised:   var(--stone-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(--claret-deep);
  --fg-invert:    #EFEBE6;
  --line-invert:  #383B45;
  --muted-invert: #A9ADB8;

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

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   clamp(1.4rem,  1.1rem + 1.2vw,  1.8rem);
  --t-xl:   clamp(1.9rem,  1.35rem + 2.4vw, 3rem);
  --t-2xl:  clamp(2.5rem,  1.6rem + 4vw,    4.2rem);
  --t-3xl:  clamp(3rem,    1.7rem + 6vw,    5.6rem);

  --leading-tight: 0.98;   /* Instrument Serif is drawn tight; 1.1 gapes */
  --leading-snug:  1.26;
  --leading-body:  1.68;

  --tracking-label: 0.16em;
  --tracking-display: -0.02em;

  --measure:      34rem;
  --measure-wide: 46rem;
  --court:        78rem;   /* wider than the others: it is a broadsheet */
  --gutter:       clamp(1.25rem, 4vw, 3rem);

  --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(--claret);
  --focus-offset: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stone-050: #201F1E;
    --stone-100: #171716;
    --stone-200: #201F1C;
    --lead-200:  #1A1D20;
    --line-200:  #35342F;
    --ink-600:   #A2A29C;
    --ink-800:   #D2D2CB;
    --ink-900:   #EDECE6;

    --claret:      #D8A8C0;
    --claret-deep: #0E0F13;
    --claret-lift: #E7C4D5;

    --tint-1:        var(--stone-200);
    --tint-1-raised: var(--stone-050);
    --tint-1-sunken: #2A2825;
    --tint-2:        var(--lead-200);
    --tint-2-raised: var(--stone-050);
    --tint-2-sunken: #23272B;

    --bg:          var(--stone-100);
    --bg-raised:   var(--stone-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(--claret);
    --accent-fg:   #14100F;

    --bg-invert:    var(--claret-deep);
    --fg-invert:    #EDECE6;
    --line-invert:  #2A2C33;
    --muted-invert: #96999F;
    --shadow:       none;
  }
}
:root[data-theme="dark"] {
  --stone-050: #201F1E;
  --stone-100: #171716;
  --stone-200: #201F1C;
  --lead-200:  #1A1D20;
  --line-200:  #35342F;
  --ink-600:   #A2A29C;
  --ink-800:   #D2D2CB;
  --ink-900:   #EDECE6;

  --claret:      #D8A8C0;
  --claret-deep: #0E0F13;
  --claret-lift: #E7C4D5;

  --tint-1:        var(--stone-200);
  --tint-1-raised: var(--stone-050);
  --tint-1-sunken: #2A2825;
  --tint-2:        var(--lead-200);
  --tint-2-raised: var(--stone-050);
  --tint-2-sunken: #23272B;

  --bg:          var(--stone-100);
  --bg-raised:   var(--stone-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(--claret);
  --accent-fg:   #14100F;

  --bg-invert:    var(--claret-deep);
  --fg-invert:    #EDECE6;
  --line-invert:  #2A2C33;
  --muted-invert: #96999F;
  --shadow:       none;
}

/* ═══ The open strip ═════════════════════════════════════════════════════
   Above everything: is the building open, and when does it shut. A cathedral
   is asked this more than anything else and almost none of them answer it
   above the fold.

   State is carried by the WORD, never by colour alone — "Open until 6pm" is
   legible to somebody who cannot see the claret rule beside it. */
.open-strip {
  background: var(--bg-raised);
  border-block-end: var(--hair);
  font-family: var(--font-ui);
}
.open-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-3);
  font-size: var(--t-sm);
}
.open-strip__state {
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--claret);
  border-inline-start: 3px solid var(--claret);
  padding-inline-start: var(--s-3);
}
.open-strip__next { margin-inline-start: auto; color: var(--fg-muted); }
.open-strip__next b { color: var(--fg); font-weight: 600; }
@media (max-width: 48rem) { .open-strip__next { margin-inline-start: 0; } }

/* ═══ The broadsheet ═════════════════════════════════════════════════════
   THE ARCHITECTURE, and the whole reason this family exists separately.

   Not a stack of bands. A twelve-column grid where the lead, two briefs and
   the day's timetable are laid out SIDE BY SIDE and divided by hairlines, so
   a visitor reads whichever one they came for instead of scrolling past three
   to reach the fourth.

   Below 62rem it becomes a stack, because a broadsheet on a phone is just a
   very thin newspaper. That is a real loss of the idea, so the ORDER matters
   there: the horarium comes second, not last, since "is it open" is the
   question a phone is most likely holding. */
.broadsheet {
  display: grid;
  gap: 0;
  border-block: var(--rule);
}
.broadsheet > * { padding: clamp(var(--s-5), 3vw, var(--s-7)); }

@media (min-width: 62rem) {
  .broadsheet {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .broadsheet__lead   { grid-column: 1 / 9;  grid-row: 1; border-block-end: var(--hair); }
  .broadsheet__aside  { grid-column: 9 / 13; grid-row: 1 / span 2; border-inline-start: var(--hair); }
  /* ⚠ `span 4` + auto-placement, NOT :nth-of-type(1)/(2).
     :nth-of-type counts by ELEMENT TYPE, not by class — and the lead is also a
     <div>, so it took the first count. The first brief picked up the rule meant
     for the second, the second matched nothing and auto-placed into whatever
     was left, and came out 120px wide against its neighbour's 480. CSS has no
     :nth-of-class; letting the grid place them is simpler and cannot drift. */
  .broadsheet__brief  { grid-row: 2; grid-column: span 4; }
  .broadsheet__brief + .broadsheet__brief { border-inline-start: var(--hair); }
}
@media (max-width: 61.99rem) {
  .broadsheet > * + * { border-block-start: var(--hair); }
  .broadsheet__aside { order: -1; }   /* "is it open" first on a phone */
}

.broadsheet__lead .lead__kicker,
.broadsheet__brief .brief__kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--claret);
  margin-block-end: var(--s-3);
}
.lead__title { font-size: var(--t-2xl); line-height: var(--leading-tight); }
.lead__turn  { display: block; font-style: italic; color: var(--fg-muted); }
.lead__lede  { margin-block-start: var(--s-4); max-inline-size: 42ch; color: var(--fg-muted); }
.lead__art   { margin-block-start: var(--s-5); }
.lead__art img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.brief__title { font-size: var(--t-lg); line-height: 1.1; }
.brief p { margin-block-start: var(--s-3); font-size: var(--t-sm); color: var(--fg-muted); }
.brief__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 2.75rem;
  margin-block-start: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  color: var(--fg);
}
.brief__more .icon { transition: transform var(--transition); }
.brief__more:hover .icon { transform: translateX(0.25em); }

/* ═══ The horarium ═══════════════════════════════════════════════════════
   The building's day, hour by hour, from the first office to close. The real
   word for a monastic timetable, and the component this family is built
   around: it answers "is it open", "what will I walk into" and "when is
   Evensong" in one column instead of three pages.

   Services and openings are DISTINGUISHED IN WORDS as well as by weight —
   a visitor needs to know which entries they may simply walk into and which
   are an act of worship they would be joining. */
.horarium { list-style: none; margin: 0; padding: 0; }
.horarium > li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-4);
  border-block-end: var(--hair);
}
.horarium > li:first-child { padding-block-start: 0; }
.horarium > li:last-child { border-block-end: 0; }
.horarium__at {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.horarium__what { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 600; }
.horarium__note {
  grid-column: 2;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}
/* A service, as opposed to something you may simply walk in on. */
.horarium__kind {
  grid-column: 2;
  justify-self: start;
  margin-block-start: var(--s-1);
  padding: 0.05em 0.4em;
  background: var(--claret);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.horarium__head {
  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);
  padding-block-end: var(--s-3);
  border-block-end: var(--rule);
  margin-block-end: var(--s-4);
}

/* ═══ Tariff — what things cost, stated plainly ══════════════════════════
   A cathedral that charges is asked constantly and usually buries it. */
.tariff { inline-size: 100%; border-collapse: collapse; font-family: var(--font-ui); }
.tariff th, .tariff td {
  text-align: start;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-block-end: var(--hair);
  vertical-align: baseline;
}
.tariff thead th {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  border-block-end: var(--rule);
}
.tariff td:last-child { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tariff__free { color: var(--claret); font-weight: 600; }

@media (forced-colors: active) {
  .broadsheet > * { border: 1px solid CanvasText; }
  .horarium__kind, .open-strip__state { border: 1px solid CanvasText; }
}