/* ---------------------------------------------------------------
   Extinction Bounties — a reading site.
   Serif body, generous measure, one accent, two themes.
   --------------------------------------------------------------- */

:root {
  --paper:      #fbf9f5;
  --paper-sunk: #f2eee6;
  --ink:        #23201c;
  --ink-soft:   #5c5750;
  --ink-faint:  #8b857c;
  --rule:       #ded8cc;
  --accent:     #8c2f24;
  --accent-soft:#b8544a;
  --flag:       #7a6a2f;
  --teal:       #1b645f;
  --term:       #4a5b8c;
  --teal-tint:  #edf4f3;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --rail: 15rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #16150f;
    --paper-sunk: #201e17;
    --ink:        #e6e0d4;
    --ink-soft:   #a9a293;
    --ink-faint:  #7b7466;
    --rule:       #35322a;
    --accent:     #d98b7a;
    --accent-soft:#e0a294;
    --flag:       #c4b477;
    --teal:       #74d9c6;
    --term:       #9fb0e0;
    --teal-tint:  #14201e;
  }
}

:root[data-theme="dark"] {
  --paper:      #16150f;
  --paper-sunk: #201e17;
  --ink:        #e6e0d4;
  --ink-soft:   #a9a293;
  --ink-faint:  #7b7466;
  --rule:       #35322a;
  --accent:     #d98b7a;
  --accent-soft:#e0a294;
  --flag:       #c4b477;
  --teal:       #74d9c6;
  --teal-tint:  #14201e;
  --term:       #9fb0e0;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  margin: 0;
  padding-inline: 1.25rem;
  text-rendering: optimizeLegibility;
}

/* ---- shell ---------------------------------------------------- */

.shell {
  max-width: calc(var(--measure) + var(--rail) + 4rem);
  margin: 0 auto;
}

