/*
 * My Planeta Plicata — website
 *
 * The palette and type scale are ported from the React Native theme
 * (src/theme/palette.ts, src/theme/typography.ts) so the two builds look like
 * one product. Tertiary ink was darkened from the original design to reach
 * WCAG AA at small sizes.
 *
 * Rule that governs everything below: red belongs to the rubrics. No control,
 * no link and no state uses it.
 */

:root {
  --paper: #faf6ee;
  --surface: #fffdf8;
  --sunken: #f1eadc;
  --ink: #221e19;
  --ink-muted: #6a5f51;
  --ink-faint: #7a6d5d;
  --rule: #e3dacb;
  --rubric: #9b2c2c;
  --accent: #6b4e2e;

  --swatch-white: #fbf7ec;
  --swatch-white-edge: #cbbe9e;
  --swatch-red: #a5232b;
  --swatch-red-edge: #7c161d;
  --swatch-green: #2f6b4f;
  --swatch-green-edge: #1f4a36;
  --swatch-violet: #5b3a73;
  --swatch-violet-edge: #412754;
  --swatch-rose: #d9a0b4;
  --swatch-rose-edge: #b0788d;
  --swatch-black: #26231f;
  --swatch-black-edge: #100e0c;
  --swatch-gold: #c9a44c;
  --swatch-gold-edge: #9a7a2c;

  --body-size: 18px;
  --body-line: 1.5;
  /* Reading column. In em, so it scales with the text-size setting and keeps
     roughly 70 characters a line at every size. */
  --measure: 30em;
  /* One column of the parallel Latin | English layout on a wide screen. */
  --measure-col: 27em;
  --gutter: 1.1rem;
  /* Set by app.js from the sticky header's real height; anchors land below it. */
  --masthead-h: 3rem;

  --serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;

  /* The Illustrated Mass's frame and buttons: candlelit browns, in the light
     theme as they were (neutral in the dark, 2.0.23). */
  --stage-bg: #0d0b0a;
  --stage-shade: 8, 6, 5;
  --stage-text: #eadfca;
  --stage-text-rgb: 234, 223, 202;
  --stage-button: 20, 16, 13;
  --stage-loading: #bfae92;
  --stage-on: #e8c46a;
  --stage-on-rgb: 232, 196, 106;
  --label-size: 0.72rem;
  --label-track: 0.14em;
}

/* The dark theme: since 2.0.23 (Patrick) plain black, greys and white — the
   brownish tint taken out, each shade kept at the lightness it had
   (#14120f → #121212, #ede6d8 → #e7e7e7, …), the red of the rubrics as it
   was. The liturgical colours' swatches keep their colours; only the white
   and black ones lost the tint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121212;
    --surface: #1a1a1a;
    --sunken: #232323;
    --ink: #e7e7e7;
    --ink-muted: #979797;
    --ink-faint: #888888;
    --rule: #2c2c2c;
    --rubric: #d98a82;
    --accent: #adadad;

    --swatch-white: #e3e3e3;
    --swatch-white-edge: #828282;
    --swatch-red: #b23a40;
    --swatch-red-edge: #d97e7e;
    --swatch-green: #3e8663;
    --swatch-green-edge: #7dba9b;
    --swatch-violet: #755091;
    --swatch-violet-edge: #a98cc2;
    --swatch-rose: #c98ba0;
    --swatch-rose-edge: #e3b4c3;
    --swatch-black: #292929;
    --swatch-black-edge: #636363;
    /* The display's own frame and buttons, neutral too (2.0.23). */
    --stage-bg: #0b0b0b;
    --stage-shade: 6, 6, 6;
    --stage-text: #e0e0e0;
    --stage-text-rgb: 224, 224, 224;
    --stage-button: 16, 16, 16;
    --stage-loading: #b0b0b0;
    --stage-on: #ffffff;
    --stage-on-rgb: 255, 255, 255;
    --swatch-gold: #c7a45c;
    --swatch-gold-edge: #e0c48a;
  }
}

