/* ============================================================
   prayers.css — rules from styles.css used by one page, /prayers.
   They were moved here so that no other page downloads them; their
   order, and the comments that went with them, are as they were.
   The page's own rules follow, below the second rule.
   ============================================================ */

/* Andrea Mantegna, The Agony in the Garden (c. 1455–1456, National Gallery,
   London) — Christ kneeling on the rock, the five putti above him bearing the
   column, the cross, the sponge and the lance; Peter, James and John asleep at
   the foot of it; Judas already on the road down from Jerusalem with the
   soldiers behind him. It is a picture of praying rather than of a saint who
   prayed — the asking, the answer held out in the instruments, and the three
   who were told to keep watch and slept — which is why it stands over this
   page rather than over a devotion.

   It bleeds edge to edge like every other head on the site: `cover`, with the
   component's -2%/1.025 overscan, so the band never reads as a contained
   panel hung between two dark strips. The crop is held at 20% down, which
   keeps Christ's head and the putti above him in frame on a wide screen,
   where the band is cut top and bottom — 35% lost his head past 1600px wide,
   where the plate is enlarged most; on a phone the band is cut at the
   sides instead, and 38% across keeps him in it rather than centring on the
   walled city. The band keeps the panel's own proportion — 72vw is 640/887,
   the aspect of the file — up to a ceiling of 640px.

   The file is 887px wide, so above that width the painting is enlarged past
   what the plate holds and goes slightly soft. A larger scan of the same
   picture under the same filename would sharpen it with no change here.

   The veil is opened far below the shared default, and the contrast bought
   back only where it is needed — the same trade .lent-pagehead makes, from the
   opposite direction. Measured across the middle band, the plate runs about
   0.08 mean linear luminance: a blue-sky picture on paper, but a dark one in
   reproduction, closer to the Mass nave than to Ciseri's marble. The shared
   .62 opening takes it to an undifferentiated brown, which on the one head
   built to show a painting whole would be self-defeating. So the veil runs
   .24 → .32 through the top two thirds, where the putti, the walled city and
   the road out of it are, and only reaches .76 at the foot, where the band has
   to meet the paper of the page below.

   What that leaves is not an average problem but a local one: the panel's
   bright places are small and scattered — the cloud under the angels, the
   limestone walls, the rose robe of the nearest sleeper — and the top 1% of
   pixels behind the title run to 0.53, which a flat scrim light enough to keep
   the picture cannot hold. A soft vignette behind the text column alone does
   it instead. Across the type the title holds about 11:1 and the 11px kicker —
   the smallest thing in the band and the binding constraint — about 5.8:1
   against the paint actually behind them, better than 3:1 even over the
   brightest specks, while the painting either side of the column keeps about
   two thirds of its light.

   The type is centred in the band rather than sitting at the top of it, so the
   picture breathes above and below the title instead of only below it. */
.prayers-head{
  --pagehead-image:url("images/prayers-masthead.webp");
  --pagehead-position:center 20%;
  --pagehead-position-mobile:38% 30%;
  --pagehead-veil:linear-gradient(180deg,rgba(26,18,11,.24) 0%,rgba(26,18,11,.32) 62%,rgba(26,18,11,.76) 100%);
  min-height:min(72vw,640px);
  display:flex;flex-direction:column;justify-content:center;
}

/* ── prayers.css — the page's own rules ── */

/* ============================================================
   /prayers — the page as a book of hours, and the prayer-book builder.

   Loaded by prayers.html alone. The classes it restyles (.prayer-card,
   .prayer-title, .prayer-text, .prayer-note, .prayer-verse) are shared with
   a dozen other pages, so every rule here is held under .pb, the class on
   this page's .prayers-body, or names a pb- class only this page carries.
   Colours are the tokens in styles.css; nothing new.

   Contrast. --gold is 3.6:1 on --paper, below AA for small type, so it is
   used here only where the type is large or decorative (drop caps, section
   numerals, ornaments, the checkbox square) and --gold-deep (5.1:1) carries
   the small type that means something: the ℣/℟ marks, the incipits, the
   rubrics, the current section in the index.
   ============================================================ */

