@import url("behistorical-brand-lock.css");
/* ─────────────────────────────────────────────────────────────────────────────
 * BeHistorical, the eBook
 *
 * Layers on top of behistorical-deep-reading.css, which the eBook page loads
 * first. Everything a chapter body needs is already defined there; this file
 * adds only what a *book* needs and a standalone chapter does not: a cover, a
 * table of contents, and chapter openers that read as chapter openers.
 *
 * Loading both rather than duplicating means a change to how a callout or a
 * terms table looks reaches the eBook and the standalone page together, which
 * is the same reason the renderer is shared rather than copied.
 * ──────────────────────────────────────────────────────────────────────────── */

.eb-body{background:var(--paper)}

/* ── cover ──────────────────────────────────────────────────────────────── */
.eb-cover{
  background:
    linear-gradient(165deg,#202324 0%, var(--steel) 46%, #101112 100%);
  color:var(--clean);
  border-bottom:4px solid var(--gold);
  padding:clamp(3rem,9vw,6.5rem) 0 clamp(2.2rem,5vw,3.4rem);
}
.eb-cover h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.3rem,7vw,4.6rem); line-height:1.04;
  letter-spacing:.02em; margin:.6rem 0 1rem; text-wrap:balance;
  /* A cover word longer than the line must break rather than push the page
     sideways. The clamp floor is 2.3rem, so at the 320px viewport reflow is
     tested at, Cinzel sets "Industrialization" about 75px wider than the
     viewport and the whole page scrolled horizontally. break-word is a floor
     rather than a style choice: it does nothing until a word cannot fit on a
     line of its own, so the six shorter cover titles are unchanged to the
     pixel. Do not swap it for `anywhere`, which breaks words that would have
     fit by wrapping normally. Unit 8's "Decolonization" is the next one close
     to this cliff, and it inherits the fix by existing. */
  overflow-wrap:break-word;
}
.eb-cover h1 em{font-style:normal;color:var(--gold)}
/* The cover is the one near-black surface on an eBook page, so it takes the
   gold ring the way .dr-masthead does. Oxidized on this gradient is 2.1:1. */
.eb-cover a:focus-visible{outline-color:var(--gold)}
.eb-cover-deck{
  font-size:clamp(.95rem,1.8vw,1.15rem); line-height:1.75;
  color:#e6ded0; max-width:56ch;
}
.eb-cover-deck em{color:var(--clean);font-style:italic}
.eb-cover-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.8rem;
  padding-top:1.2rem; border-top:1px solid var(--gunmetal);
  font-family:var(--font-ui); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sandstone);
  font-variant-numeric:tabular-nums;
}

