/* Palette: survey vellum and cadastral ink. The contents page is drawn as a plat of lots. */
:root {
  --paper: #f5f6f2;
  --ink: #1e2422;
  --muted: #5d6862;
  --rule: #cdd3cc;
  --accent: #2c4f7c;
  --wash: #e3e9f1;
  --survey: rgba(44, 79, 124, 0.35);
  --size: 1.1875rem;
  --measure: 34em;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161a1d;
    --ink: #dde2df;
    --muted: #8e9893;
    --rule: #2e3539;
    --accent: #94b4e2;
    --wash: #1f2a38;
    --survey: rgba(148, 180, 226, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161a1d;
  --ink: #dde2df;
  --muted: #8e9893;
  --rule: #2e3539;
  --accent: #94b4e2;
  --wash: #1f2a38;
  --survey: rgba(148, 180, 226, 0.3);
  color-scheme: dark;
}

/* Literata (SIL Open Font License, see fonts/OFL.txt), self-hosted: Latin subset, weights 300 to 600,
   optical sizes 12 to 36. Built by tools/make_fonts.py. The fallback faces scale local serifs to
   Literata's metrics so text doesn't jump when the web font arrives. */
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("fonts/literata-roman.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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata"; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url("fonts/literata-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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata Fallback G"; font-style: normal; src: local("Georgia");
  size-adjust: 107.7%; ascent-override: 109.3%; descent-override: 28.6%; line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback G"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 99.65%; ascent-override: 118.1%; descent-override: 30.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback T"; font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos");
  size-adjust: 118.5%; ascent-override: 99.3%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback T"; font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"), local("Tinos Italic");
  size-adjust: 111.2%; ascent-override: 105.8%; descent-override: 27.7%; line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Literata", "Literata Fallback G", "Literata Fallback T", Georgia, serif;
  font-size: calc(var(--size) * var(--scale, 1));
  font-optical-sizing: auto;
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: 0.5rem 0.75rem; z-index: 10; }

/* Masthead */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; font-size: 0.82rem; border-bottom: 1px solid var(--rule);
}
.home .masthead { max-width: 64rem; margin: 0 auto; }
.masthead .site { margin-right: auto; }
.masthead .site { color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; }
.masthead nav { display: flex; align-items: center; gap: 1.1rem; }
.masthead nav > a { color: var(--muted); text-decoration: none; }
.masthead nav > a:hover { color: var(--accent); }
.display { position: relative; }
.display summary {
  list-style: none; cursor: pointer; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.1rem 0.45rem;
}
.display summary::-webkit-details-marker { display: none; }
.display[open] summary { color: var(--ink); border-color: var(--muted); }
.display-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 5;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  padding: 0.75rem 0.9rem; width: 15rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.panel-label { margin: 0 0 0.35rem; color: var(--muted); }
.panel-label + .row { margin-bottom: 0.8rem; }
.row { display: flex; gap: 0.35rem; }
.row button {
  flex: 1; font: inherit; color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.3rem 0;
}
.row button:hover, .row button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

main { padding: 0 1.25rem; }
.colophon {
  max-width: 64rem; margin: 5rem auto 0; padding: 1.25rem; border-top: 1px solid var(--rule);
  font-size: 0.78rem; color: var(--muted);
}
.colophon p { margin: 0; }

/* Reading column */
.text { position: relative; max-width: var(--measure); margin: 0 auto; }
.section-head { margin: 3.5rem 0 2.5rem; }
.section-head .where { margin: 0 0 0.75rem; font-size: 0.85rem; }
.section-head .where a { color: var(--muted); text-decoration: none; }
.section-head .where a:hover { color: var(--accent); }
.section-head h1 {
  font-size: 2rem; line-height: 1.2; font-weight: 400; margin: 0;
  letter-spacing: -0.01em; text-wrap: balance;
}
.section-head .label {
  display: block; font-size: 0.95rem; font-style: italic; color: var(--accent);
  letter-spacing: 0.02em; margin-bottom: 0.4rem;
}
.section-head .sub { display: block; font-size: 1.15rem; font-style: italic; color: var(--muted); margin-top: 0.5rem; }
.body p { margin: 0 0 0.9em; hyphens: auto; }
.body blockquote {
  margin: 1.1em 0 1.1em 1.5em; padding: 0; font-size: 0.94em; color: var(--ink);
}
.body blockquote p { text-indent: 0; }
.body blockquote p + p { margin-top: 0.6em; text-indent: 0; }
.body .subhead { font-size: 1.05rem; font-weight: 500; font-style: italic; text-align: center; margin: 2.2em 0 1em; }
.body hr.break { border: 0; margin: 1.8em auto; height: 1em; width: 3em; text-align: center; overflow: visible; }
.body hr.break::after { content: "⁂"; color: var(--muted); font-size: 0.95rem; }
.body .psig { text-align: right; margin-top: 1.5em; font-style: italic; }
.body .pdate { color: var(--muted); }
.body table { width: 100%; border-collapse: collapse; font-size: 0.85em; margin: 1.5em 0; }
.body th, .body td { padding: 0.6em 0.75em; vertical-align: top; text-align: left; border-top: 1px solid var(--rule); }
.body th { font-weight: 500; }
.body .thbr, .body .tdhbr { border-right: 1px solid var(--rule); }
.smcap { font-variant: small-caps; }
.body .center, .body .pcenter { text-align: center; }
.body .spaced, .body .small.spaced, .body .small.center.spaced { margin: 2em 0; font-size: 0.92em; color: var(--muted); }
.body .poetry-container { display: flex; justify-content: center; margin: 1.5em 0; }
.body .poetry .stanza { margin: 0 0 1em; }
.body .poetry .verse { padding-left: 2em; text-indent: -2em; }
.body .poetry .indent20 { padding-left: 4em; }
.body .figcenter { text-align: center; margin: 2em 0; }
.body .caption { font-size: 0.85em; color: var(--muted); }
.dedication .body > p.space-above { text-align: center; font-size: 1.05rem; line-height: 1.8; margin: 3em 0 0.5em; }
.dedication .body > p.xs { text-align: right; color: var(--muted); font-size: 0.85rem; margin-bottom: 3em; }

