/* Layout: one textbook page — a measured text column with a Tufte-style outer margin for notes; figures may break into the margin. */
:root {
  --paper: #fdfdfb;
  --ink: #1b1b1a;
  --ink-soft: #55534e;
  --rule: #1b1b1a;
  --hair: #c9c6bd;
  --ref: #1d3f8f;          /* hyperref link colour */
  --cite: #2f6b3a;         /* hyperref citecolor */
  --shade: #f1f0ea;        /* lstlisting / theorem shading */
  --serif: "Latin Modern Roman", "CMU Serif", "STIX Two Text", "Times New Roman", Georgia, serif;
  --mono: "Latin Modern Mono", "CMU Typewriter Text", "Inconsolata", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1a19; --ink: #e7e4dc; --ink-soft: #a7a397; --rule: #e7e4dc; --hair: #4a4842;
    --ref: #9fb6ec; --cite: #93c79d; --shade: #24241f; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1a1a19; --ink: #e7e4dc; --ink-soft: #a7a397; --rule: #e7e4dc; --hair: #4a4842;
  --ref: #9fb6ec; --cite: #93c79d; --shade: #24241f; color-scheme: dark;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 3rem;
}
.page { max-width: 40rem; margin: 0 auto; position: relative; }
@media (min-width: 1100px) { .page { transform: translateX(-6.5rem); } }