/* ── contents ───────────────────────────────────────────────────────────── */
.eb-contents{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1rem,2vw,1.5rem)}
.eb-contents h2{
  font-family:var(--font-display); font-size:clamp(1.2rem,2.6vw,1.6rem);
  font-weight:700; letter-spacing:.06em; color:var(--steel);
  padding-bottom:.6rem; border-bottom:2px solid var(--steel); margin-bottom:1.2rem;
}
ol.eb-toc{list-style:none;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
ol.eb-toc > li{background:var(--clean)}
a.eb-toc-chapter,
ol.eb-toc > li.eb-toc-pending{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 1.1rem;
  align-items:baseline; padding:1rem 1.2rem; text-decoration:none;
}
a.eb-toc-chapter{color:inherit}
/* Hover keeps the tint; focus adds the ring from behistorical-deep-reading.css
   rather than suppressing it. The tint alone used to be the whole focus
   indicator, and #fffdf7 to #f7f1e3 is a 3% shift. */
a.eb-toc-chapter:hover,a.eb-toc-chapter:focus-visible{background:#f7f1e3}

/* Section list under each chapter. */
ul.eb-toc-sections{
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
  gap:1px; background:var(--rule-soft);
  border-top:1px solid var(--rule-soft);
}
ul.eb-toc-sections li{background:#faf6ec}
ul.eb-toc-sections a{
  display:flex; align-items:baseline; gap:.5rem; padding:.5rem .8rem;
  font-family:var(--font-ui); font-size:.72rem; line-height:1.4;
  color:var(--charcoal); text-decoration:none;
}
ul.eb-toc-sections a:hover,ul.eb-toc-sections a:focus-visible{background:#f2ead9;color:var(--steel)}
/*
 * Both of these are Oxidized Brown rather than Antique Gold, and the reason is
 * the background, not the colour. Gold on the cover is 7.3:1 and stays; gold on
 * these cream list rows is 2.2:1, under the 4.5:1 small text needs and under
 * even the 3:1 large text is allowed. .eb-sec-n is 10.5px, and .eb-toc-n at
 * 21.6px bold does qualify as large text and still fails.
 *
 * These are not ornament. The section number is how a student says which part of
 * a chapter they are on, and the chapter number is the only place the contents
 * page states which Foundations topic a chapter covers. Oxidized is 8.3:1 here,
 * reads as the same warm brass family, and is already the accent on the chapter
 * label and the em highlight two rules down. Gold keeps the card top rules, the
 * cover, and the chapter opener's left border, where it has the contrast for it.
 */
.eb-sec-n{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:.66rem;
  color:var(--oxidized); flex:none;
}
.eb-toc-n{
  font-family:var(--font-display); font-size:1.35rem; font-weight:700;
  color:var(--oxidized); font-variant-numeric:tabular-nums; line-height:1;
}
/* min-width:0 undoes the default a grid item takes from its content (auto,
   effectively max-content), which is what let a long chapter title hold its
   1fr column open to its own unbroken width instead of wrapping. Without it,
   minmax(0,1fr) on the column above is fighting a min-width the browser set
   back to auto on this element specifically. overflow-wrap is the floor
   below that, the same fix .eb-cover h1 already uses for "Industrialization"
   and "Decolonization": once wrapping has nowhere left to break a line, a
   single long word still can't hold the column past its own width. */
.eb-toc-body{display:block; min-width:0}
.eb-toc-title{
  display:block; font-family:var(--font-display); font-size:1.02rem;
  font-weight:700; letter-spacing:.03em; color:var(--steel); line-height:1.25;
  overflow-wrap:break-word;
}
.eb-toc-title em{font-style:normal;color:var(--oxidized)}
.eb-toc-meta{
  display:block; margin-top:.3rem; font-family:var(--font-ui);
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--iron);
  overflow-wrap:break-word;
}
li.eb-toc-pending{background:#efe9dd}
/* Sandstone is a dark-surface colour: 8.7:1 on steel, 1.6:1 here, which makes
   the placeholder in a pending row all but invisible. Iron is the muted tone
   that works on paper, and it is already what the pending title uses. */
li.eb-toc-pending .eb-toc-n{color:var(--iron)}
li.eb-toc-pending .eb-toc-title{color:var(--iron)}

/* ── chapter opener ─────────────────────────────────────────────────────── */
.eb-chapter{padding-top:clamp(2rem,5vw,3.5rem)}
.eb-chapter + .eb-chapter{border-top:4px double var(--steel);margin-top:clamp(2rem,4vw,3rem)}
.eb-chapter-head{
  background:var(--clean); border:1px solid var(--rule);
  border-left:6px solid var(--gold);
  padding:clamp(1.3rem,3vw,2rem) clamp(1.2rem,3vw,1.9rem);
  margin-bottom:.5rem;
}
.eb-chapter-label{
  font-family:var(--font-ui); font-size:.63rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--oxidized);
  font-variant-numeric:tabular-nums;
}
.eb-chapter-head h2{
  font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.6rem);
  font-weight:700; letter-spacing:.02em; color:var(--steel);
  line-height:1.1; margin:.5rem 0 .8rem; text-wrap:balance;
}
.eb-chapter-head h2 em{font-style:normal;color:var(--oxidized)}
.eb-chapter-deck{font-size:.95rem;line-height:1.75;max-width:62ch;color:var(--ink)}
.eb-chapter-deck em{font-style:italic}
.eb-chapter-return{
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--rule-soft);
  font-family:var(--font-ui); font-size:.68rem; letter-spacing:.06em;
}
.eb-chapter-return a{color:var(--oxidized);text-decoration:none;font-weight:600}
.eb-chapter-return a:hover,.eb-chapter-return a:focus-visible{text-decoration:underline}

/* The chapter's own how-to sits directly under the opener, so it should not
   also carry the standalone page's large top margin. */
.eb-chapter .dr-howto{margin-top:1.1rem}
/* The first section in a chapter follows the opener, not another section. */
.eb-chapter .empire:first-of-type{border-top:0}

@media print{
  .eb-cover{background:#fff;color:#000;border-bottom:2pt solid #000;padding:0 0 1rem}
  .eb-cover h1{color:#000}
  .eb-cover h1 em{color:#6b3e1f}
  .eb-cover-deck{color:#000}
  .eb-cover-meta{color:#4a2a13;border-top-color:#999}
  .eb-contents{break-after:page}
  ol.eb-toc a:hover{background:none}
  .eb-chapter{break-before:page;padding-top:0}
  .eb-chapter + .eb-chapter{border-top:0;margin-top:0}
  .eb-chapter-head{break-inside:avoid;border-left-width:4pt}
  .eb-chapter-return{display:none}
}

/* ── library page ───────────────────────────────────────────────────────── */
.eb-library{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2rem,4vw,3rem)}
.eb-library h2{
  font-family:var(--font-display); font-size:clamp(1.2rem,2.6vw,1.6rem);
  font-weight:700; letter-spacing:.06em; color:var(--steel);
  padding-bottom:.6rem; border-bottom:2px solid var(--steel); margin-bottom:1.3rem;
}
/* minmax(min(100%,320px),1fr), not minmax(320px,1fr). The hard 320px floor is
   exactly the viewport width WCAG 1.4.10 reflow is tested at, and .dr-wrap has
   already taken 32px of it for padding, so the grid track was wider than the
   page it sits in and the whole library scrolled sideways. min(100%,320px) lets
   the track fall back to the container below that point. Nothing changes at any
   width where the card already fitted. */
.eb-lib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.2rem}
.eb-lib-card{background:var(--clean);border:1px solid var(--rule);border-top:4px solid var(--gold);display:flex;flex-direction:column}
.eb-lib-open{display:block;padding:1.3rem 1.4rem 1rem;text-decoration:none;color:inherit}
.eb-lib-open:hover,.eb-lib-open:focus-visible{background:#f7f1e3}
.eb-lib-open h3{
  font-family:var(--font-display); font-size:clamp(1.15rem,2.4vw,1.5rem);
  font-weight:700; letter-spacing:.03em; color:var(--steel); line-height:1.15;
}
.eb-lib-open h3 em{font-style:normal;color:var(--oxidized)}
/* The unit label above the volume name, matching the "UNIT 01" eyebrow on the
   front door's unit cards. Oxidized brown rather than gold or sandstone,
   because this sits on clean paper: gold is 2.1:1 here and oxidized is 7.9:1,
   the same rule the focus ring follows. */
.eb-lib-label{
  font-family:var(--font-ui); font-size:.63rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--oxidized);
  margin-bottom:.35rem; font-variant-numeric:tabular-nums;
}
.eb-lib-blurb{font-size:.87rem;line-height:1.7;margin-top:.6rem;color:var(--ink)}
.eb-lib-meta{
  font-family:var(--font-ui); font-size:.65rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--oxidized);
  margin-top:.9rem; font-variant-numeric:tabular-nums;
}
ul.eb-lib-chapters{
  list-style:none; border-top:1px solid var(--rule-soft);
  display:grid; gap:1px; background:var(--rule-soft); margin-top:auto;
}
ul.eb-lib-chapters li{background:#faf6ec}
ul.eb-lib-chapters a,
ul.eb-lib-chapters li.eb-lib-pending{
  display:flex; align-items:baseline; gap:.55rem; padding:.55rem 1.4rem;
  font-family:var(--font-ui); font-size:.74rem; line-height:1.45;
  color:var(--charcoal); text-decoration:none;
}
ul.eb-lib-chapters a:hover,ul.eb-lib-chapters a:focus-visible{background:#f2ead9;color:var(--steel)}
li.eb-lib-pending{color:var(--iron);font-style:italic;background:#f0eade}
li.eb-lib-pending .eb-sec-n{color:var(--iron)}
.eb-lib-note{
  margin-top:1.4rem; padding:.9rem 1.1rem; background:#f6efe1;
  border-left:4px solid var(--sandstone); font-size:.83rem; line-height:1.7;
  max-width:66ch; color:var(--charcoal);
}

@media print{
  .eb-lib-open:hover{background:none}
}