/* Chance and Selection: identity. A natural-history plate on a forest-green cloth: Source Serif 4 for text and titles,
   Source Sans 3 for figure labels. Two allele colours used everywhere: A = vermilion, a = blue (Okabe–Ito). */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/source-serif-4-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #fdfdfb; --surface: #f4f4ef; --ink: #1b1d1a; --ink-soft: #383b36; --muted: #5f635b; --rule: #d9d9d0;
  --accent: #1f5a3a; --accent-ink: #fff; --link: #1d6340; --focus: #1d6340; --mark: rgba(31, 90, 58, .1);
  --font-serif: "Source Serif 4", Charter, Georgia, serif; --font-display: "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --font-body: var(--font-serif); --font-ui: var(--font-sans);
  --fs-body: 1.19rem; --lh-body: 1.6; --prose: 41rem; --wide: 66rem; --radius: 2px;
  --fig-bg: #fdfdfb; --fig-surface: #f1f1ea; --fig-ink: #1b1d1a; --fig-muted: #5f635b; --fig-grid: rgba(27, 29, 26, .08);
  --fig-grid-strong: rgba(27, 29, 26, .34); --fig-border: transparent;
  /* semantic roles: primary = allele A (the variant being followed), second = allele a, ref = theory */
  --c-primary: #b65200; --c-second: #0068a6; --c-ref: #1b1d1a; --c-third: #b0578f; --c-ok: #00805c; --c-warn: #9a6f00;
  --allele-A: #d55e00; --allele-a: #0072b2; --allele-A-line: #b04a00; --allele-a-line: #0064a0;
  --specimen-line: #2a2a26; --ctl-accent: #1f5a3a;
  /* the forest-green field */
  --band-bg: #163a28; --band-ink: #f5f2e8; --band-muted: rgba(245, 242, 232, .78); --band-rule: rgba(245, 242, 232, .22);
  --band-A: #f2914a; --band-a: #73bfee;
  --font-h1: "Source Serif 4", Georgia, serif;
}
:root[data-theme="dark"] {
  --bg: #121512; --surface: #1b1f1b; --ink: #e9e8e1; --ink-soft: #cfcdc4; --muted: #a2a59b; --rule: #30352f;
  --accent: #7fc79c; --link: #8ed1a8; --focus: #8ed1a8; --mark: rgba(127, 199, 156, .14);
  --fig-bg: #121512; --fig-surface: #1d211d; --fig-ink: #e9e8e1; --fig-muted: #a2a59b; --fig-grid: rgba(233, 232, 225, .1);
  --fig-grid-strong: rgba(233, 232, 225, .38);
  --c-primary: #f08a40; --c-second: #5fb0e6; --c-ref: #e9e8e1; --c-third: #e08cc0; --c-ok: #3fc79a; --c-warn: #e0b23c;
  --allele-A: #e8742a; --allele-a: #3f9fdc; --allele-A-line: #f08a40; --allele-a-line: #5fb0e6;
  --specimen-line: #e9e8e1; --ctl-accent: #6dbb8e;
  --band-bg: #0f2a1d;
}

body { font-feature-settings: "kern", "liga"; }
.num, .w-readout dd, output { font-variant-numeric: tabular-nums lining-nums; }

/* ---- header continues the green field ---- */
.site-header { background: var(--band-bg); border-bottom: 0; padding-top: .7rem; padding-bottom: .7rem; }
.wordmark { color: var(--band-ink); font: 700 1.2rem/1 var(--font-display); }
.wordmark em { font-weight: 400; }
.site-nav a { color: var(--band-muted); font-size: .98rem; }
.site-nav a[aria-current="page"], .site-nav a:hover { color: var(--band-ink); }
.nav-toggle, .theme-toggle { color: var(--band-ink); border-color: var(--band-rule); font-family: var(--font-sans); }
@media (max-width: 1100px) {
  .nav-toggle { display: inline-block; }
  .site-nav ul { display: none; position: absolute; right: var(--gutter); top: 3.4rem; flex-direction: column; gap: 0;
    background: var(--bg); border: 1px solid var(--rule); min-width: 15rem; }
  .site-nav ul.open { display: flex; }
  .site-nav li a { display: block; padding: .75rem 1rem; color: var(--ink); }
  .site-nav li a[aria-current="page"] { color: var(--accent); }
}