/* Anchors clear the sticky nav, and below 1080px the Contents bar too. */
html{scroll-padding-top:calc(var(--nav-h) + 24px);}
@media(max-width:1079px){html{scroll-padding-top:calc(var(--nav-h) + 72px);}}

.pb{padding:28px 0 48px;}
.pb :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.pb-layout{max-width:var(--wide);margin:0 auto;padding:0 20px;}
@media(min-width:641px){.pb-layout{padding:0 32px;}}

/* The prayers sit on a white leaf, like the page of a missal laid on the
   parchment. The leaf is the 560px measure plus its own margins, so the
   text keeps its width; on a phone it runs edge to edge instead. */
.pb-main{
  max-width:656px;margin:0 auto;counter-reset:pb-sec;min-width:0;
  padding:8px 48px 56px;background:#fff;border:1px solid var(--rule);
}
@media(max-width:640px){
  .pb-main{margin:0 -20px;padding:4px 20px 40px;border-left:0;border-right:0;}
}

/* ───────────────── THE INDEX ─────────────────
   Static markup: a plain list at the head of the prayers when scripting is
   off. prayers.js adds .is-enhanced, which turns it into the sticky left
   column on a desktop and the "Contents ▾" bar beneath the nav below 1080px. */
.pb-index{margin:0 0 8px;}
.pb .pb-index-kicker{display:block;margin:0 0 14px;color:var(--gold-deep);font-size:13px;font-weight:700;}
.pb-index-list{list-style:none;margin:0;padding:0;}
.pb-index-list li{border-bottom:1px solid var(--rule);}
.pb-index-list li:last-child{border-bottom:none;}
.pb-index-list a{
  display:block;position:relative;padding:9px 0 9px 16px;
  font-family:var(--display);font-size:13px;letter-spacing:.06em;line-height:1.4;
  color:var(--muted);
}
.pb-index-list a::before{
  content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;
  border:1px solid var(--rule);transform:rotate(45deg);transition:background .2s,border-color .2s;
}
.pb-index-list a:hover{color:var(--gold-deep);}
.pb-index-list a[aria-current="true"]{color:var(--gold-deep);font-weight:600;}
.pb-index-list a[aria-current="true"]::before{background:var(--gold);border-color:var(--gold);}
.pb-index-count{color:var(--muted);font-weight:400;white-space:nowrap;}
.pb-index-devotions{margin:20px 0 0;}
.pb-index-devotions .readmore{font-size:11px;letter-spacing:.14em;line-height:1.6;display:inline;}

/* Language and selection controls, added by prayers.js. */
/* Latin · English · Both: a rounded segmented switch. The three choices sit
   in a parchment track; the one in force is a filled gold-deep pill. */
.pb-lang{
  display:flex;gap:3px;margin:0 0 20px;padding:3px;min-width:0;
  border:1px solid var(--rule);border-radius:999px;background:var(--paper-card);
  box-shadow:inset 0 1px 2px rgba(26,18,11,.06);
}
.pb-lang legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.pb-lang label{flex:1;position:relative;cursor:pointer;min-width:0;}
.pb-lang input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.pb-lang span{
  display:block;text-align:center;padding:9px 6px;border-radius:999px;
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1.2;
  color:var(--muted);transition:background .2s,color .2s,box-shadow .2s;
}
.pb-lang label:hover span{color:var(--gold-deep);background:rgba(201,168,90,.16);}
.pb-lang input:checked + span{
  background:var(--gold-deep);color:var(--paper);
  box-shadow:0 1px 3px rgba(26,18,11,.28);
}
.pb-lang input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){.pb-lang span{transition:none;}}

.pb-index-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:-6px 0 12px;}

/* "Select all · Clear": a small-caps text link, at the head of the index and
   in the builder bar. --gold-deep on the parchment, --champagne on espresso. */
