/* The press reading edition.
   One leaf of the cloth-bound book: paper field, foil ornament, serif
   voice; every color and face is a token the book's aesthetic may
   override. Generated pages come from pandoc chunkedhtml via
   web/chunked-template.html; customization lives in config, here, and
   in the template only. */

/* 1. Tokens */
:root {
  --cloth: #e8541a;  --cloth-deep: #c13c0a;
  --foil: #b8963f;   --foil-bright: #c9a961;  --foil-deep: #8f7226;
  --paper: #f4efe3;  --paper-warm: #ece5d3;
  --ink: #23201a;    --ink-soft: #4d463a;
  --link: var(--cloth-deep);
  --ornament: var(--foil-deep);
  --hairline: var(--foil);
  color-scheme: light dark;
}

/* 2. Base and page frame */
* { box-sizing: border-box; }
html { background: var(--cloth); }
body {
  margin: 2.5rem auto; max-width: 48rem;
  background: var(--paper); color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.25rem; line-height: 1.62;
  text-rendering: optimizeLegibility; font-kerning: normal;
  border: 1px solid var(--foil);
  outline: 4px solid var(--paper); outline-offset: -9px;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.45);
  padding: 3rem 3rem 3.5rem;
}
@media (max-width: 56rem) {
  body { margin: 0; max-width: none; border: none; outline: none;
         box-shadow: none; padding: 1.6rem 1.25rem 3rem; }
}
a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--hairline); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--cloth-deep); outline-offset: 2px; border-radius: 1px; }
.skip { position: absolute; left: -999px; }
.skip:focus { position: static; display: inline-block; padding: .4rem .8rem; }

/* 3. Ornament primitives */
hr, hr.rule {
  width: min(15rem, 65%); height: auto; background: none;
  border: none; margin: 2.6rem auto;
}
hr::after { content: "\25C6"; display: block; text-align: center;
  color: var(--ornament); font-size: .78rem; line-height: 1;
  background:
    linear-gradient(var(--ornament), var(--ornament)) left center / calc(50% - 1.3em) 1px no-repeat,
    linear-gradient(var(--ornament), var(--ornament)) right center / calc(50% - 1.3em) 1px no-repeat; }

/* 4. Chapter openers and section heads */
h1 { text-align: center; font-size: clamp(1.9rem, 5.5vw, 2.5rem);
     line-height: 1.12; font-weight: 700; letter-spacing: .02em;
     margin: 1.6rem 0 2.6rem; }
h1 .header-section-number {
  display: block; font-size: .9rem; font-weight: 600;
  font-variant: small-caps; letter-spacing: .3em;
  color: var(--ink-soft); margin-bottom: .9rem; }
h1 .header-section-number::before { content: "Chapter "; }
h1::after {
  content: "\25C6"; display: block; width: min(13rem, 65%);
  margin: 1.6rem auto 0; text-align: center;
  color: var(--ornament); font-size: .78rem; line-height: 1;
  background:
    linear-gradient(var(--ornament), var(--ornament)) left center / calc(50% - 1.3em) 1px no-repeat,
    linear-gradient(var(--ornament), var(--ornament)) right center / calc(50% - 1.3em) 1px no-repeat; }
h2 { font-variant: small-caps; letter-spacing: .12em; font-weight: 600;
     font-size: 1.25rem; line-height: 1.2; margin-top: 2.6em; }
h2 .header-section-number, h3 .header-section-number { color: var(--ink-soft); margin-right: .5em; }
h3 { font-size: 1.05rem; font-style: italic; font-weight: 600; margin-top: 2em; }

/* 5. Prose finishing */
p { margin: 0 0 1em; }
h1 + p::first-line,
h1 + figure + p::first-line { font-variant: small-caps; letter-spacing: .05em; }

/* Chapter-opening drop cap (only present when the design profile enables it;
   absent, these rules match nothing and the reader is unchanged). The initial
   floats beside the opening lines; the clearfix reserves its full height so a
   short opening paragraph never lets the next block overlap it. */
.chapter-opening::after { content: ""; display: block; clear: both; }
.chapter-opening .drop-cap {
  float: left; font-size: 3.1em; line-height: .82;
  padding: .05em .1em 0 0; color: var(--ink); font-weight: 600;
}
.chapter-opening .opening-word-rest { font-variant: small-caps; letter-spacing: .04em; }
ol, ul { padding-left: 1.6rem; }
li { margin: .3em 0; }
li::marker { color: var(--ornament); font-weight: 600; }

/* 6. Quotations */
blockquote { background: none; border-left: 2px solid var(--foil);
  margin: 1.7rem 0 1.7rem .2rem; padding: .15rem 0 .15rem 1.2rem;
  color: var(--ink-soft); font-size: .97em; }
blockquote p { margin: .6em 0; }

