/* The blog's pages: /blog/, /blog/category/<id>/ and /blog/<slug>/.
   Written by hand; the pages are written by build-tools/buildBlog.mjs.
   The same ink and gold as the rest of Mathswariz, and the same fonts as
   the worksheets, read from where the worksheets keep them. */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../worksheets/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: italic; font-display: swap; src: url("../../worksheets/assets/fonts/inter-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../../worksheets/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../../worksheets/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../../worksheets/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
/* Two handwriting faces, kept with the blog (SIL OFL, licences beside them):
   Patrick Hand for headings and speech, Caveat for notes in the margin. */
@font-face { font-family: "Patrick Hand"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/patrick-hand-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/caveat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/caveat-latin-700-normal.woff2") format("woff2"); }

:root {
  --ink: #14203a;
  --muted: #55607a;
  --line: #c9d0dc;
  --soft: #eef1f6;
  --ground: #f8fafc;
  --paper: #ffffff;
  --gold: #f0b429;
  --gold-text: #875e05;
  --wash: #fdf6e3;
  --right: #146c3c;
  --right-wash: #e7f5ec;
  --wrong: #a3262a;
  --wrong-wash: #fbeaea;
  --body: "Inter", "DejaVu Sans", Arial, sans-serif;
  --display: "Space Grotesk", "Inter", Arial, sans-serif;
  --hand: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --note: "Caveat", "Patrick Hand", "Segoe Print", cursive;
  --hl: #fde68a;
  --measure: 880px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.blog { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 20px; line-height: 1.6; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--gold); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- the site's bar and foot ---------- */
/* The navy bar of the home page: the wordmark, the links, one gold button. */
.site { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 12px max(16px, calc((100vw - 1180px) / 2)); background: var(--ink); color: #fff; }
.site a { color: #fff; text-decoration: none; font-weight: 600; font-size: .95em; }
.site .brand { font-family: var(--display); font-size: 1.3em; margin-right: auto; white-space: nowrap; }
.site .brand span { color: var(--gold); }
.site-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-links a { opacity: .88; }
.site-links a:hover, .site-links a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--gold); }
.site .cta { background: var(--gold); color: var(--ink); border-radius: 9px; padding: 9px 16px; font-weight: 700; white-space: nowrap; }
.site .cta:hover { background: #f5c44f; }
.site :focus-visible { outline-color: var(--gold); }
@media (max-width: 760px) { .site-links { order: 3; width: 100%; } }
.site-foot { text-align: center; color: var(--muted); font-size: .88em; padding: 28px 16px 40px; }
.site-foot p { margin: .3em 0; }
.site-foot a { color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 9px; border: 1.5px solid var(--ink); color: var(--ink); background: var(--paper); text-decoration: none; font: inherit; font-weight: 700; font-size: .95em; cursor: pointer; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-quiet { border-color: var(--line); }

/* ---------- page width ---------- */
main { display: block; margin: 0 auto; padding: 22px 16px 10px; }
.post { max-width: 1400px; }
.blog-index { max-width: 1120px; }

.crumbs { font-size: .88em; color: var(--muted); margin: 0 0 14px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--muted); }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(1.75em, 4.6vw, 2.5em); margin: .1em 0 .35em; }
h2 { font-size: 1.45em; margin: 1.8em 0 .5em; scroll-margin-top: 12px; }
h3 { font-size: 1.15em; margin: 1.4em 0 .4em; scroll-margin-top: 12px; }
p { margin: 0 0 1em; }
.lede { font-size: 1.12em; color: #2c3a56; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); text-decoration: none; font-size: .78em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
a.chip:hover, a.chip:focus-visible { background: var(--ink); color: #fff; }

/* ---------- an article's head ---------- */
.post-head { margin-bottom: 18px; }
.post-q { background: var(--wash); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 12px 16px; font-weight: 600; }
.post-q .block-k { display: block; margin-bottom: 2px; }
.byline { font-size: .9em; color: var(--muted); margin: 0; }
.draft-tag { background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 10px; font-weight: 700; font-size: .9em; }

.toc { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 18px 8px; margin: 0 0 24px; }
.toc-k, .block-k { font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 6px; }
/* A block's own title keeps its case: uppercased, y = x² reads Y = X². */
.block-k .block-t { text-transform: none; letter-spacing: 0; font-size: 1.25em; color: var(--ink); }
.toc ol { margin: 0 0 6px; padding-left: 1.3em; }
.toc li { margin: 2px 0; }

/* ---------- the body of an article ---------- */
.prose > ul, .prose > ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin: .25em 0; }
.dm { display: block; overflow-x: auto; overflow-y: hidden; margin: .4em 0; }
.mstop { white-space: nowrap; }
.dm-block { overflow-x: auto; overflow-y: hidden; margin: 0 0 1em; padding: 4px 0; }
.katex { font-size: 1.08em; }
.tex-error { color: var(--wrong); }

figure { margin: 0 0 1.4em; }
figcaption { font-size: .9em; color: var(--muted); margin-top: 8px; }

/* Every block that is not prose sits on paper, with a label above it. */
.callout, .example, .quiz, .graph, .video, .sim, .lesson-card, .comic, .script, .reveal, .table, .fig, .img, .talk {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 1.5em;
}
.fig, .img { text-align: center; }
.fig img, .img img { display: inline-block; }
.fig figcaption, .img figcaption { text-align: left; }

/* Handwriting: the pen's own strokes, smoothed, on the page's paper.
   It sits on no card, so it reads as written on the page. */
.ink-fig { margin: 0 0 1.5em; }
.ink-title { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.ink-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.ink-svg { display: block; max-width: 100%; height: auto; }

.callout { border-left-width: 5px; }
.callout-k { font-weight: 700; margin-bottom: 6px; }
.callout p:last-child { margin-bottom: 0; }
.callout-misconception { border-color: var(--wrong); background: var(--wrong-wash); }
.callout-misconception .callout-k { color: var(--wrong); }
.callout-tip { border-color: var(--gold); background: var(--wash); }
.callout-definition { border-color: var(--ink); }
.callout-summary { border-color: var(--right); background: var(--right-wash); }
.callout-exam { border-color: #1f4fa3; background: #eef3fb; }

.example .ex-q { font-weight: 600; margin-bottom: 10px; }
.ex-steps { margin: 0 0 10px; padding-left: 1.4em; }
.ex-step { margin: 0 0 10px; }
.ex-step > div p, .ex-step > div { margin: 0; }
.ex-why { font-size: .92em; color: var(--muted); margin: 4px 0 0; }
.ex-why span { font-weight: 700; color: var(--ink); }
.ex-a { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); }

.reveal summary, .script summary, .quiz-key summary, .transcript summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.reveal[open] summary, .script[open] summary { margin-bottom: 8px; }
.reveal div p:last-child { margin-bottom: 0; }

.stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.stepper-n { color: var(--muted); font-size: .9em; }

/* ---------- quizzes ---------- */
.quiz-q + .quiz-q { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.quiz-ask { font-weight: 600; }
.quiz-n { display: block; font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.opts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.opts-graphs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opt { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--paper); }
.opt-l { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--soft); font-weight: 700; font-size: .9em; }
.opt-text { flex: 1; min-width: 0; }
.opt-pic { display: block; }
.opt-pic svg { width: 100%; height: auto; background: var(--paper); }
.opt-name { display: block; font-weight: 600; font-size: .92em; }
.opts-graphs .opt { flex-direction: column; }
/* With the script, the option IS a button: the whole card is the target. */
.is-live .opt { padding: 0; border: 0; background: none; }
.opt-btn { flex: 1; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; text-align: left; font: inherit; color: inherit; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.opts-graphs .opt-btn { flex-direction: column; }
.opt-btn:hover { border-color: var(--ink); }
.opt.is-right .opt-btn { border-color: var(--right); background: var(--right-wash); }
.opt.is-wrong .opt-btn { border-color: var(--wrong); background: var(--wrong-wash); }
.opt.is-right .opt-l { background: var(--right); color: #fff; }
.opt.is-wrong .opt-l { background: var(--wrong); color: #fff; }
.quiz-feedback:empty { display: none; }
.quiz-feedback { border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }
.quiz-feedback.is-right { background: var(--right-wash); border-left: 4px solid var(--right); }
.quiz-feedback.is-wrong { background: var(--wrong-wash); border-left: 4px solid var(--wrong); }
.quiz-key ul { margin: 6px 0 0; padding-left: 1.2em; }
.quiz-key li { margin: 0 0 6px; }
.key-right b { color: var(--right); }
.key-wrong b { color: var(--wrong); }

/* ---------- graphs ---------- */
.g-pic svg { display: block; width: 100%; height: auto; background: var(--paper); }
/* The graph is drawn 480 wide and scaled to its column, so on a phone its
   11-unit labels came out about 7px. Larger in the drawing's units there. */
@media (max-width: 560px) { .g-pic svg text { font-size: 18px; } }
.g-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .95em; }
.g-legend li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 18px; height: 4px; border-radius: 2px; display: inline-block; }
.g-controls { display: grid; gap: 10px; margin-top: 12px; }
.g-slider { display: grid; grid-template-columns: minmax(1.6em, auto) minmax(40%, 1fr) 3.2em; align-items: center; gap: 10px; font-weight: 600; }
.g-slider output { font-variant-numeric: tabular-nums; text-align: right; }
.g-slider input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--ink); }
.g-static { font-size: .9em; color: var(--muted); margin: 8px 0 0; }
.g-ask { margin: 12px 0 0; padding: 10px 14px; background: var(--wash); border-radius: 10px; }
.g-ask .block-k { display: block; margin-bottom: 2px; }

/* ---------- video ---------- */
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--ink); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: #fff; text-decoration: none; text-align: center; background: linear-gradient(160deg, #1b2b4d, #14203a); }
.video-poster:hover .video-play svg { transform: scale(1.06); }
.video-play svg { width: 64px; height: 64px; transition: transform .15s ease; }
.video-ptitle { font-family: var(--display); font-size: 1.2em; line-height: 1.2; }
.video-pnote { font-size: .88em; opacity: .85; }
.video figcaption b { color: var(--ink); }
.video-summary { margin: 8px 0; }
.video-note { font-size: .88em; color: var(--muted); }
.video-outline { margin: 0 0 10px; padding-left: 1.2em; }
.video-outline a { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- simulations and lesson links ---------- */
.sim-frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; max-height: 80vh; }
.sim-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lesson-card { background: var(--wash); border-color: var(--gold); }
.lc-title { font-family: var(--display); font-size: 1.2em; font-weight: 700; margin: 0 0 6px; }
.lesson-card .btn { margin-top: 4px; }

/* ---------- Ex, in dialogue and in comics ---------- */
/* A dialogue is a comic strip: one panel with a hand-drawn edge, the
   student and Ex on the left, the teacher and the reader on the right,
   each line an inked bubble pointing at the person who says it. A second
   line from the same person in a row keeps the side and drops the face.
   The same markup is used inside a comic panel, a video script and a
   "who is right" block, so these rules are written for .say, not .talk. */
.talk { position: relative; margin: 0 0 1.6em; padding: 18px 18px 20px; background: #fcfbf7; border: 2.5px solid var(--ink); border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px; box-shadow: 3px 4px 0 rgba(20, 32, 58, .12); }
.talk-title { display: table; margin: -36px 0 10px -4px; padding: 3px 14px 4px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px 12px 10px 8px / 10px 8px 12px 10px; font-family: var(--hand); font-size: 1.2em; line-height: 1.2; transform: rotate(-1.2deg); }
.talk:has(.talk-title) { margin-top: 2.2em; }
.talk-strip { display: grid; gap: 22px; }
.say { margin: 0; }
.say-left, .say-right { display: flex; align-items: flex-start; gap: 12px; }
.say-right { flex-direction: row-reverse; }
.say-cont { margin-top: -6px; }
.say-who { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; }
.say-who svg { display: block; }
.say-who-cont { height: 1px; }
.say-name { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--hand); font-size: .86em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.say-teacher .say-name, .say-you .say-name { background: var(--gold); color: var(--ink); }
.say-left .bubble, .say-right .bubble { position: relative; flex: 0 1 auto; max-width: min(78%, 560px); min-width: 0; margin: 6px 0 0; padding: .8em 1.2em .85em; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 18px 22px 20px 16px / 20px 16px 22px 18px; font-family: var(--hand); font-size: 1.28em; line-height: 1.55; letter-spacing: .01em; color: var(--ink); box-shadow: 2px 3px 0 rgba(20, 32, 58, .1); overflow-wrap: anywhere; }
.say-left .bubble::before, .say-left .bubble::after, .say-right .bubble::before, .say-right .bubble::after { content: ""; position: absolute; top: 18px; width: 0; height: 0; border-style: solid; }
.say-left .bubble::before { left: -14px; border-width: 9px 14px 9px 0; border-color: transparent var(--ink) transparent transparent; }
.say-left .bubble::after { left: -9px; top: 21px; border-width: 6px 9px 6px 0; border-color: transparent var(--paper) transparent transparent; }
.say-right .bubble::before { right: -14px; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ink); }
.say-right .bubble::after { right: -9px; top: 21px; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--paper); }
.say-cont .bubble { margin-top: 0; }
.say-cont .bubble::before, .say-cont .bubble::after { display: none; }
.say-teacher .bubble, .say-you .bubble { background: #fffaf0; }
.say-teacher .bubble::after, .say-you .bubble::after { border-left-color: #fffaf0; }
.mood-worried .bubble, .mood-surprised .bubble { background: var(--wrong-wash); }
.say-left.mood-worried .bubble::after, .say-left.mood-surprised .bubble::after { border-right-color: var(--wrong-wash); }
.say-right.mood-worried .bubble::after, .say-right.mood-surprised .bubble::after { border-left-color: var(--wrong-wash); }
.mood-happy .bubble { background: var(--right-wash); }
.say-left.mood-happy .bubble::after { border-right-color: var(--right-wash); }
.say-right.mood-happy .bubble::after { border-left-color: var(--right-wash); }
/* thinking is a thought cloud: a dashed edge and two dots for a tail */
.mood-thinking .bubble { border-style: dashed; }
.mood-thinking .bubble::before { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); top: 18px; }
.mood-thinking .bubble::after { width: 6px; height: 6px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); top: 26px; }
.say-left.mood-thinking .bubble::before { left: -16px; }
.say-left.mood-thinking .bubble::after { left: -26px; }
.say-right.mood-thinking .bubble::before { right: -16px; }
.say-right.mood-thinking .bubble::after { right: -26px; }
.say-narrator { justify-self: center; max-width: 90%; margin: 2px auto; padding: 10px 18px; background: var(--wash); border: 2px solid var(--ink); border-radius: 4px; font-family: var(--hand); font-size: 1.18em; line-height: 1.5; color: var(--ink); text-align: center; box-shadow: 2px 2px 0 rgba(20, 32, 58, .1); }
.say-action { font-size: .92em; background: var(--ground); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; }
@media (max-width: 560px) {
  .talk { padding: 16px 10px 16px; }
  .say-left, .say-right { gap: 8px; }
  .say-who { width: 50px; }
  .say-name { font-size: .74em; padding: 1px 5px; max-width: none; overflow: visible; }
  .talk-strip { gap: 18px; }
  .say-left .bubble, .say-right .bubble { max-width: calc(100% - 58px); padding: .7em .95em .75em; font-size: 1.16em; line-height: 1.5; }
}

.panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.panel { display: grid; gap: 10px; border: 2px solid var(--ink); border-radius: 10px; padding: 12px 14px; background: #fff; }
.panel-n { font-size: .78em; font-weight: 700; color: var(--muted); margin: 0; }
.script ol { margin: 0; padding-left: 1.3em; display: grid; gap: 14px; }
.script-note { font-size: .9em; color: var(--muted); }
.scene-t { font-weight: 700; margin: 0 0 6px; }

/* ---------- tables, questions people ask, references ---------- */
.table-scroll { overflow-x: auto; }
.table table { border-collapse: collapse; width: 100%; font-size: .95em; }
.table caption { text-align: left; font-weight: 700; margin-bottom: 8px; }
.table th, .table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.table th { background: var(--soft); }
.faq h3 { font-size: 1.05em; margin: 1.1em 0 .3em; }
.refs ol { padding-left: 1.3em; font-size: .92em; }
.refs a { word-break: break-word; }

/* ---------- after an article ---------- */
.learn { margin-top: 2.2em; padding: 18px 20px; background: var(--paper); border: 1.5px solid var(--gold); border-radius: 14px; }
.learn h2 { margin-top: 0; }
.learn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.learn-list a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--wash); text-decoration: none; font-weight: 600; }
.learn-list a:hover, .learn-list a:focus-visible { border-color: var(--ink); }
.related h2 { margin-top: 1.8em; }

/* ---------- cards ---------- */
ul.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { display: flex; min-width: 0; }
.card > a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(20, 32, 58, .06); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card > a:hover, .card > a:focus-visible { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(20, 32, 58, .35); }
.card-k { font-size: .72em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-text); }
.card-t { font-family: var(--display); font-size: 1.22em; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.card-x { color: #2c3a56; font-size: .95em; }
/* The article's hero picture, small, under the title. A still picture:
   nothing in it takes a press, so the whole card stays one link. */
.card-pic { display: flex; justify-content: center; align-items: center; margin: 2px 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; pointer-events: none; }
.card-pic > img, .card-pic > svg { display: block; max-width: 100%; max-height: 190px; width: auto; height: auto; object-fit: contain; }
.card-pic-graph > svg { width: 100%; }
.card-pic-sketch { padding: 0; background: none; border: 0; }
.card-pic-sim { padding: 0; }
.card-pic-sim > img { width: 100%; height: auto; max-height: none; }
.card-pic .sk { width: min(100%, calc(190px * var(--r, 1.25))); margin: 0; }
.card-big .card-pic > img, .card-big .card-pic > svg { max-height: 240px; }
.card-big .card-pic .sk { width: min(100%, calc(240px * var(--r, 1.25))); }
.card-m { margin-top: auto; font-size: .85em; color: var(--muted); }
.cards-big { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card-big > a { background: var(--wash); border-color: var(--gold); padding: 22px; }
.card-big .card-t { font-size: 1.45em; }

/* ---------- the blog's home and its topics ---------- */
.blog-head { max-width: 760px; }
.blog-purpose { margin: 6px 0 22px; font-size: 1.12em; color: var(--muted); }
.finder { display: grid; gap: 12px; margin: 6px 0 4px; }
.search label { display: block; font-weight: 700; margin-bottom: 4px; }
.search input { width: 100%; max-width: 460px; min-height: 44px; padding: 8px 12px; font: inherit; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.search input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(20, 32, 58, .15); }
.topics .chips { margin: 0; }
.empty { background: var(--paper); border: 1.5px dashed var(--line); border-radius: 14px; padding: 22px; }
.none { color: var(--muted); margin-top: 12px; }

@media (max-width: 520px) {
  body.blog { font-size: 18px; }
  .callout, .example, .quiz, .graph, .video, .sim, .lesson-card, .comic, .script, .reveal, .table, .fig, .img, .talk { padding: 14px; border-radius: 12px; }
  .say-who { width: 52px; }
  .say-who svg { width: 44px; height: 44px; }
  .cards-big { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .site a, .site-foot a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; }
  .site .cta { padding-inline: 12px; }
  .crumbs a, .toc a, .refs a { display: inline-flex; align-items: center; min-height: 44px; }
  .chip { min-height: 44px; padding-inline: 14px; }
  .g-slider input[type="range"] { min-height: 44px; }
  .video-outline a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .card > a, .card > a:hover, .video-play svg { transition: none; transform: none; }
}
@media print {
  .site, .site-foot, .stepper, .video-frame, .sim, .skip { display: none !important; }
  .quiz-key { display: block !important; }
  .ex-step, .panel, .ex-a { display: block !important; }
}


/* ============================================================
   THE ARTICLE PAGE: back link, handwritten head, hero, two columns
   ============================================================ */
.post-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; font-size: .92em; color: var(--muted); }
.post-top .back { font-weight: 700; text-decoration: none; }
.post-top .back:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.post-head { display: grid; gap: 18px; align-items: center; }
.post-head.has-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
/* A sketch is a picture to read, so it takes the width under the title. */
.post-head.has-hero.hero-wide { grid-template-columns: minmax(0, 1fr); }
.post-head.hero-wide .post-hero { max-width: 1000px; }
.post-head h1 { font-family: var(--hand); font-weight: 400; font-size: clamp(2.1em, 5.4vw, 3.3em); line-height: 1.05; letter-spacing: .005em; }
.post-head .lede { font-size: 1.15em; }
.chip-format { background: var(--ink); color: #fff; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 11px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); font-size: .82em; font-weight: 600; }
.checked { color: var(--right); font-weight: 600; }
.post-hero > * { margin: 0; }
.post-hero .fig, .post-hero .img, .post-hero .graph { box-shadow: 0 10px 28px -16px rgba(20, 32, 58, .45); }
.hand-note { font-family: var(--note); font-size: 1.35em; line-height: 1.15; color: var(--gold-text); margin: 8px 0 0; text-align: left; }
.hand-note::before { content: "↳ "; }
mark.hl { background: linear-gradient(transparent 38%, var(--hl) 38%, var(--hl) 88%, transparent 88%); color: inherit; padding: 0 .1em; }

.post-grid { display: grid; gap: 28px; margin-top: 22px; }
.post-main { min-width: 0; width: 100%; max-width: var(--measure); }
.post-grid.no-side .post-main { margin: 0; }
.post-side { min-width: 0; display: grid; gap: 18px; align-content: start; }
.side-block > * { margin-bottom: 0; }
@media (min-width: 1100px) {
  .post-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .post-grid.no-side { grid-template-columns: minmax(0, 1fr); }
  .post-side { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; padding-bottom: 6px; }
}
@media (max-width: 860px) { .post-head.has-hero { grid-template-columns: 1fr; } }
/* A block placed left or right: a note in the margin beside the block
   above it (render.js writes the notes first, then that block, inside
   .beside). With no room for a margin the notes follow the block. With
   room, the article's column grows by a margin on that side (240px, or
   more for a bigger picture: see below) and
   each note floats into it at the top of its block, so it scrolls with
   the article and never follows the window. clear stops two notes on one
   side landing on each other. The text keeps at least 560px: a margin is
   on once the window holds 560px of text, 240px per margin, the 358px
   side column when it is beside the article (from 1100px), and the
   page's 32px of padding. Narrower than that, up to the full 880px, the
   text gives way to the margin rather than the margin to the text. */
.beside { display: flex; flex-direction: column; }
.beside > .mnote { order: 2; margin: 0 0 1.1em; }
.mnote > * { margin: 0; }
.post-grid { --ml: 0px; --mr: 0px; }
/* How wide a margin is: as wide as its biggest picture asks (240px for a
   small one, 322 medium, 422 large: the picture plus a 22px gap), but no
   wider than the room the window leaves once the text has its 560px
   (--room: the page's content width, less the side column when it is
   beside the article, less 560). Two margins share that room. A picture
   is as wide as it asks, or as its margin, whichever is less. */
.post-grid {
  --wl: 240px; --wr: 240px;
  --room: calc(min(100vw, 1400px) - 592px);
  --gl: clamp(240px, var(--room), var(--wl));
  --gr: clamp(240px, var(--room), var(--wr));
}
@media (min-width: 1100px) { .post-grid:not(.no-side) { --room: calc(min(100vw, 1400px) - 950px); } }
.post-grid.m-l.m-r { --gl: clamp(240px, calc(var(--room) / 2), var(--wl)); --gr: clamp(240px, calc(var(--room) / 2), var(--wr)); }
.post-grid.ml-m { --wl: 322px; } .post-grid.ml-l { --wl: 422px; }
.post-grid.mr-m { --wr: 322px; } .post-grid.mr-l { --wr: 422px; }
.mnote { --nw: 218px; }
.mnote.mnote-medium { --nw: 300px; } .mnote.mnote-large { --nw: 400px; }
.post-main { padding-left: var(--ml); padding-right: var(--mr); }
.post-grid.m-r .post-main, .post-grid.m-l .post-main { max-width: calc(var(--measure) + var(--ml) + var(--mr)); display: flow-root; }
/* one margin, side column below the article or none */
@media (min-width: 832px) and (max-width: 1099.98px) {
  .post-grid.m-r:not(.m-l) { --mr: var(--gr); }
  .post-grid.m-l:not(.m-r) { --ml: var(--gl); }
  .post-grid.m-r:not(.m-l) .beside, .post-grid.m-l:not(.m-r) .beside { display: block; }
  .post-grid.m-r:not(.m-l) .mnote-right { float: right; clear: right; width: min(var(--nw), calc(var(--mr) - 22px)); margin: .15em calc(-1 * var(--mr)) .9em 0; }
  .post-grid.m-l:not(.m-r) .mnote-left { float: left; clear: left; width: min(var(--nw), calc(var(--ml) - 22px)); margin: .15em 0 .9em calc(-1 * var(--ml)); }
}
@media (min-width: 1100px) {
  .post-grid.no-side.m-r:not(.m-l) { --mr: var(--gr); }
  .post-grid.no-side.m-l:not(.m-r) { --ml: var(--gl); }
  .post-grid.no-side.m-r:not(.m-l) .beside, .post-grid.no-side.m-l:not(.m-r) .beside { display: block; }
  .post-grid.no-side.m-r:not(.m-l) .mnote-right { float: right; clear: right; width: min(var(--nw), calc(var(--mr) - 22px)); margin: .15em calc(-1 * var(--mr)) .9em 0; }
  .post-grid.no-side.m-l:not(.m-r) .mnote-left { float: left; clear: left; width: min(var(--nw), calc(var(--ml) - 22px)); margin: .15em 0 .9em calc(-1 * var(--ml)); }
}
/* one margin, beside the side column */
@media (min-width: 1190px) {
  .post-grid.m-r:not(.m-l) { --mr: var(--gr); }
  .post-grid.m-l:not(.m-r) { --ml: var(--gl); }
  .post-grid.m-r:not(.m-l) .beside, .post-grid.m-l:not(.m-r) .beside { display: block; }
  .post-grid.m-r:not(.m-l) .mnote-right { float: right; clear: right; width: min(var(--nw), calc(var(--mr) - 22px)); margin: .15em calc(-1 * var(--mr)) .9em 0; }
  .post-grid.m-l:not(.m-r) .mnote-left { float: left; clear: left; width: min(var(--nw), calc(var(--ml) - 22px)); margin: .15em 0 .9em calc(-1 * var(--ml)); }
}
/* both margins */
@media (min-width: 1072px) and (max-width: 1099.98px) {
  .post-grid.m-r.m-l { --mr: var(--gr); }
  .post-grid.m-l.m-r { --ml: var(--gl); }
  .post-grid.m-r.m-l .beside, .post-grid.m-l.m-r .beside { display: block; }
  .post-grid.m-r.m-l .mnote-right { float: right; clear: right; width: min(var(--nw), calc(var(--mr) - 22px)); margin: .15em calc(-1 * var(--mr)) .9em 0; }
  .post-grid.m-l.m-r .mnote-left { float: left; clear: left; width: min(var(--nw), calc(var(--ml) - 22px)); margin: .15em 0 .9em calc(-1 * var(--ml)); }
}
@media (min-width: 1100px) {
  .post-grid.no-side.m-r.m-l { --mr: var(--gr); }
  .post-grid.no-side.m-l.m-r { --ml: var(--gl); }
  .post-grid.no-side.m-r.m-l .beside, .post-grid.no-side.m-l.m-r .beside { display: block; }
  .post-grid.no-side.m-r.m-l .mnote-right { float: right; clear: right; width: min(var(--nw), calc(var(--mr) - 22px)); margin: .15em calc(-1 * var(--mr)) .9em 0; }
  .post-grid.no-side.m-l.m-r .mnote-left { float: left; clear: left; width: min(var(--nw), calc(var(--ml) - 22px)); margin: .15em 0 .9em calc(-1 * var(--ml)); }
}
@media (min-width: 1430px) {
  .post-grid.m-r.m-l { --mr: var(--gr); }
  .post-grid.m-l.m-r { --ml: var(--gl); }
  .post-grid.m-r.m-l .beside, .post-grid.m-l.m-r .beside { display: block; }
  .post-grid.m-r.m-l .mnote-right { float: right; clear: right; width: min(var(--nw), calc(var(--mr) - 22px)); margin: .15em calc(-1 * var(--mr)) .9em 0; }
  .post-grid.m-l.m-r .mnote-left { float: left; clear: left; width: min(var(--nw), calc(var(--ml) - 22px)); margin: .15em 0 .9em calc(-1 * var(--ml)); }
}

.side-related h2, .side-tags h2 { font-family: var(--hand); font-weight: 400; font-size: 1.5em; margin: 0 0 8px; }
.side-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-related a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; align-items: center; min-height: 64px; padding: 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); text-decoration: none; }
.side-related a:hover, .side-related a:focus-visible { border-color: var(--ink); }
.rel-pic { grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; background: var(--wash); display: grid; place-items: center; }
.rel-pic img { width: 100%; height: 100%; object-fit: cover; }
.rel-letter { font-family: var(--hand); font-size: 2em; color: var(--gold-text); }
.rel-t { font-weight: 700; line-height: 1.25; font-size: .95em; }
.rel-m { font-size: .8em; color: var(--muted); }

/* A graph in the side column is the "Try it yourself" card. */
.post-side .graph { background: var(--wash); border-color: var(--gold); }
.g-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.g-hint { font-size: .88em; color: var(--muted); margin: 8px 0 0; }
.has-drag [data-drag] { cursor: grab; touch-action: none; }
.has-drag [data-drag]:active { cursor: grabbing; }
.g-pic { touch-action: pan-y; }

/* ---------- comics in pencil ---------- */
.comic .panels { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.panel { border: 2.5px solid var(--ink); border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px; box-shadow: 3px 4px 0 rgba(20, 32, 58, .12); }
.panel-wide { grid-column: 1 / -1; }
.panel-n { font-family: var(--hand); font-size: 1.05em; font-weight: 400; color: var(--ink); }
.panel .fig { border: 0; padding: 0; margin: 0; background: none; }

/* ---------- numbered note cards ---------- */
.note-cards { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.note-card { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 18px 18px 14px; }
.note-n { position: absolute; top: -12px; left: 14px; margin: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); font-family: var(--hand); font-size: 1.15em; }
.note-t { font-family: var(--hand); font-weight: 400; font-size: 1.35em; margin: .2em 0 .3em; }
.note-card .fig { border: 0; padding: 0; margin: 0 0 .6em; background: none; }
.note-card p:last-child { margin-bottom: 0; }

/* ---------- pull quote ---------- */
.pull { margin: 0 0 1.5em; padding: 6px 4px 6px 18px; border-left: 4px solid var(--gold); }
.pull blockquote { margin: 0; font-family: var(--hand); font-size: 1.55em; line-height: 1.25; }
.pull blockquote p { margin: 0; }
.pull figcaption { margin-top: 6px; }
.pull figcaption::before { content: "— "; }

/* ---------- the story's stages ---------- */
.stage { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; margin: 2em 0 1em; }
.stage-n { margin: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--gold); font-family: var(--hand); font-size: 1.5em; }
.stage h2 { font-family: var(--hand); font-weight: 400; font-size: 1.8em; margin: .05em 0 .35em; }
.stage .block-k { margin: 0; }
.stage-reveal .stage-n, .stage-limits .stage-n { background: var(--gold); color: var(--ink); }

/* ---------- who is right ---------- */
.who, .levels, .modelbox, .verify, .deepdive { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 1.5em; }
.who-q { font-weight: 600; }
.claims { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.claim-i { display: grid; gap: 8px; padding: 10px; border: 1.5px solid transparent; border-radius: 12px; }
.claim-i .who-pick { justify-self: start; }
.claim-i.is-picked { border-color: var(--ink); background: var(--ground); }
.who-pick[aria-pressed="true"] { background: var(--ink); color: #fff; }
.who-why { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--wash); }
.who-none { margin: 0 0 10px; }
.who-feedback:empty { display: none; }
.who-feedback { border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; background: var(--soft); font-weight: 600; }
.who-key summary, .deepdive summary, .verify summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.who-key ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ---------- before and after ---------- */
.check-before { border-color: var(--ink); }
.check-after { border-color: var(--right); }

/* ---------- one idea at several depths ---------- */
.lv-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.lv-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; font-size: .92em; cursor: pointer; }
.lv-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lv-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: .85em; }
.is-live .lv-h { display: none; }
.lv-panel > :last-child { margin-bottom: 0; }

