.folio-shell {
  width: 100%;
  padding: 18px 10px 92px;
}

.folio {
  position: relative;

  width: min(760px, 100%);
  margin: 0 auto;

  padding: 26px 22px 42px;

  background:
    linear-gradient(
      90deg,
      rgba(92, 69, 37, .08),
      transparent 12%,
      transparent 88%,
      rgba(92, 69, 37, .08)
    ),
    radial-gradient(
      ellipse at top,
      var(--paper-light),
      var(--paper) 50%,
      var(--paper-deep)
    );

  border: 1px solid #7b684d;

  box-shadow:
    0 18px 50px var(--shadow),
    inset 0 0 45px rgba(79, 59, 33, .11);

  overflow: hidden;
}

.folio::before,
.folio::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.folio::before {
  inset: 8px;
  border: 1px solid rgba(78, 58, 35, .5);
}

.folio::after {
  inset: 13px;
  border: 1px solid rgba(78, 58, 35, .22);
}

.title-page,
.chapter-heading,
.scripture,
.folio-footer,
.ornament,
.ornamental-rule {
  position: relative;
  z-index: 2;
}

.title-page {
  padding: 16px 0 24px;
  text-align: center;
}

.title-small {
  margin: 0;
  font-size: .88rem;
  letter-spacing: .32em;
}

.title-page h1 {
  margin: 4px auto 12px;

  max-width: 100%;
  padding-inline: .08em;

  font-size: clamp(2rem, 9vw, 5rem);
  font-weight: 500;
  line-height: .95;

  letter-spacing: -.035em;

  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}

.title-description {
  margin: 0;

  font-size: clamp(.96rem, 3.8vw, 1.3rem);
  font-style: italic;
  line-height: 1.45;
}

.title-cross {
  margin: 18px 0 12px;

  color: var(--accent);

  font-size: 1.5rem;
}

.title-edition {
  margin: 0;

  color: var(--muted-ink);

  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
}

.ornament {
  text-align: center;
  color: var(--accent);
}

.ornament-top {
  margin-top: 2px;
  letter-spacing: .3em;
}

.ornamental-rule {
  height: 36px;

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

  color: var(--accent);
}

.ornamental-rule::before,
.ornamental-rule::after {
  content: "";
  width: 34%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rule)
    );
}

.ornamental-rule::after {
  background:
    linear-gradient(
      90deg,
      var(--rule),
      transparent
    );
}

.ornamental-rule span {
  padding: 0 12px;
}

.chapter-heading {
  padding: 18px 0 26px;
  text-align: center;
}

.chapter-heading p {
  margin: 0;

  font-size: .68rem;
  letter-spacing: .2em;
}

