/* ---------------------------------------------------------------------
   Reform of Life; shared styles.

   The visual system follows the rubric tradition of missals and
   breviaries: instructions print in red, the prayers themselves in
   black. That is where the word "rubric" comes from, and it encodes
   exactly the distinction a beginner needs, which is the difference
   between what you SAY and what you DO.

   One family carries the reading matter (EB Garamond, descended from
   the faces liturgical books have been set in for four centuries) and
   a plain modern face carries the apparatus (Archivo, for labels,
   step numbers, and anything that instructs rather than prays).
   --------------------------------------------------------------------- */

:root {
  --paper:      #FBFAF7;
  --paper-sunk: #F4F1EA;
  --ink:        #1A1614;
  --ink-soft:   #6B6259;
  --rubric:     #A8201A;
  --rubric-pale:#F0E0DD;
  --hairline:   #E3DED4;

  --serif: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;
}

/* The viewer has three theme states, not two: an explicit choice stamps
   the root element, and the default "system" setting stamps nothing. So
   the light palette lives on bare :root and the dark one is redefined
   twice; tokens only, never component colours. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #141110;
    --paper-sunk: #1D1917;
    --ink:        #EDE7DC;
    --ink-soft:   #A2988B;
    --rubric:     #D4635C;
    --rubric-pale:#33211F;
    --hairline:   #2E2825;
  }
}
:root[data-theme="dark"] {
  --paper:      #141110;
  --paper-sunk: #1D1917;
  --ink:        #EDE7DC;
  --ink-soft:   #A2988B;
  --rubric:     #D4635C;
  --rubric-pale:#33211F;
  --hairline:   #2E2825;
}

* { box-sizing: border-box; }

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

.sheet {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}

/* ---- apparatus: everything that instructs rather than prays ---- */
.label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rubric);
}
.label-quiet { color: var(--ink-soft); }

/* ---- the thin masthead on interior pages ---- */
.topbar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.4rem 1.5rem 0;
}
.topbar a {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.topbar a:hover { color: var(--rubric); }

header.masthead {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: center;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--hairline);
}
header.masthead h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 8.5vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.dedication {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0;
  text-wrap: balance;
}

/* ---- sections ---- */
section { padding-top: 3.2rem; }
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.85rem;
  line-height: 1.15;
  margin: 0.45rem 0 1.2rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.22rem;
  margin: 2rem 0 0.5rem;
}
p { margin: 0 0 1.05rem; }
p.lead { font-size: 1.06rem; }
a { color: var(--rubric); }

/* ---------------------------------------------------------------------
   Landing page: a table of contents, the way a prayer book opens.

   Each entry carries its natural RHYTHM as its rubric (daily, weekly,
   every month or so). That is the actual point of a rule of life, and
   it is information rather than decoration; a reader can see the shape
   of the week before reading a word of the descriptions.
   --------------------------------------------------------------------- */
ol.contents { list-style: none; margin: 2.5rem 0 0; padding: 0; }
ol.contents > li { border-top: 1px solid var(--hairline); }
ol.contents > li:last-child { border-bottom: 1px solid var(--hairline); }

a.entry {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1rem;
  padding: 1.6rem 0.4rem 1.6rem 0;
  text-decoration: none;
  color: inherit;
  transition: background-color 140ms ease;
}
a.entry:hover, a.entry:focus-visible { background: var(--paper-sunk); }
a.entry .numeral {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--rubric);
  text-align: right;
  margin-top: 0.55rem;
  font-variant-numeric: tabular-nums;
}
a.entry .entry-title {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  display: block;
}
a.entry .entry-rhythm {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rubric);
  display: block;
  margin-bottom: 0.3rem;
}
a.entry .entry-blurb {
  color: var(--ink-soft);
  font-size: 0.98rem;
  display: block;
  margin-top: 0.3rem;
  text-wrap: pretty;
}

/* ---- the rosary diagram ---- */
figure.beads {
  margin: 2rem 0 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
figure.beads svg { width: 100%; max-width: 300px; height: auto; display: block; }
figcaption {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  max-width: 30rem;
}

/* ---- numbered walkthroughs ---- */
ol.walk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.45rem; }
ol.walk > li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.9rem; align-items: start; }
.marker {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rubric);
  background: var(--rubric-pale);
  border-radius: 999px;
  padding: 0.3rem 0;
  text-align: center;
  margin-top: 0.28rem;
  font-variant-numeric: tabular-nums;
}
.step-do {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rubric);
  display: block;
  margin-bottom: 0.18rem;
}
.step-say { margin: 0; }
.step-say + .step-say { margin-top: 0.6rem; }
.step-say em { color: var(--ink-soft); }

