@import url("behistorical-brand-lock.css");
/* ─────────────────────────────────────────────────────────────────────────────
 * BeHistorical, Deep Reading
 *
 * The shared stylesheet for the generated deep readings, the optional
 * push-further layer that sits under Content Delivery on a lesson page.
 *
 * Kept out of the page template on purpose. The 77 First & 10 readings each
 * carried a duplicated 80-line stylesheet before they were generated, and the
 * lesson from that is not "generation makes duplication safe" but "a style fix
 * should not need a content rebuild." Editing this file changes every deep
 * reading without running build-deep-readings.js.
 *
 * Polarity: paper under ink, per the rule in CLAUDE.md. This is a surface a
 * student reads at length, in a lit room, often projected. A lamp projector can
 * only add light, so a light ground puts the lumens to work while a dark one
 * degrades to washed-out grey.
 * ──────────────────────────────────────────────────────────────────────────── */

:root{
  --steel:#1a1c1d; --charcoal:#2b2f31; --gunmetal:#3e4447; --iron:#5a5f5c;
  --sandstone:#d2b48c; --bronze:#8c5a2b; --rust:#a8652d; --oxidized:#6b3e1f;
  --gold:#c9a46a; --paper:#f5f0e7; --clean:#fffdf7; --ink:#151718;
  --rule:#ddd2be; --rule-soft:#e8dfd0;
  --font-display:'Cinzel','Trajan Pro',Georgia,serif;
  --font-body:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --font-ui:'Montserrat',Arial,Helvetica,sans-serif;

  /* Per-empire accent, redefined on each .empire block. Declared here so a
     component never reads a token that exists only inside another selector. */
  --accent:var(--gold); --accent-deep:var(--oxidized); --tint:#f6efe1;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.75}

.dr-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}

/* ── keyboard focus ─────────────────────────────────────────────────────── */
/*
 * One visible focus ring for every interactive element on every surface.
 *
 * The rules further down this file, and in behistorical-ebook.css, used to set
 * `outline:none` on :focus-visible and lean on the hover tint to show where the
 * keyboard was. That is a change of colour alone: a 3% background shift is hard
 * to see on a projector, invisible to anyone who cannot separate the two creams,
 * and dropped entirely in forced-colours mode. A ring is a shape, and it is
 * drawn outside the element, so the hover tint still does its own job underneath
 * and nothing about hover changes.
 *
 * Oxidized Brown rather than Antique Gold, because the ring has to read against
 * paper: gold on --paper is 2.1:1, well under the 3:1 WCAG 1.4.11 asks of a
 * focus indicator, while oxidized is 7.9:1. Gold is not retired, it is moved to
 * the surfaces where it is the stronger of the two; see the override below.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--oxidized);
  outline-offset:3px;
}

/* Dark surfaces flip the ring to gold, which is 7.3:1 on steel where oxidized
   is 2.1:1. Same shape, same width, opposite polarity. */
.dr-masthead a:focus-visible,
.dr-usethis a:focus-visible{outline-color:var(--gold)}

/* The jump bar is a horizontal scroll container, and a scroll container clips
   anything drawn outside its children. An offset ring here would be cropped to
   nothing, so this one goes inside the link instead of around it. */
.dr-jump a:focus-visible{outline-color:var(--gold);outline-offset:-3px}

/* ── skip link ──────────────────────────────────────────────────────────── */
/*
 * The first focusable thing on the page, so a keyboard or screen-reader user can
 * step over the cover masthead in one keystroke and land on the main landmark
 * instead of tabbing in from the top of the document every time.
 *
 * Moved off-screen rather than `display:none` or `visibility:hidden`, both of
 * which take it out of the focus order and out of the accessibility tree, which
 * would leave a skip link unreachable by the only people who need it. Parking it
 * to the left is deliberate too: in a left-to-right document, content off the
 * left edge does not extend the scrollable area, so this cannot make the page
 * scroll sideways.
 */
