/* A map's About page (about.html, one per map): one leaf of vellum set for long reading.
   The room, the leaf, the bar and the foot are page.css. The map's own hands come from its
   fonts.css (descriptor "lettering.css"), which defines --hand-roman, --hand-italic,
   --hand-flowing and --hand-plain on #ui (the page's <body>): they letter the title, the
   lead and the headings only. The body is the book serif, at a measure of about 36em. */

.about-page main { margin: 0 auto; padding: 0 20px 24px; }
/* The bar lines up with the leaf. */
.about-page .topbar { max-width: calc(36 * 19px + 2 * clamp(22px, 5.2vw, 68px) + 32px); }
.topbar .elsewhere { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 1.2em; }

.about {
  /* the leaf's padding is page.css's; its content box is the measure */
  max-width: calc(36em + 2 * clamp(22px, 5.2vw, 68px));
  font-size: 19px;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ── the map's hand: title, lead, headings ── */
.about h2, .about h3, .about .lead, .about li > b:first-child {
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.about h2 {
  margin: 0.05em 0 0.55em;
  font-family: var(--hand-roman);
  font-weight: normal;
  font-size: clamp(34px, 5.2vw, 54px);
  line-height: 1.12;
  letter-spacing: 0.04em;
  text-align: center;
  text-wrap: balance;
}
.about h2::after {
  content: "";
  display: block;
  width: 6.5em;
  max-width: 60%;
  height: 1px;
  margin: 0.38em auto 0;
  background: linear-gradient(to right, transparent, var(--rubric) 35%, var(--rubric) 65%, transparent);
  opacity: 0.75;
}
.about .lead {
  max-width: 26em;
  margin: 0 auto 1.4em;
  font-family: var(--hand-italic);
  font-style: italic;
  font-size: 1.4em;
  line-height: 1.38;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}
.about .lead::first-letter { color: var(--rubric); }
.about h3 {
  margin: 2.1em 0 0.65em;
  font-family: var(--hand-roman);
  font-weight: normal;
  font-size: 1.32em;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-align: center;
  text-wrap: balance;
  break-after: avoid;
}
.about h4 { margin: 1.6em 0 0.4em; font-size: 1em; font-weight: normal; font-style: italic; color: var(--ink-soft); }

/* ── the body: the book serif ── */
.about p { margin: 0 0 0.9em; }
.about em, .about i { font-style: italic; }
.about b, .about strong { font-weight: 600; }
.about a { overflow-wrap: anywhere; }
.about ul, .about ol { margin: 0 0 1em; padding: 0; }
.about ul { list-style: none; }
.about ol { padding-left: 1.6em; }
.about ol li::marker { color: var(--sepia); font-variant-numeric: lining-nums; }
.about li { margin: 0 0 0.55em; }
.about ul > li { position: relative; padding-left: 1.35em; }
.about ul > li::before {
  content: "\2766";
  position: absolute;
  left: 0;
  top: 0.12em;
  color: var(--rubric);
  font-family: var(--ui-serif);
  font-style: normal;
  font-size: 0.8em;
}
/* a list item's lead-in, in the map's hand */
.about li > b:first-child { font-family: var(--hand-roman); font-weight: normal; letter-spacing: 0.035em; }
.about blockquote { margin: 0 0 1em; padding: 0 0 0 1.1em; border-left: 1px solid var(--rule); color: var(--ink-soft); font-style: italic; }
.about hr { margin: 2em auto; width: 6em; border: 0; border-top: 0.5px solid var(--rule); }
.about code { color: var(--ink); }
.about pre { margin: 0 0 1em; padding: 0.8em 1em; overflow-x: auto; background: rgba(42, 29, 20, 0.06); border: 0.5px solid var(--rule); font-size: 0.8em; line-height: 1.5; }
.about img { max-width: 100%; height: auto; }
.about table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9em; font-variant-numeric: lining-nums tabular-nums; }
.about th, .about td { padding: 0.35em 0.8em; border-bottom: 0.5px solid var(--rule); text-align: left; }

/* ── figures: full measure, a plate with its caption ── */
.about figure { margin: 1.9em 0 2em; }
.about figure img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(42, 29, 20, 0.08);
  box-shadow: 0 0 0 0.5px rgba(42, 29, 20, 0.5), 0.15em 0.3em 0.9em -0.35em rgba(0, 0, 0, 0.45);
}
.about figcaption {
  margin: 0.65em 0 0;
  font-size: 0.84em;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: balance;
}

/* ── the credit: who made it, with links a finger can take ── */
.about .credit {
  margin: 2.4em 0 0;
  padding-top: 0.8em;
  border-top: 0.5px solid var(--rule);
  text-align: center;
  font-size: 0.9em;
  color: var(--ink-soft);
  -webkit-hyphens: manual;
  hyphens: manual;
}
.about .credit a {
  display: inline-block;
  padding: 0.7em 0.2em;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(36, 64, 111, 0.55);
}

/* (locally, while the script fetches the words, and if it cannot) */
.about .wait { text-align: center; font-style: italic; color: var(--sepia); }

@media (max-width: 640px) {
  .about-page main { padding: 0 0 16px; }
  .about { font-size: 17px; line-height: 1.58; }
  .about h2 { font-size: 34px; }
  .about .lead { font-size: 1.3em; }
  .about h3 { font-size: 1.26em; margin-top: 1.9em; }
  .about figure { margin: 1.5em 0 1.6em; }
}