html {
  font-size: 118.75%; /* 16px * 1.1875 = 19px */
}

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem; /* 19px, scales with html's root font-size above */
  line-height: 1.6;
  color: #000;
  background-color: #fff;
  margin: 1.5em;
}

/* ========== Headings ========== */
h1 {
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
  margin-top: 0; /* remove top margin */
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
}

h2, h3 {
  margin-top: 0; /* remove top margin */
}

h2 {
  text-align: center;
  line-height: 1.3;
  margin-bottom: 0.875rem;
}

h3 {
  text-align: left;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* ========== Text & Paragraphs ========== */
p, .intro-paragraph {
  margin-top: 0; /* remove top margin */
  margin-bottom: 1.25em;
  line-height: 1.6;
}

blockquote {
  font-style: italic;
  text-align: center;
  margin-top: 0; /* remove top margin */
  margin-right: 0; /* reset browser default blockquote margin */
  margin-left: 0;
  margin-bottom: 1.25em;
  text-indent: 0;
  line-height: 1.6;
}

/* Centered epigraph/verse blocks carry this inline style — it's what
   Lexical's own QuoteNode export writes for a center-formatted block. Every
   blockquote is already center-aligned above; this just gives the epigraph
   variant extra breathing room after it. */
blockquote[style*="text-align: center"] {
  margin-bottom: 2.5em; /* keep spacing after */
}

.footnotes {
  text-indent: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 1em;
}

/* ========== Tables ========== */
/* No explicit table/td rule existed here before, so the browser's own
   default table styling (a visible 1px cell border) was showing on every
   genealogy-entry table. */
table {
  border-collapse: collapse;
  /* Bleed the table (and its row-striping background) out through
     .container's 1.5em padding to the container's own border. Cell padding
     below keeps the actual text inset, matching everything else. */
  margin-left: -1.5em;
  margin-right: -1.5em;
  width: calc(100% + 3em);
}

table,
td,
th {
  border: none;
}

td,
th {
  padding: 0.5em 1.5em;
  vertical-align: top;
}

tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* scripts/splitListTables.mjs represents "a numbered list item with its
   own detail table" as an <ol> holding just that item's name, a sibling
   table.nested with its fields, then a fresh <ol start="N"> continuing
   the numbering for the next item — real @lexical/list can't have a
   <table> as a child of <li> (see that script's header comment) without
   losing it on save. Undo the gap ol's own margin-bottom would put
   between the name and "its" table, and put that item-spacing on the
   table instead so it lands between the table and the next item's name —
   the pair then reads as one continuous numbered list. */
ol:has(+ table.nested) {
  margin-bottom: 0;
}

/* table.nested's own <colgroup> is a small fixed width (400px total —
   see scripts/splitListTables.mjs), much narrower than the value cell
   it sits in. The bare `table` rule above bleeds a table's margin by
   -1.5em on both sides assuming it's stretched to fill
   `calc(100% + 3em)`, but table-layout: auto won't stretch fixed
   <col> widths to fill a wider declared table width — so the table's
   actual rendered width falls short of that target, and only the left
   edge (an unconditional margin shift) reaches it; the right edge,
   bounded by the table's real width, doesn't. Undo the bleed and size
   it explicitly instead, with table-layout: fixed so the declared
   width is actually honored — auto layout won't stretch/shrink a
   table away from its <col> widths' own pixel sum, fixed scales them
   proportionally (keeping their 35/65 ratio) to fit whatever width is
   declared.
   80% is meant as 80% of the *outer* table, but a bare percentage here
   resolves against this table's own containing block — the value
   cell's content box, which is already narrower than the outer table
   by that cell's own 1.5em-per-side padding (td, th above). Add that
   padding back (2 sides × 1.5em × the 80% they'd otherwise be counted
   at) so the percentage basis is effectively the outer table's full
   width instead of the shrunk content box. */
table.nested {
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
  width: calc(80% + 2.4em);
  table-layout: fixed;
}

/* td.indented (see the .indented rule above) replaces the ordinary
   1.5em padding-left with 3.5em, so its content box is narrower by
   3.5em + 1.5em = 5em total rather than the 1.5em + 1.5em = 3em the
   offset above assumes — the same compensation, recomputed for this
   td's actual (asymmetric) padding: 0.8 × 5em = 4em. */
td.indented > table.nested {
  width: calc(80% + 4em);
}

/* ========== Lists ========== */
ul,
ol {
  padding-left: 0;
  list-style-position: inside;
  margin-top: 0; /* remove top margin */
  margin-bottom: 1em;
  line-height: 1.6;
}

li {
  margin-bottom: 0.5em;
}

/* Lexical always wraps list-item text in a <p> — a block element, which
   breaks out of the marker's inline flow under list-style-position: inside
   and drops to its own line. Keep just the first paragraph inline so the
   number/bullet stays on the same line as the text it marks; a second <p>
   in the same <li> (an extra detail line for that entry) stays block so it
   still wraps to its own line below. */
li > p:first-child {
  display: inline;
}

/* ========== Container ========== */
.container {
  position: relative;
  max-width: 50em;
  margin-inline: auto;
  padding: 1.5em;
  border: 0.5em double #000;
  box-sizing: border-box;
  background-color: #fff;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border: 0.25em solid #000;
}

.container::before {
  top: -0.25em;
  left: -0.25em;
  border-right: none;
  border-bottom: none;
}

.container::after {
  bottom: -0.25em;
  right: -0.25em;
  border-left: none;
  border-top: none;
}

/* ========== Genealogy Layout ========== */
.genealogy-entry {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fdfdfd;
  font-size: 1rem;
  line-height: 1.6;
}

/* .header's own content is always a real heading now (see
   scripts/migrateHeaderToHeadingTags.mjs) — h2 for the entry's name, h3 for
   an entry needing a second, lighter-weight tier above it (e.g. an
   honorific line). These reproduce exactly how the old flat
   .header/.section-header classes looked, scoped under .header (not the
   bare global h2/h3 rules used elsewhere in the book) so they don't affect
   headings outside genealogy entries. */
.genealogy-entry .header {
  margin-bottom: 1rem;
}

.genealogy-entry .header h2 {
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
  text-align: left;
  text-transform: uppercase;
}

.genealogy-entry .header h3 {
  font-weight: normal;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
  text-align: left;
  text-transform: none;
}

.genealogy-entry .sub-header {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: center;
}

.genealogy-entry .row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.genealogy-entry .label {
  flex: 0 0 40%;
  font-weight: 600;
  color: #333;
}

.genealogy-entry .value {
  flex: 1;
  color: #444;
}

.indented{
  margin-left: 2em;
}

/* margin has no effect on table-internal display types (table-row,
   table-cell) per the CSS box model — a plain .indented on a <tr> or <td>
   (as already used for a couple of rows in generation-6, and now a
   list-only row split out from a label:value cell) silently did nothing.
   padding-left works there instead, added on top of td/th's own base
   horizontal padding above. */
tr.indented > td,
td.indented {
  padding-left: 3.5em;
}