/* Change, Made Visible: identity.
   The idea: the yellow cover of a serious mathematics book, opened to a perfect figure. One loud move (a solid
   cadmium-yellow field with huge black type behind every title) and one quiet one (white plates of classic textbook
   figures set in STIX Two, the typeface of scientific publishing). Colour meanings are fixed across the site:
   blue = the function f, vermilion = slope / derivative, green = area / accumulation, magenta = secants and
   approximations, orange = the middle variable u of the chain rule. */
/* Fonts, inlined (an @import is resolved against the page by some tools). */
/* STIX Two Text (body, equations; OFL) from @fontsource latin subset + a Google Fonts glyph subset for Greek/primes/
   superscripts; operators (∫ ∑ → ≤ ∞ √ ∂) from STIX Two Math (OFL), mapped into the same family by unicode-range.
   Public Sans (labels, H1; OFL). */
@font-face { font-family: "STIX Two Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/stix-two-text-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "STIX Two Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/stix-two-text-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "STIX Two Text"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/stix-two-text-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: "STIX Two Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/stix-two-text-math-400-normal.woff2") format("woff2"); unicode-range: U+00B1-00B3,U+00B7,U+00B9,U+00D7,U+02B9,U+0394,U+03A3,U+03A9,U+03B1-03C9,U+2016,U+2026,U+2032-2033,U+2070-2083,U+2113,U+2212; }
@font-face { font-family: "STIX Two Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/stix-two-text-math-400-italic.woff2") format("woff2"); unicode-range: U+00B1-00B3,U+00B7,U+00B9,U+00D7,U+02B9,U+0394,U+03A3,U+03A9,U+03B1-03C9,U+2016,U+2026,U+2032-2033,U+2070-2083,U+2113,U+2212; }
@font-face { font-family: "STIX Two Text"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/stix-two-text-math-600-normal.woff2") format("woff2"); unicode-range: U+00B1-00B3,U+00B7,U+00B9,U+00D7,U+02B9,U+0394,U+03A3,U+03A9,U+03B1-03C9,U+2016,U+2026,U+2032-2033,U+2070-2083,U+2113,U+2212; }
@font-face { font-family: "STIX Two Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/stix-two-math-ops.woff2") format("woff2"); unicode-range: U+0338,U+2190-21FF,U+2200-22FF,U+2308-230B,U+27E8-27E9,U+27F9,U+2AEE; }
@font-face { font-family: "STIX Two Text"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/stix-two-math-ops.woff2") format("woff2"); unicode-range: U+0338,U+2190-21FF,U+2200-22FF,U+2308-230B,U+27E8-27E9,U+27F9,U+2AEE; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/public-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --yellow: #f7c600;
  --bg: #ffffff; --surface: #f6f6f3; --ink: #141414; --ink-soft: #2e2e2e; --muted: #5f5f5f; --rule: #dcdcd6;
  --accent: #141414; --accent-ink: #141414; --link: #141414; --link-line: #d4a300; --focus: #0a5fa8; --mark: rgba(247,198,0,.35);
  --font-serif: "STIX Two Text", "STIX Two Math", Cambria, "Times New Roman", serif;
  --font-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans); --font-body: var(--font-serif); --font-ui: var(--font-sans); --font-h1: var(--font-sans);
  --fs-body: 1.25rem; --lh-body: 1.55; --prose: 40rem; --wide: 68rem; --gutter: 1rem; --radius: 2px;
  --fig-bg: #ffffff; --fig-surface: #f4f4f0; --fig-ink: #141414; --fig-muted: #5f5f5f;
  --fig-grid: rgba(20,20,20,.07); --fig-grid-strong: rgba(20,20,20,.45); --fig-border: transparent;
  --c-ref: #0072b2;      /* the function f */
  --c-primary: #c94f00;  /* slope, derivative, tangent */
  --c-ok: #00845f;       /* area, accumulation, integral */
  --c-second: #b4508a;   /* secants, approximations, rectangles' tops */
  --c-third: #e69f00;    /* the middle variable u; fills and thick strokes only */
  --c-third-ink: #8f5f00;
  --c-warn: #a8417c;
  --ctl-accent: #141414; --ctl-bg: #ffffff;
  --band-bg: var(--yellow); --band-ink: #111; --band-muted: rgba(17,17,17,.74);
}
:root[data-theme="dark"] {
  --bg: #121212; --surface: #1c1c1c; --ink: #ececea; --ink-soft: #d0d0cc; --muted: #a2a29c; --rule: #343432;
  --accent: #ececea; --link: #ececea; --link-line: #f7c600; --focus: #7cc0ff; --mark: rgba(247,198,0,.25);
  --fig-bg: #161616; --fig-surface: #202020; --fig-ink: #ececea; --fig-muted: #a8a8a2;
  --fig-grid: rgba(255,255,255,.08); --fig-grid-strong: rgba(255,255,255,.5);
  --c-ref: #56b4e9; --c-primary: #f08a3e; --c-ok: #2fc48f; --c-second: #e08cc0; --c-third: #f0b030; --c-third-ink: #f0b030; --c-warn: #e08cc0;
  --ctl-accent: #f7c600; --ctl-bg: #1c1c1c;
}

