/* ============================================================================
   Township & Borough — Typographic foundation
   1898 letterpress letterforms, delivered on a modern stack.
   Body: EB Garamond · Archival accents: IM Fell English · Data: IBM Plex Mono
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IM+Fell+English:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Palette after Tufte CSS: warm off-white ground, off-black ink.
     (edwardtufte.github.io/tufte-css — #fffff8 / #111111) */
  --paper:        #fffff8;
  --paper-deep:   #f4f2e6;   /* map ground / recessed panels, a hair deeper */
  --ink:          #111111;
  --ink-soft:     #3a3730;
  --ink-faint:    #6f6a5c;
  --rule:         #d3cfbe;
  --rule-soft:    #e7e3d3;
  --oxblood:      #7c3a2d;   /* the single accent: fleurons, links, drop caps, lens */
  --oxblood-lit:  #9a4b3a;

  --serif:   'EB Garamond', 'Sorts Mill Goudy', Georgia, 'Times New Roman', serif;
  --archive: 'IM Fell English', 'EB Garamond', Georgia, serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, Menlo, monospace;

  --measure: 34rem;         /* ideal reading measure */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

/* ---- reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  /* faint fibrous paper grain */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.55rem + 0.9vw, 1.22rem);
  line-height: 1.62;
  font-feature-settings: "kern", "liga", "onum", "pnum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- headings: letterspaced caps, as on the title page ---- */
h1, h2, h3, .caps {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: clamp(2rem, 1rem + 4vw, 4.4rem); letter-spacing: 0.16em; font-weight: 500; }
h2 { font-size: clamp(1.3rem, 0.9rem + 1.4vw, 2rem); letter-spacing: 0.15em; }
h3 { font-size: 1.02rem; letter-spacing: 0.2em; color: var(--ink-soft); }

p { margin: 0 0 1.1em; }
p + p { text-indent: 1.4em; margin-top: -0.4em; }  /* letterpress paragraph indent */

/* justified body, like the book, with hyphenation */
.prose p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

a {
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color .15s ease, border-color .15s ease;
}
@media (hover: hover) { a:hover { color: var(--oxblood-lit); border-color: var(--oxblood-lit); } }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

small, .small { font-size: 0.82em; }

/* ---- ornaments ---- */
.fleuron {
  display: block;
  text-align: center;
  color: var(--oxblood);
  font-family: var(--archive);
  font-size: 1.5rem;
  line-height: 1;
  margin: 2.2rem 0;
  opacity: 0.9;
}
.fleuron::before { content: "❧"; }

hr, .rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 2rem 0;
}
.rule--double {
  height: 4px;
  background: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* small-caps device used for running heads, labels */
.sc {
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.08em;
}

/* archival italic used for the epigraph */
.epigraph {
  font-family: var(--archive);
  font-style: italic;
  font-size: clamp(1.15rem, 0.8rem + 1vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  max-width: 30rem;
  margin: 0 auto;
  text-wrap: balance;
}
.epigraph cite {
  display: block;
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 0.62em;
  color: var(--ink-faint);
  margin-top: 1.1em;
}

/* page-level spacing modifiers — these were inline styles on writings.html */
.epigraph--lead { margin-bottom: 2.2rem; }
.rule--section { margin-top: 3rem; }
.section-head { margin-top: 2.5rem; text-align: center; }

/* drop cap for the opening paragraph of a text block */
.dropcap::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 3.9em;
  line-height: 0.78;
  padding: 0.06em 0.09em 0 0;
  color: var(--oxblood);
}

/* monospaced data / coordinates / file sizes */
code, .mono { font-family: var(--mono); font-size: 0.86em; }