/* ---- grouped sets (mysteries, parts of the Mass, the four Gospels) ---- */
.set { border-top: 1px solid var(--hairline); padding-top: 1.8rem; margin-top: 2.4rem; }
.set:first-of-type { border-top: none; padding-top: 0; margin-top: 1.2rem; }
.set-head { display: flex; flex-direction: column; gap: 0.28rem; margin-bottom: 1.3rem; }
.set-head h3 { margin: 0; font-size: 1.5rem; }

ol.mysteries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
ol.mysteries > li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.85rem; }
.roman {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--rubric);
  text-align: right;
  margin-top: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.mystery-name { font-size: 1.06rem; font-weight: 500; display: block; }
.mystery-meta {
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: block;
  margin-top: 0.16rem;
}
.mystery-meta .fruit { color: var(--rubric); }

/* ---- prayers and anything quoted verbatim ---- */
.prayer { margin: 0 0 2rem; }
.prayer h3 { margin-top: 0; }
.prayer p, p.said {
  background: var(--paper-sunk);
  border-left: 2px solid var(--rubric);
  padding: 0.95rem 1.1rem;
  margin: 0;
  border-radius: 2px;
}

/* A call and its response, which is most of what you say at Mass. */
dl.responses { margin: 1.2rem 0 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; }
dl.responses div {
  border-left: 2px solid var(--hairline);
  padding-left: 0.95rem;
}
dl.responses dt {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}
dl.responses dd { margin: 0.1rem 0 0; font-weight: 500; }
dl.responses dd::before { content: "℟ "; color: var(--rubric); font-weight: 600; }

blockquote {
  margin: 1.6rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--hairline);
  font-style: italic;
  color: var(--ink-soft);
}
blockquote cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  color: var(--ink-soft);
}

/* Scripture references link out to the text at the USCCB, which is the
   translation read at Mass in the United States, so the words match what
   you hear on Sunday. Deliberately QUIET: twenty red links running down
   the Mysteries would turn a calm page into a link farm, so the reference
   keeps its own color and only the underline says it is a link. */
a.ref {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a.ref:hover, a.ref:focus-visible {
  color: var(--rubric);
  text-decoration-color: var(--rubric);
}
@media print {
  /* On paper a link is just words, and the underline is noise. */
  a.ref { text-decoration: none; }
}

ul.plain { margin: 0 0 1.05rem; padding-left: 1.15rem; }
ul.plain li { margin-bottom: 0.45rem; }

footer.colophon {
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: italic;
}
footer.colophon a { color: var(--ink-soft); }

:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------------
   Print. Every page here is meant to survive being turned into a PDF
   and handed to somebody, so force the paper palette regardless of the
   viewer's theme and keep each set whole across a page break.
   --------------------------------------------------------------------- */
@media print {
  :root {
    --paper: #fff; --paper-sunk: #F6F3EE; --ink: #16120F; --ink-soft: #5A524A;
    --rubric: #9C1B16; --rubric-pale: #F2E3E1; --hairline: #DDD6CB;
  }
  body { font-size: 11.5pt; line-height: 1.5; background: #fff; }
  .sheet { max-width: 100%; padding: 0; }
  .topbar { display: none; }
  @page { margin: 16mm 18mm; }
  section { padding-top: 1.6rem; break-inside: avoid; }
  .set, .prayer, ol.walk > li { break-inside: avoid; }
  figure.beads svg { max-width: 200px; }
  .page-break { break-before: page; }
  a { text-decoration: none; }
}

/* ---------------------------------------------------------------------
   THE RECORD

   Kept visually quieter than the reading matter. It is an instrument on
   a page whose real content is the text, so it reads as a margin note
   rather than a dashboard; the moment it starts to look like a habit app
   it competes with the thing it is meant to support.
   --------------------------------------------------------------------- */
.record-card {
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--paper-sunk);
  padding: 1.1rem 1.15rem 0.9rem;
  margin: 2rem 0 0;
}
.record-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.record-count {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.record-steps { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.85rem; }
.record-step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  /* 44px is the smallest target a thumb hits reliably, and this is a
     phone-first surface tapped one-handed. */
  min-height: 44px;
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.record-step:hover { background: var(--paper); border-color: var(--hairline); }
.record-step .tick {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1.5px solid var(--hairline);
  border-radius: 50%;
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  color: transparent;
}
.record-step.done .tick { border-color: var(--rubric); background: var(--rubric); color: #fff; }
.record-label { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; min-width: 0; }
.record-step-name { font-size: 1rem; }
.record-step.done .record-step-name { color: var(--ink-soft); }
.record-when {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.record-note {
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0.85rem 0 0;
}

/* ---- landing page summary ---- */
.record-summary { display: flex; flex-direction: column; margin-top: 0.9rem; }
.record-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 44px;
  padding: 0.5rem 0.15rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--hairline);
}
.record-row:last-child { border-bottom: none; }
.record-row-title { font-size: 1.02rem; }
.record-row-state {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-align: right;
  min-width: 5.6rem;
  font-variant-numeric: tabular-nums;
}
.dots { display: inline-flex; gap: 4px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  display: inline-block;
}
.dot.on { background: var(--rubric); border-color: var(--rubric); }

/* ---- the second layer, announced from the first visit ---- */
.layer-two {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--ink-soft);
  border-radius: 3px;
  padding: 1.2rem 1.2rem 1.1rem;
  margin-top: 1.6rem;
}
.layer-two.open { border-left-color: var(--rubric); background: var(--paper-sunk); }
.layer-two h3 { margin: 0.35rem 0 0.5rem; font-size: 1.3rem; }
.layer-two-blurb { margin: 0 0 0.7rem; color: var(--ink-soft); font-size: 0.98rem; }
.layer-two-req { margin: 0 0 0.6rem; font-size: 0.95rem; }
.layer-two-count {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--rubric);
  margin: 0;
}
.layer-two-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.layer-two-link {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rubric);
  border: 1px solid var(--rubric);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.layer-two-link:hover { background: var(--rubric); color: var(--paper); }

