typeset.css

The CSS implementation. Everything is scoped to .typeset, so it cannot leak into surrounding markup. Drop it in and add the class.
Fonts are not included. The page must load EB Garamond, Source Sans 3 and IBM Plex Mono itself. For a document you send, self-host and embed them rather than fetching from a CDN at print time — and note that Google's build of EB Garamond has no real small caps, so the browser synthesises them. Browse the font files →
1072 lines · 31.6 KB
1/* ==========================================================================
 typeset.css — a print stylesheet for essays, letters, and reports.
 Units are in points. Everything is scoped to `.typeset`.
 ========================================================================== */
5
6/*! @s tokens :: Tokens */
typeset {
/* Families */
--ts-serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
--ts-sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ts-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
12
/* Scale — 11pt base, ~1.2 ratio */
--ts-xs: 8pt;
--ts-sm: 9.5pt;
--ts-base: 11pt;
--ts-h4: 12pt;
--ts-h3: 14pt;
--ts-h2: 18pt;
--ts-h1: 24pt;
21
/* Rhythm */
--ts-leading: 1.45;
--ts-leading-tight: 1.2;
--ts-space: 11pt;          /* one line of base leading, near enough */
--ts-measure: 33em;        /* ~66 characters at 11pt serif */
27
/* Ink — never pure black: it blooms on laser and glares in a PDF */
--ts-ink: #1a1a1a;
--ts-ink-muted: #5a5a5a;
--ts-ink-faint: #8a8a8a;
--ts-rule: #c9c4bd;
--ts-rule-strong: #6f6a64;
--ts-wash: #f4f1ec;
--ts-accent: #7a1f1f;      /* oxblood: reads as dark grey in greyscale */
36}
37/*! @e */
38
39/*! @s foundation :: Foundation */
typeset {
font-family: var(--ts-serif);
font-size: var(--ts-base);
font-variant-numeric: oldstyle-nums proportional-nums;
line-height: var(--ts-leading);
color: var(--ts-ink);
text-rendering: optimizeLegibility;
font-kerning: normal;
font-feature-settings: "liga" 1, "kern" 1;
49}
50
51/* Measure is a property of the text column, not the page. */
typeset > * {
max-width: var(--ts-measure);
54}
55
typeset--wide { --ts-measure: 40em; }
typeset--narrow { --ts-measure: 27em; }
58/*! @e */
59
60/*! @s page :: Page setup */
61@page {
size: A4;                        /* or: Letter */
margin: 25mm 22mm 25mm 22mm;
64
/* Margin boxes need a paged-media engine: Paged.js, WeasyPrint, Prince.
   Chrome's own print dialog ignores them. */
@top-center {
  content: string(ts-running-head);
  font: 8pt/1 "Source Sans 3", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}
@bottom-center {
  content: counter(page);
  font: 9pt/1 "EB Garamond", serif;
  font-variant-numeric: oldstyle-nums;
  color: #5a5a5a;
}
80}
81
82/* No running head or folio on the opening page. */
83@page :first {
@top-center { content: none; }
@bottom-center { content: none; }
86}
87
88/* Duplex binding: mirror the inner margin so the gutter stays put. */
89@page :left  { margin-left: 22mm; margin-right: 28mm; }
90@page :right { margin-left: 28mm; margin-right: 22mm; }
91
92/* The running head follows the current section. */
typeset h2 { string-set: ts-running-head content(text); }
94/*! @e */
95
96/*! @s headings :: Headings */
typeset h1,
typeset h2,
typeset h3,
typeset h4,
typeset h5,
typeset h6 {
font-family: var(--ts-sans);
font-weight: 600;
line-height: var(--ts-leading-tight);
color: var(--ts-ink);
107
/* A heading belongs to what follows it, not to what precedes it. */
margin: calc(var(--ts-space) * 2) 0 calc(var(--ts-space) * 0.5);
110
/* Never strand a heading at the foot of a page. */
break-after: avoid;
break-inside: avoid;
text-wrap: balance;
115}
116
typeset h1 {
font-size: var(--ts-h1);
font-weight: 300;
letter-spacing: -0.015em;
margin-top: 0;
122}
123
typeset h2 {
font-size: var(--ts-h2);
letter-spacing: -0.01em;
127}
128
typeset h3 { font-size: var(--ts-h3); }
130
typeset h4 { font-size: var(--ts-h4); }
132
133/* Below h4, drop the size change and shift register instead. */
typeset h5 {
font-size: var(--ts-base);
font-family: var(--ts-serif);
font-weight: 600;
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
140}
141
typeset h6 {
font-size: var(--ts-base);
font-family: var(--ts-serif);
font-weight: 400;
font-style: italic;
147}
148
149/* A run-in heading: the h6 sits on the first line of its paragraph. */
typeset .ts-run-in {
display: inline;
margin: 0;
153}
typeset .ts-run-in + p { display: inline; }
typeset .ts-run-in::after { content: " · "; color: var(--ts-ink-faint); }
156/*! @e */
157
158/*! @s numbering :: Section numbering */
typeset--numbered { counter-reset: ts-h2; }
160
typeset--numbered h2 {
counter-increment: ts-h2;
counter-reset: ts-h3;
164}
typeset--numbered h2::before {
content: counter(ts-h2) "  ";
color: var(--ts-ink-faint);
font-variant-numeric: lining-nums tabular-nums;
169}
170
typeset--numbered h3 { counter-increment: ts-h3; }
typeset--numbered h3::before {
content: counter(ts-h2) "." counter(ts-h3) "  ";
color: var(--ts-ink-faint);
font-variant-numeric: lining-nums tabular-nums;
176}
177/*! @e */
178
179/*! @s paragraphs :: Paragraphs */
typeset {
/* Paragraph separation is one decision expressed as two values: a gap, or an
   indent, never both. A template sets these; nothing else needs to know. */
--ts-para-gap: var(--ts-space);
--ts-para-indent: 0;
185}
186
typeset--indented {
--ts-para-gap: 0;
--ts-para-indent: 1.5em;
190}
191
typeset p {
margin: 0 0 var(--ts-para-gap);
text-indent: var(--ts-para-indent);
orphans: 2;   /* no single line left at the foot of a page */
widows: 2;    /* no single line carried to the head of the next */
197}
198
199/* The first paragraph after a heading, block or break is flush: the thing above
 it has already marked the start.
201
 Enumerated rather than written as `:is(...)`. Paged.js rewrites every
 stylesheet through its own CSS parser, which does not understand `:is()`: it
 splits the selector on the commas INSIDE the argument list and emits fragments
 like ` .ts-callout)+p`, which throw on querySelectorAll and abort pagination
 entirely — a blank document, not a degraded one. Keep this list flat. */
