/* The About page: one centred reading column in IM Fell English on newsprint grey,
   like the title page of the main page. The few variables are copied from ../style.css
   rather than linking it, because that file lays the whole page out as a full-height grid. */
:root {
  --paper: #ecebe8;
  --ink: #1b1b1b;
  --grey: #65645f;
  --hair: #d2d1cd;
  --fell: 'IM Fell English', Georgia, serif;
  --fell-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  font: 400 18px/1.6 var(--fell);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  padding: 0 max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}
.sc { font-family: var(--fell-sc); letter-spacing: 0.03em; }
.back, main, footer { display: block; max-width: 36em; margin: 0 auto; }
.back { padding: 16px 0 0; color: var(--grey); text-decoration: none; font-size: 16px; }
.back:hover { color: var(--ink); text-decoration: underline; }

/* The first heading is the title page: centred, italic, ruled off below. */
main h1 {
  margin: 28px 0 24px; padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  text-align: center; font: italic 400 34px/1.15 var(--fell);
}
main h2 { margin: 2em 0 0.4em; font: 400 22px/1.2 var(--fell-sc); letter-spacing: 0.05em; }
main h3 { margin: 1.5em 0 0.3em; font: italic 400 19px/1.2 var(--fell); }
main p, main ul, main ol, main blockquote { margin: 0 0 1em; }
main ul, main ol { padding-left: 1.4em; }
main a { color: var(--ink); text-underline-offset: 2px; }
main code { font: 0.85em ui-monospace, Menlo, monospace; background: var(--hair); padding: 0 0.3em; }
main blockquote { border-left: 2px solid var(--ink); padding-left: 1em; color: var(--grey); font-style: italic; }
main hr { border: 0; border-top: 1px solid var(--hair); margin: 2em 0; }
.loading { color: var(--grey); text-align: center; }

footer { margin-top: 3em; padding-top: 14px; border-top: 2px solid var(--ink); text-align: center; font-size: 16px; }
#socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
#socials a { color: var(--grey); }
#socials a:hover, #socials a:focus-visible { color: var(--ink); }
#socials .socials { display: inline-flex; gap: 18px; }
#socials svg { width: 22px; height: 22px; }