/*
 * style.css — The Validation Crisis
 * Refined editorial typography, document-first reading experience.
 * Original design — every element generated, no copied assets.
 *
 * Type system: Crimson Pro body (serif), Inter UI/headings, JetBrains Mono code.
 * Palette: warm paper cream, deep ink, academic vermillion accent.
 * Layout: fixed-left sidebar nav (collapses to drawer on narrow viewports),
 * narrow measure (~70ch) for long-form reading.
 *
 * Critical preserved invariant — Directive 2 (Conclusion hex contiguity):
 *   inline <code> wraps at character boundaries with no character insertion;
 *   hex strings extract verbatim in pdftotext/grep/copy-paste.
 */

/* ── Font imports ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* Palette — warm paper, deep ink, vermillion accent */
  --ink:            #1a1814;   /* deep warm black */
  --ink-soft:       #3a342c;   /* secondary text */
  --stone:          #6a6258;   /* meta, captions */
  --paper:          #faf7f2;   /* page cream */
  --paper-deep:     #f2ede3;   /* code backgrounds */
  --hairline:       #e0dbd0;   /* rules, borders */
  --vermillion:     #c04a2e;   /* the one accent — used sparingly */
  --vermillion-soft:#e8c2b5;   /* accent at low opacity */

  /* Typography */
  --font-display:   'Crimson Pro', 'Iowan Old Style', 'Georgia', serif;
  --font-body:      'Crimson Pro', 'Iowan Old Style', 'Georgia', serif;
  --font-ui:        'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Type scale — major third (1.250) on 18px base */
  --size-base:      1.125rem;  /* 18px body */
  --size-small:     0.9375rem; /* 15px meta */
  --size-tiny:      0.8125rem; /* 13px footer + captions */
  --size-lede:      1.3125rem; /* 21px lede */
  --size-h3:        1.375rem;  /* 22px */
  --size-h2:        1.75rem;   /* 28px */
  --size-h1:        2.5rem;    /* 40px chapter title */
  --size-display:   clamp(2.8rem, 6.5vw, 4.75rem);  /* responsive wordmark */
  --size-subtitle:  clamp(1.05rem, 1.6vw, 1.25rem);

  /* Rhythm */
  --leading-body:   1.7;
  --leading-tight:  1.25;
  --leading-display:1.05;

  /* Layout */
  --measure:        38rem;    /* ~70ch reading width (prose) */
  --wide:           56rem;    /* wider centred column for figures + tables */
  --sidebar-w:      17rem;    /* sidebar nav width on desktop */
  --layout-gap:     5rem;     /* desktop gutter between sidebar + content */
  --page-pad:       2rem;
}

/* ── Reset + base ────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
}

/* ── Reading-progress bar (fixed top, hairline) ──────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--vermillion);
  z-index: 100;
  transition: width 60ms linear;
  pointer-events: none;
}

/* ── Layout: normal flow + fixed sidebar ─────────────────────────────────────
   The Pandoc HTML has NO section wrappers — chapters are hundreds of loose
   top-level <h*>/<p>/<table> elements. A CSS grid would auto-place them
   chaotically (overlap + gaps). Instead: every top-level block forms a single
   centred reading column in normal flow, and the Contents sidebar is taken
   out of flow (fixed). Nothing can mis-place because there is no grid. ──────── */

/* Mobile-first: single full-width column. */
body {
  padding: 0 1.25rem;
}

/* Constrain every top-level block to the reading measure. Applied uniformly to
   the loose Pandoc content so no element can escape the column. Fixed-position
   chrome (progress bar, nav toggle) is exempted just below. */
body > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.progress-bar,
.nav-toggle {
  max-width: none;
  margin: 0;
}

/* Wider centred column for figures + tables so charts and multi-column tables
   fit properly instead of being squeezed to the prose measure. Bounded by
   --wide, never exceeding the available width. Centred (inherits margin:auto). */
body > figure,
body > table,
.hero-figure {
  max-width: min(var(--wide), 100%);
}

/* Desktop: pin the Contents sidebar to the viewport's left edge; the reading
   column then CENTRES within the area to its right (not jammed left). The base
   `body > *` margin:auto does the centring; we only clear the sidebar here. */
@media (min-width: 1024px) {
  body {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
  }
  .progress-bar,
  .nav-toggle {
    margin: 0;
  }
}

/* ── Sidebar nav (Quarto-rendered TOC repurposed) ────────────────────────── */
#TOC {
  font-family: var(--font-ui);
  font-size: 0.825rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 1.5rem 1.25rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 2rem auto;
  max-width: var(--measure);
}

@media (min-width: 1024px) {
  #TOC {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    max-width: var(--sidebar-w);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 4.5rem 1.5rem 2rem 1.5rem;
    border: none;
    border-right: 1px solid var(--hairline);
    background: var(--paper);
    z-index: 50;
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
  }
}

#TOC::before {
  content: 'Contents';
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.25rem;
}

#TOC ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#TOC ul ul {
  padding-left: 0.875rem;
  margin: 0.15rem 0 0.4rem;
  border-left: 1px solid var(--hairline);
}

