/* A Man, A Time and A Place — online edition
   ------------------------------------------------------------------
   Warm print revival. The palette is drawn from the book itself: aged
   paper, near-black ink, an oxblood accent, and the ≈◊≈ diamond the
   author uses as a section divider.

   Every text colour here clears WCAG AAA against its background. The
   book's readers are largely older, so the type is set generously and
   the reader can enlarge it further; nothing relies on colour alone.

   Photographs are never tinted or filtered — the scans are already
   period-toned, and a filter would only degrade them. */

:root {
  --paper: #f7f2e8;
  --paper-deep: #efe7d7;
  --paper-edge: #dbcdae;
  --ink: #100e0c;        /* 17.3:1 on paper */
  --ink-soft: #453b32;   /*  9.8:1 on paper */
  --rule: #c9bc9f;
  --accent: #7d2f20;     /*  8.2:1 on paper */
  --accent-hover: #5c2117;
  --mark: #f2e2b8;
  --shadow: rgba(16, 14, 12, .10);

  --chart-root: #ecdfa4;   /* the tints the printed chart gives each generation */
  --chart-child: #f5d8c4;
  --chart-grand: #fffdf7;
  --chart-edge: #cbb9a0;
  --chart-key: #5c2117;    /* 9.2:1 on the deepest tint */

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --display: "IM Fell English", Georgia, serif;

  --scale: 1;
  --measure: 34em;   /* ~68 characters, and it grows with the text-size setting */
  --step: clamp(1rem, .6rem + 1.2vw, 1.5rem);
}

:root[data-theme="dark"] {
  --paper: #181411;
  --paper-deep: #221d18;
  --paper-edge: #3a3128;
  --ink: #f4eee2;        /* 15.9:1 on dark paper */
  --ink-soft: #cdc2b0;   /* 10.4:1 on dark paper */
  --rule: #443a2f;
  --accent: #e8967a;     /*  7.9:1 on dark paper */
  --accent-hover: #f4b79f;
  --mark: #54401d;
  --shadow: rgba(0, 0, 0, .35);
  --chart-root: #38301a;  /* deep enough to keep the soft ink at 7:1 */
  --chart-child: #3a2820;
  --chart-grand: #221d18;
  --chart-edge: #4d4237;
  --chart-key: #f4b79f;    /* 7.5:1 on the lightest tint */
}

:root[data-size="s"] { --scale: .9; }
:root[data-size="l"] { --scale: 1.2; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: calc(21px * var(--scale));
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* A faint paper grain. Purely decorative, and it never sits over an image. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] body::before { opacity: .035; }

body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Inside running text, links carry an underline as well as a colour, so they
   are still visible to readers who cannot distinguish the hue. */
.prose p a, .prose li a, .prose blockquote a, .prose figcaption a,
.titlepage__blurb a, .hardcopy a, .colophon a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Lists of links are unmistakably links from their layout; underlining every
   row of a contents page or an index only adds noise. */
.toc a, .ixlist a, .plates a, .shelf a { text-decoration: none; }
.toc a:hover, .ixlist a:hover, .plates a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--mark); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--paper);
  padding: .8em 1.2em; font-size: .85em;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.masthead__inner {
  max-width: 84rem; margin: 0 auto;
  padding: .55rem var(--step);
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.masthead__book {
  font-variant: small-caps; letter-spacing: .13em;
  font-size: .74em; color: var(--ink);
}
.masthead__where {
  font-variant: small-caps; letter-spacing: .13em;
  font-size: .74em; color: var(--ink-soft);
}
.masthead__where::before { content: "/"; margin-right: .9rem; color: var(--rule); }
.masthead__nav {
  margin-left: auto; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.masthead__nav > a {
  font-variant: small-caps; letter-spacing: .13em;
  font-size: .74em; color: var(--ink-soft);
  display: flex; align-items: center; gap: .4em;
  min-height: 44px;
}
.masthead__sep { width: 1px; height: 1.4em; background: var(--rule); }

.controls { display: flex; align-items: center; gap: .55rem; }
.controls__label {
  font-variant: small-caps; letter-spacing: .13em;
  font-size: .72em; color: var(--ink-soft);
}
.segmented { display: flex; border: 1px solid var(--rule); background: var(--paper); }
.segmented button {
  min-width: 44px; min-height: 44px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--serif); color: var(--ink);
  border-right: 1px solid var(--rule);
}
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--paper); }