/* ---- title band ---- */
.essay-head-wrap.band, .home-hero-wrap.band { margin-bottom: 2.2rem; padding-bottom: 2rem; }
h1 { font-weight: 700; letter-spacing: -0.012em; line-height: 1.04; }
.essay-head h1 { font-size: clamp(2.5rem, 7.2vw, 4.6rem); margin: .25em 0 .3em; }
.essay-head { padding-top: 2.4rem; }
.band .dek { font-size: clamp(1.15rem, 2.6vw, 1.45rem); color: var(--band-ink); opacity: .92; max-width: 40rem; }
.kicker { font: 600 .95rem/1.3 var(--font-sans); }
.kicker span { font-variant: small-caps; letter-spacing: .06em; text-transform: lowercase; font-size: 1.08em; }
.band .kicker span { color: var(--band-muted); }

/* ---- type ---- */
h2 { font-size: clamp(1.6rem, 3.4vw, 2.05rem); font-weight: 700; letter-spacing: -0.006em; margin-top: 2.4em; }
h3 { font-size: 1.28rem; font-weight: 600; }
.prose .lede { font-size: 1.2em; line-height: 1.55; }
@media (max-width: 520px) { .prose .lede { font-size: 1.08em; } .eq { font-size: 1.12rem; padding-right: 2.4rem; } }
.prose .lede::first-line { font-variant: normal; }
.eq { display: block; text-align: center; font-size: 1.28rem; line-height: 1.9; padding: .4rem 2.8rem .4rem 0; }
.eq .eq-label { top: 50%; transform: translateY(-50%); }
.eq .frac { vertical-align: middle; margin: 0 .1em; }
.eq sub, .eq sup { font-size: .72em; }
.eq .op { padding: 0 .15em; }
var { font-style: italic; }
sub, sup { line-height: 0; }
.fig-n { font-variant: small-caps; text-transform: lowercase; letter-spacing: .05em; font-weight: 600; font-size: 1.05em; }
.figure figcaption { font-size: .98rem; line-height: 1.5; color: var(--ink-soft); }
.callout-history { border-left-color: var(--accent); }
.simplification { border-left-color: var(--c-third); }
.prose table { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.prose td.n, .prose th.n { text-align: right; }
.allele-A { color: var(--allele-A-line); font-weight: 600; }
.allele-a { color: var(--allele-a-line); font-weight: 600; }

/* ---- section openers: the green field returns between parts of an argument ---- */
.section-band { padding-top: 2.2rem; padding-bottom: 2.2rem; }
.section-band h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); }
.section-band p { font-size: 1.12em; opacity: .94; max-width: 40rem; }
.section-band a { color: var(--band-ink); }

/* ---- home: full-width specimen plate ---- */
.page-home .home-hero { max-width: 78rem; }
.page-home .home-hero.has-hero { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding-top: 1.6rem; }
.page-home .home-hero h1 { font-size: clamp(2.7rem, 8.6vw, 5.6rem); max-width: 14ch; margin: 0 0 .25em; }
.page-home .home-hero .dek { max-width: 44rem; }
.page-home .home-hero-text { max-width: 60rem; }
.page-home .start { margin: .3rem 0 0; }
.band .btn-start { color: var(--band-ink); font-size: 1.08rem; }
.home-cards li::marker { font: 700 1.35rem var(--font-display); color: var(--accent); }
.card-t { font-size: 1.38rem; }
.card-q { font-size: 1.02rem; }