body { font-feature-settings: "kern", "liga", "onum" 0; }
::selection { background: var(--mark); }

/* Links: ink with a gold rule, the yellow made legible. */
a { color: var(--link); text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: .16em; }
a:hover { background: var(--mark); text-decoration-thickness: 2px; }
.site-nav a, .wordmark, .home-cards a, .fig-link, .h-anchor { background: none !important; }

/* Header: the wordmark set like a book spine. */
.site-header { border-bottom: 0; background: var(--band-bg); padding: .55rem var(--gutter); }
.site-header .wordmark { font: 800 1.02rem/1 var(--font-sans); letter-spacing: -.01em; color: #111; }
.site-header .site-nav a { color: #111; font-size: .92rem; }
.site-header .nav-toggle, .site-header .theme-toggle { border-color: rgba(0,0,0,.45); color: #111; background: transparent; }
@media (max-width: 760px) { .site-nav ul { background: var(--bg); border-color: var(--ink); } .site-nav ul a { color: var(--ink) !important; } }

/* Titles: huge, black, on the yellow field. */
h1 { font-weight: 800; letter-spacing: -.025em; line-height: .98; }
h2 { font: 700 clamp(1.5rem, 3.2vw, 2rem)/1.15 var(--font-sans); letter-spacing: -.012em; }
h3 { font: 700 1.2rem/1.25 var(--font-sans); }
.essay-head-wrap.band, .home-hero-wrap.band { margin-bottom: 2rem; padding-bottom: 2rem; }
.essay-head h1 { font-size: clamp(2.6rem, 8vw, 5.6rem); margin: .1em 0 .25em; }
.essay-head { padding-top: 2.2rem; }
.band .dek { font: 400 clamp(1.2rem, 2.6vw, 1.55rem)/1.38 var(--font-serif); color: #111; max-width: 36rem; }
.band .kicker { font: 600 .98rem var(--font-sans); color: rgba(17,17,17,.8); }
.band .kicker span { color: #111; }
.band .meta-line { color: rgba(17,17,17,.78); }
.band a { color: #111; text-decoration-color: #111; }

/* Home hero: title column + the live figure plate. */
.home-hero { padding-top: 1.1rem; gap: .9rem; }
.home-hero h1 { font-size: clamp(2.7rem, 11.5vw, 6.4rem); margin: 0 0 .2em; }
.home-hero .dek { margin-bottom: .6rem; }
.home-hero .start { margin: 0; }
.btn-start { font: 700 1.05rem var(--font-sans); color: #111; text-decoration-color: #111; }
.home-hero-wrap.band { padding-bottom: 1.4rem; }
@media (min-width: 980px) {
  .home-hero.has-hero { grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: 2.6rem; align-items: start; padding-top: 3rem; }
  .home-hero h1 { font-size: clamp(4rem, 6.4vw, 6.6rem); }
}
.band .widget-mount { border: 0; padding: 0 .9rem .2rem; }
@media (max-width: 600px) { .band .widget-mount { padding: 0 .55rem .1rem; margin: 0 -.45rem; } }
.band figure figcaption { color: rgba(17,17,17,.82); font-size: .92rem; }
.band .fig-n { color: #111; }

/* Prose */
.prose p, .prose li { hyphens: manual; }
.prose .lede { font-size: 1.24em; line-height: 1.5; }
.prose strong { font-weight: 600; }
var, .v { font-family: var(--font-serif); font-style: italic; }
.eq { font-size: 1.38rem; margin: 1.6rem 0; }
.eq .op { padding: 0 .12em; }
.eq-label { font: 400 .95rem var(--font-serif); }
.frac > span:first-child { border-bottom-width: 1.2px; }
.int { font-size: 1.35em; vertical-align: -.12em; margin-right: -.05em; }
.lim { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; }
.lim small { font-size: .62em; font-style: normal; }
sub, sup { line-height: 0; }
.cite a { font-family: var(--font-sans); }
.c-f { color: var(--c-ref); } .c-d { color: var(--c-primary); } .c-a { color: var(--c-ok); } .c-s { color: var(--c-second); } .c-u { color: var(--c-third-ink); }
.c-f, .c-d, .c-a, .c-s, .c-u { font-weight: 600; }

/* Figure apparatus: numbered like a book's plates. One small-caps style on the site: figure numbers. */
.figure figcaption { font: 400 .98rem/1.5 var(--font-serif); color: var(--ink-soft); }
.fig-n { font: 700 .78rem var(--font-sans); font-variant: all-small-caps; letter-spacing: .06em; font-size: .98rem; margin-right: .45em; }
.fig-n::after { content: ""; }
.widget-mount { border-top: 1.5px solid var(--ink); border-radius: 0; }
.home-hero-fig .widget-mount { border-top: 0; }
.w { gap: .8rem; padding: .6rem 0 .4rem; }
.w-stage:focus-visible { outline: 2px solid var(--focus); }
.w-ctl label, .w-lab { font-size: .95rem; }
.w-readout dd { font-family: var(--font-sans); }
.w-note { font: 400 1.02rem/1.5 var(--font-serif); color: var(--ink); }
.w-note var { font-size: 1.04em; }
.w-eq { font-size: 1.15rem; }
.w-seg button[aria-pressed="true"] { color: var(--bg); }
.w-btn.primary { color: var(--bg); }
.w-hint { font-family: var(--font-serif); }
.w input[type=text] { flex: 1; min-width: 0; font: 400 1.1rem var(--font-serif); padding: .35rem .5rem; min-height: 40px;
  border: 1px solid var(--fig-grid-strong); border-radius: 2px; background: var(--ctl-bg); color: var(--ctl-ink); }
.w input[type=text][aria-invalid="true"] { border-color: var(--c-warn); }
.w-msg { font: 400 .95rem var(--font-sans); color: var(--c-warn); min-height: 1.3em; }

/* Plates: tables of values, styled like a mathematical table. */
.w-table { border-collapse: collapse; font: 400 .95rem var(--font-sans); font-variant-numeric: tabular-nums; width: 100%; }
.w-table th { font: 600 .85rem var(--font-sans); color: var(--fig-muted); border-bottom: 1.5px solid var(--fig-ink); padding: .25rem .5rem; text-align: right; }
.w-table td { border-bottom: 1px solid var(--rule); padding: .22rem .5rem; text-align: right; }
.w-table td:first-child, .w-table th:first-child { text-align: left; }
.w-table .em { color: var(--c-primary); font-weight: 600; }
.w-cols { display: grid; gap: .8rem; }
@media (min-width: 700px) { .w-cols { grid-template-columns: 1fr 1fr; } }

/* Prediction prompts: a ruled margin note, not a card. */
.w-predict .predict { border-left: 4px solid var(--yellow); padding-left: 1rem; }
.predict-k { color: var(--ink); font-family: var(--font-sans); }
.w-predict legend { font-family: var(--font-serif); font-size: 1.2rem; }
.predict-opt { font-family: var(--font-serif); font-size: 1.05rem; }
.figure.widget[data-widget="lf:predict"] .widget-mount { border-top: 0; }

/* Asides */
.simplification { border-left: 4px solid var(--yellow); }
.callout-history { border-left: 4px solid var(--ink); }
.callout-note { border-left: 4px solid var(--c-ref); }
.evidence { font-family: var(--font-serif); }

/* Section opener on the yellow field */
.section-band { background: var(--band-bg); color: #111; }
.section-band h2 { color: #111; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.02em; line-height: 1; }
.section-band p { color: #111; }
.section-band a { color: #111; text-decoration-color: #111; }

/* Home table of contents: numbered like chapters. */
.home-cards ol { counter-reset: ch; list-style: none; padding-left: var(--gutter); }
.home-cards li { counter-increment: ch; display: grid; grid-template-columns: 3.2rem 1fr; gap: .2rem .6rem; padding-left: 0; margin-bottom: 1.6rem; }
.home-cards li::before { content: counter(ch); font: 800 2.5rem/1 var(--font-sans); color: var(--ink); background: var(--yellow); text-align: center; padding: .35rem 0 .3rem; height: fit-content; }
.card-t { font: 700 1.45rem/1.2 var(--font-sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: .16em; }
.card-d { font-size: 1.05rem; color: var(--ink-soft); }
.card-q { font: italic 400 1.02rem var(--font-serif); color: var(--muted); }

.site-footer { border-top: 1.5px solid var(--ink); }
.footer-title { font-family: var(--font-sans); }
.toc ol { font-family: var(--font-sans); }
.essay-nav a { font-family: var(--font-sans); }
.kbd { font-family: var(--font-sans); }

/* Calculator results */
.w-result { font-family: var(--font-serif); }
.w-result p { margin: .2rem 0; }
.w-big { font-size: 1.3rem; line-height: 1.35; }
.w-small { font-size: .98rem; color: var(--ink-soft); }
.w-result details { margin-top: .5rem; font-size: .98rem; }
.w-result summary { cursor: pointer; font: 600 .95rem var(--font-sans); padding: .3rem 0; min-height: 32px; }
.w-result table { margin: .4rem 0; }
.w .w-btns .w-btn { font-family: var(--font-serif); font-size: .98rem; }
code { font-family: var(--font-serif); font-style: italic; background: var(--surface); padding: 0 .25em; }
.home-cards { margin-top: 1rem; }
.toc-title { margin: 2.4rem auto .4rem; }
.home-cards ol { margin-top: 1.4rem; }
.home-body { padding-bottom: 1rem; }
.fig-link { text-decoration: underline; text-decoration-color: var(--link-line); color: var(--ink-soft); }
@media (max-width: 600px) { .prose .lede { font-size: 1.1em; } :root { --fs-body: 1.15rem; } }

/* Display-style big operators: limits stacked above and below the sign. */
.bigop { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; margin: 0 .12em; }
.bigop-sym { font-size: 1.5em; line-height: 1; }
.bigop-sup, .bigop-sub { font-size: .62em; }
.eq-gap { display: inline-block; width: 2em; }
@media (max-width: 600px) { .eq-gap { display: block; width: auto; height: .5rem; } }

/* Chapter heads with a live figure (every chapter's first screen holds something to drag). Desktop: the title column
   beside the plate; phones: a tighter head so the plate and its first control fit in the first screen. */
.essay-head.has-hero { max-width: var(--wide); }
.essay-head.has-hero .essay-hero figcaption { max-width: 40rem; }
@media (min-width: 980px) {
  .essay-head.has-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.8rem; align-items: start; }
  .essay-head.has-hero .essay-head-text { margin: 0; }
  .essay-head.has-hero h1 { font-size: clamp(3.2rem, 5.2vw, 5.2rem); }
}
@media (max-width: 600px) {
  .essay-head { padding-top: 1.2rem; }
  .essay-head.has-hero h1 { margin-bottom: .15em; }
  .essay-head.has-hero .dek { font-size: 1.08rem; line-height: 1.38; margin-bottom: .4rem; }
  .essay-head.has-hero .meta-line { margin: 0; font-size: .85rem; }
  .essay-head.has-hero .kicker { margin-bottom: .2rem; }
  .essay-head.has-hero { gap: .6rem; }
  /* The lede repeats the dek nearly word for word; on a phone it reads as body text. */
  .prose > .lede { font-size: 1em; }
  /* The plate runs full-bleed across the band: no thin yellow margins either side. */
  .band .widget-mount { margin: 0 calc(-1 * var(--gutter)); padding: 0 .75rem .2rem; }
}

/* Dark mode keeps the drawing idiom. The yellow cover stays a cover: plates printed on it stay light, as a printed
   plate would. In the reading column figures draw straight on the page, with no slab of a different black. */
:root[data-theme="dark"] { --fig-bg: var(--bg); --fig-surface: #1a1a1a; --ctl-bg: #1a1a1a; }
:root[data-theme="dark"] .band .figure {
  --bg: #ffffff; --surface: #f6f6f3; --ink: #141414; --ink-soft: #2e2e2e; --muted: #5f5f5f; --rule: #dcdcd6;
  --link: #141414; --focus: #0a5fa8;
  --fig-bg: #ffffff; --fig-surface: #f4f4f0; --fig-ink: #141414; --fig-muted: #5f5f5f;
  --fig-grid: rgba(20,20,20,.07); --fig-grid-strong: rgba(20,20,20,.45);
  --c-ref: #0072b2; --c-primary: #c94f00; --c-ok: #00845f; --c-second: #b4508a; --c-third: #e69f00; --c-third-ink: #8f5f00; --c-warn: #a8417c;
  --ctl-accent: #141414; --ctl-bg: #ffffff; --ctl-ink: #141414;
  color: #141414;
}
:root[data-theme="dark"] .band .figure figcaption { color: rgba(17,17,17,.82); }

/* The one-time drag hint sits just under the plate, not over the bottom axis labels. */
.w-stage { margin-bottom: 1.5rem; }
.w-hint { bottom: -1.55rem; left: 0; background: transparent; padding: 0; }

/* Home: the worked examples and calculators, a plain list under the chapters. */
.home-worked ul { padding-left: 1.2rem; }
.home-worked li { margin-bottom: .55rem; }
.home-worked a { font: 700 1.08rem var(--font-sans); }

/* calc-lab: Reset and Share at the end of the input row, not floating above the plot */
.w-row .w-toolbar-inline { position: static; top: auto; flex: none; margin-left: .4rem; }
.w-row:has(.w-toolbar-inline) { display: flex; align-items: center; gap: .35rem; }
.w-row:has(.w-toolbar-inline) input { flex: 1 1 auto; min-width: 0; }
.w-stage.w-stage-nobar { margin-top: .5rem; }
@media (pointer: coarse) { .w-stage.w-stage-nobar { margin-top: .5rem; } }

/* readouts whose length changes while dragging: reserve their tallest height, so nothing below the figure moves */
.w-note-la { min-height: 3lh; }
.w-note-eps { min-height: 4lh; }
@media (max-width: 700px) { .w-note-la { min-height: 6lh; } .w-note-eps { min-height: 8lh; } }
.w-result-sum > p.w-small { min-height: 5lh; }
@media (max-width: 700px) { .w-result-sum > p.w-small { min-height: 10lh; } }
/* the hero plate's caption ends the yellow band: no extra empty yellow under it */
.essay-head-wrap.band { padding-bottom: 1.1rem; }
.band figure.essay-hero { margin-bottom: 0; }
.band .essay-head.has-hero { padding-bottom: .4rem; }
.w-result[data-steady="off"] > p.w-small { min-height: 0; }
/* one-sided limit readout: its digits and error text change length while the point is dragged */
.w-result p.w-limit-sides { min-height: 3lh !important; }
@media (max-width: 700px) { .w-result p.w-limit-sides { min-height: 5lh !important; } }