/* Acids, Bases and pH: the chemistry-laboratory plate.
   Identity: Besley (a Clarendon revival, the face of the reagent-bottle label) for titles; Source Serif 4 for reading;
   Source Sans 3 for figure labels and controls. One field colour: the fuchsia of phenolphthalein at its end point.
   Indicator colours appear only where a solution is drawn; data colours are Okabe–Ito with fixed meanings:
   H3O+ vermillion, OH− blue, undissociated acid HA orange, conjugate base A− bluish green, exact/instrument black. */
:root {
  --bg: #fff; --surface: #f6f5f3; --ink: #161616; --ink-soft: #383838; --muted: #5f5f5f; --rule: #e1dedb;
  --accent: #a8205f; --accent-ink: #fff; --link: #9a1a57; --focus: #9a1a57; --mark: rgba(168,32,95,.09);
  --font-display: "Besley", "Clarendon", Georgia, serif;
  --font-serif: "Source Serif 4", Charter, Georgia, serif;
  --font-sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: var(--font-serif); --font-ui: var(--font-sans); --font-h1: var(--font-display);
  --fs-body: 1.1875rem; --lh-body: 1.6; --prose: 41rem; --wide: 66rem; --radius: 2px;
  --fig-bg: #fff; --fig-surface: #f6f5f3; --fig-ink: #161616; --fig-muted: #606060; --fig-grid: rgba(0,0,0,.075);
  --fig-grid-strong: rgba(0,0,0,.42); --fig-border: transparent;
  --c-primary: #c8470c;  /* H3O+, acidity, the pH curve */
  --c-ref: #161616;      /* exact solution, instrument, reference */
  --c-second: #0068a8;   /* OH−, base */
  --c-third: #008f68;    /* conjugate base A− */
  --c-ha: #d98e00;       /* undissociated acid HA */
  --c-ok: #008f68; --c-warn: #a86d00;
  --ctl-accent: #a8205f;
  --band-bg: #a8205f; --band-ink: #fff; --band-muted: rgba(255,255,255,.86);
  --glass: #2b2b2b;
}
:root[data-theme="dark"] {
  --bg: #141414; --surface: #1d1d1d; --ink: #ecebe8; --ink-soft: #cfcdc8; --muted: #a3a09a; --rule: #333;
  --link: #f08cbb; --focus: #f08cbb; --accent: #b8306f; --band-bg: #7d1747;
  --fig-bg: #141414; --fig-surface: #1f1f1f; --fig-ink: #ecebe8; --fig-muted: #a7a49e; --fig-grid: rgba(255,255,255,.09);
  --fig-grid-strong: rgba(255,255,255,.45);
  --c-primary: #f07a3c; --c-ref: #f2f2f2; --c-second: #4aa8e8; --c-third: #3cc39a; --c-ha: #f0b030; --c-ok: #3cc39a; --c-warn: #e0a640;
  --ctl-accent: #e05a98; --glass: #d8d8d8;
}

/* Header: plain, the wordmark in the label face */
.site-header { border-bottom: 1px solid var(--rule); }
.wordmark { font: 800 1.12rem/1 var(--font-display); letter-spacing: -.005em; }
.wm-amp { font-weight: 700; color: var(--accent); }
.site-nav a { font-size: .95rem; }

/* Headings: Clarendon weight and scale contrast */
h1 { font-weight: 800; letter-spacing: -.012em; line-height: 1.02; }
h2 { font: 700 clamp(1.5rem, 3.4vw, 1.95rem)/1.18 var(--font-display); letter-spacing: -.004em; }
h3 { font: 700 1.22rem/1.25 var(--font-display); }
.prose p, .prose li { hyphens: manual; }
.prose .lede { font-size: 1.22em; line-height: 1.5; }
sub, sup { line-height: 0; }

/* Title band: the phenolphthalein field */
.essay-head-wrap.band { padding: 0; margin-bottom: 2rem; }
.essay-head-wrap.band .essay-head { padding: 2.6rem var(--gutter) 2.2rem; }
.essay-head h1 { font-size: clamp(2.5rem, 7.2vw, 4.6rem); margin: .1em 0 .25em; }
.band .kicker { font: 600 1rem/1.3 var(--font-ui); }
.band .dek { font-size: clamp(1.15rem, 2.6vw, 1.45rem); max-width: 36rem; }
.band .meta-line { font-size: .95rem; }