.chapter-heading h2 {
  margin: 4px 0 10px;

  font-size: clamp(2rem, 8vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}

.chapter-number {
  color: var(--muted-ink);
}

.folio-footer {
  margin-top: 32px;

  text-align: center;

  color: var(--muted-ink);
  font-size: .68rem;
  letter-spacing: .2em;
}

.folio-footer .ornament {
  margin-bottom: 8px;

  color: var(--accent);
  font-size: 1.2rem;
}

@media (min-width: 700px) {
  .folio-shell {
    padding-top: 34px;
  }

  .folio {
    padding: 46px 58px 64px;
  }
}

/* =========================================================
   1611 TYPOGRAPHY
   ========================================================= */

@font-face {
  font-family: "KJV1611";
  src: url("/assets/fonts/KJV1611.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  --historical-face: "KJV1611", Georgia, "Times New Roman", serif;
  --reading-face: Georgia, "Times New Roman", serif;
}

/*
  Use the restored 1611 face as display typography rather
  than forcing long passages into blackletter.
*/

.title-page h1,
.chapter-heading h2,
.title-small,
.title-cross,
.ornament,
.ornamental-rule span {
  font-family: var(--historical-face);
}

.title-page h1 {
  letter-spacing: .01em;
  line-height: .98;
}

.chapter-heading h2 {
  letter-spacing: .025em;
}

body[data-edition="kjv1611"] .chapter-heading h2 {
  font-family: var(--historical-face);
}

/* Historical initial only */
body[data-edition="kjv1611"] .verse:first-child::first-letter {
  font-family: var(--historical-face);
  font-weight: 400;
}

/* Body remains a readable serif */
.scripture,
.compare-focus-text {
  font-family: var(--reading-face);
}

/* =========================================================
   PRINTED FOLIO DETAILS
   ========================================================= */

.folio {
  background:
    linear-gradient(
      90deg,
      rgba(53, 35, 18, .10),
      transparent 6%,
      transparent 94%,
      rgba(53, 35, 18, .10)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(80, 60, 38, .018) 0,
      rgba(80, 60, 38, .018) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(
      ellipse at 50% 10%,
      var(--paper-light),
      var(--paper) 58%,
      var(--paper-deep)
    );
}

.folio::before {
  inset: 8px;
  border:
    1px solid rgba(74, 52, 30, .58);
}

.folio::after {
  inset: 13px;
  border:
    double 3px rgba(74, 52, 30, .22);
}

.chapter-heading::before,
.chapter-heading::after {
  content: "❧";

  position: absolute;
  top: 50%;

  color: rgba(109, 28, 23, .72);

  font-family: var(--historical-face);
  font-size: .95rem;
}

.chapter-heading::before {
  left: 3%;
}

.chapter-heading::after {
  right: 3%;
  transform: scaleX(-1);
}

@media (max-width: 480px) {
  .chapter-heading::before,
  .chapter-heading::after {
    opacity: .55;
    font-size: .75rem;
  }
}

/* =========================================================
   PAGE MODES
   ========================================================= */

body.page-reading .folio-shell {
  padding-top: 8px;
}

body.page-reading .folio {
  max-width: 820px;

  padding-top: 22px;

  background: var(--paper-light);

  box-shadow:
    0 12px 32px rgba(20,14,7,.18);
}

body.page-reading .title-page {
  display: none;
}

body.page-reading .ornament-top,
body.page-reading .ornamental-rule {
  display: none;
}

body.page-reading .folio::before,
body.page-reading .folio::after {
  display: none;
}

body.page-reading .chapter-heading {
  padding-top: 8px;
}


/* =========================================================
   CHAPTER OPENING DEVICE
   ========================================================= */

.chapter-heading {
  position: relative;

  margin-top: 6px;
  padding:
    28px
    34px
    30px;
}

.chapter-heading::before,
.chapter-heading::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 21%;
  height: 8px;

  transform: translateY(-50%);

  opacity: .70;
}

.chapter-heading::before {
  left: 0;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--rule)
    );
}

.chapter-heading::after {
  right: 0;

  background:
    linear-gradient(
      to left,
      transparent,
      var(--rule)
    );
}

.chapter-heading h2 {
  position: relative;
}

.chapter-heading h2::before {
  content: "❦";

  display: block;

  margin-bottom: 8px;

  color: var(--accent);

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

  font-size: .42em;
  line-height: 1;
}

/* KJV receives the structure without excessive historicism */

body[data-edition="kjv"] .chapter-heading h2::before {
  content: "✦";

  font-family: Georgia, serif;

  font-size: .28em;
}

/* Reading mode removes most ornament */

body.page-reading .chapter-heading::before,
body.page-reading .chapter-heading::after,
body.page-reading .chapter-heading h2::before {
  display: none;
}

body.page-reading .chapter-heading {
  padding:
    10px
    12px
    22px;
}

@media (max-width: 480px) {
  .chapter-heading {
    padding:
      22px
      24px
      25px;
  }

  .chapter-heading::before,
  .chapter-heading::after {
    width: 15%;
  }
}

/* =========================================================
   FOLIO READING ERGONOMICS
   ========================================================= */

.title-page {
  padding-top: 12px;
  padding-bottom: 18px;
}

.title-page h1 {
  margin-top: 3px;
  margin-bottom: 8px;
}

.title-cross {
  margin:
    12px
    0
    9px;
}

.ornamental-rule {
  height: 28px;
}

/*
  On phone portrait the page still feels ceremonial,
  without consuming most of the first screen.
*/

@media (max-width: 600px) {
  .title-page h1 {
    font-size:
      clamp(
        1.7rem,
        8.2vw,
        3.15rem
      );

    line-height: 1;
  }

  .title-description {
    font-size:
      clamp(
        .87rem,
        3.5vw,
        1.05rem
      );
  }
}

/* =========================================================
   AUTHORITATIVE PAGE APPEARANCE
   ========================================================= */

/* ---------- FOLIO ---------- */

body.page-folio {
  --ink: #19140d;
  --muted-ink: #675947;
  --paper: #e8dcc1;
  --paper-deep: #d5c39c;
  --paper-light: #f4ecd8;
  --rule: #756044;
  --accent: #6d1c17;

  background:
    radial-gradient(
      circle at 50% 0%,
      #30271d 0%,
      #15120e 58%
    );
}