:root[data-theme="dark"] {
  --paper: #121212;
  --surface: #1a1a1a;
  --sunken: #232323;
  --ink: #e7e7e7;
  --ink-muted: #979797;
  --ink-faint: #888888;
  --rule: #2c2c2c;
  --rubric: #d98a82;
  --accent: #adadad;

  --swatch-white: #e3e3e3;
  --swatch-white-edge: #828282;
  --swatch-red: #b23a40;
  --swatch-red-edge: #d97e7e;
  --swatch-green: #3e8663;
  --swatch-green-edge: #7dba9b;
  --swatch-violet: #755091;
  --swatch-violet-edge: #a98cc2;
  --swatch-rose: #c98ba0;
  --swatch-rose-edge: #e3b4c3;
  --swatch-black: #292929;
  --swatch-black-edge: #636363;
  /* The display's own frame and buttons, neutral too (2.0.23). */
  --stage-bg: #0b0b0b;
  --stage-shade: 6, 6, 6;
  --stage-text: #e0e0e0;
  --stage-text-rgb: 224, 224, 224;
  --stage-button: 16, 16, 16;
  --stage-loading: #b0b0b0;
  --stage-on: #ffffff;
  --stage-on-rgb: 255, 255, 255;
  --swatch-gold: #c7a45c;
  --swatch-gold-edge: #e0c48a;
}

