/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY — ROMAN
   Roman Catholic parishes. Also Ordinariate, Eastern Catholic parishes of the
   Latin calendar, and anywhere Mass and Confession are the two things the
   website is actually asked for.

   Built on families/_chrome-editorial.css — the house register — and bringing
   only what makes it a Catholic parish.

   ── WHAT THIS FAMILY IS FOR ───────────────────────────────────────────────
   Two facts drive the whole design. "Mass times near me" is the highest-volume
   search in this sector; and the thing parishes are asked for constantly and
   almost never publish properly is CONFESSION. Both are above the fold, and
   confession gets a panel of its own rather than a line in a table — because
   the person looking for it has usually not been for a long time and needs to
   be told what happens, not just when.

   ── HOW IT DIFFERS FROM PARISH (Canterbury) ───────────────────────────────
   Canterbury paints its hero with the liturgical season. Doing that again here
   would be the same idea twice. Roman keeps a FIXED palette — ivory, stone,
   marble and basalt, with gilt — and spends its calendar cleverness on the
   MOVABLE FEASTS instead: core/js/holydays.js dates Ascension, Corpus Christi
   and the rest from Easter, and Christ the King from Advent.

   ── TYPE ──────────────────────────────────────────────────────────────────
   Cinzel, drawn from Roman inscriptional capitals — the lettering actually cut
   on these buildings. It has NO italic, so this family varies the register's
   one turning line: instead of an italic it turns to letterspaced gilt. A
   synthesised oblique on an inscriptional face looks like a mistake, and the
   register's rule is "one line turns", not "one line is italic".
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"] {
  --font-display: "Cinzel", "Trajan Pro", 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;
  /* Cinzel is variable 400–700. Its 400 is already substantial because every
     glyph is a capital, so the register's one-weight rule sits at 400. */
  --display-weight: 400;

  /* Ivory, stone, marble, basalt. Warmer than Canterbury's limewash and
     cooler than Circuit's paper — three templates in one register have to be
     told apart at a glance, and the ground is what does that. */
  --ivory-050: #FEFCF8;
  --ivory-100: #FBF8F2;
  --stone-200: #F1EBDF;   /* first tint  — warm  */
  --marble-200:#E9EAEE;   /* second tint — cool  */
  --line-200:  #DED6C6;
  --ink-600:   #57503F;
  --ink-800:   #332D25;
  --ink-900:   #211D18;

  /* Basalt for the deep band, and gilt for the accent. The deep panel here is
     a NEAR-BLACK rather than a hue, which no other template in the set does —
     Hospitality's is blue, Benefice's green, Parish's the season. */
  --basalt:    #221E1A;
  --gilt:      #7A5712;
  --gilt-lift: #D9BE72;   /* gilt that has to sit ON the basalt */

  --tint-1:        var(--stone-200);
  --tint-1-raised: var(--ivory-050);
  --tint-1-sunken: #E7DFCF;
  --tint-2:        var(--marble-200);
  --tint-2-raised: var(--ivory-050);
  --tint-2-sunken: #DCDEE4;

  --bg:          var(--ivory-100);
  --bg-raised:   var(--ivory-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(--basalt);
  --fg-invert:    #F4EFE4;
  --line-invert:  #46403A;
  --muted-invert: #B4AB9B;

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

  /* Cinzel is all capitals, so it needs MORE letterspacing and LESS size than
     a lowercase display face to read at the same weight on the page. This is
     the one place the register's scale is genuinely reset rather than nudged. */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.15rem, 0.95rem + 0.9vw, 1.4rem);
  --t-xl:   clamp(1.5rem,  1.1rem + 1.8vw, 2.2rem);
  --t-2xl:  clamp(1.9rem,  1.3rem + 2.9vw, 3.1rem);
  --t-3xl:  clamp(2.2rem,  1.4rem + 4.2vw, 3.8rem);

  --leading-tight: 1.16;      /* capitals need more, not less */
  --leading-snug:  1.34;
  --leading-body:  1.68;

  --tracking-label: 0.18em;
  --tracking-display: 0.015em;   /* POSITIVE: capitals want opening up */

  --measure:      34rem;
  --measure-wide: 46rem;
  --court:        74rem;
  --gutter:       clamp(1.25rem, 5vw, 4rem);

  --radius:      0;
  --radius-arch: 0;
  --shadow:      none;

  --hair:  1px solid var(--line);
  --border:        var(--hair);
  --border-strong: 1px solid var(--line-strong);

  --focus: 2px solid var(--ink-900);
  --focus-offset: 3px;
}