/* figures inside the green band read light on dark */
.band .widget-mount {
  --fig-bg: var(--band-bg); --fig-ink: var(--band-ink); --fig-muted: var(--band-muted); --fig-grid: rgba(245, 242, 232, .12);
  --fig-grid-strong: rgba(245, 242, 232, .42); --fig-surface: #1f4a34; --ctl-bg: #1f4a34; --ctl-ink: var(--band-ink);
  --ctl-accent: var(--band-A); --c-primary: var(--band-A); --c-second: var(--band-a); --c-ref: var(--band-ink);
  --specimen-line: #f5f2e8; --allele-A: var(--band-A); --allele-a: var(--band-a); --allele-A-line: var(--band-A); --allele-a-line: var(--band-a);
  background: var(--band-bg); color: var(--band-ink);
}
.band .w-seg button[aria-pressed="true"], .band .w-btn.primary { color: #1b1d1a; }
.band .w-btn, .band .w-toolbar .w-btn { background: transparent; color: var(--band-ink); border-color: rgba(245, 242, 232, .45); }
.band .w-note, .band .w-note strong { color: var(--band-ink); }

/* ---- figure furniture ---- */
.w-sentence { font: 400 1rem/1.5 var(--font-sans); color: var(--fig-ink); margin: 0; min-height: 3em; }
.w-sentence b { font-weight: 600; font-variant-numeric: tabular-nums; }
.w-sentence .A { color: var(--allele-A-line); font-weight: 600; }
.w-sentence .a { color: var(--allele-a-line); font-weight: 600; }
.w-key { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font: 400 .92rem var(--font-sans); color: var(--fig-muted); margin: 0; }
.w-key span::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .35em; vertical-align: -.05em; border-radius: 1px; background: var(--k); }
.w-table { width: 100%; border-collapse: collapse; font: 400 .95rem var(--font-sans); font-variant-numeric: tabular-nums; }
.w-table th, .w-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--fig-grid-strong); text-align: right; }
.w-table th:first-child, .w-table td:first-child { text-align: left; }
.w-table th { font-weight: 600; color: var(--fig-ink); }
.w-table tfoot td { font-weight: 600; border-bottom: 0; }
.w-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.w-counts label { display: flex; flex-direction: column; gap: .2rem; font: 400 .92rem var(--font-sans); color: var(--fig-ink); }
.w-counts input[type=number] { width: 100%; font-size: 1.05rem; }
.w-verdict { font: 400 1.02rem/1.5 var(--font-serif); color: var(--fig-ink); margin: 0; }
.w-stage.grab { cursor: grab; }

@media (max-width: 520px) {
  :root { --fs-body: 1.13rem; }
  .w-ctl { flex-basis: 100%; }
  .w input[type=number] { width: 4.6rem; }
}

@media (min-width: 980px) {
  .page-home .home-hero-text { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 3rem; align-items: end; }
  .page-home .home-hero h1 { grid-row: 1 / span 2; margin: 0; }
  .page-home .home-hero .dek { margin: 0 0 .6rem; font-size: 1.3rem; }
  .page-home .start { grid-column: 2; }
}