.masthead {
  padding-block: 2.5rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.masthead__title {
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin: 0;
  font-weight: 600;
}

.masthead__title a { color: var(--ink); text-decoration: none; }

.masthead__tagline {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0.25rem 0 0;
  font-size: 1rem;
}

.masthead__byline {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.65rem 0 0;
}

.masthead__byline a { color: var(--ink-faint); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

/* ---- layout with rail ----------------------------------------- */

.frame { display: block; }

@media (min-width: 62rem) {
  .frame--railed {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    gap: 3rem;
    align-items: start;
  }
}

main { min-width: 0; }

article, .prose { max-width: var(--measure); }

/* ---- typography ------------------------------------------------ */

h1, h2, h3, h4 { line-height: 1.22; font-weight: 600; }

h1 { font-size: 2rem; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; margin: 2.4rem 0 0.6rem; }
h3 { font-size: 1.15rem; margin: 1.9rem 0 0.4rem; }

p, ul, ol, blockquote, table { margin-block: 0 1.15rem; }

a { color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-soft); }

blockquote {
  border-left: 2px solid var(--rule);
  margin-left: 0;
  padding-left: 1.15rem;
  color: var(--ink-soft);
  font-style: italic;
}

blockquote em, blockquote i { font-style: normal; }

code, pre { font-family: var(--mono); font-size: 0.86em; }

code {
  background: var(--paper-sunk);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

pre {
  background: var(--paper-sunk);
  padding: 1rem 1.15rem;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; padding: 0; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.45rem 0.7rem 0.45rem 0; border-bottom: 1px solid var(--rule); }
th { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 400; }

.table-wrap { overflow-x: auto; }

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

hr {
  overflow: visible;
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
  text-align: center;
}

hr::after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.85em;
  font-size: 1.1rem;
  padding: 0 0.5em;
  background: var(--paper);
  color: var(--ink-faint);
}

/* ---- page furniture -------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

.page-subtitle {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.page-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  margin: 0 0 2.2rem;
}

.status {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1em 0.45em;
  color: var(--flag);
  white-space: nowrap;
}

/* ---- disclaimer ------------------------------------------------- */

.disclaimer {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-sunk);
  padding: 0.85rem 1.1rem;
  margin: 2.5rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.disclaimer summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.disclaimer summary::marker { content: "▶ "; }
.disclaimer[open] summary::marker { content: "▼ "; }
.disclaimer[open] summary { margin-bottom: 0.8rem; }
.disclaimer h3 { font-size: 0.95rem; margin: 1.1rem 0 0.2rem; }
.disclaimer p { margin-bottom: 0.7rem; }

/* ---- sequence rail ---------------------------------------------- */

.rail {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.45;
  position: sticky;
  top: 1.5rem;
}

.rail__part {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.4rem 0 0.55rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}

.rail__part:first-child { margin-top: 0; }

.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { margin-bottom: 0.42rem; }
.rail a { color: var(--ink-soft); text-decoration: none; display: block; }
.rail a:hover { color: var(--accent); }
.rail li[aria-current="page"] > a { color: var(--accent); font-weight: 600; }
.rail__num { color: var(--ink-faint); margin-right: 0.4em; }

@media (max-width: 61.99rem) {
  .rail { position: static; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
}

/* ---- indexes ----------------------------------------------------- */

.toc-list { list-style: none; margin: 0; padding: 0; }

.toc-list > li {
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

.toc-list h2, .toc-list h3 { font-size: 1.08rem; margin: 0 0 0.25rem; }
.toc-list a { text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }
.toc-list p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

.toc-list__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: 0.35rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
}

.part-heading {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2.6rem 0 0.4rem;
}

.part-heading:first-child { margin-top: 1.5rem; }

/* ---- front page --------------------------------------------------- */

.claim {
  font-size: 1.35rem;
  line-height: 1.42;
  margin: 0 0 2rem;
  max-width: var(--measure);
}

.claim em { color: var(--accent); font-style: normal; }

/* ---- prev / next --------------------------------------------------- */

.seqnav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  max-width: var(--measure);
}

.seqnav a { text-decoration: none; display: block; }
.seqnav a:hover { text-decoration: underline; }
.seqnav__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.15rem;
}
.seqnav__next { text-align: right; margin-left: auto; }

/* ---- citation ------------------------------------------------------ */

.citation {
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: var(--measure);
}

.citation code { background: none; padding: 0; color: var(--ink-soft); }

/* ---- footer --------------------------------------------------------- */

