:root {
  --paper:        #FAF6EE;
  --paper-deep:   #F2EBDD;
  --ink:          #283125;
  --ink-soft:     #554F45;
  --ink-faint:    #6F6859;   /* darkened: the old value failed contrast at small sizes */
  --gold:         #B78B32;
  --gold-ink:     #8A6620;   /* dark enough for small text on parchment */
  --gold-soft:    #D8C69B;
  --rule:         #E0D6C2;
  --green:        #2E6B4F;
  --red:          #9B3226;
  --max:          42rem;
  --serif:  Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --sans:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { 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: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-color: var(--gold-soft); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--gold); }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

main .wrap > *, .hero .wrap > * { max-width: var(--max); }
.wrap-wide { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-head .wrap-wide {
  /* wider than the article column: the reading measure stays at 64rem, but the
     bar itself needs 72 to keep eight links on one row beside the logo. At 64
     the logo dropped to a line of its own and the header grew from 74 to 126px
     on every page. */
  max-width: 72rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.brand {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  font-weight: 600;
  margin-right: auto;
  white-space: nowrap;
  display: block;
  line-height: 0;
}
/* Two rows of navigation are taller than one, which buys the logo room it did
   not have before: 4.6rem against the old 2.9 and the wreath is finally legible
   as a wreath. */
.brand img { height: 4.6rem; width: auto; display: block; }
@media (max-width: 60rem) { .brand img { height: 3.4rem; } }
@media (max-width: 34rem) { .brand img { height: 2.6rem; } }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.15rem;
  font-family: var(--sans);
  font-size: 0.875rem;
}
/* :not(.nav-search) throughout — the search pill lives inside the navigation
   now, at the end of the second row, and it carries its own padding and its own
   rounded border. Without the exclusion these rules flatten it. */
.site-nav a:not(.nav-search) {
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:not(.nav-search)[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.hero {
  padding: 3.5rem 0 2.75rem;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--paper-deep), var(--paper));
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.12;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.hero .standfirst {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
  max-width: 34rem;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.9rem;
}

main { padding: 2.75rem 0 1rem; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.005em; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
p  { margin: 0 0 1.1rem; }

.lede { font-size: 1.15rem; color: var(--ink-soft); }
.small { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); }

blockquote {
  margin: 1.75rem 0;
  padding: 0.15rem 0 0.15rem 1.25rem;
  border-left: 3px solid var(--gold-soft);
  color: var(--ink-soft);
  font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

hr.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
}
.ornament {
  text-align: center;
  color: var(--gold-ink);
  letter-spacing: 0.5em;
  margin: 2.75rem 0;
  font-size: 0.8rem;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.7rem 1.35rem;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.85; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--gold); opacity: 1; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}
.card {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.4rem 1.4rem 1.5rem;
  background: #fff;
}
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.volume {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1.75rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}
.volume:first-of-type { border-top: 0; }
@media (max-width: 34rem) {
  .volume { grid-template-columns: 1fr; gap: 1rem; }
  .volume .cover { max-width: 14rem; }
}

.cover, picture.cover img {
  border-radius: 1px 3px 3px 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.14);
  width: 100%;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 13rem;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 40rem) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .hero-split .cover-wrap { max-width: 11rem; }
}

.vol-meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.35rem;
}
.volume h2 { margin: 0 0 0.6rem; font-size: 1.35rem; }

.status-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  background: var(--paper-deep);
}

