/* ==========================================================================
   Novena Calendar — traditional (1962) Roman Calendar
   Palette: deep sanctuary green, brass, missal vermilion, parchment ivory.
   The green/brass is deliberate and single-theme; prayers are set in a
   Palatino-lineage serif with rubrics in red, after the traditional missal.
   ========================================================================== */

:root {
  /* ground */
  --ink:        #040F0A;
  --ground:     #0A2117;
  --ground-2:   #0B2719;
  --panel:      #0F3123;
  --panel-hi:   #14402D;
  --rule:       #1D5240;
  --rule-soft:  #163F31;

  /* accent */
  --brass:      #C8A552;
  --brass-hi:   #E6CE8A;
  --brass-dim:  #7C6531;
  --rubric:     #D4674A;   /* missal vermilion, lifted to pass on dark green */

  /* type */
  --parchment:  #F0E9D6;
  --muted:      #9FB3A4;   /* neutral biased green, not a flat grey */
  --dim:        #6E8578;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "URW Palladio L", "Hoefler Text", Georgia, serif;
  --sans:  "Jost", "Avenir Next Condensed", "DIN Alternate", "Roboto Condensed",
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", monospace;

  --max: 1180px;
  --header-h: 52px;
  --gap: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Halftone screen — the "printed holy card" texture, drawn not loaded */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(var(--brass) 0.5px, transparent 0.6px);
  background-size: 4px 4px;
  opacity: 0.055;
}

body > * { position: relative; z-index: 1; }

img, svg { max-width: 100%; }

a { color: var(--brass-hi); text-decoration-color: var(--brass-dim); text-underline-offset: 3px; }
a:hover { color: var(--parchment); }

:focus-visible {
  outline: 2px solid var(--brass-hi);
  outline-offset: 3px;
  border-radius: 1px;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 26px; }

/* ---------- type scale ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }

h1 {
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.18;
  letter-spacing: 0.005em;
}

h2 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

h3 { font-size: 20px; line-height: 1.3; }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.num { font-variant-numeric: tabular-nums; }

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

/* A 3px `double` border renders as two hairlines with a gap -- the simplest
   possible echo of the panel's double frame, and it needs no extra markup.
   Used at every structural boundary: header, masthead, rail and month heads,
   footer. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 3px double var(--rule);
}

.site-header .wrap {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--parchment);
  text-decoration: none;
  letter-spacing: 0.16em;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand svg { width: 26px; height: 26px; color: var(--brass); flex: none; }
.brand b { font-weight: 500; }
.brand span { color: var(--brass-dim); letter-spacing: 0.14em; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

/* a lozenge struck between the items, the same figure as the section rules */
.nav a + a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -3px;
  transform: rotate(45deg);
  border: 1px solid var(--brass-dim);
}
.nav a:hover { color: var(--parchment); border-bottom-color: var(--brass-dim); }
.nav a[aria-current="page"] { color: var(--brass-hi); border-bottom-color: var(--brass); }

/* ---------- page masthead ---------- */

.masthead { padding: 46px 0 26px; border-bottom: 3px double var(--rule-soft); }
.masthead .today { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.masthead h1 { margin: 10px 0 6px; }
.masthead .feastline { color: var(--muted); font-style: italic; }

/* Ornamental rule: hairline, lozenge, hairline */
.ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brass-dim);
  margin: 26px 0;
}
.ornament::before, .ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.ornament svg { width: 18px; height: 18px; color: var(--brass); flex: none; }

/* ---------- main layout ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 54px;
  align-items: start;
  padding: 34px 0 72px;
}

/* ---------- the framed, patterned panel ----------
   Rung 4 of the ornament study: a double border with a brass keyline, over a
   diaper lattice -- the ground painted behind figures in medieval panel work.
   The pattern is laid at low contrast so the prayer stays the most legible
   thing on the card; ornament frames the text, it never competes with it.   */

.framed {
  position: relative;
  background: var(--ground-2);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  padding: 7px;
}

