/* Rite & Rubric — 1928 BCP daily offices */
:root {
  --paper: #faf6ec;
  --card: #fffdf6;
  --ink: #2b2117;
  --rubric: #8e1b1b;
  --gold: #8a6d2f;
  --line: #e2d8c0;
  --muted: #7a6a52;
  --link: #6e3434;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191510;
    --card: #211c14;
    --ink: #e8e0cf;
    --rubric: #e09c9c;
    --gold: #d4b46a;
    --line: #3c3424;
    --muted: #ab9c80;
    --link: #d9a9a9;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  line-height: 1.62;
}
a { color: var(--link); }

header.site {
  border-bottom: 3px double var(--gold);
  padding: 1.1rem 1rem 0.9rem;
  text-align: center;
}
header.site .brand {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 1.7rem;
  color: var(--ink);
  text-decoration: none;
}
header.site .brand .amp { color: var(--gold); font-style: italic; }
nav.site {
  margin-top: 0.5rem;
  font-size: 0.92rem;
}
nav.site a {
  margin: 0 0.7rem;
  text-decoration: none;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
nav.site a:hover { text-decoration: underline; }

main { max-width: 44rem; margin: 0 auto; padding: 1.2rem 1.2rem 4rem; }

/* office header */
.day-head { text-align: center; margin: 1.4rem 0 0.4rem; }
.day-head .civil { color: var(--muted); font-size: 0.95rem; }
.day-head h1 {
  font-size: 1.55rem;
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  margin: 0.2rem 0;
}
.day-head .office-name { color: var(--gold); font-style: italic; font-size: 1.1rem; }
.day-switch { text-align: center; font-size: 0.92rem; margin: 0.6rem 0 0.2rem; }
.day-switch a, .day-switch span.cur {
  display: inline-block; margin: 0 0.4rem; padding: 0.1rem 0.7rem;
  border: 1px solid var(--line); border-radius: 1rem; text-decoration: none;
}
.day-switch span.cur { background: var(--card); border-color: var(--gold); }
.also-note {
  text-align: center; font-size: 0.9rem; color: var(--muted);
  font-style: italic; margin: 0.4rem 0 1rem;
}
.also-note a { color: var(--link); }
.day-head h1 .transfer-note {
  display: block; font-size: 1rem; font-weight: normal;
  font-style: italic; color: var(--muted); letter-spacing: normal;
}
.transfer-note {
  text-align: center; font-size: 0.88rem; color: var(--muted);
  font-style: italic; margin: 0.55rem 0 0.2rem;
}
.mini-note {
  text-align: center; font-size: 0.62rem; color: var(--muted);
  font-style: italic; margin-top: 0.2rem;
}

/* liturgical text */
.rubric {
  color: var(--rubric);
  font-style: italic;
  font-size: 0.93rem;
  margin: 1.05rem 0 0.55rem;
}
.rubric::before { content: "¶ "; }
.office-title, h2.section {
  text-align: center;
  font-variant: small-caps;
  font-weight: normal;
  letter-spacing: 0.1em;
  margin: 2rem 0 0.4rem;
  font-size: 1.25rem;
}
.title {
  text-align: center;
  font-style: italic;
  margin: 1.3rem 0 0.4rem;
  font-size: 1.05rem;
}
p.litext { margin: 0.55rem 0; text-align: justify; }
p.litext.unison { font-weight: 600; }
p.litext::first-line { letter-spacing: 0.01em; }
.versicles { margin: 0.7rem 0; }
.versicles .v { margin: 0.15rem 0; }
.versicles .v .who {
  font-style: italic; color: var(--muted); font-size: 0.88rem;
  display: inline-block; min-width: 4.4rem;
}
.versicles .a .text { font-weight: 600; }

.canticle { margin: 0.8rem 0; }
.canticle .cant-title {
  text-align: center; font-style: italic; margin: 0.9rem 0 0.5rem;
}
.canticle p { margin: 0.32rem 0; padding-left: 1.4rem; text-indent: -1.4rem; }
details.alt { margin: 0.6rem 0 0.6rem; }
details.alt summary {
  cursor: pointer; color: var(--muted); font-style: italic; font-size: 0.9rem;
}

/* psalms and lessons */
.psalm-portion, .lesson { margin: 0.9rem 0 1.2rem; }
.passage-head {
  text-align: center; margin: 1.2rem 0 0.5rem;
}
.passage-head .what {
  font-variant: small-caps; letter-spacing: 0.08em; display: block;
}
.passage-head .cite { font-style: italic; color: var(--muted); font-size: 0.95rem; }
.verse { margin: 0.3rem 0; }
sup.vn {
  color: var(--gold); font-size: 0.68em; margin-right: 0.28em;
  font-family: Georgia, serif;
}
.gloria { font-style: italic; margin: 0.7rem 0 1rem; }
a.bible-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a.bible-link:hover { color: var(--link); }

/* collects */
.collect-title { text-align: center; font-style: italic; margin: 1.2rem 0 0.3rem; }
.collect-rubric-note { font-size: 0.88rem; color: var(--muted); font-style: italic; }

/* set tabs */
.set-tabs { text-align: center; margin: 0.6rem 0; font-size: 0.9rem; }
.set-tabs a, .set-tabs span.cur {
  display: inline-block; margin: 0 0.3rem; padding: 0.05rem 0.65rem;
  border: 1px solid var(--line); border-radius: 1rem; text-decoration: none;
}
.set-tabs span.cur { border-color: var(--gold); background: var(--card); }
.alt-reading { margin-top: 0.4rem; }

/* calendar */
.cal-head { text-align: center; margin: 1.2rem 0; }
.cal-head h1 { font-variant: small-caps; font-weight: normal; margin: 0.2rem; }
.cal-nav a { margin: 0 0.8rem; text-decoration: none; }
table.month { border-collapse: collapse; width: 100%; margin: 0 auto 2rem; }
table.month th {
  font-variant: small-caps; font-weight: normal; color: var(--muted);
  padding: 0.3rem; font-size: 0.85rem;
}
table.month td {
  border: 1px solid var(--line);
  vertical-align: top;
  width: 14.28%;
  height: 5.2rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.78rem;
  background: var(--card);
}
table.month td.empty { background: transparent; border: none; }
table.month td .dnum {
  font-size: 0.95rem; font-family: Georgia, serif;
  text-decoration: none; color: var(--ink); font-weight: 600;
}
table.month td.today { outline: 2px solid var(--gold); outline-offset: -2px; }
table.month td .obs { display: block; margin-top: 0.15rem; line-height: 1.25; }
table.month td .obs a { text-decoration: none; }
table.month td.redletter .obs a, .redletter-name { color: var(--rubric); }
table.month td.sunday { background: color-mix(in srgb, var(--card) 88%, var(--gold) 12%); }

/* year view */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; }
.mini { font-size: 0.72rem; }
.mini h3 { text-align: center; font-variant: small-caps; font-weight: normal; margin: 0.2rem 0; }
.mini h3 a { text-decoration: none; color: var(--ink); }
table.mini-month { border-collapse: collapse; margin: 0 auto; }
table.mini-month td, table.mini-month th { text-align: center; padding: 0.12rem 0.3rem; }
table.mini-month th { color: var(--muted); font-weight: normal; }
table.mini-month td a { text-decoration: none; color: var(--ink); display: block; border-radius: 50%; width: 1.5rem; }
table.mini-month td.sunday a { color: var(--gold); font-weight: 700; }
table.mini-month td.redletter a { color: var(--rubric); font-weight: 700; }
table.mini-month td.today a { outline: 1.5px solid var(--gold); }

