/* Typography for the essays.
 *
 * The brief was "tasteful, Woolfian", so this borrows from the printed page
 * rather than from the web: a warm paper ground, one old-style serif, a measure
 * near 66 characters, and paragraphs set solid with first-line indents instead
 * of the blank-line-between-blocks pattern the web defaults to. That last one
 * does most of the work — indented, unspaced paragraphs are the single strongest
 * signal that a thing is a book and not a post.
 *
 * The palette is Bloomsbury rather than Bauhaus: warm off-white, brown-black
 * ink, and one muted ochre borrowed from the Hogarth Press covers Vanessa Bell
 * cut for Woolf's first editions. No pure black, no pure white, no third colour.
 *
 * No web fonts: an old-style serif is already on every machine that matters,
 * and a 200KB font file to render 9KB of prose is exactly the sort of thing
 * this essay is complaining about.
 */

:root {
  --paper: #faf7f0;
  --ink: #23211d;
  --ink-soft: #4a463f;
  --ink-faint: #8a8377;
  --ochre: #9c6644;
  --rule: #ddd6c8;

  --measure: 33em;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "Hoefler Text", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16150f;
    --ink: #ddd7ca;
    --ink-soft: #b3ad9f;
    --ink-faint: #7d766a;
    --ochre: #c08a5e;
    --rule: #33301f;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 5rem 1.5rem 7rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.72;
  /* Old-style figures sit inside the line rather than shouting above it; the
     ligature and kerning features are free on the faces above. */
  font-variant-numeric: oldstyle-num;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.sheet {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

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

header.titlepage {
  text-align: center;
  margin-block-end: 4.5rem;
}

h1 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 1.2rem;
  letter-spacing: .01em;
}

.epigraph {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  font-size: 1.02rem;
}

/* The ornament in place of a horizontal rule — a printer's flower, which is
   what the --- in the source actually means on a title page. */
.ornament {
  border: 0;
  margin: 2.6rem auto 0;
  color: var(--ochre);
  inline-size: 100%;
  text-align: center;
  overflow: visible;
}
.ornament::before {
  content: "❧";
  font-size: 1.1rem;
  line-height: 1;
}

/* --- section numbers ----------------------------------------------------- */

h2 {
  font-size: .82rem;
  font-weight: 400;
  text-align: center;
  letter-spacing: .28em;
  text-indent: .28em; /* recentre: letter-spacing adds a trailing gap */
  text-transform: uppercase;
  color: var(--ochre);
  margin: 3.6rem 0 1.8rem;
}

/* --- prose --------------------------------------------------------------- */

p {
  margin: 0;
  text-indent: 1.4em;
  hanging-punctuation: first last;
}

/* A paragraph opening a section is not indented — there is nothing above it to
   distinguish it from. This is the standard rule in book setting and its
   absence is why most web "book" styling looks not-quite-right. */
h2 + p,
.epigraph + p,
.ornament + p {
  text-indent: 0;
}

/* Drop cap on the very first paragraph only. */
.sheet > p.opening::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: .84;
  padding-inline-end: .08em;
  padding-block-start: .04em;
  color: var(--ochre);
}

em {
  font-style: italic;
}

strong {
  font-weight: 600;
  letter-spacing: .01em;
}

/* --- footer -------------------------------------------------------------- */

footer.colophon {
  max-inline-size: var(--measure);
  margin: 5rem auto 0;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
  font-style: italic;
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 34rem) {
  html {
    font-size: 17.5px;
  }
  body {
    padding: 3rem 1.25rem 4rem;
  }
  h1 {
    font-size: 1.7rem;
  }
}

/* --- print --------------------------------------------------------------- */

@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --ochre: #000;
  }
  body {
    font-size: 11pt;
    padding: 0;
  }
  h2 {
    break-after: avoid;
  }
  p {
    orphans: 2;
    widows: 2;
  }
  footer.colophon {
    display: none;
  }
}