typeset h1 + p,
typeset h2 + p,
typeset h3 + p,
typeset h4 + p,
typeset h5 + p,
typeset h6 + p,
typeset blockquote + p,
typeset figure + p,
typeset pre + p,
typeset table + p,
typeset .ts-break + p,
typeset .ts-callout + p,
typeset > p:first-child {
text-indent: 0;
221}
222/*! @e */
223
224/*! @s justification :: Justification & hyphenation */
225/* Justification without hyphenation opens rivers of white space.
 Both, or neither. And `lang` must be set — hyphenation is per-language. */
typeset--justified {
text-align: justify;
text-align-last: left;      /* the last line is never stretched */
text-justify: inter-word;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;     /* min word, before break, after break */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
hyphenate-limit-lines: 2;         /* never stack 3 hyphens in a row */
236}
237
238/* Ragged right. This is the default — the point of naming it is so a document
 can state the choice rather than express it as the absence of a class, and so
 the two options read as siblings in the source.
241
 `text-wrap: pretty` asks the engine to spend more effort on the rag: it
 avoids a very short last line and evens out the right edge, which is the one
 thing a ragged setting can get wrong. Hyphenation stays off — a hyphen exists
 to help justification, and without justification it only breaks a word for
 no gain. */
typeset--ragged {
text-align: left;
text-align-last: left;
hyphens: manual;
text-wrap: pretty;
252}
253
254/* `text-align-last` inherits as well, so a block that centres itself must
 restore it — otherwise its last line, which for a one-line block is its only
 line, is flushed left. See .ts-pullquote and .ts-break.
257
 Never justify a heading, a cell, or a listing. Every other block that must
 stay flush left — subtitle, byline, caption, address, notes — declares
 `text-align: left` in its own rule, because a direct match always beats an
 inherited value and its descendants then inherit `left` in turn. Relying on
 an exception list here instead means every new block silently opts in. */
