/* reader.css — the first-chapter reading surface.
   Loaded only by /where-the-heathen-rage/first-chapter/.

   Everything here is built from the tokens already in site.css. The one thing
   this page does that no other page does is get out of the way: while somebody
   is reading a novel, the furniture should be the book's, not the website's. */

/* -------------------------------------------------------------- always paper
   The rest of the site follows the reader's OS, and should: it is a website.
   This page is a book. A novel printed on white stock should not arrive as pale
   text on near-black because somebody's Mac is set to dark, and a reader who
   turns dark mode on system-wide has said something about their inbox, not
   about how they want to be handed the opening of a story.

   So the light values are re-declared on the reading page and nothing else
   changes. Every token site.css defines is repeated here, not only the ones the
   prose happens to use -- the site header and footer render on this page too,
   and a half-pinned palette is how you get light chrome over a dark panel. */
body.reading {
  --concrete:#BFBDB7; --concrete-2:#CDCBC5; --concrete-3:#CAC8C2;
  --paper:#F2F0EB; --paper-2:#E8E5DE;
  --ink:#14130F; --ink-2:#3A382F; --ink-soft:#4A4740;
  --rule:#9B988E; --rule-soft:#D2CFC7;
  --oxide:#8A3B2A; --oxide-hi:#A04835;
  --ochre:#5E4313;
  --on-oxide:#F7F4EE; --oxide-txt:#73301F; --ochre-slab:#C9A055;
  --slab:#14130F;
  --on-dark:#F2F0EB; --on-dark-2:#C3BFB4; --on-dark-3:#8C8779;
  --dark-field:#211F1B; --dark-edge:#454239;
  --shadow:rgba(20,19,15,.20); --shadow-deep:rgba(20,19,15,.36);
  background: var(--concrete);
  color: var(--ink);
}

/* ---------------------------------------------------------------- the chrome
   The site header stays at the top of the document, so a reader can always
   leave, but it is not sticky here. Two stacked sticky bars cost about 108px
   of a phone screen, which on a 5.25 x 8 page is most of a paragraph. It
   scrolls away with the epigraph strip and the reader's own bar takes over. */
body.reading header.site { position: static; }
body.reading .epigraph { display: none; }

