/* ============================================================
   Book layout, components, type scale
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--paper);
}

body {
  font-family: var(--f-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

/* Subtle paper texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(168,32,26,0.012) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(26,22,18,0.018) 1px, transparent 2px);
  background-size: 4px 4px, 6px 6px;
  z-index: 1;
  opacity: 0.7;
}
body > * { position: relative; z-index: 2; }

/* ---------------------------------------------------------------
   Brand wordmark
   --------------------------------------------------------------- */
.wm {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
}
.wm .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  margin: 0 2px;
}
.wm .ed {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  margin-left: 10px;
}
.wm--light { color: #fff; }
.wm--light .ed { color: var(--on-dark-3); }

/* ---------------------------------------------------------------
   Top bar
   --------------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250,246,236,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  height: 64px;
}
.bar .crumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}
.bar .crumb a { color: var(--ash); text-decoration: none; }
.bar .crumb a:hover { color: var(--red); }
.bar .crumb .sep { opacity: 0.4; }
.bar .crumb .active { color: var(--red); }
.bar nav { display: flex; gap: 22px; align-items: center; }
.bar nav a {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.bar nav a:hover, .bar nav a.active { color: var(--red); border-bottom-color: var(--red); }

/* ---------------------------------------------------------------
   Containers
   --------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}
.container--text {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------------------------------------------------------
   Reader: marginalia gutter + chapter column + side rail
   --------------------------------------------------------------- */
.reader {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 240px;
  gap: 56px;
  padding: 56px 0 96px;
}
.reader__toc {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 8px;
}
.reader__toc::-webkit-scrollbar { width: 4px; }
.reader__toc::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

.reader__side {
  position: sticky;
  top: 84px;
  align-self: start;
}

@media (max-width: 1180px) {
  .reader { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
  .reader__side { display: none; }
}
@media (max-width: 800px) {
  .reader { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0 64px; }
  .reader__toc { display: none; }
}

/* ---------------------------------------------------------------
   Marginalia ToC
   --------------------------------------------------------------- */
.toc-title {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc-list li {
  counter-increment: toc;
  font-family: var(--f-sans);
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 6px 0;
  color: var(--ash);
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -16px;
  transition: color var(--d-fast), border-color var(--d-fast);
}
.toc-list li a { color: inherit; text-decoration: none; display: block; }
.toc-list li:hover { color: var(--ink); }
.toc-list li.active { color: var(--red); border-left-color: var(--red); font-weight: 500; }
.toc-list li::before {
  content: counter(toc, decimal-leading-zero) " ";
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--ash-2);
  margin-right: 6px;
}
.toc-list li.active::before { color: var(--red); }
.toc-list .group {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  padding: 14px 0 6px 0;
  margin-left: 0;
  border-left: none;
}
.toc-list .group::before { display: none; }

/* ---------------------------------------------------------------
   Chapter prose
   --------------------------------------------------------------- */
.chapter { max-width: 1180px; }

.chapter > .kicker,
.chapter > h1 + .lead,
.chapter > .lead { max-width: 100%; }

.chapter .kicker {
  font-family: var(--f-mono);
  font-size: var(--t-kicker-size);
  letter-spacing: var(--t-kicker-tracking);
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-weight: 500;
}
.chapter .kicker::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--red);
}

.chapter h1 {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 18ch;
  text-wrap: balance;
}

.chapter .lead {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 48px;
  max-width: 55ch;
  text-wrap: pretty;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.chapter h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2-size);
  font-weight: 700;
  letter-spacing: var(--t-h2-tracking);
  line-height: var(--t-h2-lh);
  color: var(--ink);
  margin: 64px 0 22px;
  scroll-margin-top: 100px;
}
/* Only numbered section headings get the flex layout + trailing rule line.
   Component block headings (vocab, objectives, checklist, review, discuss)
   carry no .num and render as plain block headings. */
.chapter h2:has(.num) {
  display: flex;
  align-items: center;
  gap: 14px;
}
.chapter h2 .num {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--red);
  text-transform: uppercase;
  flex-shrink: 0;
}
.chapter h2 .h2-ico {
  width: 24px;
  height: 24px;
  color: var(--red);
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chapter h2:has(.num)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 6px;
  align-self: center;
  transform: translateY(2px);
}
/* Component block headings promoted to h2 for a correct outline: keep them
   visually as the lighter block headings they were, never the section style. */
.vocab-block h2,
.objectives h2,
.checklist h2,
.review h2,
.discuss h2 {
  display: block;
  letter-spacing: -0.01em;
}

