/* Lord Cosmo's Commandments: the library under scripture/, loaded after styles.css.
   The library index comes first, then Book VIII's corrupted row, then the article pages.
   The Apology for the Chudification also loads apocrypha.css. */

/* The library index: a title leaf, the icon, and the contents of the volume. */
.library-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 100px;
  padding: 4px 0 70px;
}
.scripture-heading .eyebrow {
  color: #b09a68;
  margin-bottom: 15px;
}
.library-opening h1 {
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 78px);
  line-height: 1.02;
  font-weight: 700;
  color: var(--gold-light);
  margin: 0;
  max-width: 15ch;
}
.library-subtitle { font-size: 26px; font-style: italic; color: var(--gold); margin: 18px 0 28px; }
.scripture-lede {
  max-width: 40ch;
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-style: italic;
  color: var(--paper);
}
.library-editorial { color: #b4b09e; max-width: 51ch; margin: 20px 0 28px; }
.library-jump { display: block; width: fit-content; margin-top: 20px; color: #b4b09e; font-size: 16px; text-underline-offset: 4px; }
.icon-frame {
  margin: 0;
  padding: 6px;
  border: 1px solid var(--gold);
  border-radius: 50% 50% 2px 2px / 34% 34% 2px 2px;
}
.icon-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50% 50% 2px 2px / 34% 34% 2px 2px;
}
.icon-caption {
  margin: 21px 4px 0;
  text-align: center;
}
.icon-caption h2 {
  text-wrap: balance;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  margin: 0;
  color: var(--gold-light);
}
.icon-caption p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: #a3a08d;
}
.icon-caption .icon-verse {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #bda16b33;
  font-size: 14px;
  color: #8f8c7a;
}

.library-catalogue { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; padding-top: 48px; border-top: 1px solid #bda16b55; }
.catalogue-note h2 { text-wrap: balance; font-family: var(--serif); font-size: 30px; line-height: 1.15; font-weight: 400; color: var(--gold-light); margin: 0 0 24px; }
.catalogue-note p { color: #b4b09e; font-size: 17px; }
.catalogue-note a { display: inline-block; color: var(--gold); font-size: 16px; margin-top: 15px; text-underline-offset: 4px; }
/* Rows bleed 16px each side, so hover tints clear the text and Book VIII keeps the shared axis.
   The list is raised by one row's padding so the first title lines up with the contents note. */
.scripture-list {
  list-style: none;
  margin: -25px 0 0;
  padding: 0;
}
.scripture-item {
  margin-inline: -16px;
  border-bottom: 1px solid #bda16b33;
}
.scripture-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  padding: 25px 16px;
  text-decoration: none;
  transition: background 0.2s;
}
.scripture-link:hover {
  background: #bda16b12;
}
.scripture-numeral {
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.scripture-kind {
  display: block;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #b5a27a;
  margin: 0 0 7px;
}
.scripture-name {
  display: block;
  text-wrap: balance;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--paper);
}
.scripture-link:hover .scripture-name {
  color: var(--gold-light);
}
.scripture-incipit {
  display: block;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: #a09e8c;
}
.scripture-go {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  color: var(--gold);
  white-space: nowrap;
}
.scripture-go svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 1000px) {
  .library-opening { gap: 46px; grid-template-columns: minmax(0, 1fr) 220px; }
  .library-catalogue { grid-template-columns: 200px minmax(0, 1fr); gap: 35px; }
}
@media (max-width: 700px) {
  .commandments {
    padding: 56px 0 62px;
  }
  /* The rows reach the screen edges, and Book VIII's is tilted; keep its corners from scrolling the page. */
  .library-page {
    overflow-x: clip;
  }
  .library-opening { grid-template-columns: 1fr; gap: 42px; padding-bottom: 42px; }
  .library-opening .icon-panel { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: center; }
  .library-opening .icon-caption { text-align: left; margin: 0; }
  .library-opening .icon-verse { display: none; }
  .library-catalogue { grid-template-columns: 1fr; gap: 30px; padding-top: 35px; }
  .catalogue-note h2 { margin-bottom: 14px; }
  .catalogue-note p { max-width: 52ch; }
  .scripture-item {
    margin-inline: -20px;
  }
  .scripture-link {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    padding-inline: 20px;
  }
  .scripture-numeral {
    font-size: 22px;
  }
  .scripture-name {
    font-size: 24px;
  }
  .scripture-go {
    grid-column: 2;
  }
}