.pb-sclink{
  background:none;border:0;padding:4px 0;min-height:32px;cursor:pointer;
  font-family:var(--body);font-size:16px;font-variant-caps:small-caps;letter-spacing:.06em;line-height:1.2;
  color:var(--gold-deep);
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;
}
.pb-sclink:hover{color:var(--ink);text-decoration-color:currentColor;}
.pb-sclink:disabled{color:var(--muted);text-decoration:none;cursor:default;}
.pb-sclink-sep{color:var(--muted);}

/* A button that reads as a quiet text link. */
.pb-textbtn{
  background:none;border:0;padding:6px 0;min-height:32px;cursor:pointer;
  font-family:var(--display);font-size:12px;letter-spacing:.08em;color:var(--gold-deep);
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;
}
.pb-textbtn:hover{color:var(--gold);text-decoration-color:currentColor;}
.pb-textbtn:disabled{color:var(--muted);text-decoration:none;cursor:default;}

/* Desktop: a sticky column to the left of a 560px measure. */
@media(min-width:1080px){
  .pb-layout{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:56px;align-items:start;}
  .pb-main{margin:0;}
  /* The index never scrolls as a whole, so "Select all · Clear" and the
     language switch stay in view; only the list of sections scrolls, inside
     the height left to it, and without a scrollbar of its own. A soft fade
     at either end says there is more (.is-more-above / .is-more-below). */
  .pb-index{
    position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;
    max-height:calc(100vh - var(--nav-h) - 48px);display:flex;flex-direction:column;
    padding:44px 4px 16px 0;margin:0;
  }
  .pb-index-panel{display:flex;flex-direction:column;min-height:0;flex:0 1 auto;}
  .pb-index-panel > *{flex:none;}
  .pb-index-panel > nav{display:flex;flex-direction:column;min-height:0;flex:0 1 auto;}
  .pb-index-list{
    min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Room for the links' focus outlines inside the scrolling box. */
    padding:4px;margin:-4px;
  }
  .pb-index-list::-webkit-scrollbar{display:none;}
  .pb-index-list.is-more-below{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent);}
  .pb-index-list.is-more-above{-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px);}
  .pb-index-list.is-more-above.is-more-below{-webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);}
  .pb-index-toggle{display:none !important;}
}

/* Below 1080px: the "Contents ▾" bar under the nav, opening a sheet. */
@media(max-width:1079px){
  .pb-index{padding:0 0 18px;border-bottom:1px solid var(--rule);margin-bottom:12px;}
  .pb-index.is-enhanced{
    position:sticky;top:var(--nav-h);z-index:45;
    margin:-28px -20px 12px;padding:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
  }
  .pb-index-toggle{
    display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 20px;
    background:none;border:0;cursor:pointer;text-align:left;
    font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--gold-deep);
  }
  .pb-index-toggle[hidden]{display:none;}
  .pb-index-toggle-label{flex:none;}
  .pb-index-toggle[aria-expanded="true"] .pb-index-toggle-label [aria-hidden]{display:inline-block;transform:rotate(180deg);}
  .pb-index-current{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;
    font-family:var(--head);font-style:italic;font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted);
  }
  .pb-index.is-enhanced .pb-index-panel{
    display:none;position:absolute;left:0;right:0;top:100%;
    max-height:calc(100vh - var(--nav-h) - 64px);max-height:calc(100dvh - var(--nav-h) - 64px);
    overflow-y:auto;overscroll-behavior:contain;
    padding:20px 20px 24px;background:var(--paper-card);
    border-bottom:1px solid var(--rule);box-shadow:0 14px 28px rgba(26,18,11,.14);
  }
  .pb-index.is-enhanced.is-open .pb-index-panel{display:block;}
  .pb-index.is-enhanced .pb-index-kicker{display:none;}
}
@media(min-width:641px) and (max-width:1079px){
  .pb-index.is-enhanced{margin-left:-32px;margin-right:-32px;}
  .pb-index-toggle{padding:0 32px;}
  .pb-index.is-enhanced .pb-index-panel{padding:24px 32px 28px;}
}