/* ---- the note at the top of a second-layer page reached early ---- */
.gate {
  border: 1px dashed var(--hairline);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 2rem;
  background: var(--paper-sunk);
}
.gate p { margin: 0.4rem 0 0.7rem; color: var(--ink-soft); font-size: 0.98rem; }
.gate a { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- export, restore, reset ---- */
.tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.tool-btn {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.tool-btn:hover { border-color: var(--rubric); color: var(--rubric); }
.tool-btn.quiet { color: var(--ink-soft); }

@media print {
  /* The record is an instrument, not part of the document. A printed page
     handed to somebody should be the text and nothing else. */
  .record-card, .layer-two, .gate, .tools, [data-tools], [data-summary] { display: none; }
}

/* ---------------------------------------------------------------------
   CONTACT FORM
   --------------------------------------------------------------------- */
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.6rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rubric);
}
.field .optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 0.7rem 0.8rem;
  min-height: 44px;
  width: 100%;
}
.field textarea { line-height: 1.55; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--rubric);
  outline-offset: 1px;
  border-color: var(--rubric);
}
/* The honeypot: off-screen rather than display:none, which some bots skip. */
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.send-btn, .card-btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 46px;
  padding: 0.7rem 1.5rem;
  background: var(--rubric);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  align-self: flex-start;
}
.send-btn:disabled, .card-btn:disabled { opacity: 0.6; cursor: default; }
.form-status {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
  color: var(--ink-soft);
}
.form-status.warn { color: var(--rubric); }
.form-status.good { color: #1e7f3b; }

/* ---------------------------------------------------------------------
   EXAMINATION OF CONSCIENCE

   🔴 NOTHING HERE IS EVER STORED. Not in localStorage beside the progress
   record, not anywhere. It lives in memory and is gone the moment the page
   is reloaded, which is deliberate and is stated on the page: a list of a
   person's sins is the one thing this site must never keep, including on
   the reader's own phone where somebody else might pick it up.
   --------------------------------------------------------------------- */
.exam-group { margin-top: 1.8rem; }
.exam-group h3 { margin-bottom: 0.3rem; }
.exam-group .exam-hint {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}
.exam-list { display: flex; flex-direction: column; gap: 0.25rem; }
.exam-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.6rem 0.55rem 0.4rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 1.45;
}
.exam-item:hover { background: var(--paper-sunk); }
.exam-item .box {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--hairline);
  border-radius: 3px;
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: transparent;
}
.exam-item.on .box { border-color: var(--rubric); background: var(--rubric); color: #fff; }
.exam-item.on { color: var(--ink); }

.exam-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.8rem; }
.exam-count {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- the card it produces ---- */
.card-sheet {
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--rubric);
  border-radius: 3px;
  background: var(--paper-sunk);
  padding: 1.5rem 1.4rem;
  margin-top: 2rem;
}
.card-sheet h3 { margin-top: 0; }
.card-say {
  background: var(--paper);
  border-left: 2px solid var(--rubric);
  padding: 0.85rem 1rem;
  border-radius: 2px;
  margin: 0 0 1rem;
}
.card-sins { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.card-sins li {
  padding: 0.45rem 0 0.45rem 1.2rem;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  line-height: 1.45;
}
.card-sins li:last-child { border-bottom: none; }
.card-sins li::before {
  content: "·";
  position: absolute; left: 0.35rem;
  color: var(--rubric);
  font-weight: 700;
}
.card-since {
  font-family: var(--serif);
  font-size: 1rem;
  border: none;
  border-bottom: 1px solid var(--rubric);
  background: transparent;
  color: var(--ink);
  padding: 0 0.3rem;
  min-width: 9rem;
}
.card-since:focus { outline: 2px solid var(--rubric); outline-offset: 2px; }

@media print {
  /* Printing the card prints the CARD. Everything else on this long page
     is instructions you have already read, and a person taking this into a
     confessional wants one page, not nine. */
  body.card-open .sheet > *:not(#confession-card) { display: none !important; }
  body.card-open #confession-card { display: block !important; margin: 0; border: none; background: #fff; padding: 0; }
  body.card-open .card-actions { display: none !important; }
  body.card-open .card-say { background: #fff; }
}

.colophon p { margin: 0 0 0.6rem; }
.colophon-sep { margin: 0 0.5rem; color: var(--hairline); }
.colophon a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  text-decoration: none;
}
.colophon a:hover { color: var(--rubric); }

/* ---------------------------------------------------------------------
   THE COVER

   The one screen on the site with its own committed palette: the church
   interior, dark and gold. Everything behind the door is paper and ink, and
   the contrast is deliberate rather than an inconsistency; a book does not
   look like its cover.

   Single-theme on purpose, so no dark-mode block. It still paints its own
   background and every colour explicitly, so it holds on either host ground.
   --------------------------------------------------------------------- */
body.cover {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;          /* dvh, so mobile browser chrome cannot crop it */
  background: #0E0B08;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On a phone the poster is the whole screen. On anything wider it becomes a
   centred panel rather than a stretched background, because the artwork is
   nearly square and stretching it edge to edge on a desktop would crop the
   angels out of their own picture. */
.poster {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
@media (min-width: 620px) and (min-height: 720px) {
  .poster {
    min-height: min(92dvh, 860px);
    border-radius: 4px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  }
}

.poster-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The artwork is padded to 2:3 in the file itself, so on a phone it very
     nearly fits and almost nothing is cropped; the angels stay in frame. */
  object-position: center top;
  z-index: -2;
}

/* The artwork fades to near-black at the bottom already; this deepens it just
   enough that the type sits on a field rather than on vestment detail. */
.poster-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(14,11,8,0) 42%,
    rgba(14,11,8,0.72) 66%,
    rgba(14,11,8,0.94) 84%,
    #0E0B08 100%
  );
}

.poster-text {
  position: relative;
  padding: 0 1.6rem 3rem;
  text-align: center;
}

.poster-title {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 13vw, 3.9rem);
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0;
  color: #F2E2BC;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.poster-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 1.2rem 0 1.1rem;
}
/* Hairlines that fade out at their far ends, so the ornament sits in the
   page rather than being ruled off from it. */