.iconbtn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); cursor: pointer;
}
.i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }

/* ------------------------------------------------------------------ layout */

.reading { max-width: 84rem; margin: 0 auto; padding: 0 var(--step); }

.prose { max-width: min(var(--measure), 100%); margin: 3.2rem auto 0; }
.prose--wide { max-width: min(68rem, 100%); }

.eyebrow {
  font-variant: small-caps; letter-spacing: .15em;
  font-size: .72em; color: var(--accent); margin: 0 0 .7em;
}

h1 {
  font-family: var(--display); font-weight: 400;
  font-size: 2.35em; line-height: 1.12; margin: 0 0 .5em;
  text-wrap: balance;
}
h1.display, h2.display {
  text-align: center; font-variant: small-caps; letter-spacing: .13em;
}
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.45em; line-height: 1.2; margin: 2.2em 0 .7em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }

blockquote {
  margin: 1.6em 0; padding: .1em 0 .1em 1.3em;
  border-left: 2px solid var(--rule); color: var(--ink-soft);
  font-size: .95em;
}
blockquote p:last-child { margin-bottom: 0; }

/* Bundaberg's Beginnings sets everything it quotes in italic, and the recovered
   edition keeps the convention. The other book is set from a manuscript that
   marks its own emphasis, so this is scoped rather than applied to every quote.
   Not ".quoted", which this stylesheet already spends on a word quoted as an
   example and sets in small capitals. */
blockquote.quotation { font-style: italic; }
blockquote.quotation em { font-style: normal; }

/* The authors' own comments on the history they are telling, which the book
   marks only by the initials that close them. */
/* The invitation to report an error, beside the offer of a printed copy. */
.hardcopy--errata { margin-bottom: 1.2rem; }

/* Two plates the book hangs side by side, shown side by side. They stack on a
   narrow screen, where two of anything is one too many. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 1.8em 0; }
.pair figure { margin: 0; }
@media (max-width: 34rem) { .pair { grid-template-columns: 1fr; } }

/* The curtain drawn over the site while it is being checked. */
.gate {
  position: fixed; inset: 0; z-index: 999;
  background: var(--paper); color: var(--ink);
  display: grid; place-items: center; padding: var(--step);
  overflow: auto;
}
.gate__box {
  max-width: 26rem; width: 100%; text-align: center;
  background: var(--paper-deep); border: 1px solid var(--rule);
  padding: 2rem 1.6rem; border-radius: 3px;
}
.gate__title {
  font-family: var(--display); font-weight: 400; font-size: 1.6em;
  margin: 0 0 .7em;
}
.gate__note { color: var(--ink); margin: 0 0 1.4em; }
.gate__label {
  display: block; font-variant: small-caps; letter-spacing: .12em;
  font-size: .78em; margin-bottom: .4em;
}
.gate__input {
  font: inherit; width: 100%; padding: .55em .7em; margin-bottom: 1em;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--paper); color: var(--ink);
}
.gate__wrong { color: var(--accent); margin: 1em 0 0; }

.aside { font-size: .88em; }
/* a whole paragraph that is a note, rather than a note inside a paragraph */
.aside--block {
  margin: 1.3em 0; padding-left: 1.1em;
  border-left: 2px solid var(--rule);
}

/* The book opens each item of a list with a dash, and the dash is the marker. */
.dashed { list-style: none; padding-left: 1.2em; }
.dashed li { position: relative; }
.dashed li::before {
  content: "\2013"; position: absolute; left: -1.2em; color: var(--ink-soft);
}

/* The book's own lists of its appendices, maps, tables and photographs. */
.listnav {
  display: flex; flex-wrap: wrap; gap: .4em 1.4em;
  margin: 1.6rem 0 2.4rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.booklist { margin: 2.6rem 0; }
.booklist__items { list-style: none; padding: 0; margin: 0; }
.booklist__item {
  display: grid; grid-template-columns: 7.5em 1fr 3em;
  gap: .2em .9em; padding: .4em 0;
  border-bottom: 1px solid var(--rule);
}
.booklist__label {
  font-variant: small-caps; letter-spacing: .06em;
  font-size: .82em; color: var(--ink-soft); padding-top: .15em;
}
.booklist__page { text-align: right; color: var(--ink-soft); font-size: .88em; }
@media (max-width: 34rem) {
  .booklist__item { grid-template-columns: 1fr 3em; }
  .booklist__label { grid-column: 1 / -1; }
}

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }

/* The author's decorative initial, kept from the manuscript. */
.dropcap .initial {
  float: left;
  font-family: var(--display);
  font-size: 3.9em; line-height: .78;
  margin: .1em .12em 0 0;
  color: var(--accent);
}

/* The ≈◊≈ the book sets between passages. Decorative, so it is hidden from
   screen readers rather than announced. */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin: 2.4em auto; border: 0;
}
.ornament::before, .ornament::after { content: ""; height: 1px; width: 5.5rem; }
.ornament::before { background: linear-gradient(90deg, transparent, var(--rule)); }
.ornament::after  { background: linear-gradient(270deg, transparent, var(--rule)); }
.ornament span {
  font-family: var(--display); font-size: 1.6em; line-height: 1;
  color: var(--accent); letter-spacing: .3em; text-indent: .3em;
}
.ornament--wide::before, .ornament--wide::after { width: 9rem; }
.ornament--open { margin-top: 0; }

/* ----------------------------------------------------------------- figures */

.figure { margin: 2.2em 0; }
.figure--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.figure--pair figcaption { grid-column: 1 / -1; }

.plate {
  display: block; padding: .55rem;
  background: var(--paper-deep); border: 1px solid var(--paper-edge);
  box-shadow: 0 1px 0 var(--shadow);
}
.plate img { display: block; width: 100%; height: auto; }

figcaption {
  margin-top: .6em; font-size: .8em; font-style: italic;
  color: var(--ink-soft); line-height: 1.5;
}

.inline-plate {
  float: left; width: min(42%, 15rem); height: auto;
  margin: .35em 1.3em .7em 0;
  border: 1px solid var(--paper-edge);
  background: var(--paper-deep); padding: .35rem;
}

/* --------------------------------------------------------------- title page */

.titlepage { max-width: 46rem; margin: 0 auto; padding: 4rem var(--step) 0; text-align: center; }
.titlepage .eyebrow { color: var(--ink-soft); margin-bottom: 1.8em; }
.titlepage__title {
  font-family: var(--display); font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.9rem);
  line-height: 1.04; margin: 0;
}
.titlepage__title .comma { color: var(--accent); }
.titlepage__sub { font-style: italic; font-size: 1.25em; line-height: 1.42; margin: 0; }
.titlepage__sub2 { font-size: .92em; color: var(--ink-soft); margin: .7em auto 0; max-width: 32rem; }
.titlepage__author {
  font-variant: small-caps; letter-spacing: .13em;
  font-size: .88em; margin: 2rem 0 0;
}
.titlepage__author span { color: var(--ink-soft); }

.titlepage__plate { max-width: 62rem; margin: 3.2rem auto 0; padding: 0 var(--step); }
.titlepage__plate .plate { padding: .7rem; }
.titlepage__plate figcaption { text-align: center; }

.titlepage__blurb {
  max-width: min(40rem, 100%); margin: 3.4rem auto 0; padding: 0 var(--step);
}
/* Set left-aligned: this passage runs to eight lines, and centred ragged-both
   text that long is markedly harder to track back to the start of a line. */
.titlepage__blurb p { font-style: italic; }
.titlepage__actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2.2rem; flex-wrap: wrap; }

.btn {
  font-variant: small-caps; letter-spacing: .13em; font-size: .8em;
  padding: .85em 1.8em; border: 1px solid var(--rule);
  background: var(--paper-deep); color: var(--ink);
  display: inline-flex; align-items: center; min-height: 44px;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); }

/* -------------------------------------------------------------- contents */

.home-toc { max-width: 62rem; margin: 0 auto; padding: 0 var(--step); }