a { color: var(--ref); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible { outline: 1px dotted var(--ref); outline-offset: 2px; }
a.cite { color: var(--cite); }

.sc { font-variant: small-caps; letter-spacing: .03em; }
code, .tt { font-family: var(--mono); font-size: .92em; }
p { margin: 0; text-align: justify; hyphens: auto; }
p + p { text-indent: 1.5em; }
.noindent { text-indent: 0 !important; }

/* running head */
.runhead {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; font-style: italic;
  border-bottom: .5px solid var(--rule);
  padding-block: 1.6rem .3rem; margin-bottom: 3.5rem;
}
.runhead .sc { font-style: normal; }

/* title block */
.titleblock { text-align: center; margin-bottom: 2.6rem; }
.titleblock h1 {
  font-weight: 400; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.1;
  margin: 0 0 .6rem; letter-spacing: -.01em; text-wrap: balance;
}
.titleblock h1 .arrow { font-size: .8em; padding-inline: .15em; }
.titleblock .subtitle { font-size: 1.2rem; font-style: italic; margin-bottom: 1.4rem; text-wrap: balance; }
.titleblock .author { font-variant: small-caps; letter-spacing: .06em; font-size: 1.02rem; }
.titleblock .author a { color: inherit; text-decoration: none; }
.titleblock .affil { font-style: italic; font-size: .92rem; color: var(--ink-soft); }
.titleblock .date { font-size: .9rem; color: var(--ink-soft); margin-top: .2rem; }

.abstract { margin: 0 auto 2.6rem; max-width: 33rem; font-size: .92rem; }
.abstract h2 { text-align: center; font-size: .92rem; font-weight: 700; margin: 0 0 .4rem; }

/* contents */
.toc { margin-bottom: 3rem; }
.toc h2 { font-size: 1.45rem; font-weight: 700; margin: 0 0 1rem; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.toc li { display: flex; align-items: baseline; gap: .5rem; }
.toc li.chap { font-weight: 700; margin-top: .5rem; }
.toc .num { min-width: 2.2rem; font-variant-numeric: tabular-nums; }
.toc li.sec .num { margin-left: 1.5rem; }
.toc .lead { flex: 1; border-bottom: 1.5px dotted var(--hair); transform: translateY(-.3em); min-width: 1rem; }
.toc .pg { font-variant-numeric: tabular-nums; min-width: 1.4rem; text-align: right; }
.toc a { color: inherit; }
.toc a:hover { color: var(--ref); text-decoration: none; }

/* chapter + sections */
.chapter-head { margin: 4rem 0 2.2rem; }
.chapter-head .label { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.1rem; }
.chapter-head h2 { font-size: 2.3rem; font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
h3 { font-size: 1.3rem; font-weight: 700; margin: 2.6rem 0 .8rem; display: flex; gap: 1em; text-wrap: balance; }
h4 { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .4rem; }

/* margin notes */
.mnote {
  float: right; clear: right;
  width: 11.5rem; margin-right: -13.5rem; margin-top: .25rem;
  font-size: .78rem; line-height: 1.35; text-align: left; text-indent: 0;
  color: var(--ink-soft);
}
.mnote sup { color: var(--ink); }
@media (max-width: 1099px) {
  .mnote { float: none; display: block; width: auto; margin: .6rem 0 .6rem 1.5rem; padding-left: .7rem; border-left: .5px solid var(--hair); }
}

/* definitions & theorems (amsthm look) */
.thm { margin: 1.4rem 0; text-indent: 0; }
.thm .head { font-weight: 700; }
.thm.def .body { font-style: normal; }
.thm .body { font-style: italic; }
.thm .note { font-weight: 400; }
.proof { margin: .6rem 0 1.4rem; }
.proof em:first-child { font-style: italic; }
.qed { float: right; }

/* displays */
.display { margin: 1.3rem 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; }
.display .eqn { text-align: right; font-variant-numeric: tabular-nums; }
.display .body { min-width: 0; overflow-x: auto; }

.deriv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .9rem; row-gap: .35rem; align-items: baseline; margin: 1.4rem 0; overflow-x: auto; }
.deriv .arr { white-space: nowrap; text-align: right; font-size: 1.05rem; }
.deriv .arr sub { font-size: .62em; font-style: italic; }
.deriv code { white-space: pre; font-size: .84rem; }
.deriv .ext { color: var(--ink-soft); font-size: .82rem; font-style: italic; white-space: nowrap; }

/* inference rules */
.rules { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: center; margin: 1.6rem 0; }
.rule { display: inline-grid; grid-template-columns: auto auto; column-gap: .6rem; align-items: center; max-width: 100%; }
.rule .frac { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rule .prem { display: flex; gap: 1.6rem; padding: 0 .6rem .25rem; flex-wrap: wrap; justify-content: center; font-size: .92rem; }
.rule .concl { border-top: .7px solid var(--rule); padding: .25rem .6rem 0; font-size: .92rem; text-align: center; }
.rule .name { font-variant: small-caps; font-size: .85rem; letter-spacing: .03em; }
.rule code { font-size: .8rem; }

/* grammar */
.bnf { display: grid; grid-template-columns: auto auto minmax(0,1fr); column-gap: .6rem; row-gap: .15rem; margin: 1.3rem 0 1.3rem 1.5rem; font-size: .95rem; overflow-x: auto; }
.bnf .nt { font-style: italic; white-space: nowrap; }
.bnf .op { text-align: center; }
.bnf b { font-family: var(--mono); font-weight: 600; font-size: .9em; }

/* figures */
figure { margin: 2.2rem 0; }
figure .art { overflow-x: auto; }
figure.wide { margin-right: 0; }
@media (min-width: 1100px) { figure.wide { margin-right: -13.5rem; } }
figure svg { display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto; }
#fig-boot svg { max-width: 24rem; }
figcaption { font-size: .88rem; margin-top: .8rem; text-align: left; }
figcaption b { font-weight: 700; }
.tee path, .tee rect { fill: var(--paper); stroke: var(--rule); stroke-width: 1.1; }
.tee text { fill: var(--ink); font-family: var(--mono); text-anchor: middle; dominant-baseline: middle; }
.tee text.tool { font-family: var(--serif); font-style: italic; fill: var(--ink-soft); }
.tee .mach path { fill: var(--shade); }

/* listings */
.listing { margin: 1.6rem 0; }
.listing pre {
  margin: 0; padding: .7rem .9rem; overflow-x: auto;
  border-top: .7px solid var(--rule); border-bottom: .7px solid var(--rule);
  font-family: var(--mono); font-size: .8rem; line-height: 1.45; counter-reset: ln;
}
.listing pre span.l { display: block; counter-increment: ln; }
.listing pre span.l::before { content: counter(ln); display: inline-block; width: 1.8rem; margin-right: .8rem; text-align: right; color: var(--ink-soft); font-size: .72rem; }
.listing .kw { font-weight: 600; }
.listing .cm { font-style: italic; color: var(--ink-soft); }
.listing .cap { font-size: .88rem; margin-bottom: .45rem; }

/* booktabs tables */
.tablewrap { overflow-x: auto; margin: 1.8rem 0; }
table.booktabs { border-collapse: collapse; margin: 0 auto; font-size: .9rem; font-variant-numeric: tabular-nums; }
table.booktabs caption { caption-side: top; font-size: .88rem; text-align: left; padding-bottom: .6rem; }
table.booktabs th, table.booktabs td { padding: .28rem .9rem; text-align: left; vertical-align: baseline; }
table.booktabs thead tr:first-child th { border-top: 1.4px solid var(--rule); }
table.booktabs thead tr:last-child th { border-bottom: .7px solid var(--rule); font-weight: 700; }
table.booktabs tbody tr:last-child td { border-bottom: 1.4px solid var(--rule); }
table.booktabs tbody tr:first-child td { padding-top: .45rem; }
table.booktabs td.c { text-align: center; }

/* exercises */
.exercises { margin-top: 1rem; display: grid; gap: .9rem; }
.ex { display: grid; grid-template-columns: 3.4rem minmax(0,1fr); gap: .3rem; }
.ex .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.ex .n .star { font-weight: 400; }
.ex pre { margin: .45rem 0 0; padding: .45rem .7rem; background: var(--shade); font-family: var(--mono); font-size: .82rem; overflow-x: auto; }

/* footnotes */
.footnotes { margin-top: 2.5rem; font-size: .8rem; }
.footnotes hr { width: 35%; margin: 0 0 .5rem; border: 0; border-top: .5px solid var(--rule); }
.footnotes p { text-indent: 0 !important; margin-bottom: .2rem; }
sup.fn { font-size: .65em; line-height: 0; }

/* bibliography */
.bib { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .45rem 1rem; font-size: .9rem; margin-top: 1rem; }
.bib .key { white-space: nowrap; }
.bib i { font-style: italic; }

/* plates: wrapfigure-style line drawings floated right of the text */
figure.plate { float: right; width: 14.5rem; margin: .35rem 0 .9rem 1.6rem; }
figure.plate svg { display: block; width: 100%; height: auto; }
figure.plate figcaption { font-size: .74rem; line-height: 1.35; font-style: italic; color: var(--ink-soft); margin-top: .35rem; text-align: center; text-wrap: balance; }
figure.plate figcaption .pl { font-style: normal; font-variant: small-caps; letter-spacing: .04em; color: var(--ink); }
@media (max-width: 1099px) {
  h3, .chapter-head, .deriv, .display, .rules, .listing, .tablewrap, figure:not(.plate), .bnf, .footnotes { clear: both; }
}
/* wide screens: the plates move out of the text into the outer margin, beside their paragraph */
@media (min-width: 1100px) {
  figure.plate { clear: right; width: 14.5rem; margin: .3rem -16rem 1.2rem 1.5rem; }
  figure.plate figcaption { text-align: left; }
}
.ill path, .ill rect, .ill line, .ill circle, .ill polygon, .ill polyline { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; }
.ill .f { fill: var(--shade); }
.ill .p { fill: var(--paper); }
.ill .h { stroke: var(--hair); }
.ill .d { stroke-dasharray: 3 3; }
.ill text { fill: var(--ink); font-family: var(--mono); font-size: 9px; text-anchor: middle; dominant-baseline: middle; }
.ill text.s { text-anchor: start; }
.ill text.soft { fill: var(--ink-soft); }
@media (max-width: 560px) {
  figure.plate { float: none; width: auto; max-width: 15rem; margin: 1.4rem auto; }
}

.folio { text-align: center; margin-top: 3rem; font-variant-numeric: tabular-nums; }
.colophon { text-align: center; font-size: .78rem; color: var(--ink-soft); font-style: italic; margin-top: 1.2rem; }

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  p { text-align: left; }
  .chapter-head h2 { font-size: 1.8rem; }
  .ex { grid-template-columns: 2.8rem minmax(0,1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .titleblock, .abstract { animation: inkin .9s ease-out both; }
  .abstract { animation-delay: .15s; }
  @keyframes inkin { from { opacity: .35; filter: blur(.6px); } to { opacity: 1; filter: none; } }
}

/* Two-colour printing: a Prussian-blue spot ink with its tints, and an ochre second ink for marks. */
:root {
  --spot: #1a56a0;
  --spot-tint: #b9d1ec;
  --spot-wash: #e9f1fa;
  --ochre: #c47c14;
  --ochre-wash: #faf0dc;
  --ref: #1a56a0;
  --shade: #d6e4f4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --spot: #7fafec; --spot-tint: #284766; --spot-wash: #1b293c;
    --ochre: #eaab47; --ochre-wash: #322714; --ref: #7fafec; --shade: #273d58;
  }
}
:root[data-theme="dark"] {
  --spot: #7fafec; --spot-tint: #284766; --spot-wash: #1b293c;
  --ochre: #eaab47; --ochre-wash: #322714; --ref: #7fafec; --shade: #273d58;
}

.runhead { border-bottom-color: var(--spot); }
.runhead .sc { color: var(--spot); }
.titleblock h1 .arrow { color: var(--ochre); }
.titleblock .author { color: var(--spot); }

.toc h2, .toc li.chap a, .toc .num { color: var(--spot); }
.toc .lead { border-bottom-color: var(--spot-tint); }

.chapter-head { border-top: 3px solid var(--spot); padding-top: 1.2rem; }
.chapter-head .label { color: var(--spot); font-variant: small-caps; letter-spacing: .06em; }
h3 > span:first-child { color: var(--spot); }
h4, .abstract h2 { color: var(--spot); }

/* theorem-like environments as tinted boxes */
.thm { background: var(--spot-wash); border-left: 3px solid var(--spot); padding: .8rem 1rem; }
.thm.def { background: var(--ochre-wash); border-left-color: var(--ochre); }
.thm .head { color: var(--spot); }
.thm.def .head { color: var(--ochre); }
.qed { color: var(--ochre); }

.deriv .arr { color: var(--spot); }
.deriv .ext { color: var(--ochre); }
.display .eqn { color: var(--spot); }
.rule .concl { border-top-color: var(--spot); }
.rule .name { color: var(--spot); }
.bnf .nt { color: var(--spot); }

.listing pre { background: var(--spot-wash); border-color: var(--spot); }
.listing .kw { color: var(--spot); }
.listing .cap b, figcaption b, table.booktabs caption b { color: var(--spot); }

table.booktabs thead tr:first-child th, table.booktabs tbody tr:last-child td { border-color: var(--spot); }
table.booktabs thead tr:last-child th { color: var(--spot); border-bottom-color: var(--spot-tint); }

.tee path { fill: var(--spot-wash); stroke: var(--spot); }
.tee .mach path { fill: var(--ochre-wash); stroke: var(--ochre); }

figure.plate figcaption .pl { color: var(--spot); }
.ill .f { fill: var(--spot-tint); }
.ill path, .ill rect, .ill line, .ill circle, .ill polygon, .ill polyline { stroke: var(--spot); }
.ill .h { stroke: var(--spot-tint); }
.ill text { fill: var(--spot); }
.ill text.soft { fill: var(--ochre); }

.mnote { border-left-color: var(--ochre); }
.ex .n { color: var(--spot); }
.ex .n .star, sup.fn { color: var(--ochre); }
.ex pre { background: var(--spot-wash); border-left: 2px solid var(--spot); }
.footnotes hr { border-top-color: var(--spot); }
.bib .key { color: var(--spot); }
.folio { color: var(--spot); }

.tldr { margin: 0 0 1.8rem; padding: .75rem 1rem; border: 1px solid var(--spot-tint); background: var(--spot-wash); font-size: .95rem; text-indent: 0; }
.tldr .k { font-variant: small-caps; letter-spacing: .05em; color: var(--spot); font-weight: 700; margin-right: .4em; }
.sig { font-family: var(--mono); font-size: .82rem; color: var(--ink-soft); margin: -1.2rem 0 1.4rem; }
.try { margin: 1.4rem 0 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: .3rem .8rem; align-items: baseline; font-size: .92rem; }
.try .k { font-variant: small-caps; letter-spacing: .05em; color: var(--ochre); font-weight: 700; }
.try pre { margin: 0; padding: .4rem .7rem; background: var(--spot-wash); border-left: 2px solid var(--spot); font-family: var(--mono); font-size: .8rem; overflow-x: auto; }
.snip { margin: 1.3rem 0; padding: .55rem .9rem; overflow-x: auto; border-top: .7px solid var(--spot); border-bottom: .7px solid var(--spot); background: var(--spot-wash); font-family: var(--mono); font-size: .8rem; line-height: 1.5; white-space: pre; clear: both; }
.snip .cm { color: var(--ink-soft); font-style: italic; }

/* Appendix A: the model table. Group rows, right-aligned numbers, and pips for how far each spec gets. */
#tab-zoo th.n, #tab-zoo td.n { text-align: right; }
#tab-zoo { font-size: .86rem; }
#tab-zoo td { padding-top: .18rem; padding-bottom: .18rem; }
#tab-zoo td:nth-child(4), #tab-zoo td:nth-child(5), #tab-zoo td:last-child { white-space: nowrap; }
@media (min-width: 1100px) { .tablewrap.wide { margin-right: -13.5rem; } }
@media (max-width: 760px) { #tab-zoo { min-width: 42rem; } #tab-zoo th, #tab-zoo td { padding-left: .5rem; padding-right: .5rem; } }
#tab-zoo tr.grp th { font-weight: 400; font-style: italic; color: var(--spot); padding-top: .9rem; border-bottom: .5px solid var(--spot-tint); }
#tab-zoo tbody tr:first-child th { padding-top: .45rem; }
.pips { display: inline-flex; gap: 2px; margin-right: .5em; vertical-align: .05em; }
.pips i { width: .45rem; height: .45rem; border: .7px solid var(--spot); }
.pips i.on { background: var(--spot); }