/* ───────────────── SECTION OPENERS ───────────────── */
.pb-section{counter-increment:pb-sec;}
.pb-opener{text-align:center;margin:72px 0 32px;}
.pb-section:first-child .pb-opener{margin-top:40px;}
.pb .pb-opener .prayer-section-heading{
  font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:500;
  letter-spacing:.04em;line-height:1.2;color:var(--ink);text-align:center;margin:0;
}
.pb .pb-opener .prayer-section-heading::before{
  content:counter(pb-sec,upper-roman);
  content:counter(pb-sec,upper-roman) / "";
  display:block;margin:0 0 14px;
  font-size:13px;font-weight:600;letter-spacing:.32em;color:var(--gold);
}
.pb-section-desc{
  font-family:var(--head);font-style:italic;font-size:19px;line-height:1.45;
  color:var(--muted);max-width:32em;margin:12px auto 0;text-wrap:balance;
}
.pb-opener .orn{margin:22px 0 0;}
.pb-opener .pb-textbtn{margin-top:10px;}

/* ───────────────── THE PRAYERS ───────────────── */
.pb .prayer-card{position:relative;margin:0;padding:0;border-bottom:none;}
/* A centred star between prayers, in place of the old full-width rule. */
.pb .prayer-card:has(+ .prayer-card)::after,
.pb .pb-intention:has(+ .prayer-card)::after{
  content:"✦";display:block;text-align:center;
  font-size:24px;line-height:1;color:var(--gold);margin:40px 0;
}

.pb .prayer-title{
  font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.06em;
  line-height:1.35;color:var(--ink);text-align:left;margin:0;
}
.pb .prayer-title::after{content:"";display:block;width:48px;height:1px;background:var(--champagne);margin-top:12px;}
.pb .prayer-title em{font-style:normal;}

.pb .prayer-card > .prayer-title + :not(.pb-tools){margin-top:18px;}

.pb .prayer-text,
.pb .prayer-verse{
  font-family:var(--body);font-style:normal;font-size:18px;line-height:1.65;
  color:var(--ink);text-align:left;hyphens:manual;max-width:560px;
}
.pb .prayer-text{margin:0 0 14px;}
.pb .prayer-text:last-child{margin-bottom:0;}
.pb .prayer-verse p{margin:0;}
.pb .prayer-verse p.stanza{margin-top:1em;}
/* Litany responses and the Gloria's answering lines sit indented under
   their invocation; "(please bow)" in the Creed is a rubric within a line. */
.pb .prayer-verse p.indent{padding-left:1.6em;}
.pb .rubric-inline{font-size:15px;color:var(--gold-deep);}

/* A quotation that opens or closes a section. */
.pb-epigraph{margin:22px auto 0;max-width:30em;text-align:center;}
.pb-epigraph p{font-family:var(--head);font-style:italic;font-size:19px;line-height:1.45;color:var(--ink);}
.pb-epigraph cite{display:block;margin-top:6px;font-family:var(--display);font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--gold-deep);}
.pb-epigraph-close{margin-top:48px;}
.pb .prayer-verse em{font-style:italic;}
.pb .prayer-text strong,
.pb .prayer-verse strong{font-weight:500;}

/* The incipit, and the closing Amen, in small capitals rather than bold. */
.pb .incipit{font-weight:400;font-variant-caps:small-caps;letter-spacing:.04em;color:var(--gold-deep);}
.pb .amen{font-weight:400;font-variant-caps:small-caps;letter-spacing:.04em;}

/* Rubrics: the italic notes, novena lines and attributions. */
.pb .rubric{
  font-family:var(--body);font-style:italic;font-size:15px;line-height:1.55;
  color:var(--gold-deep);text-align:left;margin:0 0 14px;max-width:560px;
}
.pb .rubric:last-child{margin-bottom:0;}
.pb .prayer-text + .rubric,
.pb .prayer-verse + .rubric{margin-top:14px;}
.pb .rubric strong{font-weight:500;font-style:normal;}

/* ℣. and ℟. in a hanging column. The source keeps "V." and "R." — that is
   what is copied, searched and read aloud — and the response mark is drawn
   over it. */