.toc { list-style: none; margin: 2rem 0 0; padding: 0; }
.toc--two { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0 3.4rem; }
.toc__item a {
  display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .9rem;
  align-items: baseline; padding: .65em 0;
  border-bottom: 1px solid var(--paper-edge); color: var(--ink);
  min-height: 44px;
}
.toc__item a:hover { color: var(--accent); text-decoration: none; }
.toc__part-note {
  display: block; font-size: .82em; color: var(--ink-soft);
  margin-top: .35em; max-width: 40em;
}
.toc__eyebrow { font-variant: small-caps; letter-spacing: .12em; font-size: .68em; color: var(--ink-soft); }
.toc__words { font-size: .72em; color: var(--ink-soft); }

.note { font-size: .85em; color: var(--ink-soft); margin-top: 2rem; }
.note--centre { text-align: center; }

/* --------------------------------------------------------------- hard copy */

.hardcopy {
  max-width: 62rem; margin: 3.6rem auto 0;
  padding: 1.5rem 1.8rem; display: flex; gap: 1.6rem; align-items: center;
  border: 1px solid var(--paper-edge); background: var(--paper-deep);
  color: var(--accent);
}
.hardcopy div { color: var(--ink); }
.hardcopy h2 {
  font-family: var(--serif); font-variant: small-caps; letter-spacing: .13em;
  font-size: .82em; color: var(--accent); margin: 0 0 .3em;
}
.hardcopy p { margin: 0; font-size: .92em; }
.hardcopy svg { flex-shrink: 0; }

/* -------------------------------------------------------------- page nav */

.pagenav {
  display: flex; justify-content: space-between; gap: 1.5rem;
  max-width: min(var(--measure), 100%); margin: 3.5rem auto 4rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.pagenav a { display: flex; flex-direction: column; gap: .2em; max-width: 47%; color: var(--ink); min-height: 44px; }
.pagenav__next { text-align: right; align-items: flex-end; }
.pagenav__dir { font-variant: small-caps; letter-spacing: .12em; font-size: .68em; color: var(--ink-soft); }
.pagenav__title { font-size: .88em; }

/* ------------------------------------------------------------------ plates */

.plates { list-style: none; margin: 2.4rem 0 4rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 2.4rem; }
.plates__item img { display: block; width: 100%; height: auto; border: 1px solid var(--paper-edge); background: var(--paper-deep); }
.plates__caption { font-size: .82em; font-style: italic; margin: .6em 0 .2em; }
.plates__where { font-size: .74em; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------------- index */

.ixbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
  padding: .7rem 1rem; margin-top: 1.6rem;
  background: var(--paper-deep); border: 1px solid var(--paper-edge);
}
.ixfilter { display: flex; align-items: center; gap: .55rem; flex: 0 0 18rem;
  border: 1px solid var(--rule); background: var(--paper); padding: .35rem .7rem; color: var(--ink-soft); }
.ixfilter input {
  border: 0; background: none; font-family: var(--serif); font-size: .9em;
  color: var(--ink); width: 100%; min-height: 38px;
}
.ixfilter input:focus { outline: none; }
.ixfilter:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.ixletters { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.1rem, 1fr)); gap: .1rem; flex: 1; }
.ixletters a {
  font-variant: small-caps; letter-spacing: .08em; font-size: .84em;
  padding: .2em .45em; color: var(--ink-soft); min-width: 1.9em; text-align: center;
}
.ixcount { font-size: .78em; color: var(--ink-soft); margin: .8em 0 0; min-height: 1.4em; }