.framed > .frameinner {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--panel);
  overflow: hidden;            /* clips the lattice to the inner frame */
}

/* brass hairline along the top edge, brighter at the left */
.framed > .frameinner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 4;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass-dim) 38%, transparent 85%);
}

.framed .diaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--brass);
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

.framed .keyline {
  position: absolute;
  inset: 9px;
  border: 1px solid var(--brass-dim);
  pointer-events: none;
  z-index: 2;
}

.framed .inner { position: relative; z-index: 3; padding: 26px 30px 28px; }

/* ---------- novena card (currently running) ---------- */

.card { margin-bottom: 22px; }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 4px;
}

.card h3 a { color: var(--parchment); text-decoration: none; }
.card h3 a:hover { color: var(--brass-hi); text-decoration: underline; }

.card .meta {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 7px;
}
.card .meta b { color: var(--muted); font-weight: 500; }

/* ---------- the nine-dot counter: the one real device on the page ---------- */

.counter { display: flex; align-items: center; gap: 13px; flex: none; }

.dots { display: flex; gap: 5px; }

.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  display: block;
}
.dots i.done { background: var(--brass-dim); border-color: var(--brass-dim); }
.dots i.now {
  background: var(--brass-hi);
  border-color: var(--brass-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 22%, transparent);
}

/* long devotions: a bar rather than an unreadable row of dots */
.bar {
  width: 84px;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  display: block;
}
.bar i { display: block; height: 100%; background: var(--brass); }