/* Paragraph numbers sit in the left gutter, page numbers of the 1898 edition in the right. */
.pn {
  position: absolute; left: -3.4rem; width: 2.4rem; text-align: right; text-indent: 0;
  font-size: 0.68rem; line-height: 2.8; color: var(--muted); text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.pn:hover, .pn:focus-visible { color: var(--accent); }
.pn::before { content: "¶"; margin-right: 0.15em; }
.pg {
  position: absolute; right: -4.2rem; width: 3.2rem; text-indent: 0;
  font-size: 0.68rem; line-height: 2.8; color: var(--muted); font-style: normal;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.pg::before { content: "p. "; }
.pg::after { content: ""; position: absolute; left: -0.6rem; top: 50%; width: 0.35rem; border-top: 1px solid var(--rule); }
.pgbreak { height: 0; }
.pg:target, .pg.landed { color: var(--paper); background: var(--accent); border-radius: 3px; padding: 0 0.3rem; }
.landed-para, .body > [id^="p"]:target { background: var(--wash); box-shadow: -0.6rem 0 0 var(--wash), 0.6rem 0 0 var(--wash); }
[id] { scroll-margin-top: 4rem; }
a.fn {
  font-size: 0.66em; vertical-align: super; line-height: 0; text-decoration: none;
  padding: 0 0.15em; font-variant-numeric: lining-nums;
}

@media (max-width: 60rem) {
  .pn {
    position: static; display: inline; width: auto; margin-right: 0.4em;
    font-size: 0.62em; line-height: 1; vertical-align: 0.15em;
  }
  .pg { position: static; display: inline; margin: 0 0.2em; line-height: 1; font-size: 0.62em; }
  .pg::before { content: "["; }
  .pg::after { content: "]"; position: static; border: 0; width: auto; }
  .pgbreak { height: auto; text-align: right; }
}

/* Notes and topics */
.notes { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.88em; }
.notes h2, .topics h2 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }
.note { display: grid; grid-template-columns: 2rem 1fr; gap: 0.25rem; margin-bottom: 1rem; }
.note-num { text-decoration: none; font-variant-numeric: lining-nums; }
.note-body p { margin: 0 0 0.5em; }
.note:target { background: var(--wash); box-shadow: 0 0 0 0.5rem var(--wash); }

.topics { max-width: var(--measure); margin: 3rem auto 0; font-size: 0.86em; }
.topics .hint { color: var(--muted); margin: -0.5rem 0 0.9rem; }
.topics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.topics li a {
  display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--rule); border-radius: 3px;
  text-decoration: none; color: var(--ink);
}
.topics li a:hover { border-color: var(--accent); color: var(--accent); }

.pager {
  max-width: var(--measure); margin: 3rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  border-top: 1px solid var(--rule); padding-top: 1.25rem; font-size: 0.85rem;
}
.pager a { text-decoration: none; color: var(--ink); line-height: 1.4; }
.pager a:hover { color: var(--accent); }
.pager .next { text-align: right; }
.pager .dir { display: block; color: var(--muted); font-style: italic; margin-bottom: 0.2rem; }

.chapter-list { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--rule); }
.chapter-list li { border-bottom: 1px solid var(--rule); }
.chapter-list a { display: block; padding: 0.8rem 0; text-decoration: none; color: var(--ink); line-height: 1.35; }
.chapter-list a:hover { color: var(--accent); }
.chapter-list .label { display: block; font-size: 0.8rem; color: var(--muted); font-style: italic; }
.book .body { text-align: center; }
.book .section-head h1 { font-size: 2.4rem; }

/* Footnote popover */
.note-pop {
  position: absolute; z-index: 20; max-width: min(26rem, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  padding: 0.85rem 1rem; font-size: 0.85rem; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}
.note-pop p { margin: 0 0 0.5em; text-indent: 0; }
.note-pop .pop-foot { margin: 0.4rem 0 0; font-size: 0.78rem; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); opacity: 0;
  background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; border-radius: 4px;
  font-size: 0.82rem; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Contents: the book as a plat of numbered lots */
.work-head { max-width: 46rem; margin: 3.5rem auto 2.5rem; }
.work-head h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 300; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
.work-sub { font-style: italic; color: var(--muted); max-width: 34em; margin: 0.9rem 0 0.4rem; line-height: 1.45; }
.work-by { margin: 0; font-size: 0.9rem; }
.front-links { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.88rem; margin: 1.4rem 0 0; }
.plat {
  max-width: 46rem; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--survey); border: 1px solid var(--survey);
}
.lot { background: var(--paper); padding: 1.1rem 1.25rem 1.3rem; }
.lot-wide { grid-column: 1 / -1; display: block; text-decoration: none; color: var(--ink); }
.lot-wide:hover .lot-title { color: var(--accent); }
.lot-name { display: block; font-size: 0.8rem; font-style: italic; color: var(--accent); }
.lot h2 { margin: 0 0 0.7rem; font-size: 1.1rem; font-weight: 500; line-height: 1.3; }
.lot h2 a { color: var(--ink); text-decoration: none; display: block; }
.lot h2 a:hover .lot-title { color: var(--accent); }
.lot-num {
  display: block; font-size: 2.1rem; font-weight: 300; line-height: 1; color: var(--accent);
  margin-bottom: 0.45rem; font-variant-numeric: lining-nums;
}
.lot ol { margin: 0; padding-left: 1.3rem; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.lot li { margin-bottom: 0.3rem; }
.lot li a { color: var(--ink); text-decoration: none; }
.lot li a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 40rem) { .plat { grid-template-columns: 1fr; } }