.chapter h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3-size);
  font-weight: 700;
  line-height: var(--t-h3-lh);
  color: var(--ink);
  margin: 36px 0 14px;
}

.chapter h4 {
  font-family: var(--f-sans);
  font-size: var(--t-h4-size);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 24px 0 10px;
}

.chapter p {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  margin: 0 0 20px;
  max-width: none;
  text-wrap: pretty;
}

/* Drop cap on the very first paragraph after the lead */
.chapter .lead + p::first-letter {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--red);
  font-size: 4em;
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.08em 0 0;
  padding: 0;
}

.chapter ul, .chapter ol {
  margin: 0 0 22px;
  padding-left: 22px;
  max-width: none;
}
.chapter li {
  font-size: var(--t-body-size);
  line-height: 1.65;
  margin-bottom: 10px;
  color: var(--fg-1);
}
.chapter ol { padding-left: 30px; }
.chapter ol li { padding-left: 6px; }

.chapter strong { font-weight: 600; color: var(--ink); }
.chapter em { font-style: italic; }
.chapter .hl { color: var(--red); font-weight: 600; }
.chapter .quiet { color: var(--fg-3); font-size: 0.94em; }

a.link, .chapter a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  transition: border-color var(--d-fast), color var(--d-fast);
}
a.link:hover, .chapter a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--red);
}

/* Editorial blockquote */
.chapter blockquote {
  margin: 36px 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--red);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 52ch;
}
.chapter blockquote .src {
  display: block;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}

.pullquote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.25;
  color: var(--red-deep);
  margin: 48px 0;
  padding: 32px 0;
  border-top: 2px solid var(--red);
  border-bottom: 1px solid var(--rule);
  max-width: 28ch;
  text-wrap: balance;
}
.pullquote .src {
  display: block;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ---------------------------------------------------------------
   Chapter opener — like a real textbook
   --------------------------------------------------------------- */
.opener {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
  margin: 0 0 56px;
  padding: 0 0 48px;
  border-bottom: 2px solid var(--ink);
}
.opener__num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: 9rem;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--red);
  margin: 0;
  position: relative;
}
.opener__num::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  background: var(--ink);
  margin-top: 18px;
}
.opener__num .word {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 6px;
}
.opener__meta {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opener__title h1 {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 16ch;
  text-wrap: balance;
}
.opener__title .lead {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 55ch;
  border: none;
  padding: 0;
}
.opener__title .part {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
  font-weight: 500;
}

@media (max-width: 720px) {
  .opener { grid-template-columns: 1fr; gap: 16px; }
  .opener__num { font-size: 6rem; }
}

/* ---------------------------------------------------------------
   Learning objectives — numbered, prominent
   --------------------------------------------------------------- */
.objectives {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  padding: 30px 34px;
  margin: 0 0 56px;
}
.objectives .label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
  display: block;
  font-weight: 500;
}
.objectives h2 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--ink);
}
.chapter .objectives ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: obj;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
}
.chapter .objectives ol li {
  counter-increment: obj;
  position: relative;
  padding: 2px 0 2px 40px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.chapter .objectives ol li::before {
  content: counter(obj, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 3px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--red);
  width: 28px;
}
@media (max-width: 640px) { .chapter .objectives ol { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Key concept callout
   --------------------------------------------------------------- */
.concept {
  background: var(--red-tint);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  border-left: 4px solid var(--red);
  padding: 24px 28px;
  margin: 32px 0;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
}
.concept .icon { color: var(--red); padding-top: 2px; }
.concept .label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}
.concept h3 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--red-deeper);
  letter-spacing: -0.005em;
}
.concept p {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--ink);
}
.concept p:last-child { margin-bottom: 0; }

/* Key term inline definition list */
.term {
  background: var(--bg-card);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--border);
  padding: 18px 22px;
  margin: 24px 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 22px;
  align-items: baseline;
}
.term dt {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--red);
}
.term dt .ipa {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--ash);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.term dd {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 640px) {
  .term { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------------------------------------------------------------
   Case study card
   --------------------------------------------------------------- */
.case {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ink);
  padding: 28px 32px;
  margin: 32px 0;
}
.case .label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
  display: block;
  font-weight: 500;
}
.case .where {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 14px;
  font-weight: 500;
}
.case h3 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.25;
}
.case p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: none;
}
.case p:last-child { margin-bottom: 0; }
.case .cite {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ash);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: block;
}
.case .cite a { color: var(--red); text-decoration: none; border-bottom: 1px solid transparent; }
.case .cite a:hover { border-bottom-color: var(--red); }
.case--featured { border-top-color: var(--red); border-top-width: 4px; }

