.scripture {
  max-width: 42rem;
  margin: 0 auto;

  font-size: clamp(1.08rem, 4.7vw, 1.35rem);
  line-height: 1.62;

  text-align: justify;

  hyphens: auto;
}

.verse {
  display: inline;
}

.verse-number {
  position: relative;
  top: -.22em;

  margin-right: .22em;

  color: var(--accent);

  font-size: .63em;
  font-weight: 700;
}

.verse + .verse {
  margin-left: .18em;
}

.verse:first-child::first-letter {
  float: left;

  margin:
    .05em
    .10em
    -.08em
    0;

  color: var(--accent);

  font-size: 4.4em;
  line-height: .72;

  font-weight: 700;
}

.loading {
  text-align: center;
  font-style: italic;
  color: var(--muted-ink);
}





@media (min-width: 800px) {
  .scripture {
    --scripture-base-size: 1.23rem;
    line-height: 1.72;
  }
}

.verse {
  cursor: pointer;
  border-radius: 2px;

  transition:
    background-color .16s ease,
    box-shadow .16s ease;
}

.verse:hover {
  background: rgba(109, 28, 23, .07);
}

.verse:focus-visible {
  outline: none;

  background: rgba(109, 28, 23, .09);

  box-shadow:
    0 0 0 1px rgba(109, 28, 23, .35);
}

.verse:active {
  background: rgba(109, 28, 23, .13);
}

.scripture {
  --scripture-base-size: clamp(1.06rem, 4.35vw, 1.32rem);

  font-size:
    calc(
      var(--scripture-base-size)
      * var(--reader-scale)
    );

  line-height: 1.64;
}

/* =========================================================
   CHAPTER OPENING INITIALS
   ========================================================= */

/*
  Disable the prototype pseudo-element drop capital.
  The opening letter now has explicit semantic markup.
*/

.verse:first-child::first-letter {
  float: none;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.opening-mark {
  margin-right: .18em;

  color: var(--accent);

  font-size: .82em;
  font-weight: 700;
}

/* Modern KJV — restrained classical drop initial */

.drop-initial {
  float: left;

  margin:
    .05em
    .12em
    -.05em
    0;

  color: var(--accent);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 4.15em;
  line-height: .74;
  font-weight: 600;
}

/*
  1611 — illuminated initial.
  Deliberately decorative only at the chapter opening.
*/

.illuminated-initial {
  position: relative;

  float: left;

  width: 1.08em;
  height: 1.08em;

  margin:
    .05em
    .16em
    .02em
    0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #f1e4bd;

  background:
    radial-gradient(
      circle at 38% 32%,
      #9a382b,
      #701f18 56%,
      #44130f 100%
    );

  border:
    .055em solid #5b180f;

  outline:
    .035em solid rgba(91,24,15,.40);

  outline-offset:
    .045em;

  box-shadow:
    inset 0 0 .15em rgba(255,221,150,.22),
    0 .05em .10em rgba(42,28,13,.22);

  font-family:
    var(--historical-face, Georgia, serif);

  font-size: 3.85em;
  line-height: 1;
}

/* Tiny corner flourishes */

.illuminated-initial::before,
.illuminated-initial::after {
  content: "•";

  position: absolute;

  color: #d5b668;

  font-family: serif;
  font-size: .18em;
}

.illuminated-initial::before {
  top: .10em;
  left: .12em;
}

.illuminated-initial::after {
  right: .12em;
  bottom: .10em;
}

/*
  Reading mode intentionally tones the illumination down.
*/

body.page-reading .illuminated-initial {
  color: var(--accent);
  background: transparent;

  border: 0;
  outline: 0;
  box-shadow: none;

  width: auto;
  height: auto;

  font-size: 4.1em;
}

/*
  Comparison is a study surface.
  Never display chapter-opening ornament inside compare mode.
*/

body.compare-mode .illuminated-initial,
body.compare-mode .drop-initial {
  float: none;

  width: auto;
  height: auto;

  margin: 0;

  display: inline;

  color: inherit;
  background: transparent;

  border: 0;
  outline: 0;
  box-shadow: none;

  font: inherit;
}


/* =========================================================
   V1.1 READER TYPOGRAPHY HARDENING
   Body text scales independently from chapter ornament.
   ========================================================= */

.drop-initial {
  font-size: clamp(3.65em, 4.15em, 4.15em);
}

.illuminated-initial {
  font-size: clamp(3.35em, 3.85em, 3.85em);
}

body.page-reading .illuminated-initial {
  font-size: clamp(3.55em, 4.1em, 4.1em);
}

@media (max-width: 430px) {
  .scripture {
    --scripture-base-size: clamp(1.02rem, 4.55vw, 1.20rem);
    line-height: 1.60;
  }

  .drop-initial {
    font-size: 3.75em;
  }

  .illuminated-initial {
    font-size: 3.45em;
  }

  body.page-reading .illuminated-initial {
    font-size: 3.65em;
  }
}