:root[data-scale="small"] { --body-size: 16px; }
:root[data-scale="large"] { --body-size: 21px; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- shell ------------------------------------------------------------- */

/* The logo (roadmap §6B.3): the Pius XII medallion and the wordmark, at the
   top of every page. It sits above the sticky header, so it scrolls away and
   the pinned bars (and the Illustrated display) keep their room. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem var(--gutter) 0.55rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}
.brand__medallion {
  display: block;
  flex: none;
  width: auto;
  height: 3rem;
}
.brand__wordmark {
  display: block;
  flex: none;
  height: 0.95rem;
  width: auto;
  max-width: calc(100vw - 2 * var(--gutter) - 3.5rem);
  fill: currentColor;
}
.brand:hover .brand__wordmark { fill: var(--accent); }
/* The cross between the words (2.0.19): red, as a missal prints the ✠ of the
   Canon — the one red in the logo, and it stays red on hover. */
.brand__cross { fill: var(--rubric); }
.brand:focus-visible { outline-offset: -3px; }
/* On a dark page the paper-coloured medallion is the brightest thing on
   screen; take it down a little so it sits with the text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__medallion { filter: brightness(0.9); }
}
:root[data-theme="dark"] .brand__medallion { filter: brightness(0.9); }
@media (min-width: 46rem) {
  .brand__medallion { height: 3.5rem; }
  .brand__wordmark { height: 1.1rem; }
}

/* The lockup (2.0.22, roadmap §6V): Our Lady of Vladimir behind the
   wordmark, as a Final Fantasy title sets its artwork — the letters black
   with a thin white outline (white on black in the dark), the underline on
   top of the picture, and the M of MY partly behind the figure. One SVG
   (pipeline/build_lockup.py); the artwork is two PNGs, one per theme (since
   2.0.37 brown to gold on white, gold on black; the red cross between the
   words taken out). The 2.0.21 rules above stay, unused, for going back. */
.brand { --logo-ink: #000; --logo-halo: #fff; }
.lockup {
  display: block;
  flex: none;
  height: 3rem;
  width: auto;
  max-width: calc(100vw - 2 * var(--gutter));
  overflow: visible;
}
.lockup__word, .lockup__rule {
  fill: var(--logo-ink);
  stroke: var(--logo-halo);
  stroke-linejoin: round;
  paint-order: stroke;
}
.lockup__art--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand { --logo-ink: #fff; --logo-halo: #000; }
  :root:not([data-theme="light"]) .lockup__art--light { display: none; }
  :root:not([data-theme="light"]) .lockup__art--dark { display: inline; }
}
:root[data-theme="dark"] .brand { --logo-ink: #fff; --logo-halo: #000; }
:root[data-theme="dark"] .lockup__art--light { display: none; }
:root[data-theme="dark"] .lockup__art--dark { display: inline; }
@media (min-width: 46rem) {
  .lockup { height: 3.5rem; }
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem var(--gutter);
}

.topbar__title {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__links { display: flex; align-items: center; gap: 0.55rem; }

/* A long page title's short form, where the bar is narrow (2.0.16). */
.topbar__short { display: none; }
@media (max-width: 28rem) {
  .topbar__long { display: none; }
  .topbar__short { display: inline; }
}

@media (max-width: 30rem) {
  .topbar--crowded .topbar__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .topbar--crowded .topbar__links { margin-left: auto; }
}

/* Calendar and Settings: two line icons at the right of the bar on every
   page. The tap area is about 44 px; the bar's height does not change. */
.topbar__tools {
  display: flex;
  align-items: center;
  flex: none;
  margin: -0.55rem calc(-0.45 * var(--gutter)) -0.55rem -0.2rem;
}
.toolicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.75rem;
  color: var(--ink-muted);
  border-radius: 3px;
}
.toolicon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.toolicon .toolicon__fill { fill: currentColor; stroke: none; }
.toolicon:hover { color: var(--ink); }
/* The page you are on: in the accent colour, with a small mark beneath. */
.toolicon[aria-current="page"] {
  color: var(--accent);
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 2px);
  background-size: 6px 6px;
  background-position: 50% calc(100% - 3px);
  background-repeat: no-repeat;
}

/* Back: an arrow and where it goes. On a phone the arrow alone (the name is
   still read out); the tap area reaches past the bar's padding to about 44 px. */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  min-width: 2.75rem;
  margin: -0.55rem 0 -0.55rem calc(-0.5 * var(--gutter));
  padding: 0.55rem 0.35rem 0.55rem calc(0.5 * var(--gutter));
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
}
.backlink[hidden] { display: none; }
.backlink:hover { color: var(--ink); }
.backlink__arrow { font-size: 1.6rem; line-height: 0.8; margin-top: -0.1rem; }
@media (max-width: 40rem) {
  .backlink__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.navlink {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.15rem 0.1rem;
}
.navlink:hover { color: var(--ink); }
.navlink--sep { color: var(--rule); pointer-events: none; }

main {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}

/* Every anchor a jump can land on clears the sticky header (roadmap §6.3).
   Without this, each jump hides its own heading under the bar. */
main [id] { scroll-margin-top: calc(var(--masthead-h) + 0.75rem); }

/* ---- sticky toolbar: JUMP TO A PART, then Languages -------------------- */

.toolbar { border-top: 1px solid var(--rule); }
.toolbar[hidden] { display: none; }

.toolbar__inner {
  display: flex;
  gap: 0.5rem;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0.35rem var(--gutter);
}

.dropdown { display: flex; flex-direction: column; min-width: 0; }
.dropdown--jump { flex: 1.6 1 0; }
.dropdown--lang { flex: 1 1 0; }

/* In the toolbar the label is for screen readers; the select says enough. */
.toolbar .dropdown__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dropdown__label {
  font-size: 0.87rem;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}

.dropdown__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background-color: var(--surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 0.95rem) 55%, calc(100% - 0.65rem) 55%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.38rem 1.6rem 0.38rem 0.6rem;
  text-overflow: ellipsis;
  cursor: pointer;
}
.dropdown__select:hover { border-color: var(--ink-faint); }

.toolbar .dropdown--jump .dropdown__select {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.dropdown--field { margin-bottom: 1.3rem; max-width: 18rem; }
.dropdown--field .dropdown__select { font-size: 0.92rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* ---- day header -------------------------------------------------------- */

.eyebrow {
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1rem 0 0;
}

.day__title {
  font-size: 1.85rem;
  line-height: 1.16;
  font-weight: 600;
  margin: 0.45rem 0 0;
  text-wrap: balance;
}

.day__subtitle {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 1.03rem;
  margin: 0.2rem 0 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.chip {
  font-size: 0.63rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.25rem 0.55rem;
  border: 1px solid;
  border-radius: 3px;
}

.chip--ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink-muted);
}

.chip__alt { font-style: italic; font-size: 0.8rem; color: var(--ink-faint); }

.commemoration {
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0.85rem 0 0;
}

.day__rule { height: 2px; width: 3.5rem; margin: 1.35rem 0 0; }

/* ---- controls ---------------------------------------------------------- */

.segmented {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1.35rem;
}

.segmented__item {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  padding: 0.45rem 0.4rem;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  cursor: pointer;
}
.segmented__item:first-child { border-left: 0; }
.segmented__item:hover { color: var(--ink); }
.segmented__item[aria-pressed="true"] {
  background: var(--sunken);
  color: var(--ink);
  font-weight: 600;
}

.picker-label {
  font-size: 0.63rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.35rem 0 0.5rem;
}

.textlink {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.textlink:hover { text-decoration: underline; }

/* The Order of Mass and the Illustrated Mass, above the day's date (2.0.19). */
.daylinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
}
.daylink {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.72rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.daylink:hover { border-color: var(--accent); }
.daylinks + .day .eyebrow { margin-top: 1.1rem; }

/* ---- the text ---------------------------------------------------------- */

.sections { margin-top: 2rem; }

.section { margin-bottom: 1.6rem; }

.section--commemoration {
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
}

.section__label {
  font-size: 0.72rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 0.5rem;
}

.body { margin: 0 0 0.7rem; }
.body--gloss { color: var(--ink-muted); font-size: 0.95em; }
.body--standalone { margin: 0.25rem 0 0.85rem; }

.rubric { font-style: italic; color: var(--rubric); }
.citation { color: var(--rubric); font-size: 0.88em; letter-spacing: 0.02em; }
.label { color: var(--rubric); font-weight: 500; }
.mark { color: var(--rubric); }

.divider {
  height: 1px;
  width: 2.75rem;
  background: var(--rule);
  margin: 0.15rem 0 0.85rem;
}

.description {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin: 1rem 0 0;
}

/* ---- day navigation ---------------------------------------------------- */

.daynav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 0.75rem;
}

.daynav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.5rem 0;
}
.daynav a:hover { color: var(--ink); }

/* ---- calendar ---------------------------------------------------------- */

.monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0 0.9rem;
}