.poster-rule-line {
  height: 1px;
  width: clamp(2.2rem, 12vw, 4.5rem);
  background: linear-gradient(to right, rgba(201,164,92,0), rgba(201,164,92,0.75));
}
.poster-rule-line:last-child {
  background: linear-gradient(to left, rgba(201,164,92,0), rgba(201,164,92,0.75));
}
.poster-cross {
  width: 13px;
  height: 17px;
  flex: 0 0 auto;
  stroke: #C9A45C;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.poster-motto {
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 2;
  color: #DCC9A0;
  margin: 0;
}

.poster-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 200px;
  margin-top: 2rem;
  padding: 0.85rem 2.6rem;
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: #F2E2BC;
  border: 1px solid rgba(201,164,92,0.65);
  border-radius: 3px;
  background: rgba(14,11,8,0.35);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.poster-enter:hover, .poster-enter:focus-visible {
  background: rgba(201,164,92,0.16);
  border-color: #C9A45C;
  color: #FFF4DC;
}
body.cover :focus-visible { outline: 2px solid #C9A45C; outline-offset: 3px; }

/* One quiet entrance: the light, then the words. Anything more would be a
   website performing, and this should feel like opening a book. */
@media (prefers-reduced-motion: no-preference) {
  .poster-text > * { animation: cover-in 900ms ease-out both; }
  .poster-title { animation-delay: 120ms; }
  .poster-rule  { animation-delay: 300ms; }
  .poster-motto { animation-delay: 420ms; }
  .poster-enter { animation-delay: 620ms; }
}
@keyframes cover-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   TURNING THE PAGE

   Cross-document view transitions, so moving between pages reads as a leaf
   turning in a missal rather than a screen being replaced. The outgoing page
   swings away about its inner edge with a shadow falling across it; the page
   beneath is already there, which is exactly what a book does.

   Direction is real: going deeper turns forward, coming back turns back.
   Without that the animation would fight the gesture, and a book that turned
   the same way whichever way you went would feel wrong before you could say
   why.

   Degrades to an ordinary navigation where the API is missing (Firefox at
   time of writing), which costs nothing but the flourish. Suppressed
   entirely under prefers-reduced-motion, since this is a large moving
   surface and that is precisely what the setting is for.
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition { perspective: 2000px; }
  ::view-transition-image-pair(root) { transform-style: preserve-3d; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
    backface-visibility: hidden;
  }

  /* forward: the leaf lifts from the right and swings left */
  html:active-view-transition-type(forward)::view-transition-old(root) {
    transform-origin: left center;
    animation: leaf-away 720ms cubic-bezier(0.36, 0, 0.2, 1) both;
    z-index: 2;
  }
  html:active-view-transition-type(forward)::view-transition-new(root) {
    animation: leaf-under 720ms ease-out both;
    z-index: 1;
  }

  /* back: the same leaf comes down again from the left */
  html:active-view-transition-type(back)::view-transition-new(root) {
    transform-origin: left center;
    animation: leaf-back 720ms cubic-bezier(0.36, 0, 0.2, 1) both;
    z-index: 2;
  }
  html:active-view-transition-type(back)::view-transition-old(root) {
    animation: leaf-under 720ms ease-out both;
    z-index: 1;
  }

  /* If the browser gives us no type, still turn rather than cross-fade. */
  html:not(:active-view-transition-type(back))::view-transition-old(root) {
    transform-origin: left center;
    animation: leaf-away 720ms cubic-bezier(0.36, 0, 0.2, 1) both;
    z-index: 2;
  }
}