.callout {
  border: 1px solid var(--gold-soft);
  border-left-width: 3px;
  background: #FFFCF5;
  padding: 1.25rem 1.35rem;
  border-radius: 3px;
  margin: 2rem 0;
}
.callout h3 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.reading h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 2.5rem 0 0.75rem;
}
.reading .scripture {
  background: var(--paper-deep);
  border-radius: 3px;
  padding: 1.35rem 1.5rem;
  margin: 1.5rem 0 2rem;
}
.reading .scripture p:last-child { margin-bottom: 0; }
.reading .ref {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.reading .example {
  border-left: 3px solid var(--rule);
  padding-left: 1.15rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 1.5rem 0;
}
.sources {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
}
.sources p { margin-bottom: 0.85rem; }
.sources p:last-child { margin-bottom: 0; }
.sources a { word-break: break-word; }

.quiz { margin: 2rem 0 1rem; }

.quiz-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.progress {
  height: 3px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.3s ease;
}

.q-text { font-size: 1.35rem; line-height: 1.35; margin: 0 0 1.5rem; }

.options { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; }
.option {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.option:hover:not(:disabled) { border-color: var(--gold); }
.option:disabled { cursor: default; }
.option .letter {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 2px;
  min-width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 0.15rem;
}
.option.correct { border-color: var(--green); background: #F1F7F3; }
.option.correct .letter { border-color: var(--green); color: var(--green); }
.option.wrong { border-color: var(--red); background: #FBF2F1; }
.option.wrong .letter { border-color: var(--red); color: var(--red); }

.verdict {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.verdict.ok  { color: var(--green); }
.verdict.no  { color: var(--red); }
.explain {
  border-left: 3px solid var(--gold-soft);
  padding: 0.1rem 0 0.1rem 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.explain p:last-child { margin-bottom: 0; }

.score-big {
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: 1;
  margin: 0.5rem 0 0.25rem;
  letter-spacing: -0.03em;
}
.score-big small { font-size: 0.35em; color: var(--ink-faint); letter-spacing: 0; }

.review { margin: 2rem 0; }
.review-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
}
.review-item .mark { flex: none; font-family: var(--sans); font-weight: 700; }
.review-item .mark.ok { color: var(--green); }
.review-item .mark.no { color: var(--red); }
.review-item .ans { color: var(--ink-faint); font-family: var(--sans); font-size: 0.82rem; }

.quiz-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.quiz-list li { border-top: 1px solid var(--rule); }
.quiz-list li:last-child { border-bottom: 1px solid var(--rule); }
.quiz-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  text-decoration: none;
}
.quiz-list a:hover .qt { text-decoration: underline; text-decoration-color: var(--gold); }
.quiz-list .qn {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  flex: none;
}

.notify {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  padding: 1.5rem;
  margin: 2.5rem 0;
}
.notify h3 { margin-top: 0; }

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 2.25rem 0 3rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  background: var(--paper-deep);
}
.site-foot a { color: var(--ink-soft); }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.foot-grid h4 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0.35rem; }
.foot-legal { border-top: 1px solid var(--rule); padding-top: 1.25rem; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  position: fixed;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 10; border-radius: 2px;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media print {
  .site-nav, .site-foot, .btn-row { display: none; }
  body { background: #fff; }
}

.week-card {
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0 1.4rem;
}
.week-card:last-of-type { border-bottom: 1px solid var(--rule); }
.week-card p:last-child { margin-bottom: 0; }
.week-card .vol-meta { margin-bottom: 0.3rem; }
/* ---------- credibility strip ---------- */

.facts {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.facts .wrap-wide {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.75rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  justify-content: space-between;
}
/* The same strip where there is no inner wrapper — inside a narrow column,
   so it lays out as a grid rather than one long row. */
.facts.facts-plain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.1rem 2rem;
  padding: 1.4rem 1.5rem;
  margin-bottom: 2rem;
}
.facts.facts-plain .fact.wide { grid-column: 1 / -1; }

.fact { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); line-height: 1.35; }
.fact b {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: -0.01em;
}
.fact.wide b { font-size: 1rem; color: var(--ink); letter-spacing: 0; }

/* ---------- three-volume journey ---------- */

main .wrap > .journey { max-width: none; }
.journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 2.25rem 0 1rem;
  max-width: none;
}
@media (max-width: 44rem) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  /* One column used to mean one cover the full width of the page — three
     stacked images a thousand pixels tall, and each one enlarged past the
     resolution of the file behind it. */
  .journey picture, .journey img { max-width: 15rem; }
}
.journey a { text-decoration: none; display: block; }
.journey img {
  border-radius: 1px 3px 3px 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.14);
  transition: transform 0.2s ease;
}
.journey a:hover img { transform: translateY(-3px); }
.journey .movement {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 1rem 0 0.3rem;
}
.journey h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.journey p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ---------- reading page furniture ---------- */

.reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}
.jump {
  font-family: var(--sans);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0 0 2rem;
}
.jump span { color: var(--ink-faint); }
.jump a { color: var(--ink-soft); text-decoration-color: var(--gold-soft); }

/* ---------- mobile nav ---------- */

@media (max-width: 46rem) {
  .site-head .wrap-wide { gap: 0.5rem 1rem; }
  /* the fallback when site.js never ran: wrap the links rather than lose them */
  .nav-wrap:not(.is-collapsible) { width: 100%; flex-wrap: wrap; }
  .nav-wrap:not(.is-collapsible) .site-nav {
    align-items: flex-start;
    gap: 0.35rem 0;
    font-size: 0.85rem;
  }
  .nav-wrap:not(.is-collapsible) .nav-row {
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
  }
  .site-nav a { white-space: nowrap; }
}