/* ---------- READING ---------- */

body.page-reading {
  --ink: #171510;
  --muted-ink: #625c50;
  --paper: #f0eadc;
  --paper-deep: #e5dcc9;
  --paper-light: #faf6ed;
  --rule: #afa48f;
  --accent: #70241d;

  background: #25221c;
}

body.page-reading .folio {
  background: var(--paper-light);

  border-color: #b9ae99;

  box-shadow:
    0 12px 34px rgba(0,0,0,.18);
}

/* ---------- NOCTURNE ---------- */

body.page-nocturne {
  --ink: #ded2b9;
  --muted-ink: #9e9078;
  --paper: #1e1a14;
  --paper-deep: #12100d;
  --paper-light: #272119;
  --rule: #655642;
  --accent: #bd6858;

  background:
    radial-gradient(
      circle at 50% 0%,
      #292219,
      #0d0b09 68%
    );
}

body.page-nocturne .folio {
  background:
    radial-gradient(
      ellipse at 50% 8%,
      #2c251c,
      #1e1a14 58%,
      #13100d
    );

  border-color: #574a3a;

  box-shadow:
    0 18px 55px rgba(0,0,0,.58),
    inset 0 0 45px rgba(0,0,0,.18);
}

body.page-nocturne .compare-panel,
body.page-nocturne .navigator-panel,
body.page-nocturne .search-panel,
body.page-nocturne .reference-panel,
body.page-nocturne .bookmark-panel,
body.page-nocturne .display-panel {
  background: #211c16;
  color: var(--ink);
}

/*
  The application chrome remains dark in ALL three modes.
  Page style changes the reading surface, not the whole UI.
*/

.app-bar,
.reader-controls {
  background: rgba(21,18,14,.97);
  color: #e8dcc1;
}

/* =========================================================
   V1.1 LENGTH-AWARE BOOK TITLES
   Preserve monumental short titles while fitting long names.
   ========================================================= */

.title-page h1 {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;

  margin-inline: auto;
  padding-inline: .08em;

  text-align: center;
  line-height: .92;

  white-space: normal;
  overflow: visible;

  overflow-wrap: normal;
  word-break: normal;
}

/* Medium-length titles */
.title-page h1.book-title-medium {
  font-size: clamp(1.9rem, 7.4vw, 4.25rem);
  letter-spacing: -.045em;
}

/* Long titles: Deuteronomy, Ecclesiastes, Thessalonians, etc. */
.title-page h1.book-title-long {
  font-size: clamp(1.55rem, 6.1vw, 3.55rem);
  letter-spacing: -.055em;
}

/* Very long title plus numeric prefix */
.title-page h1.book-title-xlong {
  font-size: clamp(1.35rem, 5.35vw, 3rem);
  letter-spacing: -.06em;
}

@media (max-width: 480px) {
  .title-page h1.book-title-medium {
    font-size: clamp(1.75rem, 7.3vw, 2.8rem);
  }

  .title-page h1.book-title-long {
    font-size: clamp(1.4rem, 5.9vw, 2.35rem);
  }

  .title-page h1.book-title-xlong {
    font-size: clamp(1.22rem, 5.1vw, 2rem);
  }
}


/* =========================================================
   V1.1 RESPONSIVE CHAPTER BOOK TITLES
   Length-aware sizing for the actual rendered book heading.
   ========================================================= */

.chapter-heading h2 {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;

  text-align: center;
}

/* Examples: LEVITICUS, MATTHEW */
.chapter-heading h2.book-title-medium {
  font-size: clamp(1.9rem, 7vw, 3.15rem);
}

/* Examples: DEUTERONOMY, ECCLESIASTES */
.chapter-heading h2.book-title-long {
  font-size: clamp(1.55rem, 5.8vw, 2.7rem);
  letter-spacing: -.015em;
}

/* Examples: THESSALONIANS */
.chapter-heading h2.book-title-xlong {
  font-size: clamp(1.3rem, 4.7vw, 2.25rem);
  letter-spacing: -.025em;
}

@media (max-width: 480px) {
  .chapter-heading h2.book-title-medium {
    font-size: clamp(1.75rem, 6.8vw, 2.45rem);
  }

  .chapter-heading h2.book-title-long {
    font-size: clamp(1.42rem, 5.45vw, 2.05rem);
  }

  .chapter-heading h2.book-title-xlong {
    font-size: clamp(1.15rem, 4.35vw, 1.72rem);
  }
}