/* Index */
.index-head { max-width: 44rem; margin: 3.5rem auto 1.5rem; }
.index-head h1 { font-size: 2.6rem; font-weight: 300; margin: 0 0 0.5rem; }
.index-head p { font-size: 0.9rem; color: var(--muted); margin: 0 0 1.25rem; }
.filter { display: block; margin-bottom: 1rem; }
.filter span { display: block; font-size: 0.82rem; margin-bottom: 0.3rem; }
.filter input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.55rem 0.7rem;
}
.filter input:focus { border-color: var(--accent); outline: none; }
.letters { display: flex; flex-wrap: wrap; gap: 0.15rem; position: sticky; top: 0; background: var(--paper); padding: 0.5rem 0; z-index: 2; }
.letters a { padding: 0.2rem 0.45rem; text-decoration: none; font-size: 0.9rem; border-radius: 3px; }
.letters a:hover { background: var(--wash); }
.entries { max-width: 44rem; margin: 0 auto; font-size: 0.9rem; line-height: 1.55; }
.letter h2 { font-size: 1.6rem; font-weight: 300; color: var(--accent); margin: 2rem 0 0.5rem; border-bottom: 1px solid var(--rule); }
.entry { padding: 0.45rem 0.5rem; margin: 0 -0.5rem; border-radius: 4px; }
.entry:target { background: var(--wash); }
.entry .main { margin: 0; padding-left: 1.2em; text-indent: -1.2em; }
.entry .head { color: var(--ink); font-weight: 600; text-decoration: none; }
.entry ul { list-style: none; margin: 0.15rem 0 0; padding-left: 1.6em; }
.entry li { padding-left: 1.2em; text-indent: -1.2em; margin-bottom: 0.1rem; }
.entries a[title] { font-variant-numeric: lining-nums; }
.loc { font-size: 0.72em; color: var(--muted); font-variant-numeric: lining-nums; margin-right: 0.1em; }
.no-match { color: var(--muted); }

/* Home */
.hero { max-width: 44rem; margin: 5rem auto 4rem; }
.question { margin: 0; }
.question p {
  margin: 0; font-size: clamp(1.75rem, 4.8vw, 2.9rem); line-height: 1.18; font-weight: 300;
  font-style: italic; letter-spacing: -0.015em; text-wrap: balance;
}
.question p::before { content: "“"; margin-left: -0.45em; color: var(--accent); }
.question p::after { content: "”"; color: var(--accent); }
.asked { margin: 1.5rem 0 0; color: var(--muted); max-width: 32em; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.4rem; align-items: center; margin: 2rem 0 0; font-size: 0.95rem; }
.actions .primary {
  color: var(--paper); background: var(--accent); text-decoration: none;
  padding: 0.55rem 1.1rem; border-radius: 4px;
}
.actions .primary:hover { filter: brightness(1.1); }
.works { max-width: 44rem; margin: 0 auto; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.works h2 { font-size: 0.9rem; font-weight: 500; color: var(--muted); margin: 0 0 1rem; }
.work { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; align-items: center; text-decoration: none; color: var(--ink); }
.work picture { display: block; line-height: 0; }
.work img { display: block; width: 5.5rem; height: auto; border-radius: 2px; filter: grayscale(0.2); }
.work-title { display: block; font-size: 1.35rem; }
.work:hover .work-title { color: var(--accent); }
.work-meta { display: block; color: var(--muted); font-size: 0.88rem; margin-top: 0.25rem; }

/* About and search */
.prose { padding-top: 3rem; }
.prose h1 { font-size: 2.2rem; font-weight: 300; margin: 0 0 1.25rem; }
.prose h2 { font-size: 1.1rem; font-weight: 600; margin: 2.2rem 0 0.6rem; }
.prose li { margin-bottom: 0.5rem; }
.transnote h3 { display: none; }
.transnote { color: var(--muted); }
.title-pages { margin: 2.5rem 0 0; text-align: center; }
.title-pages img { max-width: 16rem; border: 1px solid var(--rule); }
.title-pages figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }
.search-wrap { max-width: 44rem; margin: 3rem auto 0; }
.search-wrap h1 { font-size: 2.2rem; font-weight: 300; margin: 0 0 1.25rem; }
#search {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-tag: var(--wash);
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-font: "Literata", Georgia, serif;
}