/* ---------- free weeks index, grouped by volume ---------- */

.vol-block { margin: 0 0 3rem; }
.vol-head {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding-bottom: 0.5rem;
}
.vol-head h2 { margin: 0 0 0.3rem; font-size: 1.5rem; }
.vol-head .movement {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.3rem;
}
.vol-head .small { margin: 0; }
.vol-cover img {
  border-radius: 1px 3px 3px 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.12);
  width: 100%;
}
@media (max-width: 40rem) {
  .vol-head { grid-template-columns: 7rem 1fr; gap: 1.1rem; }
}
.week-card h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.week-card h3 a { text-decoration: none; }
.week-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* interior pages get a tighter masthead than the homepage */
.hero.hero-inner { padding: 2.2rem 0 1.9rem; }
.hero.hero-inner h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); }
.hero.hero-inner .standfirst { margin-bottom: 0; font-size: 1.05rem; }

/* ---------- after a reading ---------- */

.after-reading {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.6rem;
  align-items: center;
  border: 1px solid var(--gold-soft);
  border-left-width: 3px;
  background: #FFFCF5;
  border-radius: 3px;
  padding: 1.5rem 1.6rem;
  margin: 2.5rem 0 0;
}
@media (max-width: 34rem) {
  .after-reading { grid-template-columns: 1fr; }
  .after-reading .ar-cover { max-width: 8rem; }
}
.after-reading .ar-head {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.after-reading p { margin: 0; }
.after-reading .btn-row { margin: 1rem 0 0; }
.ar-cover img {
  width: 100%;
  border-radius: 1px 3px 3px 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.12);
}

@media print {
  .after-reading, .jump, .reading-meta, .hero .standfirst { display: none; }
}

/* ---------- blog ---------- */

.topic-group { margin: 0 0 3rem; }
.topic-group:last-of-type { margin-bottom: 1rem; }
.topic-head {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin: 0 0 1.5rem;
  font-weight: 600;
}
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { margin: 0 0 1.6rem; }
.post-list li:last-child { margin-bottom: 0; }
.post-list h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 0.3rem;
  font-weight: 600;
}
.post-list h3 a { color: var(--ink); text-decoration: none; }
.post-list h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.post-list p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.post-list .post-meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}

.featured {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 1.5rem 1.6rem;
  margin: 0 0 3rem;
}
.featured h2 { margin: 0 0 0.9rem; font-size: 1.15rem; }
.featured ol { margin: 0; padding-left: 1.2rem; }
.featured li { margin-bottom: 0.5rem; }
.featured li:last-child { margin-bottom: 0; }
/* :not(.btn) because a button in here carries its own colours — without this
   the dark button text lands on the dark button background and vanishes. */
.featured a:not(.btn) { color: var(--ink); text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.featured p:last-child { margin-bottom: 0; }

.post-note {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  margin: 2.5rem 0;
}
.post-note strong { color: var(--ink); }

.post-body h2 { margin-top: 2.4rem; }
.post-body blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 3px solid var(--gold-soft);
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.post-body blockquote p { margin: 0; }

.pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* ---------- saints ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saint-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 1.5rem 0 1rem;
}
.saint-tools input[type="search"], .saint-tools select {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.55rem 0.75rem;
}
.saint-tools input[type="search"] { flex: 1 1 16rem; min-width: 0; }
.saint-tools input[type="search"]:focus, .saint-tools select:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.s-toggle {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.chip {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--gold-soft); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.s-count {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.s-empty { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.saint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}
.saint-card {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
}
.saint-card.pending { background: transparent; border-style: dashed; }
.saint-card h3 { margin: 0 0 0.35rem; font-size: 1.02rem; line-height: 1.3; }
.saint-card h3 a { color: var(--ink); text-decoration: none; }
.saint-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.saint-card p { margin: 0; }
.s-role { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0.45rem !important; }
.s-meta {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
.s-go { margin-top: auto !important; padding-top: 0.7rem; font-family: var(--sans); font-size: 0.85rem; }
.s-go a { color: var(--ink); text-decoration-color: var(--gold); }
.s-soon {
  margin-top: auto !important;
  padding-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-style: italic;
}
.s-soon-inline { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); }

.saint-featured h2 { margin: 0 0 0.5rem; font-size: 1.35rem; }
.saint-featured h2 a { color: var(--ink); text-decoration: none; }
.saint-featured h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.saint-featured .eyebrow { margin-bottom: 0.5rem; }
.saint-featured p { margin: 0 0 0.6rem; }
.saint-featured p:last-child { margin-bottom: 0; font-family: var(--sans); font-size: 0.9rem; }

.saint-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-deep);
  border-radius: 3px;
}
.saint-facts dt {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.2rem;
}
.saint-facts dd { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

.saint-prayer {
  border-left: 3px solid var(--gold);
  background: #FFFCF5;
  padding: 1rem 1.2rem;
  margin: 2rem 0;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ---------- the Start here path ---------- */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 1rem 0 1.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.4rem;
}
.jump a { color: var(--gold-ink); text-decoration: none; }
.jump a:hover { text-decoration: underline; }

.stage { margin-bottom: 3.2rem; }
.stage-n {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.3rem;
}
.stage h2 { margin-top: 0; }
.stage-intro { color: var(--ink-soft); }

/* Numbered, because the order is the whole point of the page. */
.stage-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.4rem 0 0;
}
.stage-list > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.3rem 2.4rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--rule);
}
.stage-list > li:last-child { border-bottom: 0; margin-bottom: 0; }
.stage-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-ink);
  background: var(--paper-deep);
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  border-radius: 50%;
}
.stage-list > li > a {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.3rem;
}
.stage-list > li > p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