/* 7. Code */
code, pre, kbd { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
pre { font-size: .8em; line-height: 1.5; background: var(--paper-warm);
  border: 1px solid rgba(184,150,63,.35); padding: .9rem 1.1rem;
  overflow-x: auto; tab-size: 4; }
code { font-size: .85em; background: var(--paper-warm); padding: .08em .3em; }
pre code { font-size: inherit; background: none; padding: 0; }

/* 8. Plates */
figure { margin: 2.4rem auto; text-align: center; }
/* Each plate renders at its own intrinsic ratio. The sheet used to force
   aspect-ratio: 2/3 -- a portrait cover shape -- onto every figure, which
   distorted any plate that was not portrait: a landscape engraving
   (2528x1696) was crushed into a tall box and stretched vertically.
   height:auto against the natural width is the true ratio, so a portrait
   and a landscape plate are each shown undistorted. */
figure img { max-width: 100%; height: auto;
  background: var(--paper-warm);
  border: 1px solid var(--foil); padding: 6px;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.18); }
figcaption { margin: .85rem auto 0; font-size: .88rem; line-height: 1.5;
  color: var(--ink-soft); max-width: 26rem; }

/* 9. Masthead and contents drawer */
.masthead { display: flex; align-items: baseline; gap: 1.2rem;
  font-variant: small-caps; letter-spacing: .12em; font-size: .85rem;
  border-bottom: 1px dotted var(--foil); padding-bottom: .8rem; margin-bottom: 2rem; }
.masthead a { border-bottom: none; }
.masthead-title { font-weight: 700; margin-right: auto; }
.masthead-pager a { padding: .2rem .55rem; font-size: 1rem; }
.contents-drawer { position: relative; }
.contents-drawer summary { cursor: pointer; color: var(--link); }
.contents-drawer nav { position: absolute; right: 0; z-index: 1; min-width: 17rem; max-height: 70vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--foil); box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.25);
  padding: 1rem 1.2rem; font-variant: normal; letter-spacing: 0; font-size: .92rem; text-align: left; }
.contents-drawer ul { list-style: none; padding-left: 0; }
.contents-drawer li { margin: .35em 0; }
.contents-drawer li ul { display: none; padding-left: 1.1rem; font-size: .88em; font-style: italic; }
.contents-drawer li.current-chapter > ul { display: block; }
.contents-drawer a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.contents-drawer .toc-section-number { color: var(--ink-soft); margin-right: .45em; }
@media (max-width: 40rem) { .contents-drawer nav { position: fixed; left: 1rem; right: 1rem; } }

/* 10. Bottom pager and colophon */
.pager { display: flex; gap: 1rem; margin: 3.5rem 0 0; }
.pager-card { flex: 1; display: block; border: 1px solid var(--foil);
  padding: .9rem 1.1rem; min-height: 44px; background: var(--paper-warm); }
.pager-card:hover { background: var(--paper); }
.pager-next { text-align: right; margin-left: auto; }
.pager-label { display: block; font-variant: small-caps; letter-spacing: .18em;
  font-size: .75rem; color: var(--ink-soft); }
.pager-title { font-weight: 700; }
.pager-prev .pager-title::before { content: "\2190\00a0"; }
.pager-next .pager-title::after  { content: "\00a0\2192"; }
@media (max-width: 40rem) { .pager { flex-direction: column; } .pager-next { text-align: left; } }
.kbd-hint { text-align: center; font-size: .78rem; font-style: italic;
  color: var(--ink-soft); margin-top: .8rem; }
@media (max-width: 56rem) { .kbd-hint { display: none; } }
.colophon { text-align: center; margin-top: 2.6rem; }
.colophon .press { font-variant: small-caps; letter-spacing: .14em;
  font-size: .8rem; color: var(--ink); border-bottom: none; }

/* 11. Index title page and contents leaf */
#title-block-header { text-align: center; }
h1.title { font-size: clamp(2.4rem, 8vw, 3.4rem); margin: 0; }
h1.title::after { content: none; }
p.subtitle { font-variant: small-caps; letter-spacing: .06em; font-size: .92rem;
  color: var(--ink-soft); max-width: 26rem; margin: .8rem auto; line-height: 1.55; }
p.author, p.date { font-variant: small-caps; letter-spacing: .16em;
  font-size: .9rem; margin: .3rem 0; }
.cover-plate { margin: 2rem 0 .5rem; }
.cover-plate img { width: min(17rem, 70%); height: auto; border: 1px solid var(--foil);
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.28); }
/* The reader index's opening: an orienting line and one primary action to
   start reading at the first part, above the chapter contents. */
.reader-lede { max-width: 30rem; margin: 1.8rem auto 0; text-align: center;
  color: var(--ink-soft); font-size: .98rem; }
.reader-start { text-align: center; margin: 1.5rem auto 0; }
.start-reading { display: inline-block; padding: .7rem 1.7rem;
  background: var(--cloth); color: var(--paper); border: 1px solid var(--cloth-deep);
  font-weight: 600; letter-spacing: .04em; border-radius: 2px; }
.start-reading:hover { background: var(--cloth-deep); color: var(--paper); }