/* Home: band holds the title; the plate (hero figure) sits on white beneath it */
.home-band { background: var(--band-bg); color: var(--band-ink); }
.home-band-inner { max-width: var(--wide); margin: 0 auto; padding: 1.4rem var(--gutter) 1.35rem; }
.home-band h1 { color: var(--band-ink); font-size: clamp(2.45rem, 8.4vw, 5.4rem); margin: 0 0 .18em; }
.home-band .dek { color: var(--band-ink); margin: 0; max-width: 40rem; font-size: clamp(1.08rem, 2.4vw, 1.4rem); line-height: 1.4; }
.home-band .start { margin: .7rem 0 0; }
.home-band .btn-start { color: var(--band-ink); font: 600 1.05rem var(--font-ui); }
.home-plate { max-width: var(--wide); margin: 0 auto; padding: .4rem var(--gutter) 0; }
.home-plate .figure { margin: .6rem 0 0; }
.home-plate figcaption { max-width: 46rem; }
@media (min-width: 980px) { .home-band-inner { padding: 2.6rem var(--gutter) 2.2rem; } }

/* Figures: plate captions */
.fig-n { font: 600 .82rem var(--font-ui); font-variant: all-small-caps; letter-spacing: .04em; color: var(--accent); }
.fig-n::after { content: ""; }
.figure figcaption { font-size: .98rem; }
.w-note { font-size: 1rem; color: var(--ink-soft); }
.w-note b, .w-note strong { color: var(--fig-ink); font-weight: 600; }
.w-note .hplus { color: var(--c-primary); font-weight: 600; }
.w-note .ohminus { color: var(--c-second); font-weight: 600; }
.w-readout { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.w-readout dd { font-size: 1.12rem; }
.w-eq { font-size: 1.12rem; }
.w-eq .b { font-weight: 600; }
.w-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font: 400 .92rem var(--font-ui); color: var(--fig-muted); }
.w-legend i { display: inline-block; width: 1.4em; height: 3px; vertical-align: middle; margin-right: .35em; }
.w-legend i.dot { width: .62em; height: .62em; border-radius: 50%; }
.w-legend i.dash { background: none !important; border-top: 2px dashed currentColor; height: 0; }

/* Data tables in the prose */
.prose table { font-family: var(--font-ui); font-size: .95rem; }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.eq { font-size: 1.22rem; }
.eq .op { padding: 0 .15em; }
.chem { white-space: nowrap; }
.callout-history { border-left-color: var(--accent); }
.simplification { border-left-color: var(--c-ha); }

/* Section opener band */
.section-band { padding-top: 2rem; padding-bottom: 2rem; }
.section-band h2 { font-weight: 800; }