.ixgroup__letter {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--display); font-size: 1.9em; color: var(--accent);
  margin: 2.2rem 0 .7rem;
}
.ixgroup__letter::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.ixgroup__letter small {
  font-family: var(--serif); font-variant: small-caps; letter-spacing: .12em;
  font-size: .38em; color: var(--ink-soft); order: 3;
}
.ixlist { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 2.6rem; }
.ixlist__item { break-inside: avoid; margin-bottom: .32em; font-size: .88em; line-height: 1.45; }
.ixlist__refs a {
  margin-left: .35em; font-size: .82em; padding: .1em .25em;
  border-bottom: 1px solid transparent;
}
.ixlist__refs a:hover { border-bottom-color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------------ search */

.searchbox {
  display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem;
  border: 1px solid var(--rule); border-bottom: 2px solid var(--accent);
  background: var(--paper-deep); padding: .7rem 1rem; color: var(--accent);
}
.searchbox:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.searchbox input {
  flex: 1; border: 0; background: none; font-family: var(--serif);
  font-size: 1.15em; color: var(--ink); min-height: 44px;
}
.searchbox input:focus { outline: none; }
.searchbox__count {
  font-variant: small-caps; letter-spacing: .12em; font-size: .72em;
  color: var(--ink-soft); white-space: nowrap;
}

.results { margin-top: 1.8rem; }
.result {
  display: block; padding: 1.1em 0;
  border-bottom: 1px solid var(--paper-edge); color: var(--ink);
}
.result:hover { text-decoration: none; }
.result:hover .result__snippet { color: var(--ink); }
.result__where {
  font-variant: small-caps; letter-spacing: .12em; font-size: .7em;
  color: var(--accent); display: block; margin-bottom: .35em;
}
.result__snippet { font-size: .92em; line-height: 1.6; }
.result mark, .prose mark { background: var(--mark); color: var(--ink); padding: 0 .12em; }

.results__more { display: flex; justify-content: center; margin: 1.6rem 0 4rem; }
.results__more button {
  font-family: var(--serif); font-variant: small-caps; letter-spacing: .13em;
  font-size: .8em; padding: .8em 1.9em; min-height: 44px;
  border: 1px solid var(--rule); background: var(--paper-deep); color: var(--ink); cursor: pointer;
}

/* An index anchor the reader has just jumped to. */
:target, .ix-landed { scroll-margin-top: 5rem; }
.ix-landed { background: var(--mark); box-shadow: 0 0 0 .28em var(--mark); border-radius: 2px; }

.ix { scroll-margin-top: 6rem; }

/* --------------------------------------------------------------- colophon */

.colophon { margin-top: 4rem; border-top: 1px solid var(--rule); background: var(--paper-deep); }
.colophon__inner {
  max-width: 84rem; margin: 0 auto; padding: 1.8rem var(--step);
  display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
  font-size: .78em; color: var(--ink-soft); line-height: 1.6;
}
.colophon p { margin: 0 0 .4em; }
.colophon__right { text-align: right; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 46rem) {
  .masthead__inner { gap: .8rem 1rem; }
  .masthead__where { display: none; }
  .controls__label { display: none; }
  .prose { margin-top: 2.2rem; }
  .ixlist { columns: 1; }
  .ixfilter { flex: 1 1 100%; }
  .inline-plate { float: none; width: 100%; margin: 0 0 1.2em; }
  .figure--pair { grid-template-columns: 1fr; }
  .colophon__inner { flex-direction: column; }
  .colophon__right { text-align: left; }
  .toc__item a { grid-template-columns: 5.5rem 1fr; }
  .toc__words { display: none; }
  h1 { font-size: 1.85em; }
}

@media print {
  .masthead, .pagenav, .skip, .colophon, .ixbar { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before { display: none; }
  .prose { max-width: none; }
  a { color: #000; text-decoration: underline; }
}

/* The note shown when a reader has followed an index entry into the text. */
.ix-return {
  display: flex; gap: .8em; align-items: baseline; flex-wrap: wrap;
  font-size: .78em; color: var(--ink-soft);
  margin: -.6em 0 1.4em; padding-left: .9em;
  border-left: 2px solid var(--accent);
}
.ix-return a { margin-left: auto; white-space: nowrap; }

/* The author's chapter-structure chart, redrawn as vector artwork. It is wider
   than the reading measure, so on a roomy screen it is allowed to break out of
   the column rather than shrink into illegibility. */
.figure--diagram { margin: 2.6em 0; }
.figure--diagram .diagram {
  display: block; width: 100%; height: auto;
  background: var(--paper-deep);
  border: 1px solid var(--paper-edge);
  padding: 1rem;
}
@media (min-width: 68rem) {
  .figure--diagram { width: 52rem; margin-left: calc((100% - 52rem) / 2); }
}
.plates__link .diagram { border: 1px solid var(--paper-edge); background: var(--paper-deep); }

/* A section's subtitle. Word stored these as separate paragraphs; they belong
   together as one block, set close. */
.deck {
  text-align: center; margin: -.4em 0 2em;
  font-size: 1.06em; line-height: 1.42; color: var(--ink-soft);
  text-wrap: balance;
}
.deck em { font-style: italic; }

/* Entries on the Note on the Text page: what the printed book has, and what this
   edition has in its place. */
.change {
  margin: 1.6em 0; padding: 1em 1.2em;
  border: 1px solid var(--paper-edge); background: var(--paper-deep);
}
.change__head {
  display: flex; gap: .9em; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 .7em; padding-bottom: .6em; border-bottom: 1px solid var(--rule);
}
.change__kind {
  font-variant: small-caps; letter-spacing: .12em; font-size: .68em;
  color: var(--paper); background: var(--accent); padding: .18em .7em;
}
.change--discrepancy .change__kind { background: var(--ink-soft); }
.change__where { font-size: .9em; }
.change__line {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: .8em;
  margin: 0 0 .45em; font-size: .9em; align-items: baseline;
}
.change__label {
  font-variant: small-caps; letter-spacing: .11em; font-size: .82em;
  color: var(--ink-soft);
}
.change__note { margin: .7em 0 0; font-size: .85em; color: var(--ink-soft); font-style: italic; }
@media (max-width: 46rem) {
  .change__line { grid-template-columns: 1fr; gap: .1em; }
}

/* ------------------------------------------------------------------ library */

.masthead__up {
  display: flex; align-items: center; gap: .25em; min-height: 44px;
  font-variant: small-caps; letter-spacing: .13em; font-size: .74em;
  color: var(--ink-soft);
}

.shelf {
  max-width: min(58rem, 100%); margin: 3.6rem auto 0; padding: 0 var(--step);
  display: flex; flex-direction: column; gap: 2.6rem;
}
.shelf__work {
  padding: 1.9rem 2rem;
  border: 1px solid var(--paper-edge); background: var(--paper-deep);
}
/* the nineteenth-century source sits apart from the author's own two books */
.shelf__work--source { background: none; border-style: dashed; }
.shelf__head { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.shelf__title {
  font-family: var(--display); font-weight: 400; font-size: 1.85em;
  line-height: 1.14; margin: 0 0 .25em; text-wrap: balance;
}
.shelf__title a { color: var(--ink); }
.shelf__title a:hover { color: var(--accent); text-decoration: none; }
.shelf__sub { font-style: italic; color: var(--ink-soft); margin: 0 0 .5em; font-size: .95em; }
.shelf__by {
  margin: 0; font-variant: small-caps; letter-spacing: .1em; font-size: .8em;
}
.shelf__year { color: var(--ink-soft); }
.shelf__tag {
  margin-left: .7em; padding: .12em .6em; font-size: .85em;
  border: 1px solid var(--rule); color: var(--ink-soft);
}
.shelf__blurb { margin: 0 0 .9em; }
.shelf__note { margin: 0 0 1.3em; font-size: .88em; color: var(--ink-soft); font-style: italic; }
.shelf__actions { display: flex; gap: .9rem; flex-wrap: wrap; margin: 0; }
.btn__size {
  margin-left: .6em; font-variant: normal; letter-spacing: normal;
  font-size: .85em; opacity: .78;
}

.work__get { margin: 2rem 0; }

.biblio {
  display: grid; grid-template-columns: 10rem 1fr; gap: .1em 1.4em;
  margin: 1.4rem 0 2.4rem; font-size: .92em;
}
.biblio dt {
  font-variant: small-caps; letter-spacing: .11em; font-size: .86em;
  color: var(--ink-soft); padding: .38em 0;
}
.biblio dd { margin: 0; padding: .38em 0; border-bottom: 1px solid var(--paper-edge); }

@media (max-width: 46rem) {
  .shelf__work { padding: 1.3rem 1.2rem; }
  .biblio { grid-template-columns: 1fr; gap: 0; }
  .biblio dt { padding-bottom: 0; }
  .biblio dd { padding-top: .1em; }
}

/* A reference to another book in this library. The page-level ones open the
   cited work's PDF at the page that carries the passage. */
.xref {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.xref--page::after {
  content: "";
  display: inline-block;
  width: .52em; height: .52em;
  margin-left: .28em;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4L10 14M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/></svg>");
  mask: center/contain no-repeat url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4L10 14M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/></svg>");
}

/* A printed page boundary, carried over so the index can point at it. */
.pg { scroll-margin-top: 6rem; }

.genealogy { margin: 0 0 .2em; font-size: .88em; color: var(--ink-soft); }

/* A table recovered from the printed page: a label and its value. Set as a
   two-column grid where there is room and as stacked pairs on a narrow screen,
   so a long value wraps under its label rather than off the side. */
.rows {
  display: grid;
  grid-template-columns: minmax(6em, 13em) 1fr;
  gap: .45em 1.4em;
  margin: 1.4em 0;
  padding: .9em 1.1em;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.rows dt { font-weight: 600; }
.rows dd { margin: 0; }
.rows__full { grid-column: 1 / -1; }
.rows dt:empty, .rows dd:empty { display: none; }

/* A table the book sets as a table. It scrolls inside its own box rather than
   pushing the page sideways, since some of them are six columns wide. */
.grid { margin: 1.6em 0; overflow-x: auto; }
.grid table {
  border-collapse: collapse; width: 100%;
  font-size: .88em; line-height: 1.35;
}
.grid caption {
  caption-side: top; text-align: left; padding: 0 0 .5em;
  font-variant: small-caps; letter-spacing: .08em; color: var(--ink-soft);
}
.grid th, .grid td {
  padding: .35em .8em .35em 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.grid th { font-weight: 600; border-bottom-width: 2px; }
.grid tbody th { border-bottom-width: 1px; vertical-align: top; padding-right: 1.2em; }
.grid td:not(:first-child) { white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 34rem) {
  .rows { display: block; }
  .rows dt { margin-top: .7em; }
  .rows dt:first-child { margin-top: 0; }
  .rows dd { margin: 0 0 0 1.1em; }
  .rows dd.rows__full { margin-left: 0; }
}
.stray-caption { font-size: .82em; font-style: italic; color: var(--ink-soft); }

/* A word quoted as an example rather than as speech. */
.quoted {
  font-family: var(--serif); font-variant: small-caps; letter-spacing: .08em;
  background: var(--paper-deep); padding: 0 .3em; border: 1px solid var(--paper-edge);
}

/* The part a chapter belongs to, named above its own title. */
.partline {
  font-size: .82em; color: var(--ink-soft); margin: 0 0 .6em;
  padding-bottom: .5em; border-bottom: 1px solid var(--rule);
}
.partline span {
  font-variant: small-caps; letter-spacing: .13em; color: var(--accent);
  margin-right: .6em;
}
.byline {
  font-size: .88em; color: var(--ink-soft); font-style: italic;
  margin: -.6em 0 1.8em;
}
.toc__part {
  list-style: none; margin: 2.2rem 0 .6rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--rule);
}
.toc__part-label {
  display: block; font-variant: small-caps; letter-spacing: .14em;
  font-size: .74em; color: var(--accent);
}
.toc__part-title {
  display: block; font-family: var(--display); font-size: 1.25em; line-height: 1.2;
}
.toc__part-sub {
  display: block; font-size: .82em; color: var(--ink-soft); font-style: italic;
  margin-top: .2em;
}

.toc__sub {
  display: block; font-size: .8em; color: var(--ink-soft); font-style: italic;
}

/* Centred type carried over from the page: a dedication, an epigraph, the
   lettering that faces a plate. Set close, as the book sets it. */
.prose .centred { text-align: center; margin-bottom: .3em; text-wrap: balance; }
.prose .centred + .centred { margin-top: 0; }
.prose .centred:last-child { margin-bottom: 1.1em; }

/* Who signed a preface, a foreword or the closing notes, and when. */
.signature {
  font-style: italic; color: var(--ink-soft);
  margin: 2.4em 0 1.8em auto; width: fit-content; max-width: 100%;
  padding-left: 2em; line-height: 1.5;
}

.bullets { margin: 0 0 1.1em; padding-left: 1.3em; }
.bullets li { margin-bottom: .4em; }

/* ------------------------------------------------- the chart of descendants */

/* A chart is wider than a column of prose. This lets it out of the measure on
   a roomy screen, while leaving it in place on a narrow one. */
.breakout {
  width: min(78rem, calc(100vw - 3rem));
  margin-left: 50%; transform: translateX(-50%);
}

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { margin: 2rem 0 3rem; }

.card {
  border: 1px solid var(--chart-edge); background: var(--chart-grand);
  padding: .55em .8em; box-shadow: 0 1px 0 var(--shadow);
}
.card__name { margin: 0 0 .3em; font-size: .92em; line-height: 1.25; }

/* born, died and married, ranged in columns so the dates line up down the box */
.card__facts {
  display: grid; grid-template-columns: 1.1em max-content 1fr;
  column-gap: .5em; row-gap: .05em;
  font-size: .8em; line-height: 1.35; color: var(--ink-soft);
}
.card__key {
  font-style: italic; color: var(--chart-key);
  text-decoration: none; border: 0; cursor: help;
}
.card__date { white-space: nowrap; }
.card__loose { grid-column: 1 / -1; }

/* The printed chart tints the generations: Walter yellow, his children pink,
   their children white. */
.card--root { background: var(--chart-root); }
.card--parent { background: var(--chart-child); }

/* Walter stands at the head of the chart, centred over the rule his children
   hang from, as the printed chart sets him. */
.tree__root > .card--root { max-width: 22rem; margin-inline: auto; }

/* the key to the generation tints */
.chart-key { display: flex; flex-wrap: wrap; gap: .3em .9em; align-items: baseline; }
.chart-key__swatch {
  display: inline-block; width: .8em; height: .8em; margin-right: .35em;
  border: 1px solid var(--chart-edge); vertical-align: -.05em;
}
.chart-key__swatch--root { background: var(--chart-root); }
.chart-key__swatch--child { background: var(--chart-child); }
.chart-key__swatch--grand { background: var(--chart-grand); }

.tree__families {
  margin-top: 1.6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.8rem;
  /* the rule running across the top, from which each family hangs */
  border-top: 2px solid var(--rule); padding-top: 1.6rem;
}
.family { display: flex; flex-direction: column; }

/* the bracket joining a parent to their children, as the chart draws it */
.family__children {
  margin: .5rem 0 0 .8rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  display: flex; flex-direction: column; gap: .55rem;
}
.family__child { position: relative; }
.family__child::before {
  content: ""; position: absolute; left: -1rem; top: 1.1em;
  width: .75rem; height: 2px; background: var(--rule);
}

@media print {
  .tree__families { grid-template-columns: repeat(2, 1fr); }
  .card { box-shadow: none; }
}

/* Folding a family away. <details> does the work; this only dresses it. */
.family__fold { display: flex; flex-direction: column; }
.family__summary {
  list-style: none; cursor: pointer; position: relative;
  border-radius: 1px;
}
.family__summary::-webkit-details-marker { display: none; }
.family__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.family__summary .card { transition: none; }
.family__summary:hover .card { border-color: var(--accent); }

.family__count {
  display: block; margin: .3em 0 0 .8em;
  font-size: .74em; font-variant: small-caps; letter-spacing: .1em;
  color: var(--ink-soft);
}
.family__count::before {
  content: "\25be"; margin-right: .45em; color: var(--accent);
  display: inline-block; font-variant: normal;
}
.family__fold:not([open]) .family__count::before { content: "\25b8"; }
.family__fold:not([open]) .family__count { color: var(--accent); }

@media print { .family__count { display: none; } }

/* ------------------------------------------------ audit corrections */

/* The index's reference links are the site's main navigation. WCAG 2.5.8 asks
   for 24x24; these were 15 wide. */
.ixlist__refs a {
  display: inline-block; min-width: 24px; min-height: 24px;
  padding: .2em .4em; text-align: center;
}
.ixletters a { min-width: 2.2em; min-height: 44px; display: flex;
  align-items: center; justify-content: center; }

/* The three A's are buttons, which do not inherit font-size, so the middle one
   fell back to the browser's 13px and rendered smaller than "smaller". */
.segmented button { font-size: 1em; line-height: 1; }

/* Tell the browser which way the page is painted, so it styles the native
   search controls and their placeholders to match. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
::placeholder { color: var(--ink-soft); opacity: 1; }

/* At 320px the contact block, the plate grid and the search field each forced
   the page wider than the screen. */
@media (max-width: 30rem) {
  .hardcopy { flex-direction: column; gap: .9rem; padding: 1.1rem 1rem; }
  .hardcopy p { overflow-wrap: anywhere; }
}
.plates { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.searchbox input { min-width: 0; }
.searchbox { flex-wrap: wrap; }
.searchbox__count { margin-left: auto; }

/* A caption the book prints beneath a plate but outside its frame. */
.figure figcaption .plate-note { display: block; }