@media print {
  .library-page .commandments { display: block !important; background: white; color: black; }
  .library-opening { display: block; padding: 0 0 24px; }
  .library-opening .icon-panel, .library-jump, .volume-button, .companion-accession { display: none; }
  .library-opening h1, .scripture-name { color: black !important; text-shadow: none !important; }
  .library-catalogue { display: block; }
  .scripture-link { break-inside: avoid; }
}

/* Book VIII has been corrupted into the manuscript. Its drips hang into the row below. */
.scripture-item-doom + .scripture-item .scripture-link {
  padding-top: 48px;
}
.scripture-item-doom {
  position: relative;
  z-index: 1;
  border-top: 1px solid #d11a2299;
  border-bottom: 1px solid #d11a2299;
  box-shadow:
    0 0 0 1px #000,
    0 0 40px #8e0d1455;
  transform: rotate(-0.35deg);
}
.scripture-item-doom::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 38px;
  pointer-events: none;
  background:
    radial-gradient(3px 16px at 6% 0, #7a0a12 70%, transparent 72%),
    radial-gradient(4px 30px at 13% 0, #6a0710 70%, transparent 72%),
    radial-gradient(2px 10px at 21% 0, #7a0a12 70%, transparent 72%),
    radial-gradient(5px 36px at 34% 0, #5e060e 70%, transparent 72%),
    radial-gradient(3px 14px at 47% 0, #7a0a12 70%, transparent 72%),
    radial-gradient(4px 24px at 58% 0, #6a0710 70%, transparent 72%),
    radial-gradient(2px 12px at 69% 0, #7a0a12 70%, transparent 72%),
    radial-gradient(5px 32px at 81% 0, #5e060e 70%, transparent 72%),
    radial-gradient(3px 18px at 93% 0, #7a0a12 70%, transparent 72%);
  transform-origin: top;
  animation: doom-drip 7s ease-in-out infinite alternate;
}
.scripture-item-doom .scripture-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 0 0 0 0 0 .03 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 45% 130% at 0% 50%, #4a050b99, transparent 70%),
    radial-gradient(ellipse 40% 120% at 100% 50%, #2a0306, transparent 70%),
    #070304;
  box-shadow: inset 0 0 60px #000;
  animation:
    doom-static 0.6s steps(1) infinite,
    doom-shudder 6s steps(1) infinite;
}
/* The noise sits in an aria-hidden span, so it stays out of the link's accessible name. */
.doom-noise {
  position: absolute;
  inset: -4px 0 0;
  z-index: -1;
  overflow: hidden;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  word-break: break-all;
  color: #d11a2226;
  pointer-events: none;
}
.doom-noise::before {
  content: "0xDEADC0DE SIGSEGV 0x00000008 \2593\2592\2591 core dumped \2591\2592\2593 FAULT AT 0xC05M0 ERR_SECTOR_VIII 0xBADF00D kernel: unable to handle page fault \2593\2593\2592 0xFFFFFFFF segmentation fault 0x7F454C46 execve() \2591 heap corrupted \2591 lock held by KING \2591 0xDEADC0DE SIGSEGV \2593\2592\2591 unreachable \2591\2592\2593 0x00000008 ERR_SECTOR_VIII core dumped 0xBADF00D \2593\2593\2592 page fault \2591 lock held by KING \2591 0x7F454C46 /dev/null /dev/null /dev/null \2591\2592\2593 SIGKILL ignored \2593\2592\2591 0xDEADC0DE SIGSEGV 0x00000008 core dumped ERR_SECTOR_VIII \2591 heap corrupted \2591 0xBADF00D";
}
.scripture-item-doom .scripture-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 26%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(transparent, #ff1a2e1f 45%, #f3e6c414 50%, #ff1a2e1f 55%, transparent);
  animation: doom-roll 4.5s linear infinite;
}
.scripture-item-doom .scripture-link:hover {
  background-color: #0e0406;
}
.scripture-item-doom .scripture-numeral,
.scripture-item-doom .scripture-name {
  position: relative;
}
.scripture-item-doom .scripture-name {
  font-family: var(--display);
}
.scripture-item-doom .scripture-numeral {
  font-size: 21px;
  font-weight: 700;
  color: #e0353c;
  text-shadow:
    0 0 14px #d11a22,
    0 0 30px #8e0d14;
  animation: doom-flicker 5s steps(1) infinite;
}
.scripture-item-doom .scripture-name {
  font-size: 36px;
  line-height: 1.1;
  color: #efe0c4;
  text-shadow:
    2px 0 0 #d11a22aa,
    -2px 0 0 #3a0006,
    0 0 22px #d11a2299;
}
.scripture-item-doom .scripture-numeral::before,
.scripture-item-doom .scripture-numeral::after,
.scripture-item-doom .scripture-name::before,
.scripture-item-doom .scripture-name::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-shadow: none;
  clip-path: inset(50% 0 50% 0);
}
.scripture-item-doom .scripture-numeral::before,
.scripture-item-doom .scripture-name::before {
  color: #ff2436;
  animation: doom-glitch-a 3.7s steps(1) infinite;
}
.scripture-item-doom .scripture-numeral::after,
.scripture-item-doom .scripture-name::after {
  color: #f3e6c4;
  animation: doom-glitch-b 3.7s steps(1) infinite;
}
.scripture-item-doom .scripture-link:hover .scripture-name {
  color: #ffd6c8;
}
.scripture-item-doom .scripture-link:hover .scripture-name::before,
.scripture-item-doom .scripture-link:hover .scripture-name::after {
  animation-duration: 0.9s;
}
.scripture-item-doom .scripture-kind {
  color: #c0454a;
  text-shadow: 0 0 8px #8e0d14;
}
.doom-tag {
  margin-right: 6px;
  padding: 1px 5px;
  background: #d11a22;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #0b0303;
  text-shadow: none;
  animation: doom-flicker 2.3s steps(1) infinite;
}
.scripture-item-doom .scripture-incipit {
  color: #b58f86;
}
.scripture-item-doom .scripture-go {
  color: #ff5b4b;
  text-shadow: 0 0 10px #d11a22;
}
@keyframes doom-static {
  33% {
    background-position: -40px 20px, 0 0, 0 0, 0 0;
  }
  66% {
    background-position: 60px -30px, 0 0, 0 0, 0 0;
  }
}
@keyframes doom-shudder {
  0%,
  86%,
  100% {
    transform: none;
  }
  87% {
    transform: translate(-4px, 0) skewX(3deg);
  }
  88% {
    transform: translate(5px, 1px) skewX(-2deg);
  }
  89% {
    transform: translate(-2px, 0);
  }
}
@keyframes doom-roll {
  to {
    top: 110%;
  }
}
@keyframes doom-drip {
  from {
    transform: scaleY(0.55);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes doom-flicker {
  0%,
  100% {
    opacity: 1;
  }
  41%,
  43%,
  78% {
    opacity: 0.25;
  }
  42%,
  44%,
  79% {
    opacity: 1;
  }
}
@keyframes doom-glitch-a {
  0%,
  84%,
  100% {
    clip-path: inset(50% 0 50% 0);
    transform: none;
  }
  85% {
    clip-path: inset(8% 0 62% 0);
    transform: translate(-7px, 0);
  }
  87% {
    clip-path: inset(58% 0 12% 0);
    transform: translate(6px, 0);
  }
  89% {
    clip-path: inset(30% 0 44% 0);
    transform: translate(-3px, 0);
  }
  91% {
    clip-path: inset(80% 0 4% 0);
    transform: translate(9px, 0);
  }
}
@keyframes doom-glitch-b {
  0%,
  85%,
  100% {
    clip-path: inset(50% 0 50% 0);
    transform: none;
  }
  86% {
    clip-path: inset(40% 0 38% 0);
    transform: translate(5px, 0);
  }
  88% {
    clip-path: inset(12% 0 70% 0);
    transform: translate(-6px, 0);
  }
  90% {
    clip-path: inset(66% 0 16% 0);
    transform: translate(3px, 0);
  }
}
@media (max-width: 700px) {
  .scripture-item-doom .scripture-name {
    font-size: 29px;
  }
}

/* The article pages: a masthead, the vellum sheet, and the pager between books. */

.codex-masthead {
  padding: 34px 0 38px;
  text-align: center;
  border-bottom: 1px solid #bda16b45;
  background: var(--night-deep);
}
.codex-breadcrumb {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--gold);
}
.codex-breadcrumb a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid #bda16b55;
  padding-bottom: 2px;
}
.codex-breadcrumb a:hover {
  border-bottom-color: var(--gold-light);
  color: var(--gold-light);
}
.codex-standing {
  font-size: 14px;
  font-style: italic;
  color: var(--gold);
  margin: 0 0 12px;
}
.codex-title {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.08;
  max-width: 23ch;
  margin: 0 auto;
  color: var(--gold-light);
}
.codex-subtitle {
  max-width: 54ch;
  margin: 20px auto 0;
  font-size: 19px;
  line-height: 1.55;
  font-style: italic;
  color: #b8b4a0;
}
.codex-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  font-size: 15px;
  color: #b4b09e;
}

.scripture {
  padding: 48px 0 60px;
}
.vellum {
  max-width: 906px;
  margin: 0 auto;
}
.scripture-sheet {
  display: grid;
  grid-template-columns: minmax(0, 650px) 200px;
  column-gap: 56px;
  align-items: start;
}
/* Body text keeps one measure; notes hang in a separate, reserved gutter
   and take no height from the text column, so the verses keep their rhythm. */
.scripture-sheet > * { grid-column: 1; min-width: 0; }
.scripture-sheet > .annotated-passage { grid-column: 1 / -1; }
.annotated-passage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 650px) 200px;
  column-gap: 56px;
  align-items: start;
}
.annotated-passage > .marginalia { position: absolute; top: 0; right: 0; width: 200px; }
.annotated-passage > :not(.marginalia) { grid-column: 1; grid-row: 1; min-width: 0; }
.annotated-passage:has(+ .benediction) > .marginalia { position: static; width: auto; grid-column: 2; grid-row: 1; }
.chapter {
  margin: 38px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--ink);
}
.scripture-sheet > .chapter:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.chapter .num {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-style: normal;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.chapter span {
  display: block;
  margin-top: 9px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--muted);
}
.verse {
  position: relative;
  padding-left: 46px;
  margin: 0 0 17px;
  font-size: 21px;
  line-height: 1.65;
  color: #4b4d3f;
}
.verse-num {
  position: absolute;
  left: 0;
  top: 8px;
  width: 32px;
  text-align: right;
  font-size: 13px;
  color: #9b8752;
}
.verse em {
  color: #3f412f;
}
.lettrine {
  float: left;
  margin: 4px 12px 0 0;
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.9;
  color: #57593f;
}
.lettrine.roman {
  font-weight: 400;
}
.speech {
  margin: 26px 0 26px 34px;
  padding-left: 22px;
  border-left: 2px solid #cdbf95;
  font-size: 20px;
  line-height: 1.68;
  font-style: italic;
  color: #4b4d3f;
}
.tablet {
  counter-reset: cmd;
  list-style: none;
  margin: 14px 0 28px;
  padding: 24px 0;
  border-block: 1px solid var(--rule);
}
.tablet li {
  counter-increment: cmd;
  position: relative;
  padding-left: 50px;
  margin-bottom: 22px;
  font-size: 19px;
  line-height: 1.63;
  color: #4b4d3f;
}
.tablet li:last-child {
  margin-bottom: 0;
}
.tablet li::before {
  content: counter(cmd, upper-roman);
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  text-align: right;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #93803f;
}
.tablet em {
  color: #3f412f;
}
.marginalia {
  margin: 5px 0 24px;
  padding-top: 12px;
  border-top: 1px dotted var(--rule);
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: var(--muted);
}
.marginalia b {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8b733d;
}
.marginalia p {
  margin: 0;
}
.editor-preface {
  margin: 0 0 30px;
  padding: 2px 0 2px 22px;
  border-left: 1px solid #b7a371;
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
  color: var(--muted);
}
.editor-preface b {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8b733d;
}
.editor-preface p {
  margin: 0;
}
.codex-block {
  margin: 8px 0 24px;
  padding: 16px 20px;
  overflow-x: auto;
  border-left: 2px solid #b7a371;
  background: #e3dcc950;
}
.codex-block-label {
  display: block;
  margin-bottom: 11px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8b733d;
}
.codex-block pre {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 14.5px;
  line-height: 1.7;
  color: #45483a;
}
.scripture-figure {
  clear: both;
  margin: 40px 0;
  text-align: center;
}
.scripture-figure img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid #b7a371;
  border-radius: 50% 50% 2px 2px / 34% 34% 2px 2px;
}
.scripture-figure figcaption {
  max-width: 44ch;
  margin: 17px auto 0;
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: var(--muted);
}
.benediction {
  clear: both;
  margin: 46px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.benediction p {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  color: var(--ink);
}
.benediction span {
  display: block;
  margin-top: 13px;
  font-size: 15px;
  font-style: italic;
  color: var(--muted);
}
.colophon {
  max-width: 906px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
  color: var(--muted);
}
/* On the vellum articles the provenance line shares the text column's measure. */
.scripture .colophon {
  max-width: 650px;
  margin-left: max(0px, (100% - 906px) / 2);
}

.prose {
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 1.65;
  color: #4b4d3f;
}
.prose em {
  color: #3f412f;
}
.chapter.plain {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  letter-spacing: 0.02em;
}
.subchapter {
  clear: both;
  margin: 36px 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.3;
  color: #57593f;
}
@media (max-width: 700px) {
  .prose {
    font-size: 18px;
    line-height: 1.68;
  }
  .subchapter {
    font-size: 20px;
  }
  .chapter.plain {
    font-size: 23px;
  }
}

/* The Litany of Wu: each received line set as call and response, with the Editors' rubrics in red. */
.rubric,
.litany-rubric {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.55;
  font-style: italic;
  color: #9a2b1f;
}
.litany {
  counter-reset: invocation;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.litany > li {
  border-bottom: 1px dotted var(--rule);
}
.invocation {
  counter-increment: invocation;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.5em;
  gap: 4px 24px;
  align-items: baseline;
  padding: 12px 0 12px 46px;
  font-size: 20px;
  line-height: 1.5;
  color: #4b4d3f;
}
.invocation::before {
  content: counter(invocation);
  position: absolute;
  left: 0;
  top: 19px;
  width: 32px;
  text-align: right;
  font-size: 13px;
  color: #9b8752;
}
.invocation-call {
  font-style: italic;
}
.invocation-response {
  color: var(--ink);
}
.litany .vr {
  margin-right: 8px;
  font-style: normal;
  color: #9a2b1f;
}
.litany > .litany-rubric {
  margin: 0;
  padding: 13px 0 13px 46px;
}
.litany-refrain {
  padding: 15px 0 15px 46px;
  font-size: 20px;
  color: var(--ink);
}
.litany-refrain b {
  margin-right: 8px;
  font-weight: 400;
  font-style: italic;
  color: #9a2b1f;
}
.litany-collect {
  font-style: italic;
}
@media (max-width: 700px) {
  .invocation {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding-left: 34px;
    font-size: 18px;
  }
  .invocation::before {
    top: 16px;
    width: 22px;
    font-size: 12px;
  }
  .litany > .litany-rubric,
  .litany-refrain {
    padding-left: 34px;
  }
  .litany-refrain {
    font-size: 18px;
  }
}

.scripture-pager {
  padding: 52px 0 60px;
  background: var(--night);
}
.pager-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  max-width: var(--page);
  margin: auto;
}
.pager-link {
  display: block;
  padding: 20px 0;
  border-block: 1px solid #bda16b55;
  text-decoration: none;
  transition: border-color 0.2s;
}
.pager-link:hover {
  border-color: var(--gold);
}
.pager-link span {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-style: italic;
  color: var(--gold);
}
.pager-link strong {
  display: block;
  text-wrap: balance;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--paper);
}
.pager-link:hover strong { color: var(--gold-light); }
/* The second link sits on the right, whether it is the next book or the contents. */
.pager-link + .pager-link {
  text-align: right;
}
.pager-return {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: var(--page);
  margin: 30px auto 0;
  font-size: 15px;
  color: #8f8c7a;
}
.pager-return a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #bda16b66;
}
.pager-return a:hover {
  text-decoration-color: var(--gold-light);
}
.pager-return svg {
  width: 12px;
  height: 12px;
  color: var(--gold);
}

@media (max-width: 1000px) {
  .marginalia {
    margin: 8px 0 24px;
    max-width: 52ch;
  }
  .scripture {
    padding: 46px 0 52px;
  }
  .scripture-sheet, .annotated-passage { display: block; }
  .annotated-passage > .marginalia { position: static; width: auto; }
  .vellum { max-width: 650px; }
  .colophon, .scripture .colophon { max-width: 650px; margin-left: auto; }
}
@media (max-width: 700px) {
  .codex-masthead {
    padding: 26px 0 30px;
  }
  .codex-subtitle {
    font-size: 17px;
  }
  .verse {
    padding-left: 34px;
    font-size: 18px;
    line-height: 1.68;
  }
  .verse-num {
    top: 6px;
    width: 22px;
    font-size: 12px;
  }
  .lettrine {
    font-size: 54px;
  }

  .speech {
    margin-left: 0;
    font-size: 18px;
  }
  .tablet li {
    padding-left: 44px;
    font-size: 17px;
  }
  .tablet li::before {
    width: 30px;
    font-size: 15px;
  }
  .chapter {
    font-size: 26px;
  }
  .pager-inner {
    grid-template-columns: 1fr;
  }
  .pager-link + .pager-link {
    text-align: left;
  }
  .codex-block pre {
    font-size: 13px;
  }
}
@media print {
  .scripture-pager,
  .chapter-index {
    display: none !important;
  }
  .codex-masthead { padding: 0 0 24px; background: none; }
  .codex-title { color: black; font-size: 30pt; }
  .codex-breadcrumb, .codex-meta, .codex-standing { display: none; }
  .codex-subtitle { color: #444; }
  .scripture { padding: 24px 0; }
  .prose, .speech, .tablet li { font-size: 12pt; }
  .chapter { break-after: avoid; }
  .marginalia { margin: 20px 0; }
  .scripture-sheet, .annotated-passage { display: block; }
  .annotated-passage > .marginalia { position: static; width: auto; }
  .vellum {
    padding: 0;
    border: 0;
    background: none;
  }
  .verse {
    font-size: 12pt;
  }
}

.chapter-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px 26px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
}
.chapter-index > span { color: var(--muted); font-style: italic; margin-right: 12px; }
.chapter-index a { text-decoration-color: #a08d5c80; text-underline-offset: 4px; }
.chapter-index a:hover { text-decoration-color: var(--ink); }
.chapter:target { color: #6d5a26; }

@media (max-width: 700px) {
  .chapter-index { gap: 8px 20px; justify-content: flex-start; font-size: 16px; }
  .chapter-index > span { flex-basis: 100%; }
}

/* Chinese prose needs more leading; chapter headings and code keep their own. */
.scripture-sheet .prose:lang(zh-Hans),
.scripture-sheet .prose:lang(zh-Hans) *,
.scripture-sheet .subchapter:lang(zh-Hans) { line-height: 1.85; }
.scripture-sheet code { font-size: 0.8em; overflow-wrap: anywhere; }
.scripture-sheet pre { overflow-wrap: normal; }