typeset--justified h1,
typeset--justified h2,
typeset--justified h3,
typeset--justified h4,
typeset--justified td,
typeset--justified pre { text-align: left; hyphens: manual; }
269/*! @e */
270
271/*! @s dropcap :: Drop cap */
typeset .ts-dropcap::first-letter {
float: left;
font-family: var(--ts-serif);
font-size: 3.05em;         /* tuned to cover exactly three lines */
line-height: 0.86;
font-weight: 400;
color: var(--ts-accent);
padding: 0.02em 0.06em 0 0;
280}
typeset .ts-dropcap { text-indent: 0; }
282
283/* A drop cap wants the opening words in small caps to bridge the size jump. */
typeset .ts-lede { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
285/*! @e */
286
287/*! @s inline :: Inline emphasis */
typeset strong, .typeset b { font-weight: 600; }
typeset em, .typeset i { font-style: italic; }
typeset em em, .typeset em i { font-style: normal; }   /* nested emphasis flips */
typeset strong em, .typeset em strong { font-weight: 600; font-style: italic; }
292
293/* Small caps for named entities, acronyms, and stage directions. */
typeset .ts-sc {
font-variant-caps: all-small-caps;
letter-spacing: 0.05em;
font-variant-numeric: oldstyle-nums;
298}
299
typeset abbr[title] {
font-variant-caps: all-small-caps;
letter-spacing: 0.05em;
text-decoration: none;
border-bottom: 0.5pt dotted var(--ts-ink-faint);
305}
306
typeset s, .typeset del { text-decoration: line-through; color: var(--ts-ink-muted); }
typeset ins { text-decoration: underline; text-underline-offset: 0.15em; }
typeset mark { background: var(--ts-wash); box-shadow: 0 0 0 2pt var(--ts-wash); }
310
311/* Real super/subscripts, not shifted full-size digits. */
typeset sup, .typeset sub {
font-size: 0.72em;
line-height: 0;
position: relative;
vertical-align: baseline;
317}
typeset sup { top: -0.45em; }
typeset sub { bottom: -0.22em; }
320
typeset kbd {
font: 0.85em/1 var(--ts-sans);
padding: 0.15em 0.35em;
border: 0.5pt solid var(--ts-rule);
border-bottom-width: 1.5pt;
border-radius: 2pt;
327}
328/*! @e */
329
330/*! @s code-inline :: Inline code */
typeset code {
font-family: var(--ts-mono);
font-size: 0.86em;          /* mono runs large; pull it back optically */
font-variant-ligatures: none;
background: var(--ts-wash);
padding: 0.1em 0.28em;
border-radius: 2pt;
overflow-wrap: break-word;
339}
340/*! @e */
341
342/*! @s links :: Links in print */
typeset a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.5pt;
text-underline-offset: 0.14em;
text-decoration-skip-ink: auto;
349}
350
351/* Paper has no hover. Spell out external URLs where they carry information. */
352@media print {
.typeset a[href^="http"]::after {
  content: " (" attr(href) ")";
  font: 0.82em var(--ts-mono);
  color: var(--ts-ink-muted);
  word-break: break-all;
}
/* Internal and mailto links read fine as-is. */
.typeset a[href^="#"]::after,
.typeset a[href^="mailto"]::after,
.typeset a.ts-bare::after { content: none; }
363}
364/*! @e */
365
366/*! @s figures-numeric :: Figures */
367/* Old-style figures sit in the x-height and belong in running prose.
 Lining figures are uniform-height and belong in headings and tables.
 Tabular figures share one advance width so columns align. */
typeset .ts-nums-oldstyle { font-variant-numeric: oldstyle-nums proportional-nums; }
typeset .ts-nums-lining   { font-variant-numeric: lining-nums proportional-nums; }
typeset .ts-nums-tabular  { font-variant-numeric: lining-nums tabular-nums; }
typeset .ts-frac          { font-variant-numeric: diagonal-fractions; }
374/*! @e */
375
376/*! @s quotes :: Block quotations */
typeset blockquote {
margin: calc(var(--ts-space) * 1.25) 0;
padding-left: calc(var(--ts-space) * 1.5);
border-left: 1pt solid var(--ts-rule);
color: var(--ts-ink);
font-size: 10.5pt;
break-inside: avoid;
384}
typeset blockquote > :last-child { margin-bottom: 0; }
386
387/* Attribution: an em dash, and never inside the quote. */
typeset blockquote cite,
typeset .ts-attribution {
display: block;
text-align: left;
margin-top: calc(var(--ts-space) * 0.5);
font-size: var(--ts-sm);
font-style: normal;
color: var(--ts-ink-muted);
396}
typeset blockquote cite::before,
typeset .ts-attribution::before { content: "— "; }
399
400/* An epigraph opens a chapter: no rule, indented from the right, italic. */
typeset .ts-epigraph {
border: 0;
text-align: left;
margin: 0 0 calc(var(--ts-space) * 2) auto;
padding: 0;
max-width: 24em;
font-style: italic;
font-size: 10pt;
color: var(--ts-ink-muted);
410}
typeset .ts-epigraph cite { font-style: normal; }
412
413/* A pull quote is display type lifted from the body. It repeats — so it must
 never be the only place a claim appears. */