@media (max-width: 40rem) {
  :root { --size: 1.0625rem; }
  .masthead { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .masthead nav { gap: 0.75rem; }
  .section-head { margin-top: 2.25rem; }
  .section-head h1 { font-size: 1.6rem; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .hero { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 60rem) { .body blockquote > .pn { float: left; margin-top: 0.45em; } }

/* Side navigation: always visible on wide screens, a drawer below that */
.layout.with-nav { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); }
.page { min-width: 0; }
.sidenav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--rule); padding: 0.9rem 0.9rem 4rem; font-size: 0.8rem; line-height: 1.4;
  background: var(--paper);
}
.tabs { display: flex; gap: 1.1rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.8rem; }
.tabs button {
  font: inherit; font-size: 0.85rem; background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: 0.4rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.toc, .toc ul, .topic-list { list-style: none; margin: 0; padding: 0; }
.toc > li > a, .toc summary { display: block; padding: 0.35rem 0.5rem; border-radius: 4px; color: var(--ink); text-decoration: none; }
.toc summary { cursor: pointer; list-style: none; position: relative; padding-left: 1.4rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before {
  content: ""; position: absolute; left: 0.45rem; top: 0.7rem; width: 0.38rem; height: 0.38rem;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.toc details[open] > summary::before { transform: rotate(45deg); top: 0.6rem; }
.toc summary:hover, .toc a:hover { background: var(--wash); }
.toc .num { color: var(--accent); font-variant-numeric: lining-nums; margin-right: 0.2rem; }
.toc details ul { margin: 0.1rem 0 0.5rem 0.95rem; border-left: 1px solid var(--rule); }
.toc details li a {
  display: grid; grid-template-columns: 1.1rem 1fr; padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  color: var(--muted); text-decoration: none; border-radius: 0 4px 4px 0;
}
.toc details li:first-child a { display: block; font-style: italic; }
.toc a[aria-current="page"] { color: var(--ink); background: var(--wash); box-shadow: inset 2px 0 0 var(--accent); font-weight: 500; }
.nav-filter input {
  width: 100%; font: inherit; color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.4rem 0.55rem; margin-bottom: 0.6rem;
}
.nav-filter input:focus { border-color: var(--accent); outline: none; }
.group { margin: 0.6rem 0 0.3rem; color: var(--muted); font-style: italic; }
.topic-list a { display: block; padding: 0.22rem 0.5rem; border-radius: 4px; color: var(--ink); text-decoration: none; }
.topic-list a:hover { background: var(--wash); color: var(--accent); }
.topic-list.here { margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-toggle {
  display: none; font: inherit; color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.15rem 0.6rem;
}
.with-nav .colophon { max-width: none; margin-left: 1.25rem; margin-right: 1.25rem; padding-left: 0; padding-right: 0; }

@media (max-width: 72rem) {
  .layout.with-nav { display: block; }
  .nav-toggle { display: inline-block; }
  .sidenav {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; width: min(20rem, 86vw); height: auto;
    transform: translateX(-100%); visibility: hidden; transition: transform 0.2s, visibility 0.2s;
  }
  .nav-open .sidenav { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }
  .nav-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .sidenav, .toc summary::before { transition: none; }
}

.summary {
  margin: -0.5rem 0 2.5rem; padding: 0.9rem 1.1rem 1rem; font-size: 0.88em; line-height: 1.55;
  border-left: 3px solid var(--accent); background: var(--wash); border-radius: 0 4px 4px 0;
}
.summary p { margin: 0; }
.summary-label { font-weight: 600; margin-bottom: 0.4rem !important; }
.summary-label span { font-weight: 400; font-style: italic; color: var(--muted); font-size: 0.85em; margin-left: 0.4rem; }
.summary-step { font-style: italic; margin-bottom: 0.5rem !important; }
.book .summary { text-align: left; }
.lot-step { margin: -0.3rem 0 0.8rem; font-size: 0.8rem; font-style: italic; color: var(--muted); line-height: 1.4; }

a.term {
  color: inherit; text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; cursor: help;
}
a.term:hover { color: var(--accent); }
.term-pop { max-width: min(22rem, calc(100vw - 2rem)); }
.pop-term { font-weight: 600; margin-bottom: 0.3rem !important; }
.pop-not { color: var(--muted); font-style: italic; }

.glossary-page .lede { color: var(--muted); }
.term-jump { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.85rem; margin: 1rem 0 0.5rem; }
.term-group h2 { margin-top: 2.8rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); }
.group-intro { color: var(--muted); font-size: 0.92em; }
.term-entry { padding: 0.5rem 0.75rem 0.25rem; margin: 0.8rem -0.75rem 0; border-radius: 4px; }
.term-entry:target { background: var(--wash); }
.term-entry h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.3rem; }
.term-entry > p { margin: 0 0 0.5rem; }
.term-not { font-size: 0.92em; font-style: italic; color: var(--muted); }
.george { margin: 0.6rem 0 0.75rem; padding-left: 1rem; border-left: 1px solid var(--rule); font-size: 0.92em; }
.george p { margin: 0; font-style: italic; }
.george footer { font-size: 0.8rem; margin-top: 0.25rem; font-variant-numeric: lining-nums; }
.editorial-note { margin-top: 3rem; font-size: 0.82rem; color: var(--muted); }

.version { margin: -1rem 0 2.2rem; }
.version-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; padding: 2px; gap: 2px; }
.version-switch button {
  font: inherit; font-size: 0.8rem; color: var(--muted); background: transparent; cursor: pointer;
  border: 0; border-radius: 4px; padding: 0.35rem 0.8rem;
}
.version-switch button[aria-pressed="true"] { background: var(--accent); color: var(--paper); }
.version-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--muted); max-width: 34em; }
@media (max-width: 72rem) { .wide-only { display: none; } }

.pair { position: relative; }
.pair > .pn { top: 0; }
.modern { display: none; }
.peek {
  display: none; font: inherit; font-size: 0.7rem; color: var(--muted); background: transparent;
  border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.4rem; margin: -0.7rem 0 0.6rem; cursor: pointer;
}
.peek:hover { color: var(--accent); border-color: var(--accent); }

[data-version="modern"] .pair > .orig { display: none; }
[data-version="modern"] .pair > .modern { display: block; }
[data-version="modern"] .pair > .peek { display: inline-block; }
[data-version="modern"] .pair.peeking > .orig {
  display: block; order: 3; font-size: 0.88em; color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: 0.9rem;
}
[data-version="modern"] .pair { display: flex; flex-direction: column; align-items: flex-start; }
[data-version="modern"] .pair > * { align-self: stretch; }
[data-version="modern"] .pair > .peek { align-self: flex-start; order: 2; }
[data-version="modern"] .pair > .modern { order: 1; }