/* Strong / weak example pair */
.examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  margin: 32px 0;
  border: 1px solid var(--border);
}
.example {
  background: var(--bg-card);
  padding: 22px 24px;
}
.example .label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.example .label .icon { width: 12px; height: 12px; }
.example.weak .label { color: var(--ash); }
.example.strong .label { color: var(--red); }
.example p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
  max-width: none;
}
@media (max-width: 640px) { .examples { grid-template-columns: 1fr; } }

/* Comparison table */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.compare caption {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  padding: 0 0 10px;
  caption-side: top;
  font-weight: 500;
}
.compare thead th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  padding: 14px 16px;
  background: var(--bg-3);
  border-bottom: 2px solid var(--ink);
}
.compare tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.5;
  vertical-align: top;
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare tbody td:first-child {
  font-family: var(--f-sans);
  font-weight: 600;
  color: var(--red);
  width: 22%;
}
.compare tbody tr:nth-child(even) td { background: var(--paper-2); }

/* ---------------------------------------------------------------
   Knowledge check
   --------------------------------------------------------------- */
.quiz {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  padding: 28px 32px;
  margin: 40px 0;
}
.quiz .label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
  display: block;
  font-weight: 500;
}
.quiz h3 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.quiz .stem {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 14px 0 16px;
  color: var(--ink);
  font-weight: 500;
  max-width: none;
}
.quiz .options {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.quiz .opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: background var(--d-fast);
  width: 100%;
}
.quiz .opt:hover { background: var(--red-tint); }
.quiz .opt .mark {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  color: var(--red);
  flex-shrink: 0;
  width: 18px;
  line-height: 1.5;
}
.quiz .opt.selected { background: var(--red-tint); }
.quiz .opt.correct { background: #e6f0e3; box-shadow: inset 0 0 0 2px var(--ok); }
.quiz .opt.correct .mark { color: var(--ok); }
.quiz .opt.incorrect { background: #fbe8e6; box-shadow: inset 0 0 0 2px var(--red); }
.quiz .feedback {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--paper-3);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
  display: none;
  border-left: 3px solid var(--red);
}
.quiz .feedback.show { display: block; }
.quiz .feedback strong { color: var(--red); font-weight: 600; }

/* ---------------------------------------------------------------
   Reflection input
   --------------------------------------------------------------- */
.reflect {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 24px 28px;
  margin: 28px 0;
  position: relative;
}
.reflect::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold);
}
.reflect .label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  display: block;
  font-weight: 600;
}
.reflect .prompt {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 56ch;
}
.reflect textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--border);
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  outline: none;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.reflect textarea:focus { border-color: var(--red); background: var(--white); }
.reflect .status {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex;
  align-items: center;
  gap: 8px;
}
.reflect .status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ash); }
.reflect .status.saved { color: var(--ok); }
.reflect .status.saved .dot { background: var(--ok); }
.reflect .cap {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 4px;
}

/* ---------------------------------------------------------------
   Discussion questions
   --------------------------------------------------------------- */
.discuss {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--ink);
  padding: 36px 40px;
  margin: 64px 0;
}
.discuss .label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
  display: block;
  font-weight: 500;
}
.discuss h2 {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 24px;
}
.discuss ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dq;
  max-width: none;
}
.chapter .discuss ol li,
.discuss ol li {
  counter-increment: dq;
  padding: 16px 0 16px 56px;
  border-top: 1px solid var(--border-soft);
  position: relative;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: none;
  list-style: none;
}
.chapter .discuss ol li:first-child,
.discuss ol li:first-child { border-top: none; }
.chapter .discuss ol li::before,
.discuss ol li::before {
  content: counter(dq, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--red);
  width: 40px;
}

/* ---------------------------------------------------------------
   Aside marginalia (small notes alongside body)
   --------------------------------------------------------------- */