typeset .ts-pullquote {
border: 0;
text-align: center;
text-align-last: center;
border-top: 1.5pt solid var(--ts-rule-strong);
border-bottom: 0.5pt solid var(--ts-rule);
padding: var(--ts-space) 0;
margin: calc(var(--ts-space) * 1.5) 0;
font-family: var(--ts-sans);
font-size: 15pt;
font-weight: 300;
line-height: 1.3;
text-wrap: balance;
428}
429
430/* Verse: preserve the poet's line breaks, indent the runovers. */
typeset .ts-verse {
border: 0;
text-align: left;
padding-left: calc(var(--ts-space) * 2);
white-space: pre-line;
font-size: var(--ts-base);
text-indent: -1.5em;
padding-inline-start: calc(var(--ts-space) * 2 + 1.5em);
439}
440/*! @e */
441
442/*! @s lists :: Lists */
typeset ul,
typeset ol {
margin: 0 0 var(--ts-space);
padding-left: 1.4em;
447}
typeset li { margin-bottom: calc(var(--ts-space) * 0.25); }
typeset li > ul,
typeset li > ol { margin: calc(var(--ts-space) * 0.25) 0 0; }
typeset li:last-child { margin-bottom: 0; }
452
typeset ul { list-style: none; }
typeset ul > li::before {
content: "·";
float: left;
width: 1.4em;
margin-left: -1.4em;
text-align: left;
color: var(--ts-ink-muted);
font-weight: 700;
462}
typeset ul ul > li::before { content: "–"; font-weight: 400; }
464
typeset ol {
list-style: none;
counter-reset: ts-ol;
468}
typeset ol > li { counter-increment: ts-ol; }
typeset ol > li::before {
content: counter(ts-ol) ".";
float: left;
width: 1.4em;
margin-left: -1.4em;
color: var(--ts-ink-muted);
font-variant-numeric: lining-nums tabular-nums;
477}
typeset ol ol > li::before { content: counter(ts-ol, lower-alpha) "."; }
479
480/* A tight list for enumerations that are not prose. */
typeset .ts-list-tight li { margin-bottom: 0; }
482
483/* Definition lists: the right shape for terms, glossaries, and letter fields. */
typeset dl { margin: 0 0 var(--ts-space); }
typeset dt {
text-align: left;
font-weight: 600;
font-family: var(--ts-sans);
font-size: var(--ts-sm);
margin-top: calc(var(--ts-space) * 0.6);
break-after: avoid;
492}
typeset dt:first-child { margin-top: 0; }
typeset dd { margin: 0 0 0 calc(var(--ts-space) * 1.5); }
495/*! @e */
496
497/*! @s tables :: Tables */
typeset table {
width: 100%;
border-collapse: collapse;
margin: calc(var(--ts-space) * 1.25) 0;
font-family: var(--ts-sans);
font-size: var(--ts-sm);
font-variant-numeric: lining-nums tabular-nums;
line-height: 1.35;
506}
507
508/* Rules, not grids. Vertical rules are almost never needed — the columns
 already read as columns. */