.colophon {
  margin-top: 4rem;
  padding-block: 1.5rem 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

.colophon a { color: var(--ink-soft); }

/* ---- print ----------------------------------------------------------- */

@media print {
  .nav, .rail, .seqnav, .disclaimer, .colophon { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
}

/* ---- footnotes ------------------------------------------------------- */

.footnotes {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.footnotes ol { padding-left: 1.2rem; }
.footnotes li { margin-bottom: 0.4rem; }
.footnotes li::marker { color: var(--ink-faint); font-family: var(--mono); font-size: 0.8em; }
.footnotes p { margin-bottom: 0.3rem; }

sup[id^="fnref"] a {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.7em;
  padding: 0 0.1em;
}

.footnote-backref { text-decoration: none; font-size: 0.85em; }

/* ---- inline asides (collapsed by default) ----------------------------- */

details.aside {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-sunk);
  padding: 0.75rem 1.1rem;
  margin: 1.6rem 0;
  max-width: var(--measure);
}

details.aside summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

details.aside summary::marker { content: "▶ "; }
details.aside[open] summary::marker { content: "▼ "; }
details.aside[open] summary { margin-bottom: 0.9rem; }
details.aside p { font-size: 0.95rem; }
details.aside p:last-child { margin-bottom: 0; }
details.aside table { margin-bottom: 0.9rem; }
details.aside td, details.aside th { padding-block: 0.35rem; }

/* personal asides: the author's own stories, foldable and skippable.
   Teal so they read as a different voice from the argument around them. */
details.aside.personal {
  background: var(--teal-tint);
  border-color: color-mix(in srgb, var(--teal) 35%, var(--rule));
  border-left: 3px solid var(--teal);
}

details.aside.personal summary { color: var(--teal); }
details.aside.personal a { color: var(--teal); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  details.aside.personal { border-color: var(--rule); border-left-color: var(--teal); }
}

/* Themed asides. Same shape as .personal: a tinted ground, a coloured left
   rule, and a summary in the accent colour so the type is legible while the
   block is still folded. Every token below is defined in both palettes, so
   dark mode needs no rules of its own.

   math     — derivations and tables. The prose above them must carry the
              argument on its own; these are for checking, not for following.
   evidence — studies, figures, case law, case studies.
   source   — extended quotation, where what a cited author actually wrote
              matters more than my summary of it.

   Objections and concessions never go in one of these. Folding away the
   counter-case would be the one genuinely dishonest use of this system. */

details.aside.math {
  background: color-mix(in srgb, var(--term) 7%, var(--paper-sunk));
  border-color: color-mix(in srgb, var(--term) 35%, var(--rule));
  border-left: 3px solid var(--term);
}
details.aside.math summary { color: var(--term); }
details.aside.math a { color: var(--term); }

details.aside.evidence {
  background: color-mix(in srgb, var(--flag) 8%, var(--paper-sunk));
  border-color: color-mix(in srgb, var(--flag) 35%, var(--rule));
  border-left: 3px solid var(--flag);
}
details.aside.evidence summary { color: var(--flag); }
details.aside.evidence a { color: var(--flag); }

details.aside.source {
  background: var(--paper-sunk);
  border-color: var(--rule);
  border-left: 3px solid var(--ink-faint);
}
details.aside.source summary { color: var(--ink-faint); }
details.aside.source blockquote { margin-left: 0; margin-right: 0; }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  details.aside.math { border-color: var(--rule); border-left-color: var(--term); }
  details.aside.evidence { border-color: var(--rule); border-left-color: var(--flag); }
}

/* Tables inside a math aside are the point of it, so let them breathe and
   scroll rather than crushing them into the aside's narrower measure. */
details.aside.math table { font-size: 0.92rem; width: 100%; }
details.aside .table-wrap { overflow-x: auto; }

/* ---- objections: branching hypertext -------------------------------- */

/* the objection itself, quoted in the sceptic's voice above the answer */
blockquote.objection__q {
  border-left: 3px solid var(--accent);
  margin: 0 0 1.1rem;
  padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--ink);
  font-style: normal;
  max-width: var(--measure);
}

article.objection h1 {
  font-size: 1.35rem;
  color: var(--ink-soft);
  font-weight: 400;
  font-style: italic;
  margin-top: 0;
}