.monthbar__name { font-size: 1.3rem; font-weight: 600; margin: 0; }

.stepper {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0.4rem 0.7rem;
}
.stepper:disabled { color: var(--rule); cursor: default; }

.weekrow, .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.weekrow span {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding-bottom: 0.4rem;
}

.daycell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  color: var(--ink-muted);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
}
.daycell:hover { background: var(--sunken); }
.daycell--strong { color: var(--ink); font-weight: 600; }
.daycell--today { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--rule); }
.daycell--empty { cursor: default; }
.daycell--empty:hover { background: transparent; }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
  flex: none;
}

.notable { margin-top: 2rem; }

.notable__row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
}
.notable__row:hover .notable__title { text-decoration: underline; }
.notable__day {
  font-size: 0.85rem;
  color: var(--ink-faint);
  width: 1.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.notable__title { font-size: 0.97rem; }

/* ---- ordinary ---------------------------------------------------------- */

.jump {
  margin: 1.2rem 0 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
}

.jump > summary {
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  font-size: 0.72rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.jump__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.1rem 1rem;
  padding: 0.3rem 0.8rem 0.9rem;
}

.jump__list a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.28rem 0;
}
.jump__list a:hover { text-decoration: underline; }

.ordinary__section { margin-bottom: 2.2rem; }

.note { font-size: 0.87rem; line-height: 1.5; font-style: italic; margin: 0 0 0.7rem; }
.note--rubric { color: var(--rubric); }
.note--commentary { color: var(--ink-faint); }
/* Words of the Mass named in a rubric or a note (2.0.42): set like the text. */
.note .ref, .cue .ref { color: var(--ink); font-style: normal; }