@media (max-width: 34rem) {
  .stage-list > li { padding-left: 2.1rem; }
}

/* ---------- Scripture ---------- */

/* Verse numbers run inline with the text, as they do in a printed Bible:
   small, raised, quiet enough to read past and precise enough to link to. */
.scripture p { margin-bottom: 1.1rem; }

.scripture a.vn {
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 600;
  vertical-align: 0.42em;
  color: var(--gold-ink);
  text-decoration: none;
  padding: 0 0.06em;
}
.scripture a.vn:hover { text-decoration: underline; }
.scripture a.vn:target,
.scripture a.vn.appointed-n {
  color: var(--ink);
  background: #F6E9C8;
  border-radius: 2px;
  padding: 0.1em 0.25em;
  margin: 0 0.1em 0 0;
}

.scripture .wj { color: #8C2F26; }

.scripture .poetry {
  margin: 0 0 0.35rem;
  padding-left: 1.6rem;
  text-indent: -1.6rem;
}
.scripture .poetry.q2 { padding-left: 3rem; text-indent: -1.6rem; }
.scripture .poetry.q3 { padding-left: 4.4rem; text-indent: -1.6rem; }

.scripture sup.fn a {
  font-size: 0.92em;
  color: var(--gold-ink);
  text-decoration: none;
  padding: 0 0.1em;
}
.scripture .xref { font-size: 0.82em; color: var(--ink-faint); }
.scripture .xref a { color: var(--ink-faint); }

.fn-list {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-left: 1.3rem;
  margin-bottom: 2rem;
}
.fn-list li { margin-bottom: 0.5rem; }
.fn-list .fn-v { color: var(--gold-ink); font-family: var(--sans); font-size: 0.85em; }

/* When the page was opened from an appointed reading, the verses actually
   appointed are lit and everything around them is dimmed — so the reader can
   see the passage without losing the chapter it sits in. */
.scripture.has-appointed p { color: var(--ink-faint); }
.scripture.has-appointed .appointed { color: var(--ink); background: #FFFBEF; }
.scripture.has-appointed .wj.appointed { color: #8C2F26; }

.ch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.ch-chips a {
  font-family: var(--sans);
  font-size: 0.8rem;
  min-width: 1.9rem;
  padding: 0.3rem 0.35rem;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink-soft);
}
.ch-chips a:hover { border-color: var(--gold); color: var(--ink); }
.ch-chips a.is-current { background: var(--gold); border-color: var(--gold); color: #fff; }

.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));
  gap: 0.4rem;
  margin: 0 0 2.2rem;
}
.ch-grid a {
  display: block;
  padding: 0.7rem 0.2rem;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 5px;
  text-decoration: none;
  font-family: var(--sans);
  color: var(--ink-soft);
  min-height: 44px;
}
.ch-grid a:hover { border-color: var(--gold); color: var(--ink); background: #FFFCF5; }

/* Readings on the calendar pages: the ones we can open, and the ones we cannot. */
.day-readings a.read-link { font-weight: 600; }
/* A reading that runs across a chapter break is one reading on two pages. The
   second link is set quietly so it reads as a continuation rather than as a
   separate appointed passage. */
.day-readings a.read-cont {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  white-space: nowrap;
  text-decoration-color: var(--rule);
}
.day-readings a.read-cont::before { content: "↳ "; }
.day-readings .ot { color: var(--ink-soft); }
.today-read { font-size: 0.95rem; }

@media (max-width: 34rem) {
  .ch-chips a { min-width: 2.2rem; padding: 0.42rem 0.4rem; }
}

/* The section that separates what is attested from what is later tradition.
   Marked so a reader can find it at a glance, and skip to it if that is
   what they came for. */
h2.sec-record {
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
  margin-top: 2.6rem;
}
h2.sec-record::before {
  content: "Sources";
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.45rem;
}

@media print {
  .saint-tools, .chips, .s-count { display: none; }
}

main .wrap > .saint-grid,
main .wrap > .saint-tools,
main .wrap > .chips,
main .wrap > .s-count { max-width: none; }

/* ---------- brand tagline ---------- */

/* ---------- resources ---------- */

.res-group { margin: 0 0 2.75rem; }
.res-group > h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.res-group > .small { margin: 0 0 1.4rem; }
.res-list { list-style: none; margin: 0; padding: 0; }
.res-list li { margin: 0 0 1.5rem; }
.res-list li:last-child { margin-bottom: 0; }
.res-list h3 { font-size: 1.08rem; margin: 0 0 0.25rem; font-weight: 600; }
.res-list h3 a { color: var(--ink); text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.res-list p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.res-host {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: 0.3rem !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.8rem;
}
.res-note {
  font-size: 0.92rem !important;
  color: var(--ink-faint) !important;
  margin-top: 0.35rem !important;
  border-left: 2px solid var(--rule);
  padding-left: 0.7rem;
}

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

.cal-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
}
.cal-switch { display: flex; gap: 0.4rem; }
.cal-years { margin: 0; font-family: var(--sans); font-size: 0.85rem; display: flex; gap: 0.9rem; }
.cal-y { color: var(--ink-soft); text-decoration-color: var(--gold-soft); }
.cal-y.on { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); }