/* Home: contents list */
.home-body { padding-top: .5rem; }
.home-cards .card-t { font-weight: 800; }
.home-cards li::marker { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
@media (min-width: 760px) { .w-split.bench { grid-template-columns: 2fr 3fr; } }
.band .kicker span { color: var(--band-muted); }
.fig-link, .cite a { text-decoration: underline; text-decoration-thickness: 1px; }
.w-eq { overflow-x: visible; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.6rem; align-items: center; }
  .hero-side .w-deck { flex-direction: column; align-items: stretch; }
  .hero-side .w-btns { margin-bottom: .4rem; }
}
.hero-side { display: flex; flex-direction: column; gap: .7rem; }
.home-band-inner { padding-top: 1.2rem; }
@media (min-width: 980px) { .home-band-inner { padding: 1.9rem var(--gutter) 1.7rem; } .home-band h1 { font-size: clamp(3rem, 6vw, 4.8rem); } }
:root { --t-ha: #855400; --t-third: #00694a; --t-second: #005a92; --t-warn: #855400; }
:root[data-theme="dark"] { --t-ha: #f0b030; --t-third: #3cc39a; --t-second: #4aa8e8; --t-warn: #e0a640; }
.w-note .hplus { color: #a83a08; }
:root[data-theme="dark"] .w-note .hplus { color: #f07a3c; }
/* Share/Reset sit in a quiet row above each drawing instead of on top of it */
.w-predict { padding-top: .5rem; }
.w-stage { overflow: visible; }
.w-stage canvas { border-radius: 0; }
.w-split.bench { row-gap: 2.8rem; }
.prose td.num { white-space: nowrap; }
.eq { display: block; text-align: center; padding: .5rem 2.8rem; line-height: 2; }
.eq-label { top: 50%; transform: translateY(-50%); }
.eq .frac { margin: 0 .15em; }
@media (max-width: 560px) { .eq { font-size: 1.05rem; padding: .4rem 2.2rem .4rem 0; text-align: left; } }
/* Chapter hero plate: on white, straight under the band */
.essay-head-wrap.band:has(+ .essay-plate) { margin-bottom: 0; }
.essay-plate { max-width: var(--wide); margin: 0 auto 2rem; padding: .2rem var(--gutter) 0; }
.essay-plate .figure { margin: 0; }
.essay-plate figcaption { max-width: 46rem; }
@media (max-width: 559px) { .essay-head-wrap.band .essay-head { padding: 1.3rem var(--gutter) 1.1rem; } .band .dek { margin-bottom: .3rem; } }
/* Titration bench controls: a clean two-column grid (buttons; the two selects; the two sliders; the checkbox) */
.w-deck.bench-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; align-items: end; }
.bench-deck > .w-btns, .bench-deck > .w-check { grid-column: 1 / -1; }
.bench-deck > .w-ctl { flex: none; }
.bench-deck select { width: 100%; }
.bench-deck .w-ctl label { white-space: nowrap; }
@media (max-width: 559px) { .w-deck.bench-deck { grid-template-columns: minmax(0, 1fr); } }
/* pH calculator: labels stay on one line beside their sliders */
@media (min-width: 760px) { .calc-deck > .w-ctl:not(.narrow) { flex: 1 1 22rem; } .calc-deck .w-ctl label { white-space: nowrap; } }
/* Calculators: validity strip under a concentration control, inline input messages, warnings */
.validity { margin-top: .25rem; font: 400 .82rem var(--font-ui); color: var(--fig-muted); }
.validity-strip { position: relative; height: 6px; background: var(--grid, #e6e6e2); }
.validity-strip span { position: absolute; top: 0; bottom: 0; }
.vs-ideal { background: color-mix(in srgb, var(--c-third) 35%, transparent); }
.vs-over { background: color-mix(in srgb, var(--c-warn) 75%, transparent); }
.vs-label { margin-top: .15rem; color: var(--t-warn); }
.w-msg { font: 600 .9rem var(--font-ui); color: var(--t-warn); min-height: 0; }
.w-msg:empty { display: none; }
input[aria-invalid="true"] { outline: 2px solid var(--c-warn); }
.w-warn { display: block; margin-top: .45rem; padding-left: .7rem; border-left: 3px solid var(--c-warn); color: var(--fig-ink); }
.w-warn b { color: var(--t-warn); }
.w-unit { font: 400 .95rem var(--font-ui); color: var(--fig-muted); align-self: center; }
.w-num input[type=number] { width: 8.5rem; }
.calc-copy { margin-top: .2rem; }
.clin-tag { font: 600 .92rem var(--font-ui); color: var(--t-warn); margin: 0 0 .35rem; }
.bench-btns { margin-top: .5rem; }
@media (pointer: coarse) { .w-check { min-height: 44px; display: flex; align-items: center; gap: .6rem; } .w-check input { width: 22px; height: 22px; } }
/* Tool pages: compact control grids; on desktop the inputs sit above the drawing */
.tc-top, .bc-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; align-items: end; }
.tc-top select { width: 100%; }
.bc-top { grid-template-columns: minmax(0, 1fr); }
.tc-deck, .bc-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; align-items: start; }
.tc-deck > .w-check { grid-column: 1 / -1; }
.tc-deck .w-num input, .bc-deck .w-num input { width: 100%; min-width: 0; }
.tc-deck .w-ctl, .bc-deck .w-ctl { margin: 0; }
.bc .w-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc .w-readout dt { font-size: .85rem; }
.tc-btns { align-items: center; }
.tc-bench { font: 600 1rem var(--font-ui); }
@media (min-width: 760px) {
  .w.tc, .w.bc { display: flex; flex-direction: column; }
  .w.tc > .tc-top, .w.bc > .bc-top { order: -3; }
  .w.tc > .tc-deck, .w.bc > .bc-deck { order: -2; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bc-top { grid-template-columns: auto auto; justify-content: start; gap: .6rem 2rem; }
  .tc-top { grid-template-columns: repeat(2, minmax(0, 18rem)); }
}
.w-readout .warn { color: var(--t-warn); }
/* home: a Tools row under the chapter list (review r3: the tool pages were unlisted) */
.home-tools { max-width: var(--prose); margin: -2rem auto 3.5rem; padding: 0 var(--gutter); }
.home-tools h2 { font: 800 1.25rem var(--font-display); margin: 0 0 .8rem; }
.home-tools ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.home-tools a { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: var(--ink); border-left: 3px solid var(--accent); padding-left: .8rem; }
.home-tools a:hover .card-t { text-decoration: underline; }
@media (min-width: 760px) { .home-tools ul { grid-template-columns: repeat(3, 1fr); } }
/* bench and buffer comparison: links that carry the same flask between figures */
.bench-links, .duel-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .7rem 0 0; font: 500 .95rem var(--font-ui); }
.bench-links a, .duel-links a { color: var(--link); min-height: 44px; display: inline-flex; align-items: center; }