/*
 * Printed-manual skin. Loaded last (see params.customcss) so it overrides
 * main.css and dark.css. Two-color print: black ink plus one spot blue.
 */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/selfhosted/jost-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/selfhosted/jost-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/selfhosted/jost-latin-wght-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/selfhosted/source-serif-4-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/selfhosted/source-serif-4-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/selfhosted/source-serif-4-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/selfhosted/source-serif-4-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #ECE8DF;
  --sheet: #FBFAF6;
  --ink: #1A1A1A;
  --ink-soft: #55534E;
  --rule: #C9C4B8;
  --spot: #2E86C8;
  --spot-text: #1D6AA5;
  --tint: #EEF4F9;
  --hatch-gap: 6px;
  --hatch-offset: 14px;
  --font: "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --font-text: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --maincolor: var(--spot-text);
  --bordercl: var(--ink);
}

:root[data-theme="dark"] {
  --paper: #18191B;
  --sheet: #222326;
  --ink: #E8E3D8;
  --ink-soft: #A9A498;
  --rule: #4A4A4A;
  --spot: #5AA9E6;
  --spot-text: #7DBDEE;
  --tint: #1F2A33;
  --darkMaincolor: var(--spot-text);
}

/* Base */

html {
  color: var(--ink);
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.6;
}

body {
  color: var(--ink);
  background-color: var(--paper);
  background-image: none;
}

p,
ul li,
ol li,
.footer-info,
table th,
table td {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
}

/* Running text in a book serif; Jost stays on headings, labels, and UI */
.body p,
.body li,
.body blockquote,
.tldr,
main.list .description,
main.list .description p,
main.list .description li,
main.list .description blockquote,
main.archive > p {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
}

::selection {
  background: var(--spot);
  color: #FFFFFF;
}

.content {
  max-width: 820px;
  padding: 0 calc(var(--hatch-offset) + 4px) 0 4px;
}

/* Framed sheets with a hatched offset shadow */

main,
.page-title,
.posts,
.tldr,
.toc {
  position: relative;
  background-color: var(--sheet);
  border: 1.5px solid var(--ink);
  box-shadow: none;
  color: var(--ink);
}

main::after,
.page-title::after,
.posts::after,
.tldr::after,
.toc::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  transform: translate(var(--hatch-offset), var(--hatch-offset));
  z-index: -1;
  background: repeating-linear-gradient(
    45deg,
    var(--ink) 0 1.2px,
    transparent 1.2px var(--hatch-gap)
  );
  pointer-events: none;
}

/* Header: a running head on the bare page, closed by a double rule */

header {
  margin: 1.5rem 0 2.5rem;
  padding: 10px 0 12px;
  overflow: visible;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 4px double var(--ink);
  box-shadow: none;
}

main:has(> .legend) {
  margin-top: 3.5rem;
}

header .main {
  font-size: 1.5rem;
  padding-left: 0;
}

header .main a {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

nav a {
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 18px;
}

nav a:hover {
  color: var(--spot-text);
  text-decoration: none;
}

nav .nav-divider {
  border-left-color: var(--ink);
}

#theme-icon {
  color: var(--ink) !important;
}

/* Main sheet and legend (the title that breaks the top border) */

main {
  padding: 48px 56px 40px;
}

.legend {
  position: absolute;
  /* Centered on the outer edge of the 1.5px border so the sheet half hides it */
  top: -1.5px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 0.7em;
  background: linear-gradient(to bottom, transparent 50%, var(--sheet) 50%);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink);
  font-family: var(--font);
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  content: none;
}

.legend::before {
  content: none;
}

article .title {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1.5px solid var(--ink);
}

