/* Website tokens mirror pawelmandera.com/assets/global.css.
   Diagram geometry, emphasis and semantic colors stay local. */
:root {
  --paper: #fbfaf6;
  --paper-warm: #f5efe2;
  --slide-paper: var(--paper-warm);
  --slide-inset: var(--accent-bg);
  --ink: #15120e;
  --ink-2: #2b2620;
  --muted: #6b6359;
  --muted-soft: #8a8174;
  --rule: #e8e0d2;
  --accent: #a8327a;
  --accent-bg: rgba(168, 50, 122, .08);
  --accent-wash: var(--accent-bg);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
body {
  background: var(--paper);
  color: var(--ink-2);
  font: 400 15px/1.6 var(--sans);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom-color: rgba(168, 50, 122, .3);
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
a:hover, a:focus-visible { border-bottom-color: var(--accent); }

/* The site's reading rhythm, within the wider slide-and-commentary layout. */
.masthead { padding: 32px 0; }
.masthead h1 {
  margin: 14px 0 24px;
  font: 500 36px/1.08 var(--serif);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.masthead .intro, .masthead > p { max-width: 640px; }
.masthead p { margin-bottom: .85em; }
.masthead > p { color: var(--muted); font-size: 13px; }
.narrative { max-width: 640px; }
.narrative h2 {
  margin-bottom: 20px;
  font: 500 28px/1.25 var(--serif);
  letter-spacing: -.012em;
  text-wrap: balance;
}
.narrative p { margin-bottom: .85em; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.narrative .onscreen { color: var(--muted); font-size: 13px; }
.jump { gap: 8px; }
.jump a { color: var(--muted); font-weight: 400; }
.section-heading { margin-bottom: 22px; }
.panel-commentary summary { color: var(--accent); }

/* A single frame for text panels and drawings, without a second white canvas. */
.slide-sheet.slide-sheet, .source-panel.source-panel, .p07-panel.p07-panel {
  background: var(--slide-paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--sans);
  line-height: 1.6;
  container-type: inline-size;
  box-sizing: border-box;
  min-width: 0;
}
.slide-sheet.slide-sheet { padding: 28px 28px 64px; }
.source-panel.source-panel, .p07-panel.p07-panel { padding: 28px; }
.slide-sheet.slide-sheet > h3, .source-panel.source-panel > h2, .p07-panel.p07-panel > h2 {
  font-family: var(--serif);
  font-size: clamp(25px, 5cqi, 34px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.slide-sheet.rebuilt-cover > h3 { font-size: clamp(42px, 10cqi, 66px); }
.slide-sheet .kicker, .source-panel .source-kicker, .p07-panel .kicker {
  color: var(--accent);
  font: 500 10px/1.6 var(--mono) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.slide-sheet .slide-number, .source-panel .source-number, .p07-panel .source-number {
  color: var(--muted);
  font: 500 10px/1.5 var(--mono) !important;
  letter-spacing: .08em;
}
.slide-sheet .slide-number { bottom: 18px; right: 26px; }
.source-panel .source-number, .p07-panel .source-number { margin: 24px 0 0; }

/* Body type is shared; bold, italic, underlines and source alignment are retained. */
.slide-sheet :is(.slide-body, .slide-copy, .slide-part08-copy, .part09-copy, .p04-copy) {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
}
.source-panel :is(p, li), .p07-panel :is(p, li) { font-size: 15px; line-height: 1.65; }
.source-panel :is(h3, .boxed), .p07-panel h3 { color: var(--ink); }
.source-panel h3, .p07-panel h3 { font-family: var(--sans); font-size: 15px; line-height: 1.4; }
.slide-sheet :is(.slide-copy, .slide-part08-copy, .part09-copy) h4 {
  font-size: 15px;
  line-height: 1.4;
  color: var(--accent);
  margin-top: 1.3em;
}
.slide-sheet .inset { background: var(--slide-inset); border-color: var(--accent); }
.slide-sheet .slide-note, .slide-sheet .p05-note, .source-panel .map-key {
  color: var(--muted);
  font: 12px/1.6 var(--sans) !important;
}
.slide-column figcaption { font-size: 12px; line-height: 1.6; margin-top: 12px; }
.slide-meta { margin-bottom: 12px; }

/* Paper-colored knockouts remain opaque: hollow symbols must not become solid. */
svg :is([fill="white" i], [fill="#fff" i], [fill="#ffffff" i],
         [fill="#fffcf7" i], [fill="#fffaf0" i], [fill="#fcfaf3" i]) {
  fill: var(--slide-paper);
}
svg :is([stroke="white" i], [stroke="#fff" i], [stroke="#ffffff" i]) {
  stroke: var(--slide-paper);
}
.slide-sheet :is(.chart-scroll, .p04-scroll, .diagram-scroll, .part08-diagram-scroll, .part09-pan),
.source-panel .map-pan {
  background: var(--slide-paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.slide-sheet svg, .source-panel svg, .p07-panel svg { background: transparent; }
.slide-sheet :is(.chart-scroll, .p04-scroll, .diagram-scroll, .part08-diagram-scroll, .part09-pan):focus-visible,
.source-panel .map-pan:focus-visible, .p07-panel .relationship-pan:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.p07-panel .associations thead { background: var(--slide-inset); }
.p07-panel .associations :is(th, td) { border-color: var(--rule); }

/* Opt-in single-canvas panels. Internal semantic boxes and SVG marks are untouched. */
.integrated-slide > :is(.kicker, .source-kicker) { display: none; }
.slide-sheet.integrated-slide > h3:has(+ .diagram-subtitle) { margin-bottom: 10px; }
.integrated-slide .diagram-subtitle {
  margin: 0 0 28px;
  font: 500 14px/1.5 var(--sans);
  color: var(--muted);
}
:is(.slide-sheet, .source-panel).integrated-slide :is(.chart-scroll, .p04-scroll, .diagram-scroll, .part08-diagram-scroll, .part09-pan, .map-pan) {
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-gutter: auto;
  max-height: none;
}
.integrated-slide .part08-diagram-scroll:focus { max-height: min(70vh, 540px); }
.slide-column figure:has(.integrated-slide) { background: transparent; }
.panel-commentary { margin-top: 12px; color: var(--muted); font: 12px/1.6 var(--sans); }
.panel-commentary :is(p, details) { margin: 0 0 8px; }
.panel-commentary summary { cursor: pointer; }

/* Source images are deliberately unfiltered and unretouched. */
:where(.comparison, .compare-grid, .pair, .compare) > * { min-width: 0; }
figure:has(svg), figure:has(img), .pane, .controls button { background: var(--slide-paper); }
.slide-column > figure { background: transparent; }
figure svg[role="img"] { background: transparent; }
body > h1, body > :is(header, main) > h1 {
  color: var(--ink);
  font: 500 36px/1.08 var(--serif);
  letter-spacing: -.02em;
}
body > section > h2, body > main > section > h2 {
  color: var(--ink);
  font: 500 22px/1.25 var(--serif);
  letter-spacing: -.012em;
}

/* Give full drawings more space, but do not stretch the small grouping braces. */
@media (min-width: 1200px) {
  .spread:has(svg text, .integrated-slide svg) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 791px) and (max-width: 1199px) {
  .spread:has(svg text, .integrated-slide svg) { grid-template-columns: minmax(0, 1fr); }
  .spread:has(svg text, .integrated-slide svg) .slide-column { max-width: 900px; }
}
@media (max-width: 790px) {
  .slide-sheet.slide-sheet { padding: 24px 20px 64px !important; }
  .source-panel.source-panel, .p07-panel.p07-panel { padding: 24px 20px; }
  .slide-sheet :is(.slide-body, .slide-copy, .slide-part08-copy, .part09-copy, .p04-copy),
  .source-panel :is(p, li), .p07-panel :is(p, li) { font-size: 14px; }
}
@media (max-width: 560px) {
  .masthead h1 { font-size: 32px; }
  .narrative h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}
@media print {
  .integrated-slide .part08-diagram-scroll:focus { max-height: none; }
  .slide-sheet.slide-sheet, .source-panel.source-panel, .p07-panel.p07-panel {
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}