/* liturgical colours */
:root {
  --lc-white: #b99a3d;
  --lc-red: #a32622;
  --lc-violet: #6d4d92;
  --lc-rose: #c4708d;
  --lc-green: #477a52;
  --lc-black: #4a4a4a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lc-white: #d8bc62;
    --lc-red: #d96a64;
    --lc-violet: #a786cc;
    --lc-rose: #d990a8;
    --lc-green: #6fae7c;
    --lc-black: #9a9a9a;
  }
}
.dot {
  display: inline-block; width: 0.72em; height: 0.72em; border-radius: 50%;
  margin-right: 0.38em; vertical-align: baseline;
  border: 1px solid rgba(0,0,0,0.18);
}
.dot.lc-white { background: var(--lc-white); }
.dot.lc-red { background: var(--lc-red); }
.dot.lc-violet { background: var(--lc-violet); }
.dot.lc-rose { background: var(--lc-rose); }
.dot.lc-green { background: var(--lc-green); }
.dot.lc-black { background: var(--lc-black); }
.color-chip {
  margin-top: 0.45rem; font-size: 0.88rem; color: var(--muted);
  font-variant: small-caps; letter-spacing: 0.06em;
}
.legend { text-align: center; margin: 0.2rem 0 1.6rem; font-size: 0.85rem; color: var(--muted); }
.legend-item { margin: 0 0.55rem; font-variant: small-caps; letter-spacing: 0.05em; }

