/* ============================================================
   read.css — the reading page.

   This is the only page on the site that is mostly WORDS, and it is the
   site's only substantial indexable prose. So it is also the page where
   the typography has to be genuinely good rather than merely tidy.

   Set at a 34em measure (~66 characters at this size), 1.72 leading, and
   1.25rem — larger than the rest of the site on purpose. Body copy that
   is sized for a marketing page is too small to read four thousand words
   in, and prose on a dark ground needs a little more air than prose on
   paper because the glare is on the page rather than around it.

   Scoped to .read. Nothing here leaks into the shared stylesheets.
   ============================================================ */

.read {
  background: var(--ink);
  color: var(--text);
}

/* ---------------------------------------------- the shell */

/* Every `svh` clamp on this page is preceded by the same clamp in `vh`.
   An engine that does not know the small-viewport unit throws out the whole
   DECLARATION, not just the bad term — and for a padding that means the
   prose ends up flush against the edge of the window rather than merely a
   little tighter. The fallback costs one line and cannot be wrong. */
.read-head {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(96px, 16vh, 168px) var(--gutter) clamp(40px, 7vh, 72px);
  padding: clamp(96px, 16svh, 168px) calc(var(--gutter) + var(--safe-r)) clamp(40px, 7svh, 72px) calc(var(--gutter) + var(--safe-l));
  text-align: center;
}

.read-head__eyebrow {
  display: block;
  margin: 0 0 1.4em;
  font-family: var(--f-display);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
}

.read-head h1 {
  margin: 0 0 0.5em;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0.03em;
  color: var(--starlight);
}

.read-head__sub {
  margin: 0;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--mist);
}

.read-rule {
  width: min(60%, 18rem);
  height: 1px;
  margin: clamp(40px, 7svh, 72px) auto 0;
  border: 0;
  background: linear-gradient(90deg,
    transparent, var(--hairline) 22%, var(--hairline) 78%, transparent);
}

/* ---------------------------------------------- the prose */

.prose {
  max-width: 34em;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(64px, 10vh, 112px);
  padding: 0 calc(var(--gutter) + var(--safe-r)) clamp(64px, 10svh, 112px) calc(var(--gutter) + var(--safe-l));
  font-family: var(--f-body);
  font-size: 1.25rem;
  line-height: 1.72;
  /* Oldstyle proportional figures belong in running prose — lining
     figures are for tables and shout in the middle of a sentence. EB
     Garamond ships them; the shipped subset may not, in which case this
     is a no-op and costs nothing. */
  font-variant-numeric: oldstyle-nums proportional-nums;
  /* Ligatures and contextual alternates on, discretionary ones off —
     the fancy ones are for display sizes, not for four thousand words. */
  font-variant-ligatures: common-ligatures contextual;
  /* Safari has only ever shipped this prefixed, and this is the one page
     on the site where hyphenation is doing real work: a 34em measure of
     justified-ish serif prose on a phone breaks badly without it. */
  -webkit-hyphens: auto;
          hyphens: auto;
  text-wrap: pretty;
}

.prose p {
  margin: 0;
  /* THE BOOK CONVENTION, and it is the whole reason this reads as a book
     rather than as a blog: paragraphs are INDENTED, not spaced. A blank
     line between paragraphs is a web habit; it doubles the page length
     and breaks the block of text into slabs. The opening paragraph of a
     section is never indented — there is nothing above it to indent
     away from. */
  text-indent: 1.35em;
}

.prose p.op,
.prose .brk + p,
.prose .epi + p,
.prose .ch + p { text-indent: 0; }

/* The drop cap is ::first-letter, not a <span>, so the text stays one
   selectable, copyable, screen-reader-correct string. A marked-up cap
   reads aloud as a stray letter and copies with a line break in it. */
.prose p.op::first-letter {
  float: left;
  font-family: var(--f-display);
  font-weight: 700;
  /* 3 lines at 1.72 leading. Cinzel's cap height sits well below its em
     box, so the optical size needs to run over the nominal 3 lines and
     then be pulled back up — hence the negative margin, which is
     measured, not guessed. Check it against a 'W' and an 'I', not just
     an 'A': the widest and narrowest caps in the book's chapter openers
     land very differently. */
  font-size: 3.4em;
  line-height: 0.82;
  margin: 0.06em 0.1em 0 0;
  color: var(--gold);
}

/* ---------------------------------------------- chapter heads */