/* ── Dark ─────────────────────────────────────────────────────────────────
   Each block restates the SEMANTIC MAPPING as well as the palette — see
   families/hospitality.css for why redefining the palette alone does nothing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ivory-050: #201C18;
    --ivory-100: #181510;
    --stone-200: #221E18;
    --marble-200:#1B1E22;
    --line-200:  #3A342A;
    --ink-600:   #A79E8C;
    --ink-800:   #D8D1C2;
    --ink-900:   #F1ECE1;

    --basalt:    #100D0A;
    --gilt:      #D9BE72;
    --gilt-lift: #E8D69C;

    --tint-1:        var(--stone-200);
    --tint-1-raised: var(--ivory-050);
    --tint-1-sunken: #2A251E;
    --tint-2:        var(--marble-200);
    --tint-2-raised: var(--ivory-050);
    --tint-2-sunken: #232830;

    --bg:          var(--ivory-100);
    --bg-raised:   var(--ivory-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(--gilt);
    --accent-fg:   #14110C;

    --bg-invert:    var(--basalt);
    --fg-invert:    #F1ECE1;
    --line-invert:  #2E2822;
    --muted-invert: #9C9384;
    --shadow:       none;
  }
}
:root[data-theme="dark"] {
  --ivory-050: #201C18;
  --ivory-100: #181510;
  --stone-200: #221E18;
  --marble-200:#1B1E22;
  --line-200:  #3A342A;
  --ink-600:   #A79E8C;
  --ink-800:   #D8D1C2;
  --ink-900:   #F1ECE1;

  --basalt:    #100D0A;
  --gilt:      #D9BE72;
  --gilt-lift: #E8D69C;

  --tint-1:        var(--stone-200);
  --tint-1-raised: var(--ivory-050);
  --tint-1-sunken: #2A251E;
  --tint-2:        var(--marble-200);
  --tint-2-raised: var(--ivory-050);
  --tint-2-sunken: #232830;

  --bg:          var(--ivory-100);
  --bg-raised:   var(--ivory-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(--gilt);
  --accent-fg:   #14110C;

  --bg-invert:    var(--basalt);
  --fg-invert:    #F1ECE1;
  --line-invert:  #2E2822;
  --muted-invert: #9C9384;
  --shadow:       none;
}

/* ═══ The welcome, on basalt ══════════════════════════════════════════════ */
.welcome { background: var(--basalt); }
.welcome__eyebrow { color: var(--gilt-lift); }
.welcome__lede    { color: #E4DDCF; }
/* The register's turning line, WITHOUT an italic — Cinzel has none, and a
   synthesised oblique on an inscriptional capital reads as a rendering fault.
   It turns to letterspaced gilt instead. The rule is "one line turns". */
.welcome__turn {
  font-style: normal;
  color: var(--gilt-lift);
  letter-spacing: 0.1em;
  font-size: 0.78em;
}
.welcome .btn {
  background: var(--gilt-lift);
  border-color: var(--gilt-lift);
  color: #221E1A;
}
.welcome .btn:hover { background: #E8D69C; border-color: #E8D69C; }

/* ═══ Confession ═════════════════════════════════════════════════════════
   THE SIGNATURE COMPONENT OF THIS FAMILY, and the reason it is a panel rather
   than a row in the Mass table.

   Somebody looking for confession times is, very often, someone who has not
   been in years and is embarrassed to ring and ask. A time on its own does not
   help them; what helps is being told plainly what happens, that they do not
   need to remember the words, and that nobody will mind. So the panel carries
   the times AND the reassurance, together, where they cannot be separated by a
   parish tidying its pages. */
.confession {
  display: grid;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  background: var(--bg-raised);
  border-block-start: 3px solid var(--gilt);
  border-block-end: var(--hair);
}
@media (min-width: 52rem) { .confession { grid-template-columns: 5fr 7fr; } }

.confession__when { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); }
.confession__when > li {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-3);
  border-block-end: var(--hair);
}
.confession__when > li:first-child { border-block-start: var(--hair); }
.confession__day {
  font-family: var(--font-display);
  font-size: var(--t-base);
  letter-spacing: var(--tracking-display);
}
.confession__time { font-variant-numeric: tabular-nums; font-weight: 600; }
.confession__where { grid-column: 2; font-size: var(--t-sm); color: var(--fg-muted); }

.confession__say p + p { margin-block-start: var(--s-4); }
.confession__say b { font-weight: 600; }

/* ═══ Feasts ═════════════════════════════════════════════════════════════
   Rendered by core/js/feasts.js from core/js/holydays.js. Obligation is stated
   in words as well as by weight — a list where the obliged days are merely
   heavier tells a screen reader nothing. */
.feasts { list-style: none; margin: 0; padding: 0; max-inline-size: 52rem; }
.feast {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4);
  border-block-end: var(--hair);
  font-family: var(--font-ui);
}
@media (min-width: 44rem) {
  .feast { grid-template-columns: 15rem 1fr; align-items: baseline; }
  .feast__note, .feast__obliged { grid-column: 2; }
}
.feast:first-child { border-block-start: var(--hair); }
.feast__date { font-size: var(--t-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.feast__name {
  font-family: var(--font-display);
  font-size: var(--t-base);
  letter-spacing: var(--tracking-display);
}
.feast__note { font-size: var(--t-sm); color: var(--fg-muted); }
.feast__obliged {
  justify-self: start;
  margin-block-start: var(--s-1);
  padding: 0.1em 0.5em;
  background: var(--gilt);
  color: #FFFFFF;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.feast--obliged .feast__name { font-weight: 600; }
.feasts__caption {
  margin-block-start: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* On the basalt band the gilt badge needs the lifted gilt and dark type. */
.setting--deep .feast__obliged { background: var(--gilt-lift); color: #221E1A; }

@media (forced-colors: active) {
  .confession { border: 1px solid CanvasText; }
  .feast__obliged { border: 1px solid CanvasText; }
}