.pb .dlg{padding-left:1.6em;text-indent:-1.6em;}
.pb .vr{
  display:inline-block;width:1.6em;text-indent:0;position:relative;
  font-weight:400;color:transparent;
}
.pb .vr::after{position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:500;}
.pb .vr-v::after{content:"℣.";content:"℣." / "";}
.pb .vr-r::after{content:"℟.";content:"℟." / "";}

.pb .prayer-list li{font-size:18px;line-height:1.6;}

/* The Holy Father's intention for the month, beneath the Morning Offering that
   names it. A ruled note rather than a prayer: it is an aside, not a
   .prayer-card, so it carries no tools and the prayer book leaves it out. The
   star between prayers moves below it. Written by
   scripts/build-papal-intention.mjs; see papal-intention.js. */
.pb-intention{
  margin:26px 0 0;padding:4px 0 4px 18px;max-width:560px;
  border-left:2px solid var(--champagne);
}
.pb-intention-label{
  margin:0;
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
}
.pb-intention-title{
  margin:8px 0 0;
  font-family:var(--head);font-style:italic;font-size:21px;line-height:1.3;color:var(--ink);
}
.pb-intention-text{
  margin:6px 0 0;
  font-family:var(--body);font-size:16.5px;line-height:1.6;color:var(--ink);
}
.pb-intention-more{margin:10px 0 0;font-family:var(--body);font-size:15.5px;}
.pb-intention-more a{
  color:var(--gold-deep);
  text-decoration:underline;text-decoration-color:rgba(125,98,36,.4);text-underline-offset:3px;
}
.pb-intention-more a:hover{text-decoration-color:currentColor;}
@media print{.pb-intention{display:none;}}

/* A drop cap opens each section, as on the essays (.prose p.first). */
.pb .pb-section > .prayer-card:first-of-type > p.prayer-text:first-of-type::first-letter,
.pb .pb-section > .prayer-card:first-of-type > .prayer-verse > p:first-child::first-letter{
  font-family:var(--display);font-weight:700;float:left;font-size:74px;line-height:.74;
  padding:8px 12px 0 0;color:var(--gold);font-variant-caps:normal;
}
@media(max-width:560px){
  .pb .pb-section > .prayer-card:first-of-type > p.prayer-text:first-of-type::first-letter,
  .pb .pb-section > .prayer-card:first-of-type > .prayer-verse > p:first-child::first-letter{font-size:60px;}
}

.pb-colophon-orn{margin:72px 0 20px;}

/* ───────────────── LATIN ─────────────────
   Absent attribute = scripting off: the Latin follows the English, as the
   page's three Latin notes always did. The head script sets the attribute. */
.pb .prayer-latin{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);}
/* EB Garamond carries a Latin locale form that sets every u as v
   ("nvntiavit"). The texts are printed with u in the missals; keep it. */
.pb [lang="la"]{font-feature-settings:"locl" 0;font-language-override:"ENG";}
.pb .prayer-latin::before{
  content:"Latine";display:block;margin:0 0 10px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--gold-deep);
}
html[data-prayer-lang="english"] .pb .prayer-latin{display:none;}
html[data-prayer-lang="latin"] .pb .prayer-card.has-latin > :not(.prayer-title):not(.pb-tools):not(.prayer-latin){display:none;}
html[data-prayer-lang="latin"] .pb .prayer-latin{margin-top:18px;padding-top:0;border-top:none;}
html[data-prayer-lang="latin"] .pb .prayer-latin::before{content:none;}
/* The drop cap moves to the Latin when it is the only text shown. */
html[data-prayer-lang="latin"] .pb .pb-section > .prayer-card:first-of-type > .prayer-latin > p.prayer-text:first-of-type::first-letter,
html[data-prayer-lang="latin"] .pb .pb-section > .prayer-card:first-of-type > .prayer-latin > .prayer-verse > p:first-child::first-letter{
  font-family:var(--display);font-weight:700;float:left;font-size:74px;line-height:.74;
  padding:8px 12px 0 0;color:var(--gold);font-variant-caps:normal;
}