typeset th,
typeset td {
padding: 0.45em 0.7em 0.45em 0;
text-align: left;
vertical-align: baseline;
border-bottom: 0.5pt solid var(--ts-rule);
516}
typeset th:last-child,
typeset td:last-child { padding-right: 0; }
519
typeset thead th {
font-weight: 600;
font-size: var(--ts-xs);
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ts-ink-muted);
border-bottom: 1pt solid var(--ts-rule-strong);
527}
typeset tbody tr:last-child td { border-bottom: 1pt solid var(--ts-rule-strong); }
typeset tfoot td { font-weight: 600; border-bottom: 0; }
530
531/* Numbers align on their right edge. Units go in the header, not every cell. */
typeset .ts-num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
typeset th.ts-num { text-align: right; }
534
535/* Repeat the header on every page a long table spans. */
typeset thead { display: table-header-group; }
typeset tfoot { display: table-footer-group; }
typeset tr { break-inside: avoid; }
539
typeset caption {
caption-side: top;
text-align: left;
font-family: var(--ts-sans);
font-size: var(--ts-sm);
color: var(--ts-ink);
padding-bottom: 0.5em;
max-width: none;
548}
typeset caption .ts-label {
font-weight: 600;
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
553}
554
555/* Optional zebra for wide, dense tables only. */
typeset .ts-table-zebra tbody tr:nth-child(even) { background: var(--ts-wash); }
557/*! @e */
558
559/*! @s codeblock :: Code blocks */
typeset pre {
font-family: var(--ts-mono);
font-size: 8.5pt;
line-height: 1.45;
background: var(--ts-wash);
border-left: 2pt solid var(--ts-rule-strong);
padding: 0.8em 1em;
margin: calc(var(--ts-space) * 1.25) 0;
overflow-x: auto;
569
/* Paper cannot scroll. Wrap, and mark the wrap. */
white-space: pre-wrap;
overflow-wrap: break-word;
tab-size: 2;
break-inside: avoid;
575}
typeset pre code {
background: none;
padding: 0;
font-size: inherit;
580}
581
582@media print {
.typeset pre { break-inside: auto; }   /* long listings must be allowed to split */
584}
585/*! @e */
586
587/*! @s figures :: Figures & captions */
typeset figure {
margin: calc(var(--ts-space) * 1.5) 0;
break-inside: avoid;
591}
typeset figure img,
typeset figure svg {
display: block;
max-width: 100%;
height: auto;
597}
typeset figcaption {
text-align: left;
font-family: var(--ts-sans);
font-size: var(--ts-sm);
line-height: 1.4;
color: var(--ts-ink-muted);
margin-top: 0.5em;
padding-top: 0.4em;
border-top: 0.5pt solid var(--ts-rule);
607}
typeset figcaption .ts-label {
font-weight: 600;
color: var(--ts-ink);
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
613}
614/*! @e */
615
616/*! @s notes :: Footnotes & endnotes */
617/* The reference mark. Superscript, no brackets, and it must not disturb
 the line's leading. */
typeset .ts-noteref {
font-size: 0.7em;
line-height: 0;
position: relative;
top: -0.45em;
font-variant-numeric: lining-nums;
text-decoration: none;
color: var(--ts-accent);
627}
typeset .ts-noteref::before { content: counter(ts-note); }
typeset { counter-reset: ts-note; }
typeset .ts-noteref { counter-increment: ts-note; }
631
632/* True bottom-of-page footnotes need an engine that implements the CSS
 footnote spec — WeasyPrint 53+ and Prince do; browsers do not. Where they
 are unavailable this degrades to an endnotes block, which is why the notes
 live in the document rather than in a generated-content property. */
636@supports (float: footnote) {
.typeset .ts-note {
  float: footnote;
  footnote-display: block;
  font-size: var(--ts-sm);
  line-height: 1.35;
}
.typeset .ts-endnotes { display: none; }
644}
645
typeset .ts-endnotes {
text-align: left;
margin-top: calc(var(--ts-space) * 2);
padding-top: var(--ts-space);
border-top: 0.5pt solid var(--ts-rule);
font-size: var(--ts-sm);
line-height: 1.4;
counter-reset: ts-endnote;
654}
typeset .ts-endnotes ol { padding-left: 1.8em; }
typeset .ts-endnotes li { margin-bottom: 0.4em; }
657
658/* Sidenotes: no page-break arithmetic, and the reader never loses their
 place. They cost you a wide right margin. */
660/* The reserved margin must be wide enough for the gap plus the note: 2em + 11em
 here, with an em to spare. */
