/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY — LITURGICAL
   Catholic · Anglican · Episcopal · Lutheran · Methodist · Orthodox

   Traditions with a calendar, sacraments, and usually a building older than
   anyone in it. The vocabulary is drawn from the missal and the window: a
   humanist old-style face cut from Renaissance models, the arch as a real
   structural form rather than a rounded corner, drop caps and marginal rules
   from manuscript practice, and the liturgical colours doing the accent work.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;

  /* Garamond runs small and light; the body size and leading compensate. */
  --t-base: 1.15rem;
  --leading-body: 1.66;

  /* COOL limestone, with a faint violet cast picked up from the liturgical
     violet the accent set already contains.

     This was warm cream (#F0EDE6, R−B +10) on the reasoning that limewash is
     warmer than grey. That is true of a whitewashed Mediterranean chapel and
     false of the northern European stone these traditions actually build in —
     and it put this family at the same temperature as Movement's newsprint and
     the old Plain paper, so three of four grounds read as one sand. Ground
     temperature is now what separates the families before anything else does:
     cool stone here, neutral bleached paper in Plain, warm newsprint in
     Movement. */
  --plaster-100: #F7F7FA;
  --plaster-200: #ECEDF1;   /* R−B −5 */
  --plaster-300: #DFE1E7;   /* R−B −8 */
  --plaster-400: #C2C6D0;
}

@media (prefers-color-scheme: dark) {
  :root { --bg-raised: #221E28; }
}
:root[data-theme="dark"] { --bg-raised: #221E28; }

/* ── The arch ───────────────────────────────────────────────────────────────
   Used once per page, on the hero image. A Romanesque round-headed arch by
   default; add .arch--gothic for the pointed profile. This is the one place
   the family spends its ornament. */
.arch {
  border-start-start-radius: 50%;
  border-start-end-radius: 50%;
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
  overflow: hidden;
}
.arch > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* A Gothic arch is not a rounded rectangle — it is two arcs meeting at a
   point, which needs a clip path rather than a border radius. */
.arch--gothic {
  border-radius: 0;
  clip-path: path("M 0,100 L 0,42 Q 0,0 50,0 Q 100,0 100,42 L 100,100 Z");
  clip-path: shape(from 0% 100%, line to 0% 42%,
              curve to 50% 0% with 0% 8%, curve to 100% 42% with 100% 8%,
              line to 100% 100%, close);
}

/* ── Drop cap ───────────────────────────────────────────────────────────────
   Manuscript practice, and Garamond is cut for it. Only ever on the first
   paragraph of a welcome or rector's letter — never on a list of service times. */
.dropcap::first-letter {
  float: inline-start;
  font-size: 3.4em;
  line-height: 0.82;
  padding-inline-end: 0.08em;
  padding-block-start: 0.06em;
  color: var(--accent);
  font-weight: 600;
}

/* ── Small caps for the hours ───────────────────────────────────────────────
   EB Garamond ships real small caps; this is not a text-transform. */
.smallcaps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

/* ── Marginal rule ──────────────────────────────────────────────────────────
   The vertical rule that runs down a missal page beside a rubric. */
.rubric {
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--accent);
  font-style: italic;
  color: var(--fg-muted);
}

/* ── Headings sit a little tighter and larger than the base scale ───────── */
h1, h2 { letter-spacing: -0.018em; }

.hero__title { font-size: var(--t-3xl); line-height: 1.04; }

/* ── Service list gains the liturgical treatment ───────────────────────── */
.service__time { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.service__name { font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: var(--t-lg); }

/* ── A rule with a lozenge, for section breaks ──────────────────────────── */
.rule-lozenge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  margin-block: var(--s-7);
}
.rule-lozenge::before, .rule-lozenge::after {
  content: ""; block-size: 1px; background: var(--line);
}
.rule-lozenge > span {
  inline-size: 0.5rem; block-size: 0.5rem;
  background: var(--accent);
  rotate: 45deg;
}