.aside {
  background: transparent;
  border-left: 2px solid var(--gold);
  padding: 8px 0 8px 18px;
  margin: 28px 0;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ash);
  max-width: 58ch;
}
.aside .label {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

/* ---------------------------------------------------------------
   Chapter sidebar / side rail
   --------------------------------------------------------------- */
.side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 22px 24px;
  margin-bottom: 12px;
}
.side-card.dark {
  background: var(--ink);
  color: var(--white);
  border: none;
  border-top: 3px solid var(--red);
}
.side-card .label {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
  display: block;
  font-weight: 500;
}
.side-card h3 {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.25;
}
.side-card.dark h3 { color: var(--white); }
.side-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ash);
  margin: 0 0 12px;
  max-width: none;
}
.side-card.dark p { color: var(--on-dark-2); }
.side-card .meta {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.side-card.dark .meta { color: var(--on-dark-3); border-top-color: rgba(255,255,255,0.08); }
.meter {
  height: 3px;
  background: var(--border);
  margin: 10px 0;
}
.meter .fill {
  height: 100%;
  background: var(--red);
  width: 0%;
  transition: width var(--d-slow) var(--ease);
}

/* ---------------------------------------------------------------
   Chapter nav (prev / next)
   --------------------------------------------------------------- */
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 72px 0 0;
  background: var(--border);
  border: 1px solid var(--border);
}
.chapter-nav a {
  background: var(--bg-card);
  padding: 30px 32px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: background var(--d-fast);
  border: none;
}
.chapter-nav a:hover { background: var(--red-tint); }
.chapter-nav a.next { text-align: right; }
.chapter-nav .dir {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}
.chapter-nav .ttl {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
@media (max-width: 640px) { .chapter-nav { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.foot {
  background: var(--ink);
  color: var(--on-dark-2);
  padding: 40px 32px 32px;
  border-top: 4px solid var(--red);
}
.foot .row {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}

/* ---------------------------------------------------------------
   Icons
   --------------------------------------------------------------- */
.icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -4px;
  flex-shrink: 0;
}
.concept .icon { width: 28px; height: 28px; }
.discuss .label .icon, .example .label .icon { width: 14px; height: 14px; }

/* ---------------------------------------------------------------
   Tweaks variants
   --------------------------------------------------------------- */
[data-density="compact"] .chapter p { font-size: 1rem; line-height: 1.6; margin-bottom: 14px; }
[data-density="compact"] .chapter h2 { margin: 40px 0 14px; }
[data-density="compact"] .vocab-block h2,
[data-density="compact"] .objectives h2,
[data-density="compact"] .checklist h2,
[data-density="compact"] .review h2,
[data-density="compact"] .discuss h2 { margin-bottom: 10px; }
[data-density="compact"] .reader { padding: 40px 0 64px; }
[data-density="compact"] .page { padding: 28px 32px 56px; }
[data-density="compact"] .opener { margin-bottom: 36px; padding-bottom: 28px; }
[data-density="compact"] .opener__num { font-size: 6.5rem; }
[data-density="compact"] .vocab-block { margin-bottom: 36px; }
[data-density="compact"] .vocab-card { height: 260px; }
[data-density="compact"] .objectives { padding: 22px 26px; margin-bottom: 36px; }
[data-density="compact"] .concept,
[data-density="compact"] .case,
[data-density="compact"] .checklist,
[data-density="compact"] .quiz,
[data-density="compact"] .review { padding: 20px 22px; margin: 24px 0; }
[data-density="compact"] .fig { margin: 28px 0; }
[data-density="compact"] .fig__frame { padding: 18px; min-height: 0; }

[data-density="spacious"] .chapter p { font-size: 1.1rem; line-height: 1.85; margin-bottom: 26px; }
[data-density="spacious"] .chapter h2:has(.num) { margin: 80px 0 28px; }
[data-density="spacious"] .reader { padding: 72px 0 120px; gap: 72px; }

[data-tone="modern"] {
  --f-display: 'Newsreader', 'Times New Roman', serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
}
[data-tone="modern"] .chapter .lead { font-family: var(--f-body); font-style: normal; font-weight: 400; }
[data-tone="modern"] .chapter blockquote { font-family: var(--f-body); font-style: italic; }

[data-tone="austere"] {
  --paper: #f6f3eb;
  --paper-2: #ede8db;
  --red-tint: #f0e0dd;
}
[data-tone="austere"] .chapter .lead + p::first-letter { color: var(--ink); }
[data-tone="austere"] .opener__num { color: var(--ink); }

[data-layout="single"] .reader { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }
[data-layout="single"] .reader__toc, [data-layout="single"] .reader__side { display: none; }

/* ===============================================================
   SINGLE-PAGE CHAPTER (.page) — book-style, no rails
   The new template. Centered ~720px column, top rail, A4-friendly.
   =============================================================== */
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* Horizontal "In this chapter" rail at the top */
.chapter-rail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 32px 0;
}
.chapter-rail__inner {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.chapter-rail__label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  padding-top: 4px;
}
.chapter-rail ol {
  list-style: none;
  counter-reset: rail;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 18px;
}
.chapter-rail li {
  counter-increment: rail;
  font-size: 0;
  margin: 0;
}
.chapter-rail li a {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ash);
  text-decoration: none;
  display: block;
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid transparent;
  transition: color var(--d-fast), border-color var(--d-fast);
}
.chapter-rail li a::before {
  content: counter(rail, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-right: 8px;
  font-weight: 500;
}
.chapter-rail li a:hover { color: var(--ink); }
.chapter-rail li a.active { color: var(--red); }
@media (max-width: 880px) {
  .chapter-rail__inner { grid-template-columns: 1fr; gap: 8px; }
  .chapter-rail ol { grid-template-columns: 1fr 1fr; }
}

/* ===============================================================
   VOCAB FLIP CARDS — chapter vocabulary at the start
   =============================================================== */
.vocab-block {
  margin: 0 0 56px;
  padding: 0;
}
.vocab-block .label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}
.vocab-block h2 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.vocab-block .help {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: var(--ash);
  margin: 0 0 18px;
  max-width: none;
}
.vocab-deck {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.vocab-card {
  perspective: 1400px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  height: 280px;
  position: relative;
}
.vocab-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 520ms cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}
.vocab-card.is-flipped .vocab-card__inner { transform: rotateY(180deg); }
.vocab-card__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 22px 26px 20px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1.5px solid var(--ink);
  transition: box-shadow var(--d-fast);
  overflow: hidden;
}
.vocab-card:hover .vocab-card__face { box-shadow: 0 2px 0 var(--ink); }
.vocab-card__front {
  /* clean modern card — no accent top border */
}
.vocab-card__back {
  background: var(--paper-2);
  border-color: var(--red);
  transform: rotateY(180deg);
}