/* month cells: colour bar across the top */
table.month td.lcb-white { border-top: 4px solid var(--lc-white); }
table.month td.lcb-red { border-top: 4px solid var(--lc-red); }
table.month td.lcb-violet { border-top: 4px solid var(--lc-violet); }
table.month td.lcb-rose { border-top: 4px solid var(--lc-rose); }
table.month td.lcb-green { border-top: 4px solid var(--lc-green); }
table.month td.lcb-black { border-top: 4px solid var(--lc-black); }

/* year mini-cells: tinted disc behind the day number */
table.mini-month td.lcb-white a { background: color-mix(in srgb, var(--paper) 70%, var(--lc-white) 30%); }
table.mini-month td.lcb-red a { background: color-mix(in srgb, var(--paper) 70%, var(--lc-red) 30%); }
table.mini-month td.lcb-violet a { background: color-mix(in srgb, var(--paper) 70%, var(--lc-violet) 30%); }
table.mini-month td.lcb-rose a { background: color-mix(in srgb, var(--paper) 70%, var(--lc-rose) 30%); }
table.mini-month td.lcb-green a { background: color-mix(in srgb, var(--paper) 70%, var(--lc-green) 30%); }
table.mini-month td.lcb-black a { background: color-mix(in srgb, var(--paper) 70%, var(--lc-black) 30%); }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 3rem; padding: 1rem; text-align: center;
  font-size: 0.85rem; color: var(--muted);
}
footer.site a { color: var(--muted); }
footer.site nav.site {
  margin: 0 0 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
footer.site nav.site a { color: var(--link); }

/* static order pages */
h1.office-title { font-size: 1.45rem; }
.slot-note { text-align: center; }
.slot-note a { color: inherit; text-decoration: none; }
.slot-note a:hover { text-decoration: underline; }

/* the Litany */
.litany-v { margin: 0.8rem 0 0.1rem; }
.litany-r { margin: 0.1rem 0 0.8rem 1.4rem; }

/* the Psalter */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.1rem 1.4rem;
  margin: 0.7rem 0 1.5rem;
}
.ps-grid a { text-decoration: none; font-size: 0.95rem; }
.ps-grid a:hover .lat { text-decoration: underline; }
.ps-grid .num {
  color: var(--gold); font-family: Georgia, serif;
  display: inline-block; min-width: 2em; text-align: right;
  margin-right: 0.45em;
}
.ps-grid .lat { font-style: italic; }
table.course { border-collapse: collapse; margin: 0.7rem auto 1.6rem; }
table.course th, table.course td {
  padding: 0.16rem 0.75rem; font-size: 0.92rem; text-align: left;
}
table.course th {
  font-variant: small-caps; font-weight: normal; color: var(--muted);
}
table.course td.day {
  color: var(--gold); font-family: Georgia, serif; text-align: right;
}
table.course a { text-decoration: none; }
table.course tr.today td { background: var(--card); }
table.course tr.today td.day { font-weight: 700; }
.psalm-portion .passage-head a { color: inherit; text-decoration: none; }
.loading { text-align: center; color: var(--muted); font-style: italic; padding: 3rem 0; }