.skip-link{
  position:absolute; top:0; left:-9999px; z-index:100;
  background:var(--steel); color:var(--clean);
  border-bottom:3px solid var(--gold);
  padding:.8rem 1.2rem;
  font-family:var(--font-ui); font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
/*
 * :focus, not :focus-visible. Nothing reaches this link except the keyboard and
 * the screen reader, so there is no mouse case to suppress, and a browser that
 * disagrees about heuristic focus must not be able to hide it.
 *
 * Two rings, light inside dark, because this is the one element whose backdrop
 * is not knowable from the stylesheet: it is position:fixed, so it sits over the
 * near-black cover at the top of the page and over cream paper once the reader
 * has scrolled. No single colour covers both, and the two candidates fail in
 * opposite directions, gold being 7.3:1 on the cover and 2.1:1 on paper while
 * oxidized is the reverse. The pair always leaves one edge at 7.9:1 or better
 * whatever is underneath.
 */
.skip-link:focus{
  position:fixed; top:1rem; left:1rem;
  outline:3px solid var(--oxidized); outline-offset:3px;
  box-shadow:0 0 0 3px var(--clean);
}

/* ── masthead ───────────────────────────────────────────────────────────── */
.dr-masthead{background:var(--steel);color:var(--clean);border-bottom:3px solid var(--gold);padding:clamp(2rem,5vw,3.4rem) 0 clamp(1.6rem,3vw,2.2rem)}
.dr-eyebrow{font-family:var(--font-ui);font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.dr-masthead h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.1;letter-spacing:.02em;margin:.5rem 0 .8rem;text-wrap:balance}
.dr-masthead h1 em{font-style:normal;color:var(--gold)}
.dr-deck{font-size:clamp(.92rem,1.6vw,1.05rem);line-height:1.7;color:#e6ded0;max-width:60ch}
.dr-deck em{color:var(--clean);font-style:italic}
.dr-meta{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sandstone);margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}

/* ── sticky jump nav ────────────────────────────────────────────────────── */
.dr-jump{position:sticky;top:0;z-index:20;background:rgba(26,28,29,.97);border-bottom:1px solid var(--gunmetal)}
.dr-jump ul{max-width:1080px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);list-style:none;display:flex;gap:0;overflow-x:auto}
.dr-jump a{display:block;padding:.7rem .95rem;font-family:var(--font-ui);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sandstone);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.dr-jump a:hover,.dr-jump a:focus-visible{color:var(--clean);border-bottom-color:var(--gold)}
.dr-jump a .n{font-variant-numeric:tabular-nums;color:var(--gold);margin-right:.4rem}

/* ── how to use ─────────────────────────────────────────────────────────── */
.dr-howto{background:var(--clean);border:1px solid var(--rule);border-left:5px solid var(--steel);padding:1.2rem 1.4rem;margin:clamp(1.8rem,4vw,2.6rem) 0}
.dr-howto h2{font-family:var(--font-display);font-size:1rem;letter-spacing:.05em;color:var(--steel);margin-bottom:.6rem}
.dr-howto p{font-size:.88rem;line-height:1.7;max-width:66ch}
.dr-howto ol{margin:.7rem 0 0 1.1rem;font-size:.86rem;line-height:1.7}
.dr-howto li{margin-bottom:.3rem}
.dr-howto li b{color:var(--oxidized)}