typeset--sidenotes { --ts-measure: 27em; padding-right: 14em; }
typeset--sidenotes p { position: relative; }
typeset .ts-sidenote {
position: absolute;
666
/* Anchored to the paragraph's own right edge, NOT to `calc(measure + 2em)`.
   The measure is a max-width, so the paragraph is whichever is narrower —
   the measure, or what the container's padding leaves it. Offsetting from the
   measure therefore puts the note in the wrong place whenever the padding is
   the binding constraint, and it lands on top of the text. */
left: 100%;
margin-left: 2em;
width: 11em;
margin-top: -0.3em;
font-family: var(--ts-sans);
font-size: var(--ts-xs);
line-height: 1.4;
color: var(--ts-ink-muted);
text-align: left;
text-indent: 0;
682}
typeset .ts-sidenote::before {
content: counter(ts-note) " ";
color: var(--ts-accent);
font-weight: 600;
687}
688/*! @e */
689
690/*! @s callouts :: Callouts */
typeset .ts-callout {
margin: calc(var(--ts-space) * 1.25) 0;
padding: 0.75em 1em;
border: 0.5pt solid var(--ts-rule);
border-left: 2.5pt solid var(--ts-rule-strong);
background: var(--ts-wash);
font-size: 10pt;
break-inside: avoid;
699}
typeset .ts-callout > :last-child { margin-bottom: 0; }
typeset .ts-callout-title {
font-family: var(--ts-sans);
font-size: var(--ts-xs);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ts-ink-muted);
margin-bottom: 0.35em;
709}
typeset .ts-callout--warning { border-left-color: var(--ts-accent); }
typeset .ts-callout--warning .ts-callout-title { color: var(--ts-accent); }
712/*! @e */
713
714/*! @s breaks :: Section breaks */
715/* A blank line cannot survive a page break — if the break falls on the gap,
 the reader never sees it. Use a visible mark. */
typeset hr,
typeset .ts-break {
border: 0;
height: auto;
margin: calc(var(--ts-space) * 1.5) 0;
text-align: center;
text-align-last: center;   /* a one-line block IS its own last line */
color: var(--ts-ink-faint);
break-after: avoid;
726}
typeset hr::before,
typeset .ts-break::before {
content: "* * *";
letter-spacing: 0.6em;
font-size: 10pt;
732}
733
734/* An asterism, for a heavier division. */
typeset .ts-break--asterism::before { content: "⁂"; letter-spacing: 0; font-size: 14pt; }
736/* A fleuron, for a decorative one. */
typeset .ts-break--fleuron::before { content: "❦"; letter-spacing: 0; font-size: 12pt; color: var(--ts-accent); }
738/* A plain rule, for a report. */
typeset .ts-break--rule::before { content: none; }
typeset .ts-break--rule { border-top: 0.5pt solid var(--ts-rule); height: 0; }
741/*! @e */
742
743/*! @s frontmatter :: Front matter */
typeset .ts-titleblock {
margin-bottom: calc(var(--ts-space) * 3);
padding-bottom: var(--ts-space);
border-bottom: 0.5pt solid var(--ts-rule);
748}
typeset .ts-titleblock h1 { margin-bottom: 0.25em; }
typeset .ts-subtitle {
text-align: left;
font-family: var(--ts-sans);
font-size: var(--ts-h3);
font-weight: 300;
line-height: 1.25;
color: var(--ts-ink-muted);
margin: 0 0 var(--ts-space);
text-wrap: balance;
759}
typeset .ts-byline {
text-align: left;
font-variant-caps: all-small-caps;
letter-spacing: 0.08em;
font-size: var(--ts-base);
margin: 0;
766}
typeset .ts-dateline {
text-align: left;
font-family: var(--ts-sans);
font-size: var(--ts-sm);
color: var(--ts-ink-muted);
margin: 0.2em 0 0;
773}
774
typeset .ts-abstract {
text-align: left;
font-size: 10pt;
line-height: 1.45;
color: var(--ts-ink-muted);
max-width: 30em;
margin-bottom: calc(var(--ts-space) * 2);
782}
typeset .ts-abstract .ts-label {
font-family: var(--ts-sans);
font-size: var(--ts-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ts-ink-faint);
display: block;
margin-bottom: 0.3em;
792}
793
794/* The colophon closes the document: how it was made, and in what. */
typeset .ts-colophon {
text-align: left;
margin-top: calc(var(--ts-space) * 3);
padding-top: var(--ts-space);
border-top: 0.5pt solid var(--ts-rule);
font-size: var(--ts-sm);
font-style: italic;
color: var(--ts-ink-muted);
max-width: 26em;
break-before: avoid;
805}
806/*! @e */
807
808/*! @s toc :: Table of contents */
809/* Dot leaders and real page numbers need `target-counter()` — a paged-media
 engine only. In a browser the leaders render and the numbers do not. */