article h1.title,
.title h1 {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.meta,
time {
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.meta a {
  color: inherit;
}

.body h1,
main > h1:not(.legend) {
  font-size: 1.4rem;
  font-weight: 600;
}

h2 {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 2.6em;
  margin-bottom: 0.8em;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

h2::after {
  content: "";
  flex: 1;
  min-width: 2em;
  border-top: 1.5px solid var(--ink);
}

h3 {
  margin-top: 2em;
  margin-bottom: 0.4em;
  font-size: 1.05rem;
  font-weight: 600;
}

h3::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.55em;
  background-color: var(--spot);
  vertical-align: 0.12em;
}

/* Numbered sections: on for posts and talks, off with `numbered: false` */

main.single {
  counter-reset: sec fig tab;
}

.numbered h2 {
  counter-increment: sec;
  counter-reset: sub;
}

.numbered h3 {
  counter-increment: sub;
}

/* Article headings start at the left edge, with a marker hanging on a tab
   stop: the section number when numbered, otherwise a section sign. */

.body > h2,
.body > h3 {
  --tab: 3.2rem;
  position: relative;
  display: block;
  padding-left: var(--tab);
  letter-spacing: -0.005em;
  text-transform: none;
}

.body > h2 {
  margin: 2.4em 0 0.7em;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

.body > h2::after {
  content: none;
}

.body > h3 {
  margin: 1.8em 0 0.4em;
  font-size: 1.08rem;
  line-height: 1.35;
}

.body > h2::before,
.body > h3::before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--spot-text);
  font-weight: 500;
}

.body > h2::before {
  content: "§";
}

.body > h3::before {
  top: 0.42em;
  margin: 0;
}

.body.numbered > h2::before {
  content: "1." counter(sec);
}

.body.numbered > h3::before {
  content: "1." counter(sec) "." counter(sub);
  top: 0;
  width: auto;
  height: auto;
  background: none;
}

h4,
h5,
h6 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Links */

/* Links print in ink; only the underline carries the spot color */
a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--spot);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--spot-text);
}

/* Lists: spot-color dots, like the reference */

ul {
  padding-left: 0;
}

ul li {
  position: relative;
  margin: 0.55em 0;
  padding-left: 1.4em;
  text-indent: 0;
}

ul > li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.68em;
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background-color: var(--spot);
}

ol {
  padding-left: 1.6em;
}

ol li {
  margin: 0.55em 0;
  padding-left: 0.3em;
}

ol li::marker {
  color: var(--spot-text);
  font-weight: 600;
}

/* Boxed components: tl;dr, table of contents */

.tldr,
.toc {
  display: block;
  margin: 2.6rem calc(var(--hatch-offset) + 4px) 2.4rem 0;
  padding: 2rem 2rem 1.4rem;
  border-radius: 0;
  font-size: 1rem;
}