/* Both, side by side: Latin left, English right, each paragraph level with
   its counterpart. The card becomes a two-column grid; the wrappers dissolve
   (display:contents) so every paragraph is a grid item, and dense packing
   drops the Nth Latin paragraph into the row of the Nth English one. */
@media(min-width:900px){
  html[data-prayer-lang="both"] .pb-main{max-width:956px;}
  html[data-prayer-lang="both"] .pb-main > .pb-section > .prayer-card:not(.has-latin),
  html[data-prayer-lang="both"] .pb-main > .pb-section > .pb-intention,
  html[data-prayer-lang="both"] .pb-main > .pb-section > .pb-opener,
  html[data-prayer-lang="both"] .pb-main > .colophon{max-width:560px;}
  html[data-prayer-lang="both"] .pb-main > .pb-section > .pb-opener{margin-left:auto;margin-right:auto;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;
    grid-auto-flow:row dense;align-items:start;
  }
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > *{grid-column:2;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .rubric,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-title,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .pb-tools,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin::after{grid-column:1 / -1;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-verse,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin > .prayer-verse{display:contents;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-verse > *{grid-column:2;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin > *,
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-latin > .prayer-verse > *{grid-column:1;}
  html[data-prayer-lang="both"] .pb .prayer-latin::before{content:none;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin > .prayer-title + *{margin-top:0;}
  html[data-prayer-lang="both"] .pb .prayer-card.has-latin .prayer-text:last-child{margin-bottom:14px;}
  /* Side by side, both columns open with the same drop cap, so their first
     lines stand level (the Anima Christi, the Salve Regina, the Pater). */
  html[data-prayer-lang="both"] .pb .pb-section > .prayer-card.has-latin:first-of-type > .prayer-latin > p.prayer-text:first-of-type::first-letter,
  html[data-prayer-lang="both"] .pb .pb-section > .prayer-card.has-latin:first-of-type > .prayer-latin > .prayer-verse > p:first-child::first-letter{
    font-family:var(--display);font-weight:700;float:left;font-size:74px;line-height:.74;
    padding:8px 12px 0 0;color:var(--gold);font-variant-caps:normal;
  }
}

/* ───────────────── TOOL ROW ─────────────────
   Quiet until wanted. The brief asked for 60% at rest; --muted at 60% falls
   to about 2.6:1, so the words rest at .88 (4.7:1, still AA) and only the
   separators and the empty square go to 60%. */
.pb-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:8px 0 14px;
  font-family:var(--display);font-size:12px;letter-spacing:.08em;color:var(--muted);
  opacity:.88;transition:opacity .2s;
}
.pb .prayer-card:hover .pb-tools,
.pb-tools:focus-within{opacity:1;}
.pb-tool-sep{opacity:.6;}
.pb-tool{
  background:none;border:0;padding:6px 0;min-height:32px;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:inherit;
}
.pb-tool:hover{color:var(--gold-deep);}
.pb-tool-done{color:var(--gold-deep);}

/* The checkbox: native input, invisible, over a drawn 18px square. */
.pb-check{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;}
.pb-check input{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:pointer;}
.pb-box{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:1px solid var(--gold);background:var(--paper-card);
  font-family:var(--body);font-size:15px;line-height:1;color:var(--gold-deep);
}
.pb-tools .pb-check input:not(:checked) + .pb-box{border-color:rgba(154,122,46,.6);}
.pb-check:hover .pb-box{border-color:var(--gold);}
.pb-check input:checked + .pb-box::after{content:"✓";}
.pb-check input:focus-visible + .pb-box{outline:2px solid var(--gold);outline-offset:2px;}
.pb-check input:checked ~ .pb-check-label{color:var(--gold-deep);}


/* ───────────────── BUILDER BAR ───────────────── */
.pb-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  width:calc(100% - 32px);max-width:880px;margin:0 auto;padding:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  background:var(--espresso);color:var(--paper);
  border-top:1px solid var(--rule-dark);border-radius:4px 4px 0 0;
  box-shadow:0 -10px 30px rgba(26,18,11,.22);
  transform:translateY(calc(100% + 24px));visibility:hidden;
  transition:transform .35s ease,visibility 0s linear .35s;
}
.pb-bar.is-visible{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s;}
.pb-bar-id{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0;}
.pb-bar-id img{width:auto;height:28px;flex:none;}
.pb-bar-title{font-family:var(--head);font-size:19px;line-height:1.25;color:var(--paper);margin:0;}
.pb-bar-count{color:var(--champagne);white-space:nowrap;}
.pb-bar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.pb-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;line-height:1.2;
  color:var(--paper);background:transparent;border:1px solid var(--rule-dark);border-radius:2px;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.pb-btn:hover{border-color:var(--champagne);color:var(--champagne);}
.pb-btn-primary{background:var(--champagne);border-color:var(--champagne);color:var(--espresso);}
.pb-btn-primary:hover{background:var(--paper);border-color:var(--paper);color:var(--espresso);}
.pb-btn-quiet{border-color:transparent;color:var(--champagne);padding-left:8px;padding-right:8px;}
.pb-bar .pb-sclink,.pb-pill .pb-sclink{color:var(--champagne);text-decoration-color:var(--rule-dark);padding-left:4px;padding-right:4px;}
.pb-bar .pb-sclink:hover,.pb-pill .pb-sclink:hover{color:var(--paper);text-decoration-color:currentColor;}
.pb-bar-all{
  padding:4px;font-family:var(--body);font-size:16px;font-variant-caps:small-caps;letter-spacing:.06em;
  color:var(--muted-dark);white-space:nowrap;
}
.pb-bar-all[hidden],.pb-bar .pb-sclink[hidden]{display:none;}
.pb-bar-all:focus{outline:none;}
/* × folds the bar into the pill; the selection stays. */
.pb-bar-hide{
  width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;margin-left:4px;
  background:none;border:1px solid var(--rule-dark);border-radius:2px;color:var(--paper);font-size:22px;line-height:1;cursor:pointer;
}
.pb-bar-hide:hover{border-color:var(--champagne);color:var(--champagne);}
.pb-bar :focus-visible,.pb-pill :focus-visible,.pb-modal :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.pb-bar :focus-visible,.pb-pill :focus-visible{outline-color:var(--champagne);}
@media(max-width:480px){
  .pb-bar{gap:12px;}
  .pb-bar-id{padding-right:44px;}
  .pb-bar-actions{width:100%;}
  .pb-bar-actions .pb-btn-primary{flex:1;}
  .pb-btn{padding:8px 10px;letter-spacing:.08em;}
  .pb-bar-hide{position:absolute;top:10px;right:10px;margin:0;}
}

/* ───────────────── THE PILL ─────────────────
   The bar folded away, bottom right: the lantern mark, the count, "Done". */
.pb-pill{
  position:fixed;right:16px;bottom:16px;z-index:55;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:4px;padding:4px 12px 4px 4px;
  background:var(--espresso);color:var(--paper);
  border:1px solid var(--rule-dark);border-radius:999px;
  box-shadow:0 8px 24px rgba(26,18,11,.28);cursor:pointer;
  transform:translateY(calc(100% + 24px));visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s;
}
.pb-pill.is-visible{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s;}
.pb-pill-open{
  display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:40px;padding:0 8px 0 10px;
  background:none;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--head);font-size:18px;line-height:1.2;color:var(--paper);text-align:left;
}
.pb-pill-open img{width:auto;height:22px;flex:none;}
.pb-pill-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pb-pill-count,.pb-pill-tick{color:var(--champagne);}
.pb-pill:hover{border-color:var(--champagne);}
@media(max-width:480px){
  .pb-pill{right:12px;bottom:12px;max-width:calc(100% - 24px);padding-right:8px;gap:0;}
  .pb-pill-open{gap:8px;padding:0 6px 0 8px;font-size:16px;}
  .pb-pill-open img{height:20px;}
}

/* "Your prayer book is ready": two seconds above the foot of the page. */
.pb-toast{
  position:fixed;left:50%;bottom:calc(var(--pb-bar-space,72px) + 4px);z-index:56;
  max-width:calc(100% - 32px);padding:10px 18px;
  background:var(--paper-card);color:var(--ink);border:1px solid var(--rule);border-radius:4px;
  box-shadow:0 8px 24px rgba(26,18,11,.18);
  font-family:var(--head);font-style:italic;font-size:18px;line-height:1.3;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;pointer-events:none;
}
.pb-toast.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s ease,transform .25s ease,visibility 0s;}

@media(prefers-reduced-motion:reduce){
  .pb-bar,.pb-bar.is-visible,.pb-pill,.pb-pill.is-visible,.pb-toast,.pb-toast.is-shown{transition:none;}
  .pb-tools{transition:none;}
}

/* Room at the foot of the page while the bar is up, so it never sits over
   the footer's liturgical-colour switch, and the back-to-top button rises
   clear of it. --pb-bar-space is set by prayers.js from the bar's height. */
body.pb-has-bar{padding-bottom:var(--pb-bar-space,120px);}
body.pb-has-bar .back-to-top{bottom:calc(var(--pb-bar-space,120px) + 12px);}
@media(max-width:760px){body.pb-has-bar .back-to-top{display:none;}}

/* ───────────────── PREVIEW MODAL ───────────────── */
.pb-modal{
  width:calc(100% - 32px);max-width:720px;height:90vh;max-height:90vh;
  margin:auto;padding:0;border:1px solid var(--rule);border-radius:4px;
  background:var(--paper-card);color:var(--ink);overflow:hidden;
}
.pb-modal[open]{display:flex;flex-direction:column;}
.pb-modal::backdrop{background:rgba(26,18,11,.62);}
.pb-modal-head{
  display:flex;align-items:center;gap:10px;padding:12px 12px 12px 20px;
  background:var(--espresso);color:var(--paper);
}
.pb-modal-title{flex:1;min-width:0;margin:0;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--paper);}
.pb-modal-close{
  width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule-dark);border-radius:2px;color:var(--paper);font-size:22px;line-height:1;cursor:pointer;
}
.pb-modal-close:hover{border-color:var(--champagne);color:var(--champagne);}
.pb-modal-head :focus-visible{outline-color:var(--champagne);}

