/* ============================================================
   The page: chapter openers, drop caps, scene breaks, and the
   finer points of setting the text (js/page.js dresses the DOM).
   ============================================================ */

/* ---------- setting the text ---------- */
.pages {
  text-wrap: pretty; /* no lonely last words; Safari also evens out the rag and the gaps */
  hanging-punctuation: first allow-end; /* Safari: opening quotes hang into the margin */
  /* hyphenate only words long enough to be worth it, never leaving a 1–2 letter stub */
  hyphenate-limit-chars: 6 3 2;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 2;
  hyphenate-limit-lines: 2; -webkit-hyphenate-limit-lines: 2;
}
/* the text column's narrow lines on a phone: ragged unless the reader chose justified there */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  :root[data-align="justify"]:not([data-palign="justify"]) .pages { text-align: left; }
  :root[data-palign="justify"] .pages { text-align: justify; }
  /* a justified narrow column leans on hyphens: break a little more readily there */
  :root[data-palign="justify"]:not([data-hyph="off"]) .pages { hyphenate-limit-chars: 5 2 2; -webkit-hyphenate-limit-before: 2; }
}

/* ---------- chapter openers ---------- */
.sec.is-chapter + .sec { margin-top: 3em; }
.ch-open {
  margin: 2.4em 0 2.3em;
  text-align: center; text-indent: 0;
  hyphens: manual; -webkit-hyphens: manual;
}
.flow > .sec:first-child .ch-open { margin-top: 1.8em; }
.sec .ch-open > *, .sec .ch-open .ch-kicks > * { margin: 0; text-indent: 0; text-align: center; }
.sec .ch-open strong { font-weight: inherit; }

/* the kicker: "CHAPTER TWENTY-FOUR", with the point of view after it */
.sec .ch-open .ch-kicks {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2em .9em;
  margin-bottom: .95em;
  font: 600 .6em/1.5 var(--ui); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.sec .ch-open .ch-kicks > * { font: inherit; letter-spacing: inherit; color: inherit; line-height: inherit; }
.sec .ch-open .ch-kicks .ch-pov { color: var(--crimson); }
.sec .ch-open .ch-kick + .ch-pov::before {
  content: ""; display: inline-block; width: .38em; height: .38em; margin: 0 .95em .2em 0;
  vertical-align: middle; background: var(--gold); opacity: .55; transform: rotate(45deg);
}

/* the title, in the display cut of the serif */
.sec .ch-open .ch-title {
  font: 400 1.78em/1.14 var(--serif); font-variation-settings: "opsz" 72;
  letter-spacing: -0.015em; text-wrap: balance;
  color: var(--ink);
}
:root[data-font="sans"] .sec .ch-open .ch-title { font-family: var(--ui); font-weight: 500; letter-spacing: -0.025em; }
:root[data-weight="bold"] .sec .ch-open .ch-title { font-weight: 480; }
/* while the narration plays the page settles back; the opener keeps its colour like the line being read */
.pages.has-audio.playing .flow .ch-open .ch-title { color: color-mix(in oklab, var(--ink) 82%, var(--bg)); }
.pages.has-audio.playing .flow .ch-open .now { color: var(--ink); }
.pages.has-audio.playing .flow .ch-kicks .now { color: inherit; }

/* the rule under the title draws itself out the first time the opener comes into view */
.sec .ch-open .ch-orn {
  position: relative; width: 6.6em; height: 1px; margin: 1.15em auto 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--crimson) 75%, transparent) 28%, color-mix(in oklab, var(--gold) 85%, transparent) 72%, transparent);
  opacity: 0; transform: scaleX(.25);
  transition: opacity .9s ease .15s, transform 1.2s var(--ease-out) .15s;
}
.ch-orn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .34em; height: .34em; margin: -.17em 0 0 -.17em;
  background: var(--gold); transform: rotate(45deg);
}
.sec.seen .ch-open .ch-orn { opacity: .9; transform: none; }

/* Part pages: more air, the title larger and in italic */
.ch-open.is-part { margin: 3.4em 0 2.6em; }
.flow > .sec:first-child .ch-open.is-part { margin-top: 2.6em; }
.sec .ch-open.is-part .ch-title { font-size: 2.35em; font-style: italic; }
.sec .ch-open.is-part .ch-kicks { font-size: .66em; }

/* ---------- the first paragraph: a drop cap, the opening words in small capitals ---------- */
.sec p.ch-first { text-indent: 0; }
.ch-first::first-letter {
  -webkit-initial-letter: 3; initial-letter: 3;
  font-family: var(--serif); font-weight: 400; font-style: normal; font-variation-settings: "opsz" 72;
  color: var(--crimson);
  margin-right: .12em;
}
/* a first paragraph of a line or two: the capital rises from the first line instead */
/* a first paragraph of only a few lines: a two-line drop; of a line or so: the capital stands up from the line */
.ch-first.ch-mid::first-letter { -webkit-initial-letter: 2; initial-letter: 2; }
.ch-first.ch-short::first-letter {
  -webkit-initial-letter: normal; initial-letter: normal;
  font-size: 2.15em; line-height: 1; margin-right: .03em;
}
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .ch-first::first-letter { float: left; font-size: 3.55em; line-height: .8; margin: .07em .1em 0 0; }
  .ch-first.ch-short::first-letter { float: none; margin: 0 .03em 0 0; }
}
:root[data-font="sans"] .ch-first::first-letter { font-family: var(--serif); }
.ch-first:not(.has-lead)::first-line { font-variant-caps: small-caps; letter-spacing: .025em; }
/* the opening quote of a dropped first word hangs in the margin beside the capital */
.ch-first .dq {
  position: absolute; transform: translateX(-100%); margin-left: -.08em;
  font-size: 1.6em; line-height: 1; color: var(--crimson); opacity: .75;
}
.sc-lead { font-variant-caps: all-small-caps; letter-spacing: .045em; }
/* a narrow column: a two-line drop cap keeps the first lines from being squeezed */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .ch-first:not(.ch-short)::first-letter { -webkit-initial-letter: 2; initial-letter: 2; margin-right: .1em; }
  .ch-open { margin: 1.9em 0 2em; }
  .sec .ch-open .ch-title { font-size: 1.62em; }
  .sec .ch-open.is-part .ch-title { font-size: 2.1em; }
}

/* ---------- scene breaks: three quiet points ---------- */
.sec .scene-break {
  width: 2.4em; height: .5em; margin: 1.45em auto;
  background: radial-gradient(circle closest-side, color-mix(in oklab, var(--gold) 70%, transparent) 72%, transparent) 0 50% / .8em .26em repeat-x;
}
.sec .scene-break + p, .sec .scene-break + div > p:first-child { text-indent: 0; }
:root[data-para="spaced"] .sec .scene-break { margin: 1.1em auto 1.5em; }