.cue {
  font-size: 0.66rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rubric);
  margin: 0 0 0.45rem;
}

/* ---- prose pages ------------------------------------------------------- */

.page__title { font-size: 1.6rem; font-weight: 600; margin: 1.4rem 0 0.9rem; text-wrap: balance; }
.page__lede { font-style: italic; color: var(--ink-muted); margin: 0 0 1.4rem; }
.prose p { margin: 0 0 0.9rem; color: var(--ink-muted); font-size: 0.97rem; }
.prose a { color: var(--accent); }

.button {
  display: block;
  width: 100%;
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  margin-top: 1.4rem;
  color: var(--accent);
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--sunken); }

.caption { font-size: 0.82rem; line-height: 1.5; color: var(--ink-faint); margin: 0.85rem 0 0; }
/* A line's air above it (2.0.21: under the Ko-fi button). */
.caption--spaced,
.prose .caption--spaced { margin-top: calc(0.85rem + 1.5em); } /* .prose p would zero it */

.hairline { height: 1px; background: var(--rule); border: 0; margin: 2.2rem 0; }

.orate { font-style: italic; color: var(--rubric); font-size: 1.2rem; margin: 0 0 0.25rem; }

.settings__group { margin-bottom: 2rem; }
.settings__group:first-child { margin-top: 1.4rem; }
.settings__heading {
  font-size: 0.66rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 0.8rem;
}
/* 2.0.16: the first group's heading is a quotation, so it keeps its case. */
.settings__heading--quote {
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-muted);
}
.settings__attribution { font-style: normal; color: var(--ink-faint); }
.settings__field { margin-bottom: 1.3rem; }
.settings__field > label {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}
.settings__field .segmented { margin-top: 0; }
.rowlink + .settings__field { margin-top: 1.1rem; }

.edition-title { font-size: 1.05rem; font-weight: 600; margin: 0; }

.rowlink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.97rem;
}
.rowlink:hover { color: var(--accent); }

.detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
}
.detail dt { font-size: 0.82rem; color: var(--ink-faint); margin: 0; }
.detail dd { margin: 0; font-size: 0.92rem; text-align: right; }

/* ---- status ------------------------------------------------------------ */

.status {
  padding: 3rem 0;
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
}

.offline-note {
  margin: 1.2rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--sunken);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 20;
  background: var(--surface);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
}

@media (min-width: 46rem) {
  .day__title { font-size: 2.1rem; }
  main { padding-bottom: 5rem; }
}

/* ---- Latin and vernacular ---------------------------------------------- */

/*
 * One DOM for every screen. On a phone: all the Latin, a short rule, all the
 * vernacular — the stacked layout of Phase 1. The pair's children may arrive
 * interleaved (la, vn, la, vn…) for the desktop grid; `order` restacks them.
 */
.pair { display: flex; flex-direction: column; }
.pair__la { order: 1; }
.pair__divider { order: 2; }
.pair__vn { order: 3; }
.pair + .pair { margin-top: 0.1rem; }

/* Line-aligned rows: the lines of one paragraph, set without paragraph gaps. */
.pair .pair__line { margin: 0; }
.pair .pair__line--last { margin-bottom: 0.7rem; }

/* ---- proper links in the Ordinary -------------------------------------- */

.proper-link {
  margin: 0.2rem 0 0.9rem;
  font-size: 0.95rem;
}

.proper-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.proper-link a:hover { border-bottom-color: var(--accent); }

.proper-link--absent,
.proper-link--plain { color: var(--ink-faint); }