.daycount {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
.daycount b { font-size: 17px; letter-spacing: 0.04em; color: var(--brass-hi); font-weight: 500; }

/* ---------- prayer text ---------- */

.prayer { margin-top: 20px; max-width: 64ch; }

.prayer .rubric {
  font-family: var(--serif);
  font-style: italic;
  color: var(--rubric);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 1.1em;
}

.prayer .rubric:last-child { margin-bottom: 0; }

.prayer .said { margin: 0 0 1em; }

/* Drop cap on the first prayer paragraph only */
.prayer .said.lead::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.84;
  padding: 0.06em 0.1em 0 0;
  color: var(--brass);
  font-weight: 400;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-foot a { color: var(--brass); text-decoration: none; }
.card-foot a:hover { color: var(--parchment); text-decoration: underline; }
.card-foot .sep { color: var(--rule); }

/* An ornamental rule inside a panel: hairline, rosette, hairline. */
.ornament--card { margin: 18px 0 16px; }
.ornament--card svg { width: 19px; height: 19px; }

/* ---------- sidebar ---------- */

/* The rail is taller than the viewport on a busy month. Sticky alone pins its
   top and strands the bottom of the list until you have scrolled past the whole
   article, so give it its own scroll within the viewport instead. */
.rail {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.rail::-webkit-scrollbar { width: 7px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.rail::-webkit-scrollbar-thumb:hover { background: var(--rule-soft); }

.rail h2 {
  padding-bottom: 11px;
  border-bottom: 3px double var(--rule);
  position: sticky;
  top: 0;
  background: var(--ground);
  margin: 0 0 2px;
}

.rail .monthgroup { margin-top: 20px; }

.rail .monthname {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}

.upcoming { list-style: none; margin: 0; padding: 0; }

.upcoming li { border-bottom: 1px dotted var(--rule-soft); }

.upcoming a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 2px;
  text-decoration: none;
  color: var(--parchment);
}
.upcoming a:hover { background: color-mix(in srgb, var(--panel-hi) 60%, transparent); }

.upcoming .when {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.upcoming .what { font-size: 14.5px; line-height: 1.36; }
.upcoming .what small { display: block; color: var(--dim); font-family: var(--sans);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }

.railnote {
  color: var(--dim);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 14px;
}
.railnote:last-child { margin-bottom: 0; }

/* ---------- empty state ---------- */

.empty {
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 40px 30px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  background: var(--ground-2);
}

/* ---------- detail page ---------- */

.detail { padding: 38px 0 80px; max-width: 790px; }

/* A whole novena is a long read, so the lattice is lighter here than on the
   index cards and the panel gets more room inside the keyline. */
.detail .framed { margin-top: 20px; }
.detail .framed .diaper { opacity: 0.09; }
.detail .framed .inner { padding: 32px 38px 38px; }

.backlink {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.backlink:hover { color: var(--brass-hi); }

.detail-head { margin: 0 0 0; }

.factbar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin: 26px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.fact { min-width: 120px; }
.fact .k {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 3px;
}
.fact .v { font-size: 16px; color: var(--parchment); font-variant-numeric: tabular-nums; }
.fact .v.accent { color: var(--brass-hi); }

.note {
  border-left: 2px solid var(--brass-dim);
  padding: 2px 0 2px 18px;
  margin: 28px 0;
  color: var(--muted);
  font-style: italic;
}

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 8px; }

.btn {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  background: transparent;
  color: var(--brass-hi);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.btn:hover { background: var(--panel-hi); border-color: var(--brass); color: var(--parchment); }
.btn svg { width: 14px; height: 14px; }
.btn--solid { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn--solid:hover { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--ink); }

/* Day navigator. The tabs are also the counter: a dot marks today, so after
   reading ahead you can still see which day you are actually on. */
.daynav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 30px 0 26px;
}

.daytabs { display: flex; flex-wrap: wrap; gap: 6px; }

.daytabs button {
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  width: 42px;
  padding: 9px 0 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  border-radius: 2px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.daytabs button:hover { border-color: var(--brass-dim); color: var(--parchment); }

.daytabs button[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  font-weight: 500;
}

.daytabs button.past { color: var(--dim); }
.daytabs button.past[aria-pressed="true"] { color: var(--ink); }

.daytabs button.today { border-color: var(--brass-dim); color: var(--parchment); }
.daytabs button.today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--brass-hi);
}
.daytabs button.today[aria-pressed="true"]::after { background: var(--ink); }

.daykey {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
.daykey i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-hi);
  display: block;
  flex: none;
}
.daykey--idle { color: var(--dim); }

.prayer .daylabel {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.7em;
}

.fact--counter { min-width: 150px; }
.fact--counter .counter { margin-top: 4px; }

.detail .prayer { max-width: 66ch; font-size: 17.5px; margin-top: 8px; }
.detail .prayer .said.lead::first-letter { font-size: 3.4em; }

/* ---------- filter ---------- */

.filterbar { display: flex; align-items: center; gap: 16px; margin: 30px 0 0; }

.filterbox { position: relative; flex: 1 1 320px; max-width: 390px; }

.filterbox input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 15.5px;
  padding: 11px 14px 11px 40px;
}
.filterbox input::placeholder { color: var(--dim); font-style: italic; }
.filterbox input:focus {
  outline: none;
  border-color: var(--brass-dim);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 20%, transparent);
}

.filterbox svg {
  position: absolute;
  left: 14px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  color: var(--dim);
  pointer-events: none;
}

/* [hidden] loses to the display values set below, so restate it */
.monthblock[hidden], .alllist li[hidden], .empty[hidden] { display: none !important; }

/* ---------- every novena: twelve month blocks ---------- */

/* Multi-column rather than grid: the months are wildly different lengths, and a
   grid would align them into rows and leave ragged holes under the short ones. */
.allgrid {
  column-count: 3;
  column-gap: 46px;
  margin: 34px 0 0;
}

@media (max-width: 1080px) { .allgrid { column-count: 2; } }
@media (max-width: 720px)  { .allgrid { column-count: 1; } }

.monthblock {
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 34px;
}

.monthblock h2 {
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 3px double var(--rule);
}

.alllist { list-style: none; margin: 0; padding: 0; }

.alllist li { border-bottom: 1px dotted var(--rule-soft); }