.rbar {
  position: sticky; top: 0; z-index: 60;
  /* Solid, not the translucent blur the site header uses. A backdrop-filter on
     a sticky element is the most expensive thing a phone has to composite on
     every frame of a scroll, and this is a page people scroll for ten minutes.
     Over paper a plain hairline bar is also simply quieter. */
  background: var(--concrete);
  border-bottom: 1px solid var(--rule);
}
.rbar-in {
  max-width: 46rem; margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
  min-height: 46px; display: flex; align-items: center; gap: 1rem;
}
.rback {
  font-family: var(--ui); font-size: var(--fs-3xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  /* The text is small by design; the target is not. Padding carries the
     24px minimum (WCAG 2.2 SC 2.5.8) without changing how it looks. */
  display: flex; align-items: center; min-height: 32px; padding-block: .25rem;
}
.rback:hover { color: var(--ink); }
.rtools { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.rfolio {
  font-family: var(--ui); font-size: var(--fs-3xs); color: var(--ink-soft);
  font-variant-numeric: tabular-nums; letter-spacing: .08em; white-space: nowrap;
}
.rsizes { display: flex; gap: 2px; }
.rsizes button {
  font-family: var(--prose); background: none; border: 1px solid transparent;
  color: var(--ink-soft); cursor: pointer; border-radius: 3px;
  padding: .2rem .45rem; line-height: 1;
  /* WCAG 2.2 SC 2.5.8 wants 24x24 CSS px. The glyph stays the size it is —
     the padding is what carries the target. */
  min-height: 32px; min-width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rsizes button:hover { color: var(--ink); }
.rsizes button[aria-pressed="true"] { border-color: var(--rule); color: var(--ink); }
.rs1 { font-size: .78rem } .rs2 { font-size: .95rem } .rs3 { font-size: 1.12rem }
/* The progress sits ON the bar's own bottom edge, so it reads as that hairline
   thickening rather than as a second bar competing with it. */
.rprog { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--oxide); width: 0; }

/* ------------------------------------------------------------ pick up again
   Offered, never performed. Restoring the scroll position automatically means
   a reader who opened the link to show somebody the first line lands in the
   middle of page 6, and the back button cannot undo it. */
.resume {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(1.15rem, env(safe-area-inset-bottom)); z-index: 70;
  display: none; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 3px; cursor: pointer;
  font-family: var(--ui); font-size: var(--fs-xs); font-weight: 500;
  padding: .7rem 1.1rem; box-shadow: 0 6px 24px var(--shadow-deep);
  max-width: calc(100vw - 2rem);
}
.resume[hidden] { display: none !important; }
.resume.on { display: inline-flex; }
.resume b { font-weight: 600; }
.resume:hover { background: var(--oxide); }

/* ------------------------------------------------------------------ the sheet
   Paper laid on the concrete, the way every panel on this site is. */
.sheet {
  max-width: 46rem; margin-inline: auto; background: var(--paper);
  border-inline: 1px solid var(--rule-soft);
  box-shadow: 0 0 40px var(--shadow);
  padding:
    clamp(2.5rem, 7vw, 4.5rem)
    max(clamp(1.15rem, 5.5vw, 3.25rem), env(safe-area-inset-right))
    clamp(3rem, 8vw, 4.5rem)
    max(clamp(1.15rem, 5.5vw, 3.25rem), env(safe-area-inset-left));
}
.sheet > * { max-width: 33rem; margin-inline: auto; }

/* --------------------------------------------------------------- title page */
.tp { text-align: center; padding-bottom: clamp(2rem, 6vw, 3.5rem); }
.tp .imprint {
  font-family: var(--ui); font-size: var(--fs-3xs); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 clamp(1.5rem, 5vw, 2.5rem);
}
.tp h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.3rem, 10vw, 3.9rem); line-height: .92;
  letter-spacing: .005em; margin: 0; text-wrap: balance;
}
.tp h1 .the { display: block; font-size: .44em; letter-spacing: .08em; margin: .16em 0; }
.tp .byline {
  font-family: var(--ui); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
  margin: clamp(1.1rem, 4vw, 1.6rem) 0 0;
}
.tp .kicker {
  font-family: var(--prose); font-style: italic; font-size: var(--fs-sm);
  color: var(--ink-soft); margin: .55rem 0 0;
}
.tp hr { width: 44px; height: 1px; background: var(--rule); border: 0; margin: clamp(1.6rem, 5vw, 2.2rem) auto 0; }

/* ---------------------------------------------------------------- epigraph
   Scoped: site.css already owns a .epigraph, which is the black strip across
   the top of every other page. This one is the book's, inside the sheet. */
.sheet .book-epigraph {
  font-family: var(--prose); font-style: italic; text-align: center;
  font-size: calc(var(--reader) * .95); line-height: 1.5; color: var(--ink-2);
  max-width: 26rem; margin: 0 auto clamp(3rem, 9vw, 5rem);
}
.sheet .book-epigraph .src {
  display: block; font-style: normal; font-family: var(--ui);
  font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 1rem;
}

/* ------------------------------------------------------------- section marks
   The printed book labels neither the prologue nor the chapter: each begins on
   a fresh recto and the blank verso before it does the work. A page that
   scrolls has no verso, so the break is drawn instead of implied.

   NAMED .section-mark, not .mark. It was .mark, which is also the site's
   WORDMARK class in site.css -- and reader.css loads after site.css, so on
   this page and only this page the masthead silently became this: Inter at
   11px with 0.2em tracking instead of Anton at 18.4px, 223px wide instead of
   166px. That 57px is why the reader page's nav needed 892px to fit one row
   when every other page needed 837, why its header measured 100px against 64,
   and why it wrapped to two rows and a 160px header through the whole tablet
   band. One collided class name, four measured symptoms. */