.deepdive > div { margin-top: 8px; }
.deepdive summary .block-k { margin: 0; }

/* ---------- how sure: established, model, open ---------- */
.claimbox { border: 1.5px solid var(--line); border-left-width: 5px; border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0 0 1.5em; background: var(--paper); }
.claim-tag { margin: 0 0 4px; font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.claim-t { font-weight: 700; margin: 0 0 4px; }
.claimbox p:last-child { margin-bottom: 0; }
.claim-established { border-left-color: var(--right); }
.claim-established .claim-tag { color: var(--right); }
.claim-model { border-left-color: #1f4fa3; }
.claim-model .claim-tag { color: #1f4fa3; }
.claim-open { border-left-color: var(--gold); background: var(--wash); }
.claim-open .claim-tag { color: var(--gold-text); }

.model-cols { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.model-cols > div { background: var(--ground); border-radius: 10px; padding: 10px 12px; }
.model-h { font-weight: 700; margin: 0 0 4px; }
.model-cols ul { margin: 0; padding-left: 1.1em; }
.model-breaks { background: var(--wrong-wash); }

/* ---------- where to go next ---------- */
.pathbox { background: var(--ink); color: #fff; border-radius: 14px; padding: 16px 18px; margin: 0 0 1.5em; }
.pathbox .block-k { color: var(--gold); }
.pathbox ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pathbox li { display: flex; align-items: center; gap: 10px; }
.path-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); font-weight: 700; font-size: .85em; }
.pathbox a { color: #fff; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.pathbox a:focus-visible { outline-color: var(--gold); }

/* ---------- checked by computer ---------- */
.verify { border-color: var(--right); }
.verify-tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--right); color: #fff; font-size: .85em; }
.verify ul { margin: 6px 0 8px; padding-left: 1.2em; }
.verify li { margin: 4px 0; }
.verify-r { font-size: .86em; color: var(--muted); }
.verify-note { font-size: .86em; color: var(--muted); margin: 0; }

@media (max-width: 520px) {
  .who, .levels, .modelbox, .verify, .deepdive, .pathbox { padding: 14px; border-radius: 12px; }
  .stage { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
  .stage-n { width: 40px; height: 40px; font-size: 1.2em; }
  .comic .panels { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .tag { min-height: 36px; }
  .post-top .back { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-side { scroll-behavior: auto; }
}
@media print {
  .post-side, .post-top, .lv-tabs, .who-pick, .g-controls, .g-hint { display: none !important; }
  .lv-panel, .who-why, .lv-h { display: block !important; }
}

/* ---------- drawn scenes (:::scene, lib/blog/scene.js) ----------
   The picture is an SVG; the board, the posters' titles and the speech
   are HTML laid over it at the places the layout gives, in percent, so
   they scale with the picture. Sizes are in cqw, the width of the
   scene, so the words keep their place on the drawing at every width.
   Below 560px the speech leaves the picture and is listed under it. */
.scene { container-type: inline-size; margin: 1.8em 0; }
.scene > .block-k { margin-bottom: 8px; }
.sc-stage { position: relative; }
.sc-pic { position: relative; border: 2.5px solid var(--ink); border-radius: 6px 10px 8px 12px / 10px 6px 12px 8px; overflow: hidden; background: var(--paper); box-shadow: 3px 4px 0 rgba(20, 32, 58, .12); }
.sc-art { display: block; width: 100%; height: auto; }
.sc-board { position: absolute; margin: 0; padding: 3.5cqw 4cqw; list-style: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .35em; overflow: hidden; font-family: var(--hand); font-size: calc(clamp(10px, 2.7cqw, 27px) * var(--bfs, 1)); line-height: 1.25; color: var(--ink); }
.sc-board .katex { font-size: 1.04em; }
.sc-row { display: flex; align-items: center; gap: .35em; }
.sc-rt { position: relative; display: inline-block; isolation: isolate; }
.sc-arrow { color: var(--ink); padding-left: 1.2em; line-height: 1; }
.sc-red { color: #c0302b; }
.sc-blue { color: #2c5fa0; }
.sc-green { color: #2d7a3c; }
.sc-circle .sc-rt { border: 2px solid var(--gold); border-radius: 50%; padding: .05em .45em; }
.sc-x { position: absolute; left: -6%; top: 0; width: 112%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.sc-tick { color: #2d7a3c; font-weight: 700; font-size: 1.2em; }
.sc-poster { position: absolute; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--hand); font-size: clamp(11px, 2.5cqw, 25px); color: var(--ink); line-height: 1.1; }
.sc-says { position: absolute; inset: 0; pointer-events: none; }
.sc-say { position: absolute; pointer-events: auto; display: flex; flex-direction: column; align-items: stretch; }
.sc-who { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-bubble { position: relative; margin: 0; padding: .5em .8em; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 18px 22px 20px 16px / 20px 16px 22px 18px; font-family: var(--hand); font-size: calc(clamp(12px, 2.15cqw, 21px) * var(--fs, 1)); line-height: 1.3; color: var(--ink); box-shadow: 2px 3px 0 rgba(20, 32, 58, .1); }
.sc-bubble::before, .sc-bubble::after { content: ""; position: absolute; left: var(--tail, 50%); width: 0; height: 0; transform: translateX(-50%); border-style: solid; }
.sc-bubble::before { bottom: -15px; border-width: 15px 10px 0; border-color: var(--ink) transparent transparent; }
.sc-bubble::after { bottom: -10px; border-width: 11px 7px 0; border-color: var(--paper) transparent transparent; }
.scene figcaption { margin-top: 8px; font-size: .92em; color: var(--muted); }
@container (max-width: 560px) {
  .sc-says { position: static; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; pointer-events: auto; }
  .sc-say { position: static; width: auto !important; }
  .sc-who { position: static !important; width: auto; height: auto; clip: auto; overflow: visible; font-family: var(--hand); font-size: 1.05em; color: var(--muted); margin: 0 0 2px 4px; }
  .sc-bubble { font-size: 1.08rem; --fs: 1; }
  .sc-bubble::before, .sc-bubble::after { display: none; }
}

/* A dialogue's student and teacher: the same two portraits as the drawn
   scenes, head and shoulders in a circle. The teacher stands on the right
   and is mirrored so the two face each other. */
.face-photo { display: block; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: #eef2ea; }
.face-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.say-teacher .face-photo { background: #f1ece4; }
.say-teacher .face-photo img { transform: scaleX(-1); }
@media (max-width: 560px) { .face-photo { width: 46px; height: 46px; } }


/* ---------- the drawn comic ---------- */
/* Each panel is a picture (lib/comics.js), each balloon a picture of its
   own laid exactly over it, so a balloon can pop in on its own and the
   panels can wrap to fit the screen: two to a row, one on a phone. */
.comicx { margin: 0 0 1.6em; }
.comicx > .block-k { margin-bottom: 10px; }
/* One panel to a row, the student left and the teacher right, as big as
   the column lets it be (capped, so speech is not poster-sized on a desk). */
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 640px; margin: 0 auto; }
.cx-panel { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 3px 4px 0 rgba(20, 32, 58, .14); }
.cx-wide, .cx-ask { grid-column: 1 / -1; }
.cx-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.cx-bubble { pointer-events: none; transform-origin: 50% 70%; transition: opacity .22s ease, transform .28s cubic-bezier(.2, 1.4, .4, 1); }
.cx-bubble.is-off { opacity: 0; transform: scale(.82); }
.cx-bubble.is-on { opacity: 1; transform: none; }
.cx-panel.is-new { animation: cx-in .42s ease both; }
/* A drawn comic in layers: the place, the board, the Mathswariz student
   and teacher, what is written over them, then the sound. Each comes in
   on its own as the panel arrives. */
.cx-panel > img.cx-person { inset: auto; object-fit: fill; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 1.5px rgba(20, 32, 58, .55)) drop-shadow(0 4px 6px rgba(20, 32, 58, .22)); }
.cx-panel > img.cx-flip { transform: scaleX(-1); }
.cx-rich.is-new { animation: cx-fade .3s ease both; }
.cx-rich.is-new > .cx-board { animation: cx-wipe .55s .12s ease-out both; }
.cx-rich.is-new > .cx-person { animation: cx-rise .5s var(--d, .1s) cubic-bezier(.2, 1.2, .4, 1) both; }
.cx-rich.is-new > .cx-person.cx-flip { animation-name: cx-rise-flip; }
.cx-rich.is-new > .cx-over { animation: cx-fade .3s .2s ease both; }
.cx-rich.is-new > .cx-sfx { animation: cx-pop .45s .45s cubic-bezier(.2, 1.6, .4, 1) both; transform-origin: 50% 50%; }
@keyframes cx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cx-rise { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
@keyframes cx-rise-flip { from { opacity: 0; transform: scaleX(-1) translateY(14%); } to { opacity: 1; transform: scaleX(-1); } }
@keyframes cx-pop { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 70% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes cx-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* The character is the button: no box until it is focused or pointed at. */
.cx-who { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 40% 40% 12px 12px; background: transparent; cursor: pointer; }
.cx-who:hover { background: rgba(240, 180, 41, .14); }
.cx-who:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
/* "…" over a character who has something to say. */
.cx-dots { position: absolute; z-index: 1; transform: translate(-50%, -100%); display: flex; gap: 4px; padding: 5px 8px; border-radius: 12px; background: #fff; border: 2px solid var(--ink); pointer-events: none; }
.cx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: cx-dot 1.2s infinite ease-in-out; }
.cx-dots i:nth-child(2) { animation-delay: .15s; }
.cx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cx-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.cx-ask .quiz { margin: 4px 0; border-color: var(--gold); background: var(--wash); }
.cx-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; }
.cx-count { font-size: .9em; color: var(--muted); margin-right: auto; }
.cx-next[disabled] { opacity: .6; cursor: default; }
.cx-text { margin-top: 10px; font-size: .92em; }
.cx-text summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.cx-text ol { list-style: none; padding: 0; margin: 8px 0 0; }
.cx-text li { margin: 6px 0; }
.cx-t-n { font-weight: 700; color: var(--muted); }
@media (max-width: 560px) {
  .cx-dots { padding: 4px 6px; }
}
@media (pointer: coarse) {
  .cx-bar .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-bubble, .cx-panel.is-new, .cx-dots i, .cx-rich.is-new > img { transition: none; animation: none; }
}
@media print {
  .cx-panel[hidden], .cx-ask[hidden] { display: block !important; }
  .cx-bubble { opacity: 1 !important; transform: none !important; }
  .cx-bar, .cx-dots, .cx-who { display: none !important; }
}
/* A lone last panel stays the size of the others, in the middle. */


/* ============================================================
   THE BLOG HOME: the articles and the questions, with a column
   for joining, the email list, sharing, X and the archive
   ============================================================ */
/* The honeypot field sits inside forms whose own input rules set a width, so its size is !important or it spills sideways. */
.vh, .hp { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.blog-home { max-width: 1180px; }
.home-grid { display: grid; gap: 28px; }
.home-main { min-width: 0; }
.blog-side { min-width: 0; display: grid; gap: 16px; align-content: start; }
@media (min-width: 1000px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .blog-side { position: sticky; top: 14px; }
}
.side-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.side-card h2 { font-family: var(--hand); font-weight: 400; font-size: 1.55em; margin: 0 0 6px; }
.side-card p { margin: 0 0 10px; font-size: .95em; }
.side-about p { font-size: 1em; line-height: 1.55; }
.side-about p:last-child { margin-bottom: 0; }
.side-card .side-small { font-size: .85em; color: var(--muted); margin: 8px 0 0; }
.side-join { border-color: var(--gold); background: var(--wash); }
.side-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; }
.side-btn svg { width: 18px; height: 18px; fill: currentColor; }
.side-btn-gold { width: 100%; background: var(--gold); border-color: var(--gold); }
.side-btn-gold:hover, .side-btn-gold:focus-visible { background: #f5c44f; }
.side-btn-x { background: var(--ink); color: #fff; }
.side-btn-soon { border-style: dashed; border-color: var(--line); color: var(--muted); cursor: default; }
.sub-form { display: grid; gap: 8px; }
.sub-form label, .comment-form label { font-weight: 700; font-size: .92em; }
.sub-form input, .comment-form input, .comment-form textarea { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; }
.comment-form textarea { min-height: 110px; resize: vertical; }
.sub-form input:focus, .comment-form input:focus, .comment-form textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(20, 32, 58, .15); }
.sub-form button, .comment-form button[type="submit"] { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.comment-form button[type="submit"] { justify-self: start; }
.sub-form button:disabled, .comment-form button:disabled { opacity: .6; cursor: progress; }
.form-msg { margin: 0; font-size: .9em; min-height: 0; }
.form-msg:empty { display: none; }
.form-msg.good { color: var(--right); font-weight: 600; }
.form-msg.bad { color: var(--wrong); font-weight: 600; }
.arch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .95em; }
.arch-list span { color: var(--muted); }
.side-arch select { width: 100%; min-height: 44px; padding: 6px 10px; font: inherit; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }

/* Share: X, Facebook, and a copy of the link (or the phone's own sheet). */
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share a, .share button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; font-size: .92em; text-decoration: none; cursor: pointer; }
.share a:hover, .share a:focus-visible, .share button:hover, .share button:focus-visible { border-color: var(--ink); }
.share svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.share-done { flex-basis: 100%; margin: 0; font-size: .88em; color: var(--right); font-weight: 600; }
.share-done:empty { display: none; }

/* The thumbs up at the end of an article; hidden until its count loads. */
.likes { margin-top: 2em; }
.like-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.like-btn[hidden] { display: none; }
.like-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.like-btn:hover, .like-btn:focus-visible { background: var(--wash); }
.like-btn.is-on { background: var(--gold); border-color: var(--gold); }
.like-btn.is-on svg { fill: currentColor; }
.like-n { font-variant-numeric: tabular-nums; }
.like-n:empty { display: none; }
.like-n::before { content: "·"; margin-right: 10px; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) { .like-btn.is-on svg { animation: like-pop .3s ease; } }
@keyframes like-pop { 50% { transform: scale(1.25); } }

/* Questions and ideas: comments at the end of each article. */
.comments { margin-top: 2.4em; padding-top: 1.4em; border-top: 1.5px solid var(--line); }
.comments h2 { margin-top: 0; font-family: var(--hand); font-weight: 400; font-size: 1.9em; }
.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.comment-list { margin-bottom: 18px; }
.comment-list:empty { display: none; }
.comment { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.comment.by-mw { border-color: var(--gold); background: var(--wash); }
.comment-replies { margin-top: 10px; padding-left: 16px; border-left: 3px solid var(--soft); }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; }
.comment-head strong { font-weight: 700; }
.comment-head time { font-size: .82em; color: var(--muted); }
.comment-badge { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .74em; font-weight: 700; letter-spacing: .03em; }
.comment-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-reply { margin-top: 6px; }
.link-btn { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: .9em; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; }
.comment-form { display: grid; gap: 8px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.comment-form h3 { margin: 0 0 4px; }
.replying { margin: 0; font-size: .92em; }
@media (pointer: coarse) {
  .link-btn { min-height: 44px; padding-inline: 8px; }
  .arch-list li { min-height: 32px; }
  /* Links set inside a sentence are still pressed with a finger. */
  .side-small a, .post-author .pa-more a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
}

/* ============================================================
   THE ARTICLE'S HEAD AND FOOT: a kicker, the byline with no
   picture, sharing, and "Keep exploring"
   ============================================================ */
.post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 6px; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.post-kicker a { color: var(--gold-text); text-decoration: none; }
.post-kicker a:hover, .post-kicker a:focus-visible { text-decoration: underline; }
.post-kicker .dot { color: var(--muted); }
.post-by { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 6px; padding: 12px 0; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.post-by .byline { margin: 0; color: var(--ink); }
.by-when { margin: 2px 0 0; font-size: .88em; color: var(--muted); }
/* At the top the share buttons are icons: the words are kept for a
   screen reader. */
.by-share .share a span, .by-share .share button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.by-share .share a, .by-share .share button { width: 44px; padding: 0; justify-content: center; }
.by-share .share-done { flex-basis: auto; }
.post-foot { display: grid; gap: 18px; margin-top: 2.4em; padding-top: 1.4em; border-top: 1.5px solid var(--line); }
.post-author .pa-k { margin: 0; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-author .pa-name { margin: 2px 0 4px; font-family: var(--hand); font-size: 1.6em; line-height: 1.1; }
.post-author .pa-more { margin: 0; }
.post-author a, .keep a { font-weight: 700; text-decoration: none; color: var(--ink); }
.post-share h2, .keep h2 { font-family: var(--hand); font-weight: 400; font-size: 1.5em; margin: 0 0 8px; }
.keep { background: var(--paper); border: 1.5px solid var(--gold); border-radius: 14px; padding: 16px 18px; }
.keep-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.keep-list a { display: grid; gap: 1px; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); }
.keep-list a:hover, .keep-list a:focus-visible { border-color: var(--ink); }
.keep-k { font-size: .74em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.keep-t { line-height: 1.25; }
.keep-m { font-size: .8em; color: var(--muted); font-weight: 600; }
.keep-mail { background: var(--wash) !important; border-color: var(--gold) !important; align-content: center; }
.keep .tags { margin: 0; }
@media print { .share, .post-share, .by-share, .keep-mail { display: none !important; } }

/* ---------- leaving the email list (/blog/unsubscribe/) ---------- */
.unsub .unsub-card { max-width: 520px; margin: 0 0 40px; }
.unsub-card p { font-size: 1em; }
.unsub-go { min-height: 44px; padding: 0 22px; margin: 4px 0 12px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.unsub-go:disabled { opacity: .6; cursor: progress; }
.unsub-go[hidden], .unsub-none[hidden], .unsub-ask[hidden] { display: none; }

/* ---------- a note on a phrase: {{words :: note :: above hand}} ----------
   The phrase is underlined and the note is a small bubble with a tail.
   beside: in the line, straight after the phrase, so it wraps with the text.
   above / below: a column, the phrase on the line and the note over or
   under it. The note's box is 0 wide so it never pushes the next word
   along; its words overflow to the right, and the page script moves it
   back when it would run past the column. */
/* The underline sits under the letters' tails (q, y, p), not through them:
   at the default place it is broken round each tail and the letter reads as
   cut off. */
.nb-w { text-decoration: underline dotted var(--gold-text); text-decoration-thickness: 2px; text-underline-position: under; text-underline-offset: 2px; text-decoration-skip-ink: none; }
.nb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb-t { display: inline-block; position: relative; max-width: min(19em, 82vw); padding: .5em .85em .55em; text-align: left; overflow-wrap: anywhere; text-indent: 0; }
.nb-plain .nb-t { font-family: var(--body); font-size: .94em; line-height: 1.5; font-weight: 400; font-style: normal; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 9px; box-shadow: 0 2px 6px rgba(20, 32, 58, .08); }
.nb-hand .nb-t { font-family: var(--note); font-size: 1.32em; line-height: 1.45; padding: .6em 1em .7em; font-weight: 400; font-style: normal; background: var(--wash); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px 20px 18px 14px / 18px 14px 20px 16px; box-shadow: 2px 2px 0 rgba(20, 32, 58, .12); }
.nb-hand .nb-w { text-decoration-style: wavy; text-decoration-thickness: 1.5px; }
.nb-t::before { content: ""; position: absolute; width: 9px; height: 9px; background: inherit; border: inherit; border-radius: 0; }
.nb-beside .nb-note { display: inline; margin-left: .75em; }
.nb-beside .nb-t { vertical-align: .05em; margin: .3em 0; }
.nb-beside .nb-t::before { left: -6px; top: calc(50% - 5px); border-top: 0; border-right: 0; transform: rotate(45deg); }
/* Tall, or wrapped onto the next line (the page script adds nb-down): on
   its own line under the words, a gap above, the tail pointing up at them. */
.nb-beside.nb-down .nb-note { display: block; margin-left: 0; }
.nb-beside.nb-down .nb-t { vertical-align: top; margin: .85em 0 .55em; }
.nb-beside.nb-down .nb-t::before { left: var(--nb-tail, 1.1em); top: -6px; border-bottom: 0; border-right: 0; border-top: inherit; border-left: inherit; }
/* Above and below: a one-column inline grid. Its bottom (above) or top
   (below) lines up with the line's text, so the words stay on the line and
   the note makes the line taller rather than covering the line next to it.
   The note is width 0, so it never widens the words' column. */
.nb-above, .nb-below { display: inline-grid; grid-template-columns: max-content; text-indent: 0; }
.nb-above { vertical-align: text-bottom; }
.nb-below { vertical-align: text-top; }
.nb-above .nb-note { grid-row: 1; }
.nb-above .nb-w, .nb-below .nb-w { line-height: normal; }
.nb-above .nb-w { grid-row: 2; }
.nb-above .nb-note, .nb-below .nb-note { display: block; width: 0; overflow: visible; white-space: normal; }
.nb-above .nb-t, .nb-below .nb-t { display: block; width: max-content; left: var(--nb-dx, 0px); }
/* The gaps are set in the line's own font size, on the note's column, so
   they do not grow with a larger note face. Below a phrase the gap clears
   the underline (a wavy one reaches about 7px under the words) and the
   tail; above it, the tail and the tops of the letters. */
.nb-above .nb-note { padding: .25em 0 .8em; }
.nb-below .nb-note { padding: 1.2em 0 .45em; }
.nb-above .nb-t, .nb-below .nb-t { margin: 0 0 0 -.3em; }
.nb-above .nb-t::before { left: calc(1.1em - var(--nb-dx, 0px)); bottom: -6px; border-top: 0; border-left: 0; transform: rotate(45deg); }
.nb-below .nb-t::before { left: calc(1.1em - var(--nb-dx, 0px)); top: -6px; border-bottom: 0; border-right: 0; transform: rotate(45deg); }
@media print { .nb-t { box-shadow: none; } }