.alllist a {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 2px;
  text-decoration: none;
  color: var(--parchment);
}
.alllist a:hover { background: color-mix(in srgb, var(--panel-hi) 60%, transparent); }

.alllist .when {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.alllist .what { font-size: 14.5px; line-height: 1.36; }
.alllist .what small {
  display: block;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* ---------- additional novenas: a list, like the calendar ---------- */

.plainlist { list-style: none; margin: 30px 0 0; padding: 0; max-width: 880px; }

.plainlist li { border-bottom: 1px dotted var(--rule-soft); }

.plainlist a {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: 30px;
  align-items: baseline;
  padding: 16px 2px;
  text-decoration: none;
  color: var(--parchment);
}
.plainlist a:hover { background: color-mix(in srgb, var(--panel-hi) 60%, transparent); }

.plainlist .what b { display: block; font-weight: 400; font-size: 16.5px; line-height: 1.3; }
.plainlist .what small {
  display: block;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-top: 5px;
}

.plainlist .blurb {
  color: var(--muted);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .plainlist a { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 3px double var(--rule-soft);
  padding: 26px 0 56px;
  color: var(--dim);
  font-size: 14px;
}
.site-footer .wrap { display: block; }
.footcols { display: flex; gap: 26px; justify-content: space-between; flex-wrap: wrap; }
.ornament--foot { margin: 0 0 22px; }
.ornament--foot svg { width: 17px; height: 17px; }
.site-footer p { margin: 0; max-width: 62ch; }
.site-footer a { color: var(--muted); }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }

  .rail {
    order: -1;              /* above the cards, not below them */
    position: static;       /* its own scrollport only makes sense beside them */
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .rail h2 { position: static; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  .framed { padding: 5px; }
  .framed .inner, .detail .framed .inner { padding: 20px 18px 22px; }
  .framed .keyline { inset: 6px; }
  .card-head { flex-direction: column; gap: 14px; }

  /* The header becomes two rows on a phone. The brand is 192px and the nav
     219px, which cannot share the ~339px a 390px screen leaves after padding;
     side by side they pushed the document to 448px and let the whole page be
     swiped sideways. Brand on top, nav beneath. */
  .site-header .wrap {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    min-height: 0;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .brand span { display: inline; }   /* room for "1962" again on its own row */

  .nav {
    width: 100%;
    gap: 24px;
    font-size: 11.5px;
    /* Belt and braces: should the labels ever outgrow even a full row, the bar
       scrolls rather than the page. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; flex: none; }

  .factbar { gap: 18px 22px; }       /* was 0 22px, collapsing wrapped rows */
}

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

/* ---------- print: black on white, the booklet the PDF mirrors ---------- */

@media print {
  /* A printed sheet is not dated: whoever holds it may begin on any day, so the
     day counter and the nine-day length come off. */
  body::before, .site-header, .rail, .actions, .daynav, .backlink,
  .site-footer, .ornament,
  .fact--status, .fact--counter, .fact--length { display: none !important; }
  body { background: #fff; color: #111; font-size: 11.5pt; line-height: 1.5; }
  .detail, .wrap { max-width: none; padding: 0; }
  /* Ornament is for the screen; on paper it only costs ink. */
  .framed { border: none; background: none; padding: 0; }
  .framed > .frameinner { border: none; background: none; overflow: visible; }
  .framed > .frameinner::before { display: none; }
  .framed .diaper, .framed .keyline, .ornament { display: none !important; }
  .framed .inner, .detail .framed .inner { padding: 0; }
  h1 { font-size: 20pt; }
  .prayer .rubric { color: #a4331c; }
  .prayer .said.lead::first-letter { color: #111; }
  .factbar { border-color: #bbb; }
  .fact .k, .eyebrow, .card .meta { color: #555; }
  .fact .v.accent { color: #111; }
  a { color: #111; text-decoration: none; }
  .dots i { border-color: #777; }
  .dots i.done, .dots i.now { background: #777; box-shadow: none; }
  .bar { background: #ddd; }
  .bar i { background: #777; }
}