.proper-link__note {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.linked-mass {
  font-size: 0.87rem;
  color: var(--ink-muted);
  margin: -0.6rem 0 0.6rem;
}
.linked-mass__label { color: var(--ink-faint); }
.linked-mass a { color: var(--accent); }

/* ---- desktop ----------------------------------------------------------- */

/*
 * A wide screen with Latin + a vernacular: parallel columns, as in a printed
 * hand missal. Each column keeps a comfortable measure; the page widens to
 * hold both. Single-language reading keeps the one narrow column.
 */
@media (min-width: 60rem) {
  main.is-parallel {
    max-width: calc(2 * var(--measure-col) + 2.5rem + 2 * var(--gutter));
  }

  .toolbar.is-parallel .toolbar__inner {
    max-width: calc(2 * var(--measure-col) + 2.5rem + 2 * var(--gutter));
  }

  main.is-parallel .pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  /* Document order (la, vn, la, vn…) now places the rows; `order` would
     otherwise regroup all the Latin first. */
  main.is-parallel .pair > * { order: 0; }
  main.is-parallel .pair__la { grid-column: 1; }
  main.is-parallel .pair__vn { grid-column: 2; }
  main.is-parallel .pair__divider { display: none; }

  /* Side by side, the vernacular is a column of its own, not a gloss. */
  main.is-parallel .pair .body--gloss { font-size: 1em; }

  /* Headings, notes and links still read at one measure, left-aligned with
     the Latin column. */
  main.is-parallel .day,
  main.is-parallel .page__lede,
  main.is-parallel .note,
  main.is-parallel .description {
    max-width: var(--measure);
  }
}


/* ---- Illustration mode ------------------------------------------------- */

/*
 * Phone: the display sits in the sticky header, between the title bar and the
 * toolbar, capped at under 40% of the screen so the text keeps room to be
 * read; it collapses to a slim bar. Desktop: it becomes the left pane, full
 * height, and the title bar, toolbar and text take the right (roadmap §6.8).
 */
.stage { display: none; }
.stage[hidden] { display: none !important; }
.is-illustrated .stage {
  display: block;
  position: relative;
  background: var(--stage-bg);
  border-top: 1px solid var(--rule);
}

.stage__view {
  position: relative;
  height: min(38vh, 78vw);
  min-height: 10.5rem;
  overflow: hidden;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Better visuals (2.0.11): drag the picture to look round a little. */
.stage__canvas.is-budgeable { cursor: grab; }
.stage__canvas.is-dragging { cursor: grabbing; }

/* The candlelit mood: darken the edges, as the eye does in a dim church. */
.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(var(--stage-shade), 0.55) 100%);
  z-index: 1;
}

.stage.is-loading .stage__view::after {
  content: "Lighting the candles…";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--stage-loading);
  font-style: italic;
  font-size: 0.85rem;
  z-index: 2;
}