.prose .ch {
  margin: clamp(56px, 9svh, 104px) 0 clamp(28px, 4svh, 44px);
  text-align: center;
}
.prose .ch:first-child { margin-top: 0; }

.ch__label {
  display: block;
  margin-bottom: 0.9em;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--mist-dim);
}

.ch__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1.16;
  letter-spacing: 0.02em;
  color: var(--starlight);
  text-wrap: balance;
}

/* ---------------------------------------------- epigraph */

.epi {
  margin: clamp(36px, 6svh, 64px) auto;
  padding: 0;
  max-width: 26em;
  border: 0;
  text-align: center;
}

.epi p {
  margin: 0 0 0.7em;
  text-indent: 0;
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--mist);
}

.epi cite,
.epi__attr cite {
  font-style: normal;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--mist-dim);
}
.epi cite::before { content: "\2014\00a0"; }

/* ---------------------------------------------- scene break

   The glyph comes from the manuscript and is printed from data-glyph, so
   the page cannot invent one and cannot silently substitute the other.
   Canon: solid means the same ship, hollow means a different thread. */

.brk {
  height: auto;
  margin: clamp(30px, 5svh, 52px) auto;
  border: 0;
  text-align: center;
  overflow: visible;
}

.brk::after {
  content: attr(data-glyph);
  display: block;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.6em;
  text-indent: 0.6em;   /* recentres against the trailing letter-space */
  color: var(--gold);
  opacity: 0.75;
}

/* ---------------------------------------------- the end matter */

.read-end {
  max-width: 34em;
  margin-inline: auto;
  padding: clamp(48px, 8vh, 88px) var(--gutter) clamp(88px, 14vh, 140px);
  padding: clamp(48px, 8svh, 88px) calc(var(--gutter) + var(--safe-r)) clamp(88px, 14svh, 140px) calc(var(--gutter) + var(--safe-l));
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.read-end h2 {
  margin: 0 0 0.5em;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  color: var(--starlight);
}

.read-end p {
  margin: 0 auto 1.6em;
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.read-end .cta-row { justify-content: center; }

/* The three editions and their prices. A definition list, because that
   is what it is — and it means a screen reader announces the format with
   its price instead of reading six loose numbers.

   ★ RENAMED FROM `.editions` (2026-08-14). css/site.css already owns that
   class — it is the homepage's tab strip — and this file loads after it, so
   the two rules were interleaving on the same element: read.html's price
   grid was silently inheriting `max-width: 34rem` from the tab strip and
   sitting 100px narrower than its own column, left-aligned inside it. Two
   different things cannot share a name across two stylesheets that are
   always loaded together. */
.read-editions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2.4rem 0 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.read-editions > div {
  padding: 1.1rem 0.6rem;
  background: var(--ink);
}

.read-editions dt {
  font-family: var(--f-display);
  font-size: 0.625rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--mist-dim);
}

.read-editions dd {
  margin: 0.55em 0 0;
  /* Tabular LINING figures here — prices in a row must align, which is
     the one place oldstyle numerals are wrong. */
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.25rem;
  color: var(--starlight);
}

.read-editions dd small {
  display: block;
  margin-top: 0.3em;
  font-size: 0.75rem;
  font-variant-numeric: normal;
  color: var(--mist-dim);
}

/* ---------------------------------------------- focus */

.read :focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--gold-soft);
}

@media (forced-colors: active) {
  .read :focus-visible { outline: 2px solid CanvasText; box-shadow: none; }
  .prose p.op::first-letter { color: CanvasText; }
}

/* ---------------------------------------------- narrow

   The measure tightens and the drop cap comes down a line. A 3-line cap
   at a 30em measure eats a quarter of the visible text block on a phone. */

@media (max-width: 640px) {
  .prose { font-size: 1.1875rem; line-height: 1.7; }
  .prose p.op::first-letter { font-size: 2.9em; line-height: 0.84; }
  .read-editions { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------- print

   Someone will print this, and prose is the one thing on this site that
   is worth printing. Ink on paper, not navy on paper. */

@media print {
  .read { background: #fff; color: #111; }
  .read-head__eyebrow, .read-end, .site-header, .site-footer { display: none; }
  .prose { max-width: none; font-size: 11.5pt; line-height: 1.5; }
  .read-head h1, .ch__title { color: #000; }
  .prose p.op::first-letter, .brk::after { color: #000; }
  .prose .ch { break-before: page; }
  .prose .ch:first-child { break-before: avoid; }
  .prose p { orphans: 2; widows: 2; }
}