#TOC li {
  margin: 0.15rem 0;
}

#TOC a {
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  padding: 0.18rem 0.5rem 0.18rem 0;
  border-radius: 2px;
  transition: color 120ms, background 120ms;
}

#TOC a:hover {
  color: var(--vermillion);
  background: transparent;
}

#TOC .toc-section-number {
  display: inline-block;
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--stone);
  font-weight: 500;
}

#TOC ul ul a {
  font-size: 0.78rem;
  color: var(--stone);
}

/* ── Hero (replaces pandoc <header id="title-block-header">) ─────────────── */
.hero {
  padding: 5rem 0 2rem;
  border-bottom: 1px solid var(--hairline);
}

.hero .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--size-display);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1rem 0;
  font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1;
}

.hero .wordmark::after {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--vermillion);
  margin: 1.75rem 0 0 0;
}

.hero .subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-subtitle);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 1.75rem 0 0 0;
  max-width: 32rem;
}

.hero .lede {
  font-family: var(--font-body);
  font-size: var(--size-lede);
  line-height: 1.55;
  color: var(--ink);
  margin: 2.5rem 0 0 0;
  font-weight: 400;
}

.hero .lede em {
  font-style: italic;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 2.5rem 0 0 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--size-small);
  color: var(--stone);
  align-items: baseline;
}

.hero-meta .meta-sep {
  color: var(--hairline);
  user-select: none;
}

.hero-meta a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: color 120ms, border-color 120ms;
}

.hero-meta a:hover {
  color: var(--vermillion);
  border-bottom-color: var(--vermillion);
}

.hero-meta .author {
  color: var(--ink);
  font-weight: 500;
}

/* ── Hero abstract motif (inline SVG container) ──────────────────────────── */
.hero-motif {
  margin: 3.5rem 0 0;
  overflow: visible;
  color: var(--vermillion);
}

.hero-motif svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Hero figure: figure_16_1 featured (the money shot) ─────────────────── */
.hero-figure {
  margin: 4.5rem auto 4rem;
  padding: 0;
  max-width: min(var(--wide), 100%);
}

.hero-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hairline);
  background: white;
}

.hero-figure figcaption {
  font-family: var(--font-ui);
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--stone);
  margin: 1.25rem 0 0 0;
  max-width: 36rem;
}

.hero-figure figcaption .figure-label {
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}

/* ── Headings — Inter sans-serif with refined rhythm ─────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.005em;
}

h1 {
  font-size: var(--size-h1);
  margin: 5rem 0 2rem;
  padding-bottom: 0;
  border: none;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1.title,
.title-block-header h1 {
  display: none;  /* hero replaces it */
}

h1 .header-section-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: var(--vermillion);
  font-weight: 500;
  margin-right: 0.75rem;
  font-size: 0.7em;
  letter-spacing: 0;
  position: relative;
  top: -0.3em;
}

h2 {
  font-size: var(--size-h2);
  margin: 3.5rem 0 1.5rem;
}

h2 .header-section-number {
  font-variant-numeric: tabular-nums;
  color: var(--stone);
  font-weight: 500;
  margin-right: 0.6rem;
}

h3 {
  font-size: var(--size-h3);
  margin: 2.5rem 0 1rem;
  font-weight: 600;
}

h4 {
  font-size: 1.0625rem;
  margin: 2rem 0 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* ── Body prose ──────────────────────────────────────────────────────────── */
p {
  margin: 0 0 1.4rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
}

/* UI / meta / non-body contexts stay naturally aligned ───────────────────── */
.hero-meta,
.hero-meta p,
.hero .subtitle,
figcaption,
.site-footer,
.site-footer p,
#TOC,
#TOC a,
.nav-toggle {
  text-align: left;
  hyphens: manual;
}

/* Lede stays left-ragged for a clean opening paragraph ───────────────────── */
.hero .lede {
  text-align: left;
  hyphens: manual;
}

p + p {
  text-indent: 0;
}

strong, b {
  font-weight: 600;
  color: var(--ink);
}

em, i {
  font-style: italic;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--vermillion-soft), var(--vermillion-soft));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 180ms, color 180ms;
}

a:hover {
  color: var(--vermillion);
  background-size: 100% 100%;
  background-image: linear-gradient(rgba(192, 74, 46, 0.08), rgba(192, 74, 46, 0.08));
}

/* ── Lists ───────────────────────────────────────────────────────────────── */
ul, ol {
  margin: 0 0 1.4rem;
  padding-left: 1.5rem;
}

li {
  margin: 0.35rem 0;
}

ul ul, ol ol, ul ol, ol ul {
  margin: 0.3rem 0;
}

/* ── Blockquotes ─────────────────────────────────────────────────────────── */
blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--vermillion);
  color: var(--ink-soft);
  font-style: italic;
}

blockquote p {
  margin-bottom: 0.8rem;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Code (CRITICAL: preserves Directive 2 hex contiguity) ───────────────── */
code, pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-variant-ligatures: none;
}