p.cal-pascha {
  font-size: 1.1rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding: 0.6rem 0 0.6rem 1rem;
  margin: 0 0 1.5rem;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 1.5rem 0;
}
.cal-legend .k::before {
  content: "";
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: 0.02rem;
}
.k-pascha::before { background: var(--red); }
.k-great::before  { background: var(--gold); }
.k-feast::before  { background: var(--green); }
.k-fast::before   { background: var(--ink-faint); }
.k-saint::before  { background: var(--gold-soft); }

.cal-month { margin: 0 0 2.5rem; }
.cal-month > h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin: 0 0 0.9rem;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}

.cal-day {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: 0 0.9rem;
  padding: 0.6rem 0.5rem 0.6rem 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.cal-day:first-of-type { border-top: 0; }
.cal-day.is-today {
  background: var(--paper-deep);
  box-shadow: -0.5rem 0 0 var(--paper-deep), 0.5rem 0 0 var(--paper-deep);
  border-radius: 2px;
}
.cal-date { text-align: right; padding-top: 0.1rem; }
.cal-dnum { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.cal-dow {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cal-day.is-today .cal-dnum { color: var(--gold-ink); }

.cal-entries { list-style: none; margin: 0; padding: 0; }
.cal-e { margin: 0 0 0.3rem; line-height: 1.45; }
.cal-e:last-child { margin-bottom: 0; }
.cal-name { display: inline; }
.cal-name a { color: inherit; text-decoration-color: var(--gold-soft); text-underline-offset: 2px; }
.cal-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.1rem;
}
.cal-e.cal-pascha {
  border-left: 3px solid var(--gold);
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin-left: -0.85rem;
}
.cal-e.cal-pascha .cal-name { color: var(--red); font-weight: 600; letter-spacing: 0.01em; }
.cal-e.cal-great .cal-name { color: var(--ink); font-weight: 600; }
.cal-e.cal-great .cal-name::before,
.cal-e.cal-pascha .cal-name::before {
  content: "✚";
  color: var(--gold-ink);
  margin-right: 0.4rem;
  font-size: 0.8em;
}
.cal-e.cal-feast .cal-name { color: var(--ink); }
.cal-e.cal-fast .cal-name { color: var(--ink-soft); font-style: italic; }
.cal-e.cal-saint .cal-name { color: var(--ink-soft); }

main .wrap > .cal-tools,
main .wrap > .cal-legend,
main .wrap > #cal-body { max-width: none; }
#cal-body .cal-month > h2,
#cal-body .cal-day { max-width: var(--max); }

@media (max-width: 34rem) {
  .cal-day { grid-template-columns: 2.4rem 1fr; gap: 0 0.6rem; }
  .cal-tools { justify-content: flex-start; }
}

@media print {
  .cal-tools, .cal-legend, .jump { display: none; }
  .cal-month > h2 { position: static; }
}

/* ---------- calendar: today panel and rolling view ---------- */

.cal-todaybox {
  background: var(--paper-deep);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 1.2rem 1.4rem;
  margin: 0 0 1.5rem;
}
.cal-todaybox .eyebrow { margin-bottom: 0.35rem; }
.cal-todaydate {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.cal-todaynote {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0 0 0.8rem;
}
.cal-todaybox .cal-entries { margin: 0; }
.cal-fastnote {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

.cal-why {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.9rem 1.2rem;
  margin: 0 0 1.5rem;
  background: #fff;
}
.cal-why > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.cal-why > summary:hover { color: var(--ink); }
.cal-why[open] > summary { margin-bottom: 0.8rem; color: var(--ink); }
.cal-why p:last-child { margin-bottom: 0; }

.cal-back { font-family: var(--sans); font-size: 0.85rem; margin: 0 0 1rem; }

.cal-month > h2 { font-size: 0.8rem; }

main .wrap > .cal-todaybox,
main .wrap > .cal-why,
main .wrap > .cal-back { max-width: var(--max); }
.cal-none { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 0.6rem; }
.cal-next { margin: 0; font-size: 1rem; color: var(--ink); }
.cal-next span {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-right: 0.5rem;
}

.cal-full {
  font-family: var(--sans);
  font-size: 0.76rem;
  margin-top: 0.35rem;
}
.cal-e + .cal-full { margin-top: 0.5rem; }
.cal-full a { color: var(--ink-faint); text-decoration-color: var(--rule); }
.cal-full a:hover { color: var(--ink-soft); text-decoration-color: var(--gold-soft); }
.cal-day.cal-empty { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.cal-day.cal-empty .cal-dnum { font-weight: 400; color: var(--ink-faint); font-size: 1rem; }
.cal-day.cal-empty .cal-full { margin-top: 0.15rem; }
.cal-fulltoday { font-family: var(--sans); font-size: 0.85rem; margin: 0.8rem 0 0; }
.cal-fulltoday a { color: var(--ink-soft); text-decoration-color: var(--gold-soft); }

/* ---------- a day in the calendar ---------- */

.day-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 1.6rem;
}
.day-nav a { color: var(--ink-soft); text-decoration: none; }
.day-nav a:hover { color: var(--gold-ink); }
.day-nav a:nth-child(2) { margin-left: auto; }

.day-feast {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.day-rank, .day-fast {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.day-fast { color: var(--red); }

.day-list { list-style: none; padding: 0; margin: 0 0 2.2rem; }
.day-list > li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.day-list > li:first-child { border-top: 1px solid var(--rule); }

.day-name { display: block; font-size: 1.02rem; line-height: 1.35; }
.day-list .day-high .day-name { font-weight: 600; }
.day-list .day-high { border-left: 3px solid var(--gold-soft); padding-left: 0.7rem; }

.day-attest {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: 0.16rem;
}
.day-haslife {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 0.16rem;
}

.day-readings {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.day-readings li {
  padding: 0.34rem 0;
  border-bottom: 1px dotted var(--rule);
}

/* ---------- navigation: primary links and search ---------- */

.nav-wrap { display: flex; align-items: center; margin-left: auto; min-width: 0; }

/* Two rows, stacked and set flush to the right edge so they square off against
   the logo. The two come out within a few pixels of each other at five links
   and four-plus-search, which is why the split falls where it does. */
.site-nav {
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0.3rem 0;
}
.nav-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0 1.15rem;
}
.nav-row > a {
  /* a comfortable target on a touch screen without changing the visual rhythm */
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.nav-search {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 34px;
  margin-left: 0.35rem;
  gap: 0.4rem;
  padding: 0 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav-search svg { width: 0.95rem; height: 0.95rem; flex: none; }
.nav-search:hover { color: var(--ink); border-color: var(--gold); background: var(--paper-deep); }
.nav-search[aria-current="page"] { color: var(--ink); border-color: var(--gold); background: var(--paper-deep); }

/* The button is revealed by site.js, which is also what collapses the menu —
   so a page that never runs it keeps the full navigation and no dead button. */
.nav-btn {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  font: inherit;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}
.nav-bars, .nav-bars::before, .nav-bars::after {
  display: block;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  content: "";
}
.nav-bars { position: relative; }
.nav-bars::before { position: absolute; top: -6px; }
.nav-bars::after { position: absolute; top: 6px; }
.nav-btn[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-btn[aria-expanded="true"] .nav-bars::before { top: 0; transform: rotate(45deg); }
.nav-btn[aria-expanded="true"] .nav-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 46rem) {
  .nav-btn { display: inline-flex; }
  .nav-wrap.is-collapsible {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: none;
  }
  .nav-wrap.is-collapsible.is-open { display: flex; }
  /* On a phone the two rows are meaningless — the menu is one list, so the rows
     unwrap into it rather than staying side by side. */
  .nav-wrap.is-collapsible .site-nav { align-items: stretch; gap: 0; }
  .nav-wrap.is-collapsible .nav-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
  }
  .nav-wrap.is-collapsible .nav-row > a {
    padding: 0.1rem 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .nav-wrap.is-collapsible .nav-row > a[aria-current="page"] {
    border-bottom-color: var(--gold);
  }
  .nav-wrap.is-collapsible .nav-search {
    margin: 0.7rem 0 0.2rem;
    justify-content: center;
    border-radius: 3px;
    min-height: 44px;
  }
}

/* Between a phone and a laptop there is room for the links but not beside the
   logo, so the bar stacks: logo on its own line, the two rows under it. */
@media (min-width: 46.01rem) and (max-width: 60rem) {
  .nav-wrap:not(.is-collapsible) { width: 100%; }
  .nav-wrap:not(.is-collapsible) .site-nav { align-items: flex-start; }
  .nav-row { flex-wrap: wrap; gap: 0.15rem 1.15rem; }
}

/* ---------- today, on the home page ---------- */

.today-panel {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: #fff;
  padding: 1.15rem 1.3rem 1.2rem;
  margin: 0 0 2rem;
}
.today-date {
  font-family: var(--serif);
  font-size: 1.18rem;
  margin: 0.15rem 0 0.5rem;
}
.today-feast { font-weight: 600; margin: 0 0 0.35rem; }
.today-fast { font-family: var(--sans); font-size: 0.84rem; color: var(--red); margin: 0 0 0.35rem; }
.today-names { margin: 0 0 0.7rem; color: var(--ink-soft); }
.today-rest { color: var(--ink-faint); font-style: italic; }
.today-more { font-family: var(--sans); font-size: 0.86rem; margin: 0; }

.res-checked {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.4rem;
}

.method { margin: 1.2rem 0 1.6rem; padding-left: 1.2rem; }
.method li { margin: 0 0 0.6rem; padding-left: 0.3rem; }

/* The home page hero no longer sits beside a book cover, so the measure can
   breathe a little wider than the two-column version allowed. */
.hero-wide { max-width: 46rem; }

/* The home page hero carries today's commemorations beside the introduction,
   so the first screenful is already doing the thing the site is for. */
.hero-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 3rem;
  align-items: center;
}
.hero-today .standfirst { max-width: 34rem; }
.hero-today .today-panel { margin: 0; }
@media (max-width: 58rem) {
  .hero-today { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------- read next ---------- */

.read-next { margin: 2.2rem 0 0; }
.read-next h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}
.read-next ul { list-style: none; padding: 0; margin: 0; }
.read-next li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}
.read-next li:last-child { border-bottom: 1px solid var(--rule); }
.read-next a { text-decoration: none; font-weight: 600; }
.read-next a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.read-next span {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.18rem;
}

/* ---------- search ---------- */

.search-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  margin: 2.5rem 0 0.9rem;
}
.search-box label {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.search-box input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1.15rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.search-box input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.search-box .btn { min-height: 44px; }

.search-scope {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 46rem;
  margin: 0 0 2rem;
}
.search-status {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

.search-ref {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin: 0 0 2rem;
  text-decoration: none;
  border: 1px solid var(--gold);
  border-left-width: 3px;
  border-radius: 3px;
  background: var(--paper-deep);
}
.search-ref span {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.search-ref strong { font-size: 1.15rem; color: var(--ink); }
.search-ref:hover strong { color: var(--gold-ink); }

.search-group { margin: 0 0 2.5rem; }
.search-group h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.4rem;
  margin: 0 0 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.search-group h2 span { color: var(--gold-ink); letter-spacing: 0.04em; }
.search-group ul { list-style: none; margin: 0; padding: 0; }
.search-group li {
  padding: 0.65rem 0;
  border-bottom: 1px dotted var(--rule);
}
.search-group li a {
  display: block;
  font-size: 1.08rem;
  text-decoration: none;
  color: var(--ink);
}
.search-group li a:hover { color: var(--gold-ink); }
.search-group li span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.search-verses li a { font-family: var(--sans); font-size: 0.85rem; color: var(--gold-ink); }
.search-verses li span { font-size: 1rem; color: var(--ink); }
.search-results mark {
  background: rgba(176, 141, 62, 0.22);
  color: inherit;
  padding: 0 0.06em;
  border-radius: 2px;
}
.link-more {
  margin-top: 0.8rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-more:hover { color: var(--ink); }

/* ---------- filtering the article archive ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.filter-bar input {
  flex: 1 1 13rem;
  min-width: 9rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.filter-bar input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.chip {
  padding: 0.34rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--gold-soft); }
.chip[aria-pressed="true"] {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.chip b { font-weight: 400; opacity: 0.6; margin-left: 0.3rem; }
.filter-none {
  font-family: var(--sans);
  color: var(--ink-faint);
  margin: 0 0 2rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.search-title { font-size: clamp(1.9rem, 5vw, 2.5rem); margin: 2.5rem 0 0.2rem; }
.search-title + .search-box { margin-top: 1rem; }
.search-suggest { margin: 0 0 3rem; }
.search-suggest h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}
.search-suggest ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.search-suggest a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.search-suggest a:hover { color: var(--ink); border-color: var(--gold); background: var(--paper-deep); }

/* ---------- what is known about each commemoration ---------- */

.day-more {
  margin: 0.45rem 0 0.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.day-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  list-style: none;
  cursor: pointer;
  color: var(--gold-ink);
  width: fit-content;
}
.day-more > summary::-webkit-details-marker { display: none; }
.day-more > summary::before {
  content: "";
  width: 0; height: 0;
  border: 0.3em solid transparent;
  border-left-color: currentColor;
  transition: transform 0.15s ease;
  transform-origin: 25% 50%;
}
.day-more[open] > summary::before { transform: rotate(90deg); }
.day-more > summary:hover { color: var(--ink); }
.day-more-body {
  margin: 0.3rem 0 0.9rem;
  padding: 0.85rem 1.05rem;
  border-left: 2px solid var(--gold-soft);
  background: var(--paper-deep);
  border-radius: 0 3px 3px 0;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-soft);
}
.day-more-body > p { margin: 0 0 0.7rem; }
.day-more-body > p:last-child { margin-bottom: 0; }

.day-life + .day-life { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.day-life-name {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.4rem !important;
}
.day-life p { margin: 0 0 0.7rem; }
.day-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 0 0 0.8rem;
  font-family: var(--sans);
  font-size: 0.82rem;
}
.day-facts dt { color: var(--ink-faint); }
.day-facts dd { margin: 0; color: var(--ink); }
.day-readmore { font-family: var(--sans); font-size: 0.87rem; color: var(--gold-ink); }

/* ---------- prayers ---------- */

/* The prayer itself is set apart from the commentary around it: larger, with a
   gold rule down the left the way a reading is marked in a service book. The
   rubrics — the printed stage directions, "Thrice", "The Priest, secretly" —
   are set small and italic so they read as instructions rather than as words to
   say, which is exactly how they look on the page of the original. */
.prayer {
  margin: 1.75rem 0;
  padding: 0.6rem 0 0.6rem 1.5rem;
  border-left: 3px solid var(--gold-soft);
}
.prayer p {
  font-size: 1.08rem;
  line-height: 1.66;
  margin: 0 0 1rem;
}
.prayer p:last-child { margin-bottom: 0; }
.prayer .rubric {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.5;
}
.prayer.second { border-left-color: var(--rule); }
.prayer.second p { font-size: 1rem; color: var(--ink-soft); }

/* Who says it, and when. Two short answers most prayer sites never give. */
.prayer-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.9rem 2rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--paper-deep);
  border-radius: 3px;
}
.prayer-meta dt {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.2rem;
}
.prayer-meta dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.prayer-src, .prayer-fix {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  line-height: 1.6;
}
.prayer-fix { margin-top: 1.5rem; }

.prayer-group { margin: 0 0 2.75rem; }
.prayer-group h2 { margin-bottom: 0.4rem; }
.prayer-group > p { color: var(--ink-soft); margin-top: 0; }

.prayer-list { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.prayer-list li { border-bottom: 1px dotted var(--rule); padding: 0.55rem 0; }
.prayer-list li:last-child { border-bottom: 0; }
.prayer-list a { text-decoration: none; font-size: 1.05rem; }
.prayer-list a:hover { text-decoration: underline; }
.prayer-list span {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* The independence line in the footer: present on every page, but quiet. A
   reader who wants to know whether this is an official publication should be
   able to find the answer without hunting for it. */
.foot-indep {
  margin-top: 0.6rem;
  max-width: 46rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}