/* Top label — TERM / DEFINITION */
.vocab-card__num {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  display: block;
}
.vocab-card__back .vocab-card__num {
  color: var(--ok);
}

/* Big term name on front */
.vocab-card__front h3 {
  font-family: var(--f-display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.018em;
  margin: 18px 0 0;
  color: var(--ink);
  line-height: 1.05;
  text-wrap: balance;
}
.vocab-card__front h3 em {
  font-size: 0.65em;
  font-weight: 500;
  font-style: italic;
  color: var(--ash);
  display: block;
  margin-top: 2px;
}

/* Bottom hint with refresh icon */
.vocab-card__hint {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.vocab-card__hint::before {
  content: '↻';
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  color: var(--gold);
  font-weight: 400;
  line-height: 1;
  transform: scaleX(-1);
}

/* Back face — term metadata hidden, definition body, actions */
.vocab-card__back .term { display: none; }
.vocab-card__back p {
  font-family: var(--f-body);
  font-size: 0.88rem;
  line-height: 1.42;
  color: var(--ink);
  margin: 12px 0 12px;
  max-width: none;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.vocab-card__actions { flex-shrink: 0; }
.vocab-card__back p::-webkit-scrollbar { width: 3px; }
.vocab-card__back p::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }

.vocab-card__actions {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  margin-top: auto;
}
.vocab-card__btn {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 9px 10px;
  background: transparent;
  border: 1.5px solid;
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: background var(--d-fast), color var(--d-fast);
  font-family: var(--f-mono);
  display: inline-block;
}
.vocab-card__btn--got { color: var(--ok); border-color: var(--ok); }
.vocab-card__btn--again { color: var(--red); border-color: var(--red); }
.vocab-card__btn--got:hover { background: var(--ok); color: #fff; }
.vocab-card__btn--again:hover { background: var(--red); color: #fff; }
.vocab-card.is-known .vocab-card__front { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card) 88%, var(--ok) 88%, var(--ok) 100%); }
.vocab-card.is-known .vocab-card__front::after {
  content: '✓';
  position: absolute;
  top: 18px;
  right: 22px;
  color: var(--ok);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.vocab-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 640px) { .vocab-deck { grid-template-columns: 1fr; } }

/* ===============================================================
   CHECKLIST — practical do-now items
   =============================================================== */
.checklist {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--ink);
  padding: 26px 30px;
  margin: 36px 0;
}
.checklist .label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
  display: block;
  font-weight: 500;
}
.checklist h2 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 14px;
}
.checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
  cursor: pointer;
}
.checklist li:last-child { border-bottom: none; }
.checklist li .box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  margin-top: 3px;
  transition: background var(--d-fast), border-color var(--d-fast);
}
.checklist li.done .box {
  background: var(--red);
  border-color: var(--red);
}
.checklist li.done .box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist li.done .txt { color: var(--ash); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ash-2); }