.stage__caption {
  position: absolute;
  left: 0.6rem;
  bottom: 0.55rem;
  right: 5.6rem; /* clear of the zoom buttons (2.0.25) */
  margin: 0;
  z-index: 2;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--stage-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.stage__caption[hidden] { display: none; }

.stage__toggle,
.stage__show {
  appearance: none;
  font-family: inherit;
  font-size: 0.7rem;   /* the Hide button smaller since 2.0.41: below */
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
}

/* The display's own buttons, top right: Enlarge (2.0.16) and Hide; Better
   visuals (2.0.10), since 2.0.41 the word GFX, top left on its own.
   All a little smaller since 2.0.41 (Patrick), the zoom slider as it was. */
.stage__controls {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: flex;
  gap: 0.3rem;
}

.stage__toggle,
.stage__better,
.stage__enlarge {
  padding: 0.22rem 0.45rem;
  color: var(--stage-text);
  background: rgba(var(--stage-button), 0.55);
  border: 1px solid rgba(var(--stage-text-rgb), 0.25);
}
.stage__toggle { font-size: 0.62rem; }
.stage__toggle:hover,
.stage__better:hover,
.stage__enlarge:hover { background: rgba(var(--stage-button), 0.8); }

.stage__better,
.stage__enlarge {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  cursor: pointer;
  color: rgba(var(--stage-text-rgb), 0.55);
}
.stage__enlarge svg { width: 14px; height: 14px; }
.stage__better {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  min-height: 1.55rem;
}
.stage__better[aria-pressed="true"] {
  color: var(--stage-on);
  border-color: rgba(var(--stage-on-rgb), 0.55);
}
.stage__enlarge { color: var(--stage-text); }
.stage__better[hidden] { display: none; }
.stage.is-fallback .stage__better,
.stage.is-fallback .stage__enlarge { display: none; }

/* Zoom (2.0.25), bottom right; not on the colour chip. Since 2.0.37 an
   upright slider in place of − and +: a thin rail, filled from the foot to
   the thumb, a magnifier with a plus over it and one with a minus under it,
   in a box like the other buttons'. */
.stage__zoom {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.2rem;
  border-radius: 999px;
  color: var(--stage-text);
  background: rgba(var(--stage-button), 0.55);
  border: 1px solid rgba(var(--stage-text-rgb), 0.25);
}
.stage__zoomend {
  display: flex;
  color: rgba(var(--stage-text-rgb), 0.7);
  pointer-events: none;
}
.stage__zoomtrack {
  position: relative;
  width: 1.5rem;
  height: clamp(3rem, 13vh, 4.5rem);   /* clear of the buttons at the top, however short the display */
  cursor: pointer;
  touch-action: none;           /* a drag here zooms; it does not scroll the page */
  border-radius: 999px;
  outline: none;
  --t: 0;
}
.stage__zoomtrack:focus-visible { box-shadow: 0 0 0 2px rgba(var(--stage-on-rgb), 0.7); }
.stage__zoomrail,
.stage__zoomfill {
  position: absolute;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
}
.stage__zoomrail {
  top: 7px;
  bottom: 7px;
  background: rgba(var(--stage-text-rgb), 0.3);
}
.stage__zoomfill {
  bottom: 7px;
  height: calc(var(--t) * (100% - 14px));
  background: rgba(var(--stage-text-rgb), 0.85);
}
.stage__zoomthumb {
  position: absolute;
  left: 50%;
  bottom: calc(var(--t) * (100% - 14px));
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--stage-text);
  box-shadow: 0 0 0 2px rgba(var(--stage-button), 0.8), 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s;
}
.stage__zoomtrack:hover .stage__zoomthumb,
.stage__zoomtrack.is-dragging .stage__zoomthumb { transform: scale(1.15); }
@media (min-width: 46rem) {
  .stage__zoomtrack { height: 6.5rem; }
}
.stage.is-enlarged .stage__zoomtrack { height: 8rem; }
.stage.is-fallback .stage__zoom,
.stage.is-loading .stage__zoom { display: none; }
.stage.is-enlarged .stage__zoom {
  right: calc(0.45rem + env(safe-area-inset-right, 0px));
  bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));
}

/* Enlarge (2.0.16): the picture over the whole window. The display's own
   box keeps its size, so the text underneath does not move and scrolling
   still carries the scene on. Not the browser's full screen. */
.is-illustrated .stage.is-enlarged {
  height: calc(min(38vh, 78vw) + 1px);
  min-height: calc(10.5rem + 1px);
}
.stage.is-enlarged .stage__view {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  min-height: 0;
  z-index: 40;
  background: var(--stage-bg);
}
.stage.is-enlarged .stage__controls {
  top: calc(0.4rem + env(safe-area-inset-top, 0px));
  right: calc(0.4rem + env(safe-area-inset-right, 0px));
}
.stage.is-enlarged .stage__better {
  top: calc(0.4rem + env(safe-area-inset-top, 0px));
  left: calc(0.4rem + env(safe-area-inset-left, 0px));
}

/* The picture bare (2.0.41): a tap on it hides the buttons and the zoom
   slider, the next shows them; while it is dragged they stand aside. A
   button reached from the keyboard shows them again (where :has() is
   understood; elsewhere a tap does). */
.stage__controls,
.stage__better,
.stage__zoom { transition: opacity 0.2s; }
.stage.is-bare .stage__controls,
.stage.is-bare .stage__better,
.stage.is-bare .stage__zoom,
.stage.is-handled .stage__controls,
.stage.is-handled .stage__better,
.stage.is-handled .stage__zoom {
  opacity: 0;
  pointer-events: none;
}
.stage.is-bare .stage__view:has(:focus-visible) .stage__controls,
.stage.is-bare .stage__view:has(:focus-visible) .stage__better,
.stage.is-bare .stage__view:has(:focus-visible) .stage__zoom {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .stage__controls,
  .stage__better,
  .stage__zoom { transition: none; }
}
.stage.is-enlarged .stage__caption {
  left: calc(0.6rem + env(safe-area-inset-left, 0px));
  bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
}