[data-version="both"] .reading .text { --measure: 72em; max-width: min(var(--measure), calc(100% - 9rem)); }
[data-version="both"] .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
[data-version="both"] .pair > .modern { display: block; }
[data-version="both"] .pair > .orig, [data-version="both"] .pair > .modern { font-size: 0.92em; line-height: 1.55; }
[data-version="both"] .pair > .orig { color: var(--muted); }
[data-version="both"] .pair > blockquote { margin-left: 0; }
[data-version="both"] .section-head, [data-version="both"] .summary, [data-version="both"] .version, [data-version="both"] .notes { max-width: 34em; }
@media (max-width: 72rem) {
  [data-version="both"] .pair { display: block; }
  [data-version="both"] .pair > .orig { display: none; }
}

@media (hover: hover) {
  .peek { opacity: 0; transition: opacity 0.15s; }
  .pair:hover .peek, .peek:focus-visible, .peeking .peek { opacity: 1; }
}
.on-path {
  display: inline-block; width: 0.42rem; height: 0.42rem; margin-left: 0.35rem; vertical-align: 0.1em;
  border-radius: 50%; background: var(--accent); opacity: 0.75;
}

.steps { max-width: 40rem; margin: 0 auto; padding-top: 3rem; }
.steps-head h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 300; line-height: 1.1; margin: 0 0 0.8rem; letter-spacing: -0.015em; }
.steps .lede { color: var(--muted); margin: 0 0 2.5rem; }
.steps h2 { font-size: 1.3rem; font-weight: 500; line-height: 1.3; margin: 0 0 0.5rem; }
.step-kicker, .step-book {
  display: block; font-size: 0.8rem; font-weight: 400; font-style: italic; color: var(--accent);
  text-decoration: none; margin-bottom: 0.2rem;
}
.step-book:hover { text-decoration: underline; }
.bookend { padding: 1.4rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bookend p { margin: 0 0 0.6rem; }
.step-list { list-style: none; margin: 0; padding: 0; position: relative; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 0 1rem; padding: 1.8rem 0; border-bottom: 1px solid var(--rule); }
.step-num {
  font-size: 2.2rem; font-weight: 300; line-height: 1; color: var(--accent);
  font-variant-numeric: lining-nums; text-align: right; padding-top: 0.15rem;
}
.step-body p { margin: 0 0 0.6rem; }
.step-read { font-size: 0.85rem; color: var(--muted); }
.step-read a { font-variant-numeric: lining-nums; }
@media (max-width: 40rem) {
  .step { grid-template-columns: 2.2rem 1fr; gap: 0 0.7rem; }
  .step-num { font-size: 1.7rem; }
}
.toc-guide { font-style: italic; color: var(--accent) !important; }

.path-list { list-style: none; margin: 0; padding: 0; }
.stop { display: grid; grid-template-columns: 3rem 1fr; gap: 0 1rem; padding: 1.4rem 0; }
.stop h2 a { color: var(--ink); text-decoration: none; }
.stop h2 a:hover { color: var(--accent); }
.stop-meta { font-size: 0.8rem; color: var(--muted); }
.bridge {
  margin: 0 0 0 4rem; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px dashed var(--rule);
  font-size: 0.88rem; color: var(--muted); line-height: 1.5;
}
.bridge p { margin: 0; }
.bridge-label { font-style: italic; }
.bridge a.term { color: var(--muted); }
@media (max-width: 40rem) {
  .stop { grid-template-columns: 2.2rem 1fr; gap: 0 0.7rem; }
  .bridge { margin-left: 2.9rem; }
}

.path-box {
  max-width: var(--measure); margin: 3rem auto 0; padding: 1rem 1.2rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0;
  font-size: 0.88rem;
}
.path-box p { margin: 0 0 0.4rem; }
.path-box p:last-child { margin: 0; }
.path-where { color: var(--muted); font-style: italic; }
.path-bridge { color: var(--muted); }
.path-next { font-weight: 500; }
.topics, .path-box, .pager { max-width: calc(34 * var(--size) * var(--scale, 1)); }
.toc details[open] > summary .book-dot { display: none; }

.rentviz {
  --viz-rent: #2f6cb8; --viz-wages: #c47a2c;
  margin: 1.2rem 0 1rem; padding: 1rem 1rem 0.8rem; border: 1px solid var(--rule); border-radius: 6px;
  font-size: 0.85rem; line-height: 1.45;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rentviz { --viz-rent: #4a8ee0; } }
:root[data-theme="dark"] .rentviz { --viz-rent: #4a8ee0; }
.viz-defs { position: absolute; }
.hatch-bg { fill: var(--paper); }
.hatch-line { stroke: var(--muted); stroke-width: 2; opacity: 0.6; }
.rent-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rent-svg .grid { stroke: var(--rule); stroke-width: 1; }
.rent-svg .tick, .rent-svg .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: lining-nums; }
.rent-svg .rent { fill: var(--viz-rent); }
.rent-svg .wages { fill: var(--viz-wages); }
.rent-svg .unused { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 3; }
.rent-svg .held { fill: url(#viz-hatch); stroke: var(--muted); stroke-width: 1; }
.rent-svg .margin { stroke: var(--ink); stroke-width: 2; }
.rent-svg .margin.necessary { stroke: var(--muted); stroke-dasharray: 6 4; }
.rent-svg .mlabel { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: lining-nums; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.rent-svg .mlabel.muted { fill: var(--muted); font-weight: 400; }
.rent-svg g:hover rect, .rent-svg rect:hover { opacity: 0.8; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.6rem; color: var(--muted); font-size: 0.8rem; }
.viz-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sw { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; }
.sw.rent { background: var(--viz-rent); }
.sw.wages { background: var(--viz-wages); }
.sw.unused { border: 1.5px dashed var(--rule); }
.sw.held { border: 1px solid var(--muted); background: repeating-linear-gradient(45deg, transparent 0 2px, var(--muted) 2px 3px); opacity: 0.8; }
.viz-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0 0 0.6rem; }
.viz-control span { color: var(--muted); }
.viz-control input[type=range] { flex: 1 1 12rem; accent-color: var(--accent); }
.viz-toggle { gap: 0.4rem; }
.viz-toggle button {
  font: inherit; font-size: 0.8rem; color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.3rem 0.7rem;
}
.viz-toggle button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.viz-readout { margin: 0.5rem 0 0; font-variant-numeric: lining-nums; }
.rentviz figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.8rem; }
.viz-table { margin-top: 0.5rem; font-size: 0.8rem; }
.viz-table summary { cursor: pointer; color: var(--accent); }
.viz-table table { border-collapse: collapse; margin-top: 0.4rem; font-variant-numeric: lining-nums tabular-nums; }
.viz-table th, .viz-table td { text-align: left; padding: 0.2rem 0.9rem 0.2rem 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 40rem) {
  .rentviz { padding: 0.8rem 0.6rem 0.6rem; }
  .rent-svg .tick, .rent-svg .axis { font-size: 18px; }
  .rent-svg .mlabel { font-size: 20px; }
}

.quote-theme h2 { font-size: 1.5rem; font-weight: 300; color: var(--accent); margin: 2.5rem 0 0.5rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; }
.quote-card { margin: 0; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.quote-card:last-child { border-bottom: 0; }
.quote-card blockquote { margin: 0; }
.quote-card blockquote p { margin: 0; font-size: 1.15rem; font-style: italic; line-height: 1.45; text-wrap: pretty; }
.quote-card figcaption { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.5rem; font-size: 0.8rem; font-variant-numeric: lining-nums; }
.quote-card:target { background: var(--wash); box-shadow: 0 0 0 0.75rem var(--wash); }

.single-quote { max-width: 40rem; margin: 0 auto; padding-top: 4rem; }
.single-quote figure { margin: 0; }
.single-quote blockquote { margin: 0; }
.single-quote blockquote p {
  margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 300; font-style: italic;
  line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance;
}
.single-quote figcaption { margin-top: 1.2rem; color: var(--muted); font-variant-numeric: lining-nums; }
.quote-context { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); }
.quote-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin: 1.2rem 0 0; font-size: 0.9rem; }
.copy-link {
  font: inherit; color: var(--paper); background: var(--accent); border: 0; border-radius: 4px;
  padding: 0.45rem 0.9rem; cursor: pointer;
}
.quote-pager { margin-top: 3rem; }
.quote-all { margin-top: 1.5rem; font-size: 0.85rem; }

.george.big p { font-size: 1.15rem; }
.middle-note { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0; }
.middle-part h2 { font-size: 1.3rem; font-weight: 500; margin: 2.4rem 0 0.7rem; }
.middle-part > p { margin: 0 0 0.9rem; }
.middle-part h3 { font-size: 1.1rem; font-weight: 600; margin: 1.9rem 0 0.6rem; }
.middle-part .george { margin: 1rem 0; }
.steps .lede p { margin: 0; }
.middle-part > ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.middle-part > ul li { margin: 0 0 0.35rem; }
.faq-toc ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.faq-toc li { margin: 0 0 0.4rem; }
.faq-item { scroll-margin-top: 1rem; }
.faq-item h2 { scroll-margin-top: 1rem; }
.faq-more { margin-top: 1rem; font-size: 0.9rem; }

.essay { max-width: var(--measure); margin: 0 auto; padding-top: 3rem; }
.essay-head h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.essay-kicker { margin: 0 0 0.6rem; font-size: 0.85rem; font-style: italic; }
.essay-kicker a { text-decoration: none; }
.essay-by { margin: 0.8rem 0 2.5rem; color: var(--muted); }
.essay-body h2 { font-size: 1.25rem; font-weight: 500; margin: 2.4rem 0 0.8rem; }
.essay-body p { margin: 0 0 1em; }
.essay-body ul { padding-left: 1.3rem; margin: 0 0 1em; }
.essay-body li { margin-bottom: 0.35rem; }
.essay-body blockquote { margin: 1em 0; padding-left: 1rem; border-left: 2px solid var(--rule); }
.essay-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0 1.5rem; }
.essay-body .footnote { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.essay-body .footnote ol { padding-left: 1.2rem; }
.essay-body .footnote li { margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.essay-body sup a { text-decoration: none; font-size: 0.75em; font-variant-numeric: lining-nums; }
.essay-body a.footnote-ref { font-size: 0.85em; padding: 0 0.2em; }
.essay-body .footnote h2 { font-size: 1.1rem; margin: 3rem 0 0.8rem; }
.essay-body .footnote li p { margin: 0; }
.essay-body .footnote-backref { margin-left: 0.3em; text-decoration: none; }
.essay-body .footnote-backref sup { font-size: 0.7em; }
.essay-body .footnote li:target, .essay-body sup:target { background: var(--wash); }
.essay-body .footnote li, .essay-body sup[id] { scroll-margin-top: 1.5rem; }
mark.todo { background: #ffe58a; color: #3a2f00; padding: 0 0.2em; border-radius: 2px; }
.draft-flag { font-size: 0.85rem; color: var(--muted); border: 1px dashed var(--rule); border-radius: 4px; padding: 0.5rem 0.8rem; margin: -1.5rem 0 2rem; }
.essay-next { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.essay-next p { margin: 0 0 0.4rem; }
.essay-next a { margin-right: 1.2rem; }
.essay-card { display: block; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.essay-card-title { display: block; font-size: 1.5rem; font-weight: 400; }
.essay-card:hover .essay-card-title { color: var(--accent); }
.essay-card-dek { display: block; color: var(--muted); margin-top: 0.3rem; }
.home-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.2rem 0 0; font-size: 0.9rem; }
.flow-svg .panel-title { fill: var(--ink); font-size: 13px; font-weight: 600; }
.flow-svg .node { fill: var(--paper); stroke: var(--muted); stroke-width: 1.5; }
.flow-svg .node.fund, .flow-svg .node.product { stroke: var(--viz-wages); stroke-width: 2; }
.flow-svg .node.capital { stroke-dasharray: 4 3; }
.flow-svg .node.taxed { fill: url(#viz-hatch); stroke: var(--muted); }
.flow-svg .node.untaxed { stroke-dasharray: 4 3; }
.flow-svg .node.land { stroke: var(--viz-rent); stroke-width: 2; }
.flow-svg .node-label { fill: var(--ink); font-size: 12px; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.flow-svg .note { fill: var(--muted); font-size: 11.5px; }
.flow-svg .note.strong { fill: var(--ink); }
.flow-svg .note.tag { font-size: 10.5px; font-style: italic; }
.flow-svg .worker { fill: var(--viz-wages); }
.flow-svg .flow { stroke: var(--muted); stroke-width: 1.5; }
.flow-svg .flow.wages-flow { stroke: var(--viz-wages); stroke-width: 2; }
.flow-svg .flow.helps { stroke-dasharray: 4 3; }
.flow-svg .flow.shift { stroke: var(--ink); stroke-width: 2; }
.flow-svg .divider { stroke: var(--rule); }
.flow-svg .bracket { stroke: var(--muted); stroke-width: 1.2; }
.arrow-head { fill: var(--muted); }

.essay-body h2 {
  font-size: clamp(1.55rem, 3.4vw, 1.9rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.012em;
  margin: 3.4rem 0 1rem; padding-top: 1.1rem; position: relative; text-wrap: balance;
}
.essay-body h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; border-top: 2px solid var(--accent);
}
.essay-body > p:first-child { font-size: 1.12em; line-height: 1.55; }
.essay-body p strong { font-weight: 600; }

.home { --hero-ink: #f3ecd2; --hero-muted: #cfc6a6; --hero-gold: #e8bf4f; --hero-shade: 9, 17, 11; }
.home .masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; max-width: none; border-bottom: 0;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
}
.home .masthead .site, .home .masthead nav > a { color: var(--hero-ink); }
.home .masthead nav > a:hover { color: var(--hero-gold); }
.home .display summary { color: var(--hero-ink); border-color: rgba(243, 236, 210, 0.45); }
.hero-band {
  margin: 0 -1.25rem; min-height: clamp(32rem, 72vh, 44rem);
  display: flex; align-items: center; padding: 6rem clamp(1.25rem, 4vw, 3rem) 4rem;
  background:
    linear-gradient(90deg, rgba(var(--hero-shade), 0.92) 0%, rgba(var(--hero-shade), 0.72) 42%, rgba(var(--hero-shade), 0.15) 78%, rgba(var(--hero-shade), 0) 100%),
    linear-gradient(0deg, rgba(var(--hero-shade), 0.55) 0%, rgba(var(--hero-shade), 0) 35%),
    #0d170f url("images/hero.jpg") 72% center / cover no-repeat;
  background-image:
    linear-gradient(90deg, rgba(var(--hero-shade), 0.92) 0%, rgba(var(--hero-shade), 0.72) 42%, rgba(var(--hero-shade), 0.15) 78%, rgba(var(--hero-shade), 0) 100%),
    linear-gradient(0deg, rgba(var(--hero-shade), 0.55) 0%, rgba(var(--hero-shade), 0) 35%),
    image-set(url("images/hero-1500.webp") type("image/webp"), url("images/hero.jpg") type("image/jpeg"));
  color: var(--hero-ink);
}
.hero-band .hero { max-width: 40rem; margin: 0; margin-left: max(0px, calc((100vw - 76rem) / 2)); }
.hero-band .question p { color: var(--hero-ink); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45); }
.hero-band .question p::before, .hero-band .question p::after { color: var(--hero-gold); }
.hero-band .asked { color: var(--hero-muted); }
.hero-band .actions a { color: var(--hero-ink); text-decoration-color: rgba(243, 236, 210, 0.5); }
.hero-band .actions a:hover { color: var(--hero-gold); }
.hero-band .actions .primary { background: var(--hero-gold); color: #17200f; text-decoration: none; font-weight: 500; }
.hero-band .actions .primary:hover { filter: brightness(1.08); color: #17200f; }
.hero-band :focus-visible { outline-color: var(--hero-gold); }
.home .works { margin-top: 3.5rem; }
@media (max-width: 40rem) {
  .hero-band {
    min-height: auto; padding-top: 15rem; align-items: flex-end;
    background:
      linear-gradient(0deg, rgb(var(--hero-shade)) 0%, rgb(var(--hero-shade)) 55%, rgba(var(--hero-shade), 0.2) 78%, rgba(var(--hero-shade), 0.35) 100%),
      #0d170f url("images/hero.jpg") 72% top / auto 22rem no-repeat;
    background-image:
      linear-gradient(0deg, rgb(var(--hero-shade)) 0%, rgb(var(--hero-shade)) 55%, rgba(var(--hero-shade), 0.2) 78%, rgba(var(--hero-shade), 0.35) 100%),
      image-set(url("images/hero-1000.webp") type("image/webp") 1x, url("images/hero-1500.webp") type("image/webp") 2x, url("images/hero.jpg") type("image/jpeg"));
  }
  .home .masthead nav { gap: 0.8rem; }
  .hero-band { background-position: 0 0, 72% 3rem; }
}
.home .works { border-top: 0; }
.home .masthead {
  background: rgba(13, 14, 13, 0.97); border-bottom: 1px solid rgba(243, 236, 210, 0.1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Essay byline, share and follow */
.essay-by { font-size: 0.9rem; font-variant-numeric: lining-nums; }
.essay-by .byline { color: var(--ink); text-decoration: none; font-weight: 500; letter-spacing: 0.02em; }
.essay-by .byline:hover { color: var(--accent); }
.essay-by .dot { margin: 0 0.3em; }
.essay-share { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 0 0 0.9rem; }
.share-x {
  color: var(--paper); background: var(--accent); text-decoration: none;
  border-radius: 4px; padding: 0.45rem 0.9rem;
}
.share-x:hover { filter: brightness(1.1); }
.essay-share .copy-link { color: var(--accent); background: transparent; border: 1px solid var(--accent); padding: calc(0.45rem - 1px) 0.9rem; }
.follow { margin: 0; color: var(--muted); }
.essay-share + .essay-next { margin-top: 1.6rem; }
.essay-card-meta { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted); font-variant-numeric: lining-nums; }
.essays-follow { margin-top: 1.8rem; font-size: 0.9rem; color: var(--muted); }

/* Brand: the hero's gold and field green carry into the essays and the site's own pages.
   The book pages keep the cadastral blue. */
.brand { --accent: #7d5f0e; --wash: #f1ead6; --survey: rgba(125, 95, 14, 0.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand { --accent: #e8bf4f; --wash: #2a2614; --survey: rgba(232, 191, 79, 0.3); }
}
:root[data-theme="dark"] .brand { --accent: #e8bf4f; --wash: #2a2614; --survey: rgba(232, 191, 79, 0.3); }
.brand .masthead { background: #0d170f; border-bottom-color: rgba(243, 236, 210, 0.12); }
.brand .masthead .site, .brand .masthead nav > a { color: #f3ecd2; }
.brand .masthead nav > a:hover { color: #e8bf4f; }
.brand .display summary { color: #f3ecd2; border-color: rgba(243, 236, 210, 0.45); }
.brand .masthead :focus-visible { outline-color: #e8bf4f; }
.masthead .x-link { font-variant-numeric: lining-nums; }
.essay-head h1::before {
  content: ""; display: block; width: 3rem; margin-bottom: 1.1rem; border-top: 3px solid var(--accent);
}
.essay-kicker a { color: var(--accent); }

/* Home thesis */
.motto {
  margin: 0 0 1rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: lining-nums;
}
.hero .motto { color: var(--hero-gold, var(--accent)); }
.thesis {
  margin: 0 0 1.6rem; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.04; font-weight: 300;
  letter-spacing: -0.025em; text-wrap: balance;
}
.hero-band .thesis { color: var(--hero-ink); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45); }
.hero .question p { font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.3; }

/* Footer */
.colophon-brand a { color: inherit; }
.masthead nav { flex-wrap: wrap; row-gap: 0.4rem; }
.masthead nav > a { white-space: nowrap; }

/* 404 */
.notfound { max-width: 34rem; margin: 3rem auto 5rem; }
.notfound .motto { color: var(--accent); }
.notfound h1 { font-weight: 300; font-size: 2.4rem; line-height: 1.1; margin: 0 0 1rem; }
.notfound-links { padding-left: 1.1rem; line-height: 1.8; }
.notfound-search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 2rem; }
.notfound-search label { flex-basis: 100%; font-size: 0.9rem; color: var(--muted); }
.notfound-search input { flex: 1; min-width: 12rem; font: inherit; padding: 0.45rem 0.6rem;
  border: 1px solid var(--muted); border-radius: 4px; background: var(--paper); color: var(--ink); }
.notfound-search button { font: inherit; padding: 0.45rem 0.9rem; border: 0; border-radius: 4px;
  background: var(--accent); color: var(--paper); cursor: pointer; }

/* Start here, and the site links in the footer */
.masthead nav > a.nav-start { color: var(--accent); font-weight: 500; }
.brand .masthead nav > a.nav-start, .home .masthead nav > a.nav-start { color: #e8bf4f; }
@media (max-width: 40rem) { .masthead nav > a.nav-wide { display: none; } }
.start-paths { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; }
.start-paths li, .start-essay { border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 4px; padding: 1rem 1.2rem; }
.start-paths h2, .start-essay h2 { margin: 0 0 0.4rem; }
.start-paths h2 a, .start-essay h2 a { text-decoration: none; }
.start-paths h2 a:hover, .start-essay h2 a:hover { text-decoration: underline; }
.start-paths p, .start-essay p { margin: 0; }
.start-time { font-size: 0.8rem; font-style: italic; color: var(--accent); margin-bottom: 0.2rem !important; }
.start-essay { background: var(--wash); margin-bottom: 2.5rem; }
.start-more ul { padding-left: 1.2rem; margin: 0.6rem 0 0; }
.start-more li { margin: 0 0 0.45rem; }

/* Footer: sections of links from FOOTER in build.py, then a small bottom row */
.footer-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.6rem 1.8rem;
  padding: 1rem 0 1.8rem; text-align: left;
}
.footer-heading {
  margin: 0 0 0.5rem; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); font-variant-numeric: lining-nums;
}
.footer-section ul { list-style: none; margin: 0; padding: 0; }
.footer-section li { margin: 0; }
.footer-section a {
  display: inline-block; padding: 0.3rem 0; line-height: 1.3; font-size: 0.82rem;
  color: var(--ink); text-decoration: none;
}
.footer-section a:hover { color: var(--accent); text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem;
  padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.72rem; color: var(--muted);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: inherit; }
.footer-meta a { display: inline-block; padding: 0.3rem 0; margin-right: 1rem; }
.colophon .motto { margin: 0; font-size: 0.66rem; color: var(--muted); }
@media (max-width: 40rem) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.2rem; }
  .footer-section a { padding: 0.55rem 0; min-height: 24px; font-size: 0.88rem; }
  .footer-bottom { display: block; }
  .footer-bottom p + p { margin-top: 0.5rem; }
  .footer-meta a { padding: 0.55rem 0; }
}
@media (max-width: 22rem) {
  .footer-nav { grid-template-columns: 1fr; }
}