.branches {
  max-width: var(--measure);
  margin: 2.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.branches h2 {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

.branches ul { list-style: none; padding: 0; margin: 0; }

.branches li {
  margin: 0 0 0.55rem;
  padding-left: 1.15rem;
  position: relative;
  line-height: 1.45;
}

.branches li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

.branches a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.branches--back li::before { content: "←"; }
.branches--back a { color: var(--ink-soft); }

.branches__status {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.branches--entry li { margin-bottom: 0.8rem; }
.branches--entry a { font-size: 1.02rem; }

.toc-list--flat { list-style: none; padding: 0; }
.toc-list--flat li { margin: 0 0 0.4rem; font-size: 0.95rem; }

@media print {
  .branches { break-inside: avoid; }
  /* paper has no disclosure triangle: show the contents, drop the affordance */
  details.aside { break-inside: avoid; background: none; border-left-width: 2px; }
  details.aside > *:not(summary) { display: revert !important; }
  details.aside summary { list-style: none; }
  details.aside summary::marker { content: ""; }
}

/* ---- glossary terms -------------------------------------------------- */

/* Marked differently from ordinary links: a dotted rule is the conventional
   signal for "definition available", and the colour keeps it from reading as
   a citation. Clicking still navigates to the glossary entry. */
a[data-pop="term"] {
  color: var(--term);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a[data-pop="term"]:hover,
a[data-pop="term"]:focus-visible {
  text-decoration-style: solid;
}

/* the marker glyph popups.js adds is redundant here: the dotted rule is
   already the affordance */
.pop-on a[data-pop="term"]::after { content: none; }

.popup--term .popup__title { color: var(--term); }

dl.glossary { max-width: var(--measure); margin: 2rem 0 0; }

dl.glossary dt {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1.6rem 0 0.3rem;
  scroll-margin-top: 2rem;
}

dl.glossary dt:target {
  background: var(--paper-sunk);
  box-shadow: -0.5rem 0 0 var(--paper-sunk), 0.5rem 0 0 var(--paper-sunk);
}

dl.glossary dd { margin: 0 0 0 1rem; }
dl.glossary dd p { margin: 0 0 0.45rem; }
dl.glossary .glossary__short { color: var(--ink); }
dl.glossary dd p + p { color: var(--ink-soft); font-size: 0.95rem; }

.stars { color: var(--accent); letter-spacing: 0.08em; white-space: nowrap; }
.stars .off { color: var(--ink-faint); opacity: 0.45; }

/* ---- math (MathML, rendered at build time) ---------------------------- */

math { font-size: 1.02em; }

/* display math gets room to breathe, and its own scroll if it must */
math[display="block"] {
  display: block;
  margin: 1.5rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  max-width: 100%;
}

/* ---- link preview cards ------------------------------------------------ */

/* The marker only appears when popups.js has run, so we never advertise an
   affordance that is not there. */
.pop-on a[data-pop]::after,
.pop-on a.footnote-ref::after {
  content: "°";
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  color: var(--ink-faint);
  margin-left: 0.12em;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

/* on touch the marker is a real button, injected by JS, so suppress the glyph */
.pop-coarse a[data-pop]::after,
.pop-coarse a.footnote-ref::after { content: none; }

.pop-marker {
  font: inherit;
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0.4em 0.5em;
  margin: -0.4em -0.2em -0.4em 0;
  cursor: pointer;
}

.popup {
  position: absolute;
  z-index: 50;
  max-width: 24rem;
  width: max-content;
  box-sizing: border-box;
  background: var(--paper-sunk);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.85rem 1rem 0.9rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  font-size: 0.95rem;
  line-height: 1.5;
  animation: popup-in 90ms ease-out;
}

@media (max-width: 30rem) {
  .popup { max-width: calc(100vw - 2rem); }
}

@keyframes popup-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .popup { animation: none; }
}

.popup__tools {
  float: right;
  display: flex;
  gap: 0.3rem;
  margin: -0.2rem -0.3rem 0 0.6rem;
}

.popup__btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0.15em 0.35em;
  cursor: pointer;
  line-height: 1.4;
}

.popup__btn:hover,
.popup__btn:focus-visible {
  color: var(--accent);
  border-color: var(--rule);
}

/* the transient card offers pinning; a pinned one only offers closing */
.popup:not(.popup--pinned) .popup__close { display: none; }

.popup--pinned {
  border-color: var(--ink-faint);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}

.popup__title {
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.15rem;
  line-height: 1.3;
}

.popup__sub {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.45rem;
  font-size: 0.92em;
}

.popup__body { margin: 0; }
.popup__body p { margin: 0 0 0.5rem; }
.popup__body p:last-child { margin-bottom: 0; }

.popup__meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0.6rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--rule);
}

@media print {
  .popup, .pop-marker { display: none !important; }
  .pop-on a[data-pop]::after,
  .pop-on a.footnote-ref::after { content: none; }
}