typeset .ts-toc { text-align: left; font-family: var(--ts-sans); font-size: var(--ts-sm); }
typeset .ts-toc ol { padding-left: 0; counter-reset: ts-toc; }
typeset .ts-toc li { margin-bottom: 0.35em; }
typeset .ts-toc li::before { content: none; }
typeset .ts-toc a {
display: flex;
align-items: baseline;
gap: 0.4em;
text-decoration: none;
820}
typeset .ts-toc a::after {
content: target-counter(attr(href url), page);
font-variant-numeric: lining-nums tabular-nums;
color: var(--ts-ink-muted);
825}
typeset .ts-toc .ts-leader {
flex: 1;
border-bottom: 0.5pt dotted var(--ts-rule);
transform: translateY(-0.15em);
830}
typeset .ts-toc .ts-toc-2 { padding-left: 1.5em; }
832/*! @e */
833
834/*! @s bibliography :: Bibliography */
835/* Hanging indent: the author's surname is the thing being scanned, so it must
 be the leftmost thing on the entry. */
typeset .ts-bibliography {
text-align: left;
font-size: var(--ts-sm);
line-height: 1.4;
padding-left: 0;
list-style: none;
843}
typeset .ts-bibliography li {
padding-left: 1.8em;
text-indent: -1.8em;
margin-bottom: 0.55em;
break-inside: avoid;
849}
typeset .ts-bibliography li::before { content: none; }
typeset .ts-bibliography cite { font-style: italic; }
852/*! @e */
853
854/*! @s letter :: Letter */
855/* The sender block is address data, not a masthead: one style throughout, at
 body size, in the reading face. A personal letter does not announce itself —
 the recipient knows who writes to them. Nothing here is bold, and nothing is
 set in the sans, so the block recedes and the letter starts sooner. */
typeset .ts-letterhead {
text-align: left;
font-size: var(--ts-base);
line-height: 1.35;
color: var(--ts-ink);
margin: 0 0 calc(var(--ts-space) * 2.5);
865}
typeset .ts-letterhead p {
margin: 0;
text-indent: 0;
869}
870
871/* Address blocks are not prose: they are line-broken data. */
typeset .ts-address {
text-align: left;
font-style: normal;
line-height: 1.35;
margin-bottom: calc(var(--ts-space) * 1.5);
877}
typeset .ts-address .ts-label {
display: block;
font-family: var(--ts-sans);
font-size: var(--ts-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ts-ink-faint);
margin-bottom: 0.25em;
886}
887
typeset .ts-date {
margin-bottom: calc(var(--ts-space) * 1.5);
font-variant-numeric: oldstyle-nums;
text-align: left;
892}
893
894/* A line under the date, in italic — a dedication, a feast, a devotion. It
 belongs to the date rather than following it, so it climbs back over the
 date's gap and carries that gap itself. Written against the same token as the
 date's margin so the two cannot drift apart.
898
 Deliberately not `.ts-date:has(+ .ts-date-note)`: Paged.js's CSS parser does
 not understand `:has()` any more than it understands `:is()`, and a selector
 it cannot parse aborts pagination outright. */
typeset .ts-date-note {
margin: calc(var(--ts-space) * -1.5 + 0.1em) 0 calc(var(--ts-space) * 1.5);
font-style: italic;
text-indent: 0;
906}
typeset .ts-salutation { margin-bottom: var(--ts-space); text-align: left; }
typeset .ts-closing { margin: calc(var(--ts-space) * 1.5) 0 0; text-align: left; }
909
910/* The typed name, with room above it to sign. No rule: a ruled line is a form
 to be filled in, and this is a letter. */
typeset .ts-signature {
text-align: left;
margin-top: calc(var(--ts-space) * 3);
text-indent: 0;
break-inside: avoid;
917}
typeset .ts-signature img { display: block; max-height: 16mm; margin-bottom: 0.2em; }
919
920/* Same reasoning as the postscript: "Enc." introduces a sentence, it does not
 head a section. Left as the only small-caps label in a letter it was the one
 thing on the page shouting. */
typeset .ts-enclosures {
text-align: left;
margin-top: calc(var(--ts-space) * 2);
font-size: var(--ts-base);
text-indent: 0;
928}
929/* A postscript is a sentence that happens to begin with "P.S." — the label is
 not a heading, so it matches the text it introduces exactly. */
typeset .ts-ps {
text-align: left;
margin-top: var(--ts-space);
font-size: var(--ts-base);
text-indent: 0;
936}
937/*! @e */
938
939/*! @s two-column :: Two column, equal */
940/* Papers, journal articles, newsletters, technical notes — documents scanned
 and referenced as much as read.
942
 The base size drops to 9.5pt here, and that is arithmetic rather than taste:
 a 77mm column carries 40 characters at 11pt, below the 45-character floor
 this stylesheet sets for a line of prose. 9.5pt restores 47. An
 implementation that keeps 11pt in two columns breaks the measure rule, which
 is the rule everything else is downstream of. */