/* ── empire section ─────────────────────────────────────────────────────── */
.empire{padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.5rem,3vw,2rem);border-top:1px solid var(--rule)}
.empire.accent-gold{--accent:#c9a46a;--accent-deep:#8c5a2b;--tint:#f7f0df}
.empire.accent-rust{--accent:#a8652d;--accent-deep:#7d4519;--tint:#f7eee5}
.empire.accent-iron{--accent:#5a5f5c;--accent-deep:#3e4447;--tint:#eeeeea}
.empire.accent-oxide{--accent:#6b3e1f;--accent-deep:#4a2a13;--tint:#f5ebe1}

.dr-ehead{display:grid;grid-template-columns:auto 1fr;gap:0 1.2rem;align-items:start;margin-bottom:1.6rem}
/* --accent-deep, not --accent. On the gold empires --accent is Antique Gold,
   which is 2.1:1 against paper: under 3:1 even at this size, and this number is
   how the contents page and the jump bar refer to the section, so it is content
   rather than ornament. --accent-deep is the same hue family one step down and
   clears 5:1 on every empire. The gold stays on the rules and the key-term
   underlines around it. */
.dr-enum{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;line-height:.9;color:var(--accent-deep);font-variant-numeric:tabular-nums;padding-top:.1em}
.dr-ehead h2{font-family:var(--font-display);font-size:clamp(1.45rem,3.4vw,2.15rem);font-weight:700;letter-spacing:.03em;color:var(--steel);line-height:1.15;text-wrap:balance}
.dr-dates{font-family:var(--font-ui);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-top:.5rem;font-variant-numeric:tabular-nums}
.dr-thesis{grid-column:2;font-size:clamp(.95rem,1.7vw,1.08rem);line-height:1.7;color:var(--charcoal);margin-top:.9rem;max-width:60ch;font-style:italic;border-left:3px solid var(--accent);padding-left:1rem}

.dr-part{margin-top:1.9rem}
.dr-part > h3{font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);padding-bottom:.4rem;border-bottom:1px solid var(--rule);margin-bottom:.85rem}
.dr-part p{max-width:64ch;margin-bottom:.9rem}
.dr-part p:last-child{margin-bottom:0}
.dr-part .kt{font-weight:700;color:var(--steel);border-bottom:2px solid var(--accent);padding-bottom:1px}
.dr-part .num{font-variant-numeric:tabular-nums;font-weight:700}

/* ── callouts ───────────────────────────────────────────────────────────── */
.dr-note{padding:.9rem 1.1rem;margin:1.2rem 0;max-width:64ch}
.dr-note b{display:block;font-family:var(--font-ui);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.4rem}
.dr-note p{font-size:.85rem;line-height:1.7;margin:0;max-width:none}
.dr-note.howknow{background:var(--tint);border:1px solid var(--rule);border-left:4px solid var(--accent-deep)}
.dr-note.howknow b{color:var(--accent-deep)}
.dr-note.misconception{background:var(--clean);border:1px dashed var(--bronze)}
.dr-note.misconception b{color:var(--bronze)}

/* ── use this in your answer ────────────────────────────────────────────── */
.dr-usethis{background:var(--steel);color:var(--clean);padding:1.3rem 1.4rem;margin-top:2rem;border-top:3px solid var(--accent)}
/* --gold, not --accent. This panel is the one dark surface a section paints, and
   three of the four empire accents are dark colours chosen to sit on paper: on
   steel they measure 3.7:1 (rust), 2.6:1 (oxide) and 1.9:1 (iron) against the
   4.5:1 this 10px label needs, so the heading of the "use this in your answer"
   box was close to invisible on three empires out of four. Gold is 7.3:1 here
   and is already the on-dark accent everywhere else in this stylesheet, from the
   eyebrow to the masthead highlight to the jump-bar numerals. The per-empire
   colour is not lost: the panel's top rule above still carries --accent. */
.dr-usethis > b{display:block;font-family:var(--font-ui);font-size:.63rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.dr-usethis dl{display:grid;gap:.85rem}
.dr-usethis dt{font-family:var(--font-ui);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sandstone);margin-bottom:.2rem}
.dr-usethis dd{font-size:.87rem;line-height:1.65;color:#eee6d9;max-width:66ch}
.dr-usethis dd em{color:var(--clean);font-style:normal;font-weight:700}

/* ── listen to this section ─────────────────────────────────────────────── */
/*
 * The narration controls, injected into every section marked data-listenable by
 * assets/js/behistorical-listen.js.
 *
 * Part of the reading surface, not a media player. It sits on paper, in the UI
 * face already used for eyebrows and nav, at a size that reads as an offer
 * rather than an instruction, and it does not animate. A student who wants to
 * read is not being asked to dismiss anything.
 *
 * Colours are the existing tokens and nothing new: Blackened Steel on Clean
 * Paper for the buttons, Oxidized Brown for the active state and the rule.
 * Antique Gold is deliberately absent, because this is a light surface and gold
 * is 2.1:1 on it, which is the defect the eBook accessibility section of
 * CLAUDE.md exists to describe.
 *
 * The mount is empty until the script fills it, so it must have no box of its
 * own: a page with JavaScript off, or a browser with no speech synthesis, shows
 * no gap where a control would have been.
 */
.bh-listen-mount:empty{display:none}

.bh-listen{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .55rem;
  /* Hugs its buttons rather than spanning the column. A full-width strip under
     every heading reads as a player bar the reading has to get past; this reads
     as an offer sitting beside the text. max-width keeps it inside the wrap at
     320px, where it wraps onto two rows instead of pushing the page sideways. */
  width:fit-content; max-width:100%;
  margin:1.1rem 0 0; padding:.55rem .7rem;
  background:var(--clean); border:1px solid var(--rule);
  border-left:3px solid var(--rule);
  font-family:var(--font-ui);
}
/* State is carried by the button labels and by the status text. This border is
   a second, redundant signal, never the only one: 1.4.1 is not satisfied by a
   colour change and neither is a projector at the back of a classroom. */
.bh-listen[data-state="playing"]{border-left-color:var(--oxidized);background:#f7f1e3}
.bh-listen[data-state="paused"]{border-left-color:var(--iron);background:#f7f1e3}

.bh-listen-btn{
  font-family:var(--font-ui); font-size:.66rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--steel); background:var(--clean);
  border:1px solid var(--rule); padding:.4rem .7rem;
  cursor:pointer; line-height:1.3;
}
.bh-listen-btn:hover{background:#f2ead9;border-color:var(--bronze)}
/* No :focus-visible rule here on purpose. The one ring at the top of this file
   already covers every button on every BeHistorical surface, and a component
   that redefines it is how a ring becomes a tint again. */
.bh-listen-play{border-color:var(--bronze);color:var(--oxidized)}
.bh-listen-play:hover{color:var(--steel)}

/* Disabled is a real state a student can see and a screen reader announces, so
   it is styled rather than left to the user agent. Chromium's default disabled
   text is about 1.5:1 on this paper, which is unreadable for the many students
   who can still see it well enough to try. Iron is 6.5:1. */
.bh-listen-btn:disabled{
  color:var(--iron); background:#f4efe4; border-color:var(--rule-soft);
  cursor:default; opacity:1;
}
.bh-listen-btn:disabled:hover{background:#f4efe4;border-color:var(--rule-soft)}

.bh-listen-speed{display:inline-flex;align-items:center;gap:.35rem}
.bh-listen-speed label{
  font-size:.6rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal);
}
.bh-listen-rate{
  font-family:var(--font-ui); font-size:.68rem; font-weight:600;
  color:var(--steel); background:var(--clean);
  border:1px solid var(--rule); padding:.3rem .35rem; line-height:1.3;
}

/* Empty when idle, so it takes no room and announces nothing. */
.bh-listen-status{
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oxidized);
}
.bh-listen-status:empty{display:none}

/*
 * Available to a screen reader, never to the eye. clip-path with a 1px box
 * rather than display:none or visibility:hidden, both of which remove the text
 * from the accessibility tree, which would defeat the entire purpose: this is
 * how forty-three buttons that all read "Listen to this section" tell a screen
 * reader user which section each one belongs to.
 */
.bh-vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media print{
  .bh-listen,.bh-listen-mount{display:none}
}

/* ── terms ──────────────────────────────────────────────────────────────── */
.dr-terms{margin-top:1.7rem}
.dr-terms h3{font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);padding-bottom:.4rem;border-bottom:1px solid var(--rule);margin-bottom:.8rem}
/* minmax(min(100%,250px),1fr), not minmax(250px,1fr). A bare minimum is a floor
   the track cannot go under, so at a 320px viewport, where .dr-wrap has already
   spent 32px on padding, the grid is wider than the page and the whole document
   scrolls sideways. min(100%,250px) lets the track collapse to the container on
   the narrow end and changes nothing above it. */
.dr-terms dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:.8rem 1.6rem}
.dr-terms dt{font-weight:700;color:var(--steel);font-size:.87rem}
.dr-terms dd{font-size:.82rem;line-height:1.6;color:var(--charcoal);margin-top:.15rem}

/* ── closing comparison ─────────────────────────────────────────────────── */
.dr-closing{border-top:3px solid var(--steel);margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(2rem,4vw,3rem) 0 2rem}
.dr-closing h2{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.8rem);font-weight:700;letter-spacing:.03em;color:var(--steel);margin-bottom:1rem}
.dr-closing > p{max-width:64ch;margin-bottom:1.6rem}
.dr-pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));gap:1rem}
.dr-pair{background:var(--clean);border:1px solid var(--rule);border-top:3px solid var(--gold);padding:1rem 1.1rem}
.dr-pair h3{font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:.04em;color:var(--steel);margin-bottom:.5rem}
.dr-pair .cat{font-family:var(--font-ui);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oxidized);display:block;margin-bottom:.45rem}
.dr-pair p{font-size:.84rem;line-height:1.65}