.stage__bar { display: none; }
.stage.is-collapsed .stage__view { display: none; }
.stage.is-collapsed { background: var(--sunken); }
.stage.is-collapsed .stage__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.3rem;
  padding: 0 var(--gutter);
}

.stage__chip {
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
  border: 1px solid;
  flex: none;
}

.stage__show {
  padding: 0.25rem 0.5rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--rule);
}

.stage__fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem 1.5rem;
  text-align: center;
  background: var(--sunken);
}
.stage__fallback[hidden] { display: none; }
.stage__swatch {
  width: 3rem;
  height: 3rem;
  border-radius: 4px;
  border: 1px solid;
}
.stage__fallback-name {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stage__fallback-note {
  margin: 0;
  max-width: 26rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
}

/* The day's proper texts, set into the Ordinary: marked with a rule in the
   day's colour, so the reader sees at a glance what changes today. */
.inserts { margin: 0.35rem 0 1.1rem; }
.insert {
  border-left: 3px solid var(--day-color, var(--rule));
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin-bottom: 1rem;
}
.insert .section__label { color: var(--ink-muted); }
.insert.section--commemoration { border-left-style: dotted; }

.beat { height: 0; }

.notice {
  margin: 1.4rem 0 0.4rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--day-color, var(--rule));
  border-radius: 3px;
  background: var(--sunken);
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.rites > .section { opacity: 0.92; }


/* The scene follows the part at the top of the text, so the last parts must
   be able to reach the top. */
.is-illustrated main { padding-bottom: 60vh; }

@media (min-width: 60rem) {
  :root { --stage-w: clamp(24rem, 42vw, 48rem); }

  body.is-illustrated { padding-left: var(--stage-w); }

  .is-illustrated .stage {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--stage-w);
    border-top: 0;
    border-right: 1px solid var(--rule);
  }
  .is-illustrated .stage__view { height: 100%; }
  /* Enlarged, the pane (already out of the page's flow) keeps its place. */
  .is-illustrated .stage.is-enlarged { height: auto; min-height: 0; }
  .is-illustrated .stage.is-enlarged .stage__view { height: auto; }
  /* Beside the text there is room enough; no need to hide it. */
  .is-illustrated .stage__toggle { display: none; }
  .is-illustrated .stage.is-collapsed .stage__view { display: block; }
  .is-illustrated .stage.is-collapsed .stage__bar { display: none; }
  .is-illustrated .stage.is-collapsed { background: var(--stage-bg); }

  /* Two columns of text beside the display: let them share what is left. */
  .is-illustrated main.is-parallel,
  .is-illustrated .toolbar.is-parallel .toolbar__inner {
    max-width: min(calc(2 * var(--measure-col) + 2.5rem + 2 * var(--gutter)), calc(100vw - var(--stage-w)));
  }
}

/* Illustration mode: what this Mass has and has not. */
.this-mass {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: -0.6rem 0 1.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.this-mass__item strong { font-weight: 600; color: var(--ink); }
.this-mass__item.is-off strong { color: var(--ink-muted); }

/* In memoriam, at the top of About (2.0.22): centred, a line to each, a
   blank line before the prayer. */
.memorial { text-align: center; margin: 0.5rem 0 2.25rem; }
.prose .memorial p { margin: 0; }
.prose .memorial .memorial__cross { font-size: 1.35em; line-height: 1.2; margin-bottom: 0.35rem; }
.prose .memorial .memorial__name { font-size: 1.15em; letter-spacing: 0.08em; margin: 0.15rem 0; }
.prose .memorial .memorial__rip { font-style: italic; margin-top: 1.5em; }