/* ===============================================================
   CHAPTER REVIEW — rapid 5-question check at end of chapter
   =============================================================== */
.review {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  padding: 32px 36px;
  margin: 56px 0;
}
.review .label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}
.review h2 {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.review .intro {
  font-size: 0.95rem;
  color: var(--ash);
  margin: 0 0 22px;
  max-width: none;
}
.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rv;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review-q {
  counter-increment: rv;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  margin: 0;
  max-width: none;
}
.review-q::before {
  content: counter(rv, decimal-leading-zero);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--red);
  line-height: 1;
}
.review-q .body { display: flex; flex-direction: column; gap: 10px; }
.review-q .stem {
  font-family: var(--f-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  max-width: none;
}
.review-q .tf {
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  width: fit-content;
}
.review-q .tf button {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--paper-2);
  border: none;
  padding: 8px 18px;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--d-fast);
}
.review-q .tf button:hover { background: var(--red-tint); }
.review-q.answered .tf button { cursor: default; }
.review-q.answered .tf button.picked { background: var(--ink); color: var(--white); }
.review-q.answered.correct .tf button.picked { background: var(--ok); color: var(--white); }
.review-q.answered.wrong .tf button.picked { background: var(--red); color: var(--white); }
.review-q .ex {
  display: none;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  padding: 10px 14px;
  background: var(--paper-3);
  border-left: 3px solid var(--red);
  max-width: none;
}
.review-q.answered .ex { display: block; }
.review-q .ex .verdict {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 8px;
}
.review-q.correct .ex .verdict { color: var(--ok); }
.review-q.wrong .ex .verdict { color: var(--red); }

/* ===============================================================
   A4 PRINT — strong page alignment for printed book use
   =============================================================== */
@page {
  size: A4;
  margin: 22mm 18mm 22mm 18mm;
}
@page :first { margin-top: 14mm; }