/* ── footer nav ─────────────────────────────────────────────────────────── */
.dr-footer{border-top:2px solid var(--steel);margin-top:2rem;padding:1rem 0 3rem;display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center}
.dr-footer-note{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.05em;color:var(--iron)}
.dr-nav{display:flex;flex-wrap:wrap;gap:.6rem}
.dr-nav a{font-family:var(--font-ui);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--oxidized);text-decoration:none;border:1px solid var(--rule);background:var(--clean);padding:.45rem .8rem}
.dr-nav a:hover,.dr-nav a:focus-visible{color:var(--steel);border-color:var(--bronze)}

@media (max-width:620px){
  .dr-ehead{grid-template-columns:1fr}
  .dr-thesis{grid-column:1}
  .dr-enum{font-size:2rem}
}

@media print{
  body{background:#fff;font-size:11pt;line-height:1.5}
  .dr-jump,.dr-nav,.skip-link{display:none}
  .dr-masthead{background:#fff;color:#000;border-bottom:2pt solid #000;padding-bottom:1rem}
  .dr-masthead h1,.dr-deck{color:#000}
  .dr-masthead h1 em{color:#6b3e1f}
  .dr-eyebrow,.dr-meta{color:#4a2a13}
  .empire{break-before:page;border-top:0}
  .empire:first-of-type{break-before:auto}
  .dr-usethis{background:#f0eade;color:#000;border:1pt solid #000;break-inside:avoid}
  .dr-usethis dd{color:#000}
  .dr-usethis dt,.dr-usethis > b{color:#4a2a13}
  .dr-note,.dr-pair{break-inside:avoid}
}