#TOC { border-bottom: none; margin-top: 2.2rem; }
#TOC h2 { text-align: center; letter-spacing: .18em; font-size: 1.15rem; }
#TOC > ul { list-style: none; padding-left: 0; max-width: 30rem; margin: 1.2rem auto; }
#TOC > ul > li { border-bottom: 1px dotted var(--foil); margin: 0; }
#TOC > ul > li > a { display: block; padding: .55rem .2rem; border-bottom: none; }
#TOC .toc-section-number { color: var(--ink-soft); display: inline-block; min-width: 1.9em; }
#TOC ul ul { display: none; }

/* 12. Dark mode */
@media (prefers-color-scheme: dark) {
  :root { --cloth: #1a120c; --paper: #1d1b15; --paper-warm: #26231b;
          --ink: #e8e0cc; --ink-soft: #b5ab93;
          --link: var(--foil-bright);
          --ornament: var(--foil); --hairline: var(--foil-deep); }
  body { box-shadow: 0 1.2rem 3rem rgba(0,0,0,.7); }
  figure img { filter: brightness(.87) contrast(.98); }
  pre { border-color: rgba(184,150,63,.3); }
}

/* 13. Print and reduced motion */
@media print {
  html, body { background: #fff; color: #000; max-width: none;
    border: none; outline: none; box-shadow: none; padding: 0; }
  .masthead, .pager, .kbd-hint, .skip, .contents-drawer { display: none; }
  figure { break-inside: avoid; }
  a { color: #000; border-bottom: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* 12. Tables, on a narrow screen only
   A multi-column table cannot be read across on a phone: the columns crush,
   or a wide one pushes the page sideways. Each row becomes a card on the
   warm field instead, and every cell wears its column's header -- carried
   onto the cell as data-label when the page is built, because CSS cannot
   reach a header from a cell. Tables with no header row (a two-column
   definition list) already read fine and are left alone.

   Deliberately scoped to the narrow breakpoint and nothing else: design is
   part of the release contract, and within a major the press may correct
   broken output but must not restyle a valid book. At reading width a book's
   tables render exactly as they always have; only the phone, where they were
   unreadable, changes. Giving tables a house treatment at every width is a
   design change and belongs to the next major. */
@media (max-width: 34rem) {
  table:has(td[data-label]) { display: block; }
  table:has(td[data-label]) thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
  }
  table:has(td[data-label]) tbody,
  table:has(td[data-label]) tr,
  table:has(td[data-label]) td { display: block; width: auto; }
  table:has(td[data-label]) tr {
    background: var(--paper-warm); border: 1px solid var(--hairline);
    padding: .9rem 1rem; margin-bottom: .9rem;
  }
  table:has(td[data-label]) td {
    padding: 0; border-bottom: none; margin-bottom: .6rem;
    overflow-wrap: anywhere;
  }
  table:has(td[data-label]) tr td:last-child { margin-bottom: 0; }
  table:has(td[data-label]) td::before {
    content: attr(data-label); display: block;
    font-size: .7em; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .1rem;
  }
  table:has(td[data-label]) td:empty { display: none; }
}

/* assets/web/extra.css */
/* Make Ready. — book-specific web polish.
   Appended AFTER the house reader sheet, so these declarations win the
   cascade; the house sheet still styles everything, and this only lends
   the reading edition the book's own cloth: a bright Giants orange
   (PANTONE Orange 021) struck against gold foil on cream paper. Remove
   this file and the reader renders in the house green exactly as before. */

:root {
  /* Orange 021, and a deeper cut of it that keeps its footing as ink on
     the warm paper; the foil tokens are the house sheet's own. */
  --press-orange: #e8541a;
  --press-orange-deep: #c13c0a;
}

/* The chapter initial, struck like a two-color letterpress opening: the
   drop cap in the orange field ink with a hairline of foil around it, the
   small-caps remainder carried in deep gold so the two inks read as one
   pull. */
.chapter-opening .drop-cap {
  color: var(--press-orange);
  text-shadow: 0 0 1px var(--foil-deep);
}
.chapter-opening .opening-word-rest { color: var(--foil-deep); }

/* Quotation, set as if between two rules on the imposing stone: an inner
   orange hair against the house foil rule, and an opening fleuron hung in
   the margin the way a shop marks a set-off passage. */
blockquote {
  border-left: 2px solid var(--foil);
  box-shadow: inset 3px 0 0 -1px var(--press-orange);
  position: relative;
}
blockquote::before {
  content: "\275D";           /* heavy ornamental quotation, a foil flourish */
  position: absolute; left: -1.35rem; top: -0.15rem;
  color: var(--press-orange); font-size: 1.35rem; line-height: 1;
}

/* Section heads carry a small orange mark, the printer's flourish before a
   run of new matter. */
h2 .header-section-number,
h2::before { color: var(--press-orange-deep); }

.colophon .press { color: var(--press-orange-deep); }

/* Dark mode: pull the orange up to a lantern warmth so it still carries as
   ink against the dark paper, in the shop by candlelight. */
@media (prefers-color-scheme: dark) {
  :root { --press-orange: #f4801f; --press-orange-deep: #e8651a; }
}