typeset--two-column {
/* Every step comes down. A 24pt heading in a 77mm column spends three lines
   saying two words. */
--ts-xs: 7pt;
--ts-sm: 8.5pt;
--ts-base: 9.5pt;
--ts-h4: 9.5pt;
--ts-h3: 11pt;
--ts-h2: 13pt;
--ts-h1: 20pt;
958
/* Leading tightens with the measure: a shorter line needs less separation to
   keep the return sweep unambiguous. */
--ts-leading: 1.4;
--ts-space: 9.5pt;
963
/* The column IS the measure, so the character cap comes off. */
--ts-measure: none;
--ts-column-gap: 6mm;
967
/* A blank line costs 3% of a column, so paragraphs indent here by default —
   not as an option. */
--ts-para-gap: 0;
--ts-para-indent: 1.25em;
972
font-size: var(--ts-base);
columns: 2;
column-gap: var(--ts-column-gap);
column-fill: balance;   /* the final page balances its columns */
977
/* Justification with hyphenation is MANDATORY at this measure, not optional:
   at 47 characters a ragged edge serrates the column and the word gaps read
   as rivers. This is the one place the stylesheet removes a choice. */
text-align: justify;
text-align-last: left;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
986}
987
988/* Spans both columns, always. Each is a direct child of the multicol container,
 which is what column-span requires. */
typeset--two-column > .ts-titleblock,
typeset--two-column > .ts-abstract,
typeset--two-column > h1,
typeset--two-column > .ts-colophon,
typeset--two-column > .ts-span {
column-span: all;
996}
997
998/* Spanning is opt-in per instance for figures and tables: it costs a break in
 both columns, so the default stays column-width. A spanning element must sit
 at the top or the bottom of the page, never mid-column. */
typeset--two-column > .ts-span {
break-before: avoid-column;
margin-bottom: calc(var(--ts-space) * 1.5);
1004}
1005
1006/* An optional hairline where the columns need separating. Most journals omit
 it — the gutter is already doing the work. */
typeset--two-column.typeset--column-rule {
column-rule: 0.5pt solid var(--ts-rule);
1010}
1011
1012/* A sidenote has no margin to live in here. Rather than let it be positioned
 off the page and silently lost, it degrades to an inline aside. */
typeset--two-column .ts-sidenote {
position: static;
display: block;
width: auto;
margin: 0.4em 0;
padding-left: 0.6em;
border-left: 0.5pt solid var(--ts-rule);
text-indent: 0;
1022}
1023
1024/* A three-line cap at 3.05em is 29pt — a quarter of the column width for one
 letter. The opening small caps carry the signal instead. */
typeset--two-column .ts-dropcap::first-letter {
float: none;
font-size: inherit;
line-height: inherit;
color: inherit;
padding: 0;
1032}
1033
1034/* Denser matter for a narrower column. */
typeset--two-column blockquote { font-size: 9pt; padding-left: var(--ts-space); }
typeset--two-column table { font-size: 8pt; line-height: 1.3; }
typeset--two-column pre { font-size: 7.5pt; }
typeset--two-column figcaption { font-size: 8pt; }
typeset--two-column .ts-endnotes { font-size: 8.5pt; }
typeset--two-column .ts-pullquote { font-size: 12pt; }
typeset--two-column .ts-abstract { font-size: 9pt; max-width: none; }
typeset--two-column .ts-epigraph { max-width: none; }
1043/*! @e */
1044
1045/*! @s utilities :: Pagination utilities */
ts-page-break-before { break-before: page; }
ts-page-break-after  { break-after: page; }
ts-page-break-avoid  { break-inside: avoid; }
ts-keep-together     { break-inside: avoid; page-break-inside: avoid; }
ts-no-hyphens        { hyphens: manual; }
ts-nowrap            { white-space: nowrap; }
1052
1053/* Non-breaking spaces belong in the markup, but these catch the common cases:
 a figure and its unit, an initial and a surname. */
ts-tie { white-space: nowrap; }
1056
1057@media print {
.ts-screen-only { display: none !important; }
1059}
1060@media screen {
.ts-print-only { display: none !important; }
1062}
1063
1064/* Force backgrounds and rules to survive the print dialog's ink-saving. */
1065@media print {
.typeset,
.typeset * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
1071}
1072/*! @e */