.pb-opts{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;
  padding:12px 20px;border-bottom:1px solid var(--rule);margin:0;
}
.pb-opts legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.pb-opt{display:flex;flex-direction:column;gap:4px;}
.pb-opt-label{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--gold-deep);}
.pb-opts select,.pb-opts input[type="text"]{
  font-family:var(--body);font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:6px 8px;min-height:36px;
}
.pb-opts input[type="text"]{width:13em;max-width:100%;}
.pb-opts select:focus-visible,.pb-opts input[type="text"]:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.pb-opt-check{flex-direction:row;align-items:center;font-family:var(--body);font-size:16px;color:var(--ink);}
.pb-opt-check .pb-check{gap:8px;}
.pb-modal-frame{flex:1;min-height:0;width:100%;border:0;background:var(--rule);display:block;}
@media(max-width:560px){
  .pb-opts{padding:10px 16px;gap:8px 14px;}
  .pb-opt-text{flex:1 1 100%;}
  .pb-opts input[type="text"]{width:100%;}
  .pb-modal-head{padding-left:16px;}
  .pb-modal-title{font-size:12px;}
}

/* ───────────────── PRINTING THIS PAGE ─────────────────
   The book has its own page (/prayers/print); printing /prayers itself gives
   the prayers alone, in one column, with none of the controls. */
@media print{
  .pb-index,.pb-tools,.pb-opener .pb-textbtn,.pb-bar,.pb-pill,.pb-toast,.pb-modal,.pb-live,.back-to-top{display:none !important;}
  body.pb-has-bar{padding-bottom:0;}
  .pb-layout{display:block;padding:0;}
  .pb-main,html[data-prayer-lang="both"] .pb-main{max-width:none;margin:0;padding:0;border:0;background:none;}
  .pb .prayer-card{break-inside:avoid;}
  .pb .prayer-title{break-after:avoid;}
}