@media print {
  :root { font-size: 11pt; }
  body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  .bar, .chapter-rail, .reader__toc, .reader__side,
  .chapter-nav, .foot, #tweaks-panel { display: none !important; }

  /* Layout */
  .container, .page { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  .reader { grid-template-columns: 1fr !important; padding: 0 !important; }
  .chapter { max-width: 100% !important; }

  /* Type tightening for print */
  .chapter p { font-size: 10.5pt; line-height: 1.55; orphans: 3; widows: 3; }
  .chapter h1 { font-size: 26pt; }
  .chapter h2 { font-size: 14pt; margin: 18pt 0 8pt; break-after: avoid; }
  .chapter h2::after { display: none; }
  .chapter h3 { font-size: 12pt; break-after: avoid; }
  .chapter h4 { break-after: avoid; }

  /* Chapter opener starts on a new page */
  .opener {
    grid-template-columns: 1fr 2fr !important;
    page-break-before: always;
    break-before: page;
    page-break-after: avoid;
  }
  .opener__num { font-size: 80pt; }

  /* Keep callouts intact */
  .objectives, .concept, .case, .quiz, .review-q, .checklist,
  .reflect, .discuss, .term, .vocab-card, .pullquote, blockquote,
  .compare, .examples, .aside {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .review-list { gap: 10pt; }
  .discuss li { break-inside: avoid; }

  /* Tables */
  table { page-break-inside: auto; }
  table tr, table td, table th { page-break-inside: avoid; }

  /* Vocab flip cards: show both faces stacked for print */
  .vocab-deck { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10pt; }
  .vocab-card { height: auto !important; perspective: none; }
  .vocab-card__inner { transform: none !important; transform-style: flat; }
  .vocab-card__face { position: relative !important; backface-visibility: visible !important; }
  .vocab-card__front { margin-bottom: 4pt; }
  .vocab-card__back { transform: none !important; background: #f4eedf; color: #000; border-color: #000; }
  .vocab-card__back p, .vocab-card__back .term, .vocab-card__back .vocab-card__num { color: #000 !important; }
  .vocab-card__hint, .vocab-card__actions { display: none; }

  /* Reflection becomes lined writing space */
  .reflect textarea {
    min-height: 22mm;
    background: repeating-linear-gradient(transparent, transparent 7mm, #d6cfb8 7mm, #d6cfb8 7.2mm) !important;
    border: 1px solid #999 !important;
  }
  .reflect .status, .reflect .cap { display: none; }

  /* Quiz: show all answers and feedback */
  .quiz .feedback { display: block !important; }
  .quiz .opt { background: #fff !important; }
  .quiz .opt.correct { box-shadow: inset 4px 0 0 #2e6f3a !important; }

  /* Review: show all explanations */
  .review-q .ex { display: block !important; }

  /* Links */
  a, .chapter a { color: #000 !important; border-bottom: none !important; }

  /* Hide top-bar's running head, add print running head via @page if browser supports */
  .print-running-head, .print-page-num { display: block; }
}
/* ===============================================================
   WORKED EXAMPLE — scoring rubric (CRAAP-style mnemonic table)
   A reusable pattern for evaluating any source, brief, or artefact
   against a fixed-letter rubric with 1–5 ratings and notes.
   =============================================================== */
.worked {
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin: 36px 0;
  break-inside: avoid;
  page-break-inside: avoid;
}
.worked__hd {
  padding: 18px 24px;
  border-bottom: 1px dashed var(--border);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px 18px;
  align-items: center;
}
.worked__tag {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--white);
  padding: 6px 12px;
  font-weight: 600;
}
.worked__hdr-label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
.worked__source {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--red-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  display: inline-block;
}
.worked__intro {
  padding: 14px 24px 0;
  font-size: 0.92rem;
  color: var(--ash);
  margin: 0;
  max-width: none;
}
.we-row {
  display: grid;
  grid-template-columns: 36px 1fr auto 1fr;
  gap: 18px;
  padding: 14px 24px;
  border-bottom: 1px dashed var(--border-soft);
  align-items: center;
}
.we-row:last-of-type { border-bottom: none; }
.we-letter {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--red);
  text-align: center;
  line-height: 1;
}
.we-criterion {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.we-criterion__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.we-criterion__q {
  font-family: var(--f-body);
  font-size: 0.82rem;
  color: var(--ash);
  line-height: 1.3;
}
.we-scale {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.we-scale span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  flex-shrink: 0;
}
.we-scale span.picked {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  font-weight: 600;
}
.we-note {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--red-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  line-height: 1.3;
}
.worked__total {
  padding: 16px 24px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: baseline;
  gap: 14px;
  background: var(--paper-2);
}
.worked__total-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
.worked__total-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--red);
  border-bottom: 2px solid var(--gold);
  padding: 0 4px 2px;
  letter-spacing: -0.02em;
}
.worked__total-out {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ash);
}
.worked__verdict {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--ok);
}
.worked__verdict[data-state="reject"] { color: var(--red); border-color: var(--red); }
.worked__verdict[data-state="weigh"] { color: var(--gold); border-color: var(--gold); }

/* Student-fillable variant — empty scoring cards for the student to use */
.worked--blank .we-scale span { background: transparent; border-color: var(--ash-2); color: var(--ash); cursor: pointer; }
.worked--blank .we-scale span:hover { border-color: var(--gold); color: var(--ink); }
.worked--blank .we-scale span.picked { background: var(--gold); border-color: var(--gold); color: var(--white); }
.worked--blank .we-note { border-bottom-color: var(--rule-soft); color: var(--ash-2); }
.worked--blank .we-note[contenteditable="true"]:empty::before,
.worked--blank .we-note[contenteditable="true"]:not(:focus):empty::before {
  content: attr(data-placeholder);
  color: var(--ash-2);
  font-style: italic;
}
.worked--blank .we-note[contenteditable="true"]:focus { color: var(--red-deep); border-bottom-color: var(--gold); }
.worked--blank .worked__source[contenteditable="true"]:focus { color: var(--ink); }
.worked--blank .worked__total-num { color: var(--ash-2); border-bottom-color: var(--rule-soft); }

@media (max-width: 720px) {
  .we-row { grid-template-columns: 32px 1fr; gap: 12px; }
  .we-scale, .we-note { grid-column: 1 / -1; padding-left: 44px; }
  .we-scale { justify-content: flex-start; }
}
   Every figure carries its own caption + citation block.
   =============================================================== */
.fig {
  margin: 36px 0;
  break-inside: avoid;
  page-break-inside: avoid;
}
.fig__frame {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  position: relative;
}
.fig__frame--dark {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.fig__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.fig__num {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  padding-top: 2px;
}
.fig__text {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.fig__text strong { font-weight: 600; color: var(--ink); }
.fig__cite {
  grid-column: 2;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--ash);
  text-transform: none;
  margin-top: 2px;
}
.fig__cite a { color: var(--ash); text-decoration: none; border-bottom: 1px dotted var(--ash-2); }
.fig__cite a:hover { color: var(--red); border-bottom-color: var(--red); }

/* Brand-mark callout: small wordmark + label, inline with case study */
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin: 0 0 14px;
}
.brandmark__logo {
  width: 56px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brandmark__logo svg, .brandmark__logo img { max-width: 100%; max-height: 100%; }
.brandmark__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brandmark a, .chapter .brandmark a {
  display: contents;
  text-decoration: none;
  border-bottom: none;
  color: inherit;
}
.brandmark:hover .brandmark__name { color: var(--red); }
.brandmark__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.1;
  transition: color var(--d-fast);
}
.brandmark__where {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Image-slot styling — drop-in placeholder for screenshots */
.fig image-slot {
  display: block;
  width: 100%;
}

/* Side-by-side compare figure */
.fig--compare .fig__frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  padding: 0;
  min-height: 0;
}
.fig--compare .fig__frame > * {
  background: var(--bg-card);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Framework diagram label */
.fig__diagram-label {
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ash);
  font-weight: 500;
}

/* Course map — 15-day schedule rows (used by course-map.html and the A4 book) */
.cmap { max-width: 1000px; margin: 0 auto; padding: 0 0 20px; }
.cmap__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-bottom: 2px solid var(--ink); padding-bottom: 24px; margin-bottom: 8px; }
.cmap__intro p { font-family: var(--f-body); font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); margin: 0; }
.cmap__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 18px 0 28px; }
.cmap__legend span { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); display: inline-flex; align-items: center; gap: 7px; }
.cmap__legend i { width: 10px; height: 10px; display: inline-block; }
.cmap__legend .i-read { background: var(--red); }
.cmap__legend .i-off { background: var(--rule); }
.cmap__legend .i-present { background: var(--gold); }
.cday { display: grid; grid-template-columns: 92px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; page-break-inside: avoid; }
.cday__num { font-family: var(--f-display); font-weight: 700; font-size: 3rem; line-height: 0.9; color: var(--ink); }
.cday__num span { display: block; font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-top: 8px; font-weight: 600; }
.cday__body { min-width: 0; }
.cday__theme { font-family: var(--f-display); font-weight: 700; font-size: 1.45rem; line-height: 1.2; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.cday__obj { font-family: var(--f-body); font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; max-width: 64ch; }
.cday__rows { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
.cday__field { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.cday__deliv { font-family: var(--f-sans); font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.cday__reading { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cday__reading a { font-family: var(--f-sans); font-size: 0.82rem; font-weight: 500; color: var(--red); text-decoration: none; border: 1px solid var(--rule); border-left: 2px solid var(--red); background: var(--paper-2); padding: 5px 10px; transition: border-color var(--d-fast), background var(--d-fast); }
.cday__reading a:hover { border-color: var(--red); background: var(--white); }
.cday__reading .none { color: var(--ash-2); border-left-color: var(--rule); font-style: italic; }
.cday--off .cday__num { color: var(--ash-2); font-style: italic; font-size: 1.4rem; }
.cday--off .cday__theme { font-size: 1.05rem; color: var(--ash); font-style: italic; font-weight: 500; }
.cday--present .cday__num, .cday--present .cday__num span { color: var(--gold); }
@media (max-width: 680px) {
  .cmap__intro { grid-template-columns: 1fr; gap: 14px; }
  .cday { grid-template-columns: 64px 1fr; gap: 14px; }
  .cday__num { font-size: 2.2rem; }
}

/* Embedded brand logo (filled from the deck logo set) */
.brandmark__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* Day / module badge in the chapter opener, links to the course map */
.day-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--red);
  padding: 6px 12px;
  margin-bottom: 16px;
  width: fit-content;
  max-width: 100%;
  transition: border-color var(--d-fast), color var(--d-fast);
}
.day-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.day-badge__theme {
  color: var(--ash);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.day-badge:hover { border-color: var(--red); color: var(--red-deep); }
@media print {
  .day-badge { background: #f4eedf !important; border-color: #000 !important; border-left-color: #a8201a !important; color: #a8201a !important; }
}

/* Two-column figure row */
.fig-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 36px 0;
}
@media (max-width: 640px) { .fig-row { grid-template-columns: 1fr; } }

/* ===============================================================
   PRINT RULES for figures
   =============================================================== */
@media print {
  .fig { break-inside: avoid; }
  .fig__frame--dark { background: #f4eedf !important; color: #000 !important; border-color: #000 !important; }
  .fig image-slot { border: 1px dashed #999 !important; min-height: 50mm; }
}