.band .w-btn.primary { background: var(--band-A); color: #14130f; border-color: var(--band-A); }
.figure figcaption a, .fig-link { text-decoration: underline; text-decoration-thickness: 1px; }
.prose a { text-decoration: underline; }

/* Share and Reset sit above each figure (runtime default); the toast drops in from the top of the stage */
.w-toast { bottom: auto; top: .4rem; }
/* a toolbar anchored to a control row instead of a stage (hw-calculator) */
.w-topbar { position: relative; margin-top: 2.4rem; }
@media (pointer: coarse) { .w-topbar { margin-top: 3rem; } }

/* Touch: 44 px targets for every control on coarse pointers; the range track stays thin, its hit area does not */
@media (pointer: coarse) {
  input[type=range] { height: 44px; }
  .w input[type=number], .w select, .w-check { min-height: 44px; }
  .w-check input { width: 22px; height: 22px; }
}
.w-sentence b, .w-verdict b { white-space: nowrap; }

/* ---- chapter heroes: the specimen plate is a paper inset pasted on the green cloth ---- */
.plate-paper {
  --fig-bg: #f6f3ea; --fig-ink: #1b1d1a; --fig-muted: #55594f; --fig-grid: rgba(27, 29, 26, .08);
  --fig-grid-strong: rgba(27, 29, 26, .3); --specimen-line: #2a2a26;
  --allele-A: #d55e00; --allele-a: #0072b2; --allele-A-line: #b04a00; --allele-a-line: #0064a0;
}
:root[data-theme="dark"] .plate-paper { --fig-bg: #dcd7c8; --fig-muted: #4b4f46; }
.plate-paper { margin-top: 0; }
.plate-deck { gap: .4rem 1.2rem; }
.essay-hero .w-sentence, .home-hero-fig .w-sentence { min-height: 0; }
.essay-head.has-hero { gap: .6rem; }
.essay-hero figcaption { margin-top: .4rem; }
@media (min-width: 980px) {
  .essay-head.has-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 3rem; align-items: start; }
  .essay-head.has-hero .essay-head-text { padding-top: 1rem; }
}
@media (max-width: 560px) {
  .essay-head { padding-top: 1.1rem; }
  .essay-head h1 { margin: .15em 0 .2em; }
  .band .dek { margin: 0 0 .4rem; }
  .meta-line { margin: 0; }
  .essay-head-wrap.band, .home-hero-wrap.band { padding-bottom: 1.2rem; }
}
.figure.essay-hero, .figure.home-hero-fig { margin: 0; }
.essay-hero .w, .home-hero-fig .w { padding-top: 0; gap: .5rem; }
/* practice problems */
.practice-q { font-size: 1.08rem; }
.practice-answer { max-width: 22rem; }
.practice-answer input[type=number] { width: 100%; font-size: 1.05rem; }
.practice-steps { font: 400 1rem/1.5 var(--font-serif); color: var(--fig-ink); margin: 0; padding-left: 1.4rem; }
.practice-steps li { margin: .25rem 0; }
.guide-list { padding-left: 1.2rem; }
/* the answer box is a .w-ctl inside the shell's column flex; base.css's 'flex: 1 1 13rem' would make it 13 rem tall */
.practice-answer { flex: none; }

/* ---- equation anchors (journey D): every labelled equation has an id and a link to itself ---- */
.eq-wrap { position: relative; scroll-margin-top: 1.5rem; }
.eq-link { position: absolute; left: -.2rem; top: 50%; transform: translateY(-50%); min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font: 400 .9rem var(--font-sans); color: var(--muted); text-decoration: none; opacity: .55; }
.eq-link:hover, .eq-link:focus-visible, .eq-wrap:target .eq-link { opacity: 1; color: var(--accent); }
.eq-wrap:target .eq { background: var(--fig-grid, rgba(0,0,0,.04)); }
.eq-wrap .eq { padding-left: 1.6rem; }

/* ---- "On this page" for phones and tablets (the margin TOC appears only from 1320 px) ---- */
.toc-phone { max-width: var(--prose); margin: 1.2rem auto 0; padding: 0 var(--gutter); font-family: var(--font-sans); }
.toc-phone summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 1rem var(--font-sans); color: var(--ink); border-bottom: 1px solid var(--rule, #ccc); list-style-position: inside; }
.toc-phone ol { margin: .4rem 0 0; padding-left: 1.4rem; font-size: 1rem; line-height: 1.35; }
.toc-phone li { margin: 0; }
.toc-phone a { display: block; padding: .55rem 0; min-height: 44px; box-sizing: border-box; }
@media (min-width: 1320px) { .toc-phone { display: none; } }

/* ---- first-screen jump links under the dek (e.g. "Calculator ↓") ---- */
.jumps { display: flex; flex-wrap: wrap; gap: 0 1.3rem; margin: .1rem 0 .4rem; font: 600 1.02rem var(--font-sans); }
.jumps a { display: inline-flex; align-items: center; min-height: 44px; }
.band .jumps a { color: var(--band-ink); }

/* ---- lab link under chapter figures ---- */
.lab-link { display: inline-block; margin-top: .35rem; font: 600 .98rem var(--font-sans); padding: .5rem 0; min-height: 44px; box-sizing: border-box; }
.band .lab-link { color: var(--band-ink); }

/* ---- population lab tool ---- */
.lab-top .w-ctl { flex: 1 1 16rem; }
.lab-deck .w-ctl { flex: 1 1 15rem; }
.lab-seed input[type=number] { width: 6.5rem; margin-left: .4rem; }
.lab-bn { flex: 1 1 100%; }
.lab-bn-ctl { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .4rem; }
.lab-bn-ctl .w-ctl { flex: 1 1 13rem; }
.lab-presets li { margin: .35rem 0; }

/* ---- Hardy–Weinberg calculator (solver mode) ---- */
.hw-solve { display: flex; flex-direction: column; gap: .7rem; }
.hw-val input, .hw-n input { width: 100%; font-size: 1.1rem; }
.hw-val label, .hw-n label { display: flex; flex-direction: column; gap: .2rem; }
.hw-val, .hw-n { flex: 1 1 12rem; }
.hw-res { display: flex; flex-direction: column; gap: .5rem; }
.hw-err { font: 600 1rem var(--font-sans); color: var(--c-warn, #a33); margin: 0; }
.hw-work-h { font: 600 .95rem var(--font-sans); margin: .2rem 0 0; color: var(--fig-ink); }
.hw-work { margin: 0; padding-left: 1.4rem; font: 400 .98rem/1.55 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--fig-ink); }
.hw-copied { font: 400 .92rem var(--font-sans); color: var(--muted); margin-left: .6rem; }
.hw-test-h { font: 600 1.15rem var(--font-sans); margin: 1.6rem 0 .2rem; color: var(--fig-ink); }
.hw-test { display: flex; flex-direction: column; gap: .7rem; }
.lab-top.w-topbar { margin-top: .4rem; }