.tldr > strong:first-child,
.toc > strong:first-child {
  position: absolute;
  /* Centered on the outer edge of the 1.5px border so the sheet half hides it */
  top: -1.5px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.7em;
  background: var(--sheet);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.toc ul ul {
  margin-left: 0.4em;
}

.toc nav a {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.toc nav a:hover {
  color: var(--spot-text);
}

.toc li {
  margin: 0.3em 0;
}

/* Lets the hatch of nested boxes paint above the main sheet */
main > article {
  position: relative;
  z-index: 0;
}

/* Margin marks. Glyphs come from a four-glyph subset of Noto Sans Symbols 2
   (SIL Open Font License 1.1, copyright The Noto Project Authors). */

@font-face {
  font-family: "Manual Symbols";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/selfhosted/manual-symbols.woff2") format("woff2");
  unicode-range: U+25A0, U+261E, U+26A0, U+270E;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Callouts: plain text with a mark hanging in the margin.
   ☞ info and tips, ✎ notes, ⚠ warnings. */

.callout {
  --tab: 3.2rem;
  position: relative;
  margin: 1.6em 0;
  padding: 0 0 0 var(--tab);
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
}

.callout::before {
  content: "\261E";
  position: absolute;
  left: 0;
  top: 0;
  /* Same line box as the first line of text, so the mark centers on it */
  height: 1.65rem;
  line-height: 1.65rem;
  color: var(--ink);
  font-family: "Manual Symbols", var(--font);
  font-size: 3rem;
}

.callout-note::before {
  content: "\270E";
}

.callout-warning::before,
.callout-caution::before {
  content: "\26A0";
  font-size: 2.6rem;
}

/* End mark after the last paragraph of an article */
.body > p:last-child::after {
  content: "\25A0";
  margin-left: 0.45em;
  color: var(--spot);
  font-family: "Manual Symbols", var(--font);
  font-size: 0.7em;
  vertical-align: 0.08em;
}

/* Rules, quotes, figures */

/* Same double rule as the running head */
hr {
  height: 0;
  margin: 2.5em 0;
  border: 0;
  border-top: 4px double var(--ink);
  background: none;
}

blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid var(--spot);
  color: var(--ink-soft);
  font-style: italic;
}

blockquote > :last-child {
  margin-bottom: 0;
}

figure h4 {
  margin-top: 0.6em;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

figure h4::before {
  content: "Fig. ";
  color: var(--spot-text);
}

/* Figures: framed plates with numbered captions */

figure.plate {
  display: block;
  margin: 1.8em 0;
  padding: 0;
}

figure.plate img {
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  border: 1.5px solid var(--ink);
}

figure.plate figcaption {
  counter-increment: fig;
  margin-top: 0.7em;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

/* Chapter-style numbers, as in "Figure 1-1"; each post is chapter 1 */
figure.plate figcaption::before {
  content: "Figure 1-" counter(fig);
  margin-right: 0.8em;
  color: var(--spot-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Code: printed on the page in ink, keywords in spot color */

code {
  background-color: color-mix(in srgb, var(--ink) 7%, transparent);
  color: inherit;
  border-radius: 0;
}

pre {
  border: 1.5px solid var(--ink);
}

.highlight {
  margin: 1.6em 0;
}

.highlight pre.chroma {
  margin: 0;
  padding: 1.3em 1.4em;
  background-color: color-mix(in srgb, var(--ink) 4%, var(--sheet));
  color: var(--ink);
}

.highlight .chroma span {
  background: none;
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
}

.highlight .chroma .k,
.highlight .chroma .kc,
.highlight .chroma .kd,
.highlight .chroma .kn,
.highlight .chroma .kp,
.highlight .chroma .kr,
.highlight .chroma .kt,
.highlight .chroma .nt,
.highlight .chroma .nb {
  color: var(--spot-text);
}

.highlight .chroma .c,
.highlight .chroma .ch,
.highlight .chroma .cm,
.highlight .chroma .c1,
.highlight .chroma .cs,
.highlight .chroma .cp,
.highlight .chroma .cpf {
  color: var(--ink-soft);
  font-style: italic;
}

.highlight .chroma .ln,
.highlight .chroma .lnt {
  color: var(--ink-soft);
}

.highlight pre.chroma code[class*="language-"]::before {
  top: 0;
  right: 0;
  padding: 0.25em 0.8em;
  border-radius: 0;
  background: var(--ink);
  color: var(--sheet);
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* Tables */

.table-scroll {
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1.5px solid var(--ink);
}

.table-scroll table {
  border-top: 1.5px solid var(--ink);
}

main.single .table-scroll {
  counter-increment: tab;
}

main.single .table-scroll::before {
  content: "Table 1-" counter(tab);
  display: block;
  margin-bottom: 0.5em;
  color: var(--spot-text);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

table th {
  background-color: transparent;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Header rows written as bold first-row cells (CloudCannon tables) */
table tbody tr:first-child td:has(> p > strong:only-child) {
  border-bottom: 1.5px solid var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

table td > p,
table th > p,
.body td > p {
  margin: 0;
  font: inherit;
}

table td {
  vertical-align: top;
}

table tbody tr:nth-child(even) {
  background-color: transparent;
}

table tbody tr:hover {
  background-color: var(--tint);
}

/* Tags */

ul.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 3rem;
}

ul.tags li {
  margin: 0;
  padding: 0;
}

ul.tags li::before {
  content: none;
}

.tags a,
.tags a:hover {
  display: inline-block;
  padding: 0.1em 0.7em;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.tags a:hover {
  background-color: var(--ink);
  color: var(--sheet);
}

/* Home page list */

main.list .list-item {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}

main.list .list-item:first-of-type {
  padding-top: 0.4rem;
}

main.list .list-item h1.title {
  margin: 0 0 0.3rem;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
}

main.list .list-item h1.title a {
  color: var(--ink);
  text-decoration: none;
}

main.list .list-item h1.title a:hover {
  color: var(--spot-text);
}

main.list .description {
  margin-top: 0.5rem;
}

/* Contents-page listings: title, dotted leader, date */

ol.leaders {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

ol.leaders li {
  display: flex;
  /* Leader and date follow the last line of a wrapped title */
  align-items: baseline;
  align-items: last baseline;
  gap: 0.5em;
  margin: 0;
  padding: 0.45em 0;
}

ol.leaders a {
  flex: 0 1 auto;
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
}

ol.leaders a:hover {
  color: var(--spot-text);
}

ol.leaders .leader {
  flex: 1 1 2em;
  min-width: 2em;
  border-bottom: 2px dotted var(--ink-soft);
  transform: translateY(-0.3em);
}

ol.leaders time {
  flex: 0 0 auto;
  white-space: nowrap;
}

main > h2 + ol.leaders {
  margin-top: 0.4rem;
}

main > h2:has(+ ol.leaders) {
  margin-top: 1.8em;
  margin-bottom: 0;
}

main.list .list-item + ol.leaders {
  margin-top: 1.4rem;
}

.readmore {
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

main .pagination {
  border-top: 0;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.draft-label {
  background: var(--spot);
  color: #FFFFFF;
  padding: 0 0.4em;
}

/* Share links: monochrome marks printed on the page, not buttons.
   Selectors outrank the partial's inline <style>. */

hr:has(+ .social-share) {
  margin-bottom: 0;
}

main .social-share {
  gap: 1.1rem;
  margin: 1.8rem 0 0.8rem;
}

main .social-share .linkedin-button,
main .social-share .share-button,
main .social-share .linkedin-button:hover,
main .social-share .share-button:hover {
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink);
  transform: none;
}

main .social-share a:hover {
  color: var(--spot-text);
}

main .social-share svg {
  width: 22px;
  height: 22px;
  max-height: none;
}

main .social-share svg path {
  fill: currentColor;
}

main .social-share .linkedin-text {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Footer: a colophon on the bare page */

footer {
  display: block;
  margin-top: 3.5rem;
  margin-bottom: 2rem;
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1.5px solid var(--ink);
  box-shadow: none;
  text-align: center;
}

.footer-info {
  max-width: none;
  margin: 0 auto;
  color: var(--ink-soft);
  /* Sized so each line fits the 820px page; wide screens loosen it */
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
  text-transform: uppercase;
  text-wrap: balance;
}

.footer-info a {
  color: var(--ink);
  text-decoration: none;
}

.footer-info a:hover {
  color: var(--spot-text);
}

/* Wide screens: every page shares one width. Articles and archives use a
   two-column grid: articles put the meta line and margin marks in the
   left column, with headings spanning both; archives put month headings
   there. The home page uses the full width of the sheet. */

@media only screen and (min-width: 1180px) {
  .content {
    max-width: 1040px;
  }

  main.single,
  main.archive {
    padding-right: 96px;
  }

  main.archive {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    column-gap: 32px;
    align-content: start;
  }

  main.archive > * {
    grid-column: 2;
  }

  /* Without grid lines, the label centers on the whole sheet, not a column */
  main.archive > .legend {
    grid-column: auto;
  }

  main.archive > h2,
  main.archive > h2:has(+ ol.leaders) {
    grid-column: 1;
    display: block;
    margin: 0;
    padding-top: 1em;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  main.archive > h2::after {
    content: none;
  }

  main.archive > ol.leaders {
    margin: 0 0 1.6rem;
  }

  main.archive > p {
    margin-top: 0;
    margin-bottom: 2rem;
  }

  /* The full-width colophon has room for its original, airier setting */
  .footer-info {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  main.single article {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    column-gap: 32px;
  }

  main.single article > *,
  main.single .body > * {
    grid-column: 2;
  }

  main.single div.title,
  main.single .body {
    display: contents;
  }

  /* Grid items don't collapse margins, so space only from below */
  main.single .body > * {
    margin-top: 0;
  }

  main.single h1.title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1.5px solid var(--ink);
  }

  main.single .meta {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0.2em;
    line-height: 1.8;
  }

  /* Margin marks hang at the left edge, under the heading markers */
  main.single .body > .callout {
    padding-left: 0;
  }

  main.single .body > .callout::before {
    left: -202px;
  }

  /* Quotes lose their rule and hang an opening quote mark in the margin */
  main.single .body > blockquote {
    position: relative;
    padding-left: 0;
    border-left: 0;
  }

  main.single .body > blockquote::before {
    content: "\201C";
    position: absolute;
    right: calc(100% + 0.15em);
    top: 0.05em;
    color: var(--spot);
    font-family: var(--font-text);
    font-size: 3.2em;
    font-style: normal;
    line-height: 1;
  }

  /* Headings span the margin column too, so they start left of the text */
  main.single .body > h2,
  main.single .body > h3 {
    --tab: 4.2rem;
    grid-column: 1 / -1;
  }
}

/* Small screens */

@media only screen and (max-width: 896px) {
  :root {
    --hatch-offset: 10px;
  }

  html {
    font-size: 17px;
  }

  main {
    padding: 40px 24px 32px;
  }

  .legend {
    font-size: 1.2rem;
  }

  article h1.title,
  .title h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 0.9rem;
  }

  .tldr,
  .toc {
    padding: 1.8rem 1.2rem 1rem;
  }
}

@media only screen and (max-width: 480px) {
  header {
    padding: 12px 16px;
  }

  header .main {
    font-size: 1.25rem;
  }

  nav a {
    margin-right: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  nav a.nav-icon {
    margin-right: 8px;
  }

  /* Icons move up beside the site title so the text links get a full row */
  header .main {
    grid-column: 1;
    grid-row: 1;
  }

  nav .nav-icon-links {
    grid-column: 2;
    grid-row: 1;
  }

  nav .nav-text-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
  }

  nav .nav-text-links a:last-child {
    margin-right: 0;
  }
}