@keyframes leaf-away {
  from { transform: rotateY(0deg);   filter: brightness(1); }
  60%  {                             filter: brightness(0.86); }
  to   { transform: rotateY(-96deg); filter: brightness(0.7); }
}
@keyframes leaf-back {
  from { transform: rotateY(-96deg); filter: brightness(0.7); }
  to   { transform: rotateY(0deg);   filter: brightness(1); }
}
/* The page underneath does not move; it only settles, the way the next leaf
   of a book is already lying there before you lift the one on top of it. */
@keyframes leaf-under {
  from { opacity: 0.82; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------------
   A heading block that is itself the link (the Gospels page).

   The book name alone was a small target for a thumb, so the whole block
   carries the link: the chapter count, the title and the summary line. Safe
   only because every one of those blocks contains exactly one link; a block
   holding two would nest anchors, which is invalid and unclickable.
   --------------------------------------------------------------------- */
a.set-head-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  border-radius: 3px;
  margin: -0.5rem -0.6rem 0.8rem;
  padding: 0.5rem 0.6rem;
  transition: background-color 140ms ease;
}
a.set-head-link:hover,
a.set-head-link:focus-visible { background: var(--paper-sunk); }
/* The title still carries the underline, so it still reads as the link even
   though the whole block is one. */
a.set-head-link h3 {
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a.set-head-link:hover h3 { color: var(--rubric); text-decoration-color: var(--rubric); }
@media print { a.set-head-link h3 { text-decoration: none; } }