.section-mark {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 clamp(1.8rem, 5vw, 2.6rem);
  font-family: var(--ui); font-size: var(--fs-3xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.section-mark::before, .section-mark::after { content: ""; height: 1px; background: var(--rule-soft); flex: 1; }

/* -------------------------------------------------------------------- prose */
/* Declared on :root, NOT on .reading.
 *
 * .reading sits on <body>. A custom property declared there shadows, for body
 * and everything under it, whatever the same property holds on <html> -- and
 * <html> is exactly where reader.js writes the reader's chosen size. So the
 * three Aa buttons flipped aria-pressed, saved the preference to localStorage,
 * and changed nothing: measured 17px, 17px, 17px across all three settings.
 *
 * That is the text-size control on a 2,114-word chapter, storing a preference
 * it never honoured. Declaring the default at :root lets the inline style on
 * <html> win, which is what the JS always assumed. */
:root { --reader: 1.0625rem; }
.rprose {
  font-family: var(--prose); font-size: var(--reader); line-height: 1.66;
  font-optical-sizing: auto; color: var(--ink);
}
/* The indent is the paragraph mark and there is no space between paragraphs,
   exactly as the book sets it. The first of a section is never indented. */
.rprose p { margin: 0; text-indent: 1.35em; }
.rprose p:first-of-type { text-indent: 0; }
/* Justified only where the measure can carry it. At phone width the line is
   too short and justification opens rivers of white down the column. */
@media (min-width: 34rem) {
  .rprose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}
.rprose.prologue { font-style: italic; }
.rprose .lead::first-letter {
  float: left; font-size: 3.6em; line-height: .78;
  padding: .02em .07em 0 0; margin-top: .05em; color: var(--ink);
}
.rprose.chapter .lead::first-letter { font-weight: 700; font-style: normal; }
.rprose.prologue .lead::first-letter { font-weight: 400; font-style: italic; padding-right: .12em; }
.rsection + .rsection { margin-top: clamp(3.5rem, 10vw, 6rem); }
.end-folio {
  text-align: center; font-family: var(--prose); font-size: var(--fs-sm);
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
  margin: clamp(2.5rem, 7vw, 3.5rem) 0 0;
}

/* ---------------------------------------------------------------- end matter */
.after { margin-top: clamp(3rem, 8vw, 4.5rem); padding-top: clamp(2.5rem, 7vw, 3.5rem); border-top: 1px solid var(--rule-soft); }
.after h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.35rem, 5.5vw, 1.9rem); line-height: 1.05;
  margin: 0 0 .7rem; text-wrap: balance;
}
.after p { font-family: var(--prose); font-size: var(--fs-md); color: var(--ink-2); margin: 0 0 1rem; }
.jacket { display: flex; gap: clamp(1.25rem, 4vw, 2rem); align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.75rem; }
.jacket picture, .jacket img { width: clamp(104px, 26vw, 138px); height: auto; display: block; }
.jacket img { filter: drop-shadow(0 8px 22px var(--shadow-deep)); }
.jacket-txt { flex: 1 1 15rem; min-width: 0; }
.publine {
  font-family: var(--ui); font-size: var(--fs-3xs); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .8rem;
}
.buys { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.buys a {
  display: block; text-decoration: none; font-family: var(--ui);
  font-size: var(--fs-xs); font-weight: 500;
  padding: .6rem 1rem; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); min-height: 40px; display: flex; align-items: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.buys a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.buys li:first-child a { background: var(--oxide); border-color: var(--oxide); color: var(--on-oxide); }
.buys li:first-child a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rfine {
  font-family: var(--ui); font-size: var(--fs-2xs); color: var(--ink-soft);
  line-height: 1.6; border-top: 1px solid var(--rule-soft); padding-top: 1.25rem;
}
.rfine p { margin: 0 0 .4rem; font-family: inherit; font-size: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .rprog, .resume { transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------- print
   Somebody will print this, or save it as a PDF, and a printed page that
   carries a sticky bar and a Buy button across the top is a wasted sheet. */
@media print {
  .rbar, .resume, header.site, footer.site, .after, .skip { display: none !important; }
  .sheet { max-width: none; box-shadow: none; border: 0; padding: 0; background: #fff; }
  .rprose { font-size: 11pt; line-height: 1.5; color: #000; }
  .rsection { break-inside: auto; }
  .section-mark { color: #444; }
}