/* Inline code — Directive 2 rule: character-boundary wrap, no insertion */
code {
  background: var(--paper-deep);
  color: var(--ink);
  padding: 0.1em 0.35em;
  border-radius: 2px;
  word-break: break-all;
  overflow-wrap: anywhere;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Pre code blocks */
pre {
  background: var(--paper-deep);
  color: var(--ink);
  padding: 1rem 1.25rem;
  border-radius: 3px;
  overflow-x: auto;
  line-height: 1.5;
  margin: 1.5rem 0;
  border: 1px solid var(--hairline);
}

pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: 0;
  word-break: normal;
  overflow-wrap: normal;
}

/* ── Tables (Ch 6 §4 speculative cells render in tables — Directive 1) ──── */
.table-wrap, .table {
  overflow-x: auto;
  margin: 1.75rem 0;
}

/* Wide multi-column tables: size to content and scroll horizontally within the
   reading column rather than cramming 7 columns into the measure (which caused
   wrapping/overflow). display:block + max-width:100% + overflow-x:auto is the
   standard scrollable-table idiom; width:max-content (!important to defeat the
   Pandoc inline width:100%) sizes the table to its content; colgroup is dropped
   so columns auto-size instead of holding fixed 14% widths. */
table {
  display: block;
  width: max-content !important;
  max-width: min(var(--wide), 100%);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 1.75rem auto;
}

table colgroup {
  display: none;
}

th {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1.5px solid var(--ink);
  vertical-align: bottom;
}

td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  text-align: left;
}

tr:last-child td {
  border-bottom: 1.5px solid var(--ink);
}

td em, th em {
  font-style: italic;
  color: var(--ink-soft);
}

/* ── Figures (book's own SVG/PNG figures) ────────────────────────────────── */
figure {
  margin: 2.5rem auto;
  max-width: min(var(--wide), 100%);
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

figcaption {
  font-family: var(--font-ui);
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--stone);
  margin: 0.85rem 0 0;
}

/* ── Footnotes (Quarto inline) ───────────────────────────────────────────── */
.footnotes {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.925rem;
  color: var(--ink-soft);
}

.footnotes hr {
  display: none;
}

.footnotes ol {
  padding-left: 1.5rem;
}

.footnotes li {
  margin: 0.6rem 0;
}

.footnote-ref a, a.footnote-ref {
  font-family: var(--font-ui);
  font-size: 0.7em;
  vertical-align: super;
  background: none;
  color: var(--vermillion);
  font-weight: 500;
  padding: 0 0.15em;
}

a.footnote-back {
  color: var(--stone);
  margin-left: 0.3em;
}

/* ── Equations (KaTeX/MathJax — preserved vector-text) ───────────────────── */
.math {
  font-family: var(--font-body);
  overflow-x: auto;
  overflow-y: hidden;
}

.math.display {
  margin: 1.5rem 0;
  text-align: center;
}

/* ── Section dividers ────────────────────────────────────────────────────── */
hr {
  border: none;
  margin: 3rem auto;
  height: 8px;
  background-image: radial-gradient(circle, var(--stone) 0.8px, transparent 0.8px);
  background-size: 14px 8px;
  background-repeat: repeat-x;
  background-position: center;
  max-width: 80px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  margin: 6rem auto 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: var(--size-tiny);
  line-height: 1.65;
  color: var(--stone);
}

.site-footer .footer-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.site-footer h5 {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 0.85rem 0;
}

.site-footer p {
  margin: 0 0 0.4rem 0;
}

.site-footer a {
  color: var(--ink-soft);
  background: none;
}

.site-footer a:hover {
  color: var(--vermillion);
  background: none;
}

.site-footer .footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
}

.site-footer .footer-bottom code {
  font-size: 0.85em;
  background: transparent;
  color: var(--stone);
  padding: 0;
  word-break: break-all;
}

/* ── Sidebar mobile drawer toggle ────────────────────────────────────────── */
.nav-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 90;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background 120ms, color 120ms;
}

.nav-toggle:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* Sidebar drawer behaviour on mobile */
@media (max-width: 1023px) {
  #TOC {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(85vw, 22rem);
    max-height: 100vh;
    background: var(--paper);
    border-left: 1px solid var(--hairline);
    border-top: none;
    border-bottom: none;
    margin: 0;
    padding: 4rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 80;
    box-shadow: -20px 0 60px rgba(26, 24, 20, 0.08);
  }
  #TOC.open {
    transform: translateX(0);
  }
}

/* ── Responsive prose ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --size-base: 1.0625rem;
    --size-lede: 1.1875rem;
    --size-h1: 2rem;
    --size-h2: 1.5rem;
  }
  body {
    padding: 0 1.25rem;
  }
  .hero {
    padding: 4rem 0 1.5rem;
  }
  .hero-figure {
    margin: 3rem auto;
  }
  h1 {
    margin: 3.5rem 0 1.5rem;
  }
}

/* ── Selection style ─────────────────────────────────────────────────────── */
::selection {
  background: var(--vermillion);
  color: var(--paper);
}

/* ── Focus visible (a11y) ────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--vermillion);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .nav-toggle, .progress-bar, .site-footer { display: none; }
  body { background: white; color: black; max-width: 100%; }
  #TOC { display: none; }
}