/* ==========================================================================
   Kinder Cemetery — "Ledger" design system
   Audience: older visitors and people with low vision.
   Goals: high contrast (WCAG AA and better), large readable type, keyboard
   friendly, works with or without JavaScript. The visual idea is the
   cemetery's own record book — broadsheet flag, hairline rules, oxblood ink
   on warm paper — rather than a generic website chrome.
   ========================================================================== */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Paper and ink */
  --paper:      #f5f1e6;   /* page */
  --paper-2:    #efeade;   /* tint: notice, nav band, row hover */
  --paper-3:    #fbf8f0;   /* photo mat */
  --ink:        #1c1a15;   /* body text — ~15:1 on --paper */
  --ink-deep:   #23201a;   /* masthead strip, table head, footer */
  --ink-soft:   #3d382d;   /* secondary prose — ~11:1 */
  --ink-muted:  #5c5443;   /* captions, notes, labels — ~6.5:1 */
  --rule:       #c9c0aa;   /* hairlines */
  --rule-strong:#8f8674;   /* heavier hairlines */
  --rule-hair:  #ddd5c1;   /* table row rules */
  --accent:     #7b2f26;   /* oxblood — links, marks, actions — ~8.2:1 */
  --accent-deep:#4a1c16;
  --cream:      #e8e1cf;   /* text on ink — ~12.5:1 */
  --cream-soft: #b3ab95;   /* muted text on ink — ~6.2:1 */
  --focus:      #1c1a15;   /* focus ring on paper (cream on dark, below) */

  --maxw-prose: 68ch;
  --maxw-wide:  1100px;

  /* Type scale is driven by :root font-size so the text-size toggle can
     scale the ENTIRE site by changing one value. Everything below is in
     rem/em for that reason — never px. */
  --step--2: 0.75rem;   /* letterspaced caps labels */
  --step--1: 0.85rem;   /* captions, notes, breadcrumbs */
  --step-0:  1rem;      /* body */
  --step-1:  1.25rem;   /* lede, h3 */
  --step-2:  1.8rem;    /* h2 */
  --step-3:  2.7rem;    /* h1 */
  --step-4:  3.5rem;    /* masthead flag */

  --font-body:    Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-ui:      "Archivo Narrow", "Arial Narrow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gap: 1.5rem;
}

/* Text-size toggle steps (JS sets data-textsize on <html>) */
html { font-size: 20px; }               /* generous default base */
html[data-textsize="large"]  { font-size: 23px; }
html[data-textsize="xlarge"] { font-size: 26px; }

/* ---- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; color: var(--ink); }
h1 { font-size: var(--step-3); margin: 0 0 0.4em; }
h2 { font-size: var(--step-2); margin: 1.8em 0 0.7em; border-bottom: 2px solid var(--ink); padding-bottom: 0.25em; }
h3 { font-size: var(--step-1); margin: 1.6em 0 0.4em; }
p, li { max-width: var(--maxw-prose); }
p { margin: 0 0 1em; }
strong { font-weight: 700; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--accent-deep); }

/* Visible focus for keyboard users everywhere; cream where the ground is ink */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 1px; }
.topbar :focus-visible,
.site-footer :focus-visible,
table.burials thead :focus-visible { outline-color: var(--paper); }

img { max-width: 100%; height: auto; }

/* Available to assistive tech and search engines, not shown on screen */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* A letterspaced small-caps label — the recurring editorial device */
.eyebrow {
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}

/* ---- Skip link -------------------------------------------------------- */
.skip-link {
  position: absolute; left: 0; top: -100%;
  background: var(--ink-deep); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 100;
  font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.08em;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---- Layout containers ------------------------------------------------ */
.wrap        { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.wrap--prose { max-width: calc(var(--maxw-prose) + 6rem); }
main { display: block; padding-block: 1.75rem 3.5rem; }

/* ==========================================================================
   Masthead — dark strip, broadsheet flag, compartmented navigation
   ========================================================================== */
.site-header { background: var(--paper); }

.topbar {
  background: var(--ink-deep); color: var(--cream);
  font-family: var(--font-ui); font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.5rem; padding-block: 0.6rem;
}

/* Text-size control */
.textsize { display: flex; align-items: center; gap: 0.6rem; }
.textsize__label { color: var(--cream-soft); }
.textsize button {
  font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.1em;
  cursor: pointer; background: transparent; color: var(--cream);
  border: 1px solid var(--rule-strong); border-radius: 0;
  padding: 0.25em 0.6em; line-height: 1;
}
.textsize button:hover { background: rgba(232, 225, 207, 0.14); }
.textsize button[aria-pressed="true"] { background: var(--cream); color: var(--ink-deep); border-color: var(--cream); }

/* The flag: name left, stamp right, on one baseline */
.flag {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.5rem 2rem; padding-block: 1.6rem 0.7rem;
}
.brand {
  font-family: var(--font-display); font-weight: 400; font-size: var(--step-4);
  line-height: 0.98; color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--ink); }
.flag__stamp { font-family: var(--font-ui); text-align: right; padding-bottom: 0.35rem; }
.flag__est {
  display: block; font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent);
}
.flag__place {
  display: block; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 0.2em;
}

/* Primary navigation — ruled compartments under a heavy rule */
.mainnav { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.mainnav ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  font-family: var(--font-ui);
}
.mainnav li { max-width: none; }
.mainnav a {
  display: block; padding: 0.55rem 0.7rem; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: var(--step--2);
  letter-spacing: 0.08em; text-transform: uppercase;
  /* Left border on every item so a wrapped second row still reads as
     compartments rather than as a ragged strip. */
  border-left: 1px solid var(--rule);
}
.mainnav li:last-child a { border-right: 1px solid var(--rule); }
.mainnav a:hover { background: var(--paper-2); color: var(--accent); }
.mainnav a[aria-current="page"] { color: var(--accent); font-weight: 700; background: var(--paper-2); }

/* ---- Buttons / actions ------------------------------------------------ */
.btn {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-block; cursor: pointer; text-decoration: none;
  background: var(--accent); color: #f7f3e8;
  border: 1px solid var(--accent); border-radius: 0;
  padding: 0.85em 1.7em; line-height: 1.1;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #f7f3e8; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }

/* ==========================================================================
   Search band — the ruled-underline field used on Home and the Directory
   ========================================================================== */
.searchband {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-block: 1.2rem 1.1rem; margin-block: 1.7rem;
}
.searchband__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem; }
.searchband__field { flex-grow: 1; min-width: 16rem; }
.searchband label {
  display: block; font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.searchband__input {
  display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 2px solid var(--ink); padding: 0.35em 0.1em; margin-top: 0.5em;
}
.searchband__input svg { flex: none; }
.searchband__input:focus-within { border-bottom-color: var(--accent); }
.search-input {
  font-family: var(--font-body); font-size: var(--step-1);
  border: 0; background: transparent; color: var(--ink);
  padding: 0; width: 100%; min-width: 0;
}
.search-input::placeholder { color: var(--ink-muted); opacity: 1; }
.search-input:focus { outline: none; }
.search-input:focus-visible { outline: none; }
.searchband__note, .result-count {
  font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted);
  margin: 0.8rem 0 0; max-width: none;
}
.result-count strong { color: var(--ink); }

/* ==========================================================================
   Prose furniture
   ========================================================================== */
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: var(--maxw-prose); }

/* Home opening: leading paragraph with a drop cap, note in the margin */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.8rem; align-items: start; margin-block: 2rem; }
.intro__lead { font-size: var(--step-1); line-height: 1.55; max-width: none; }
.intro__lead::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.9em; line-height: 0.78;
  color: var(--accent); padding: 0.06em 0.3rem 0 0;
}
/* The winter photograph, set in the intro's right-hand column */
.intro__photos { display: grid; gap: var(--gap); }
.intro__photos .figure { margin: 0; }
.intro__photos .figure img { width: 100%; height: auto; }

/* Photographs sit in a paper mat with a hairline frame */
.figure { margin: 1.6rem 0; }
.figure img { border: 1px solid var(--rule); padding: 0.5rem; background: var(--paper-3); }
.figure figcaption {
  font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted);
  margin-top: 0.55rem; letter-spacing: 0.04em;
}
.figure .credit { display: block; margin-top: 0.15rem; font-style: italic; color: var(--rule-strong); }
.figure--wide img { width: 100%; }

/* Photo plates — scrapbook grid for the archival booklet photographs */
.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); margin: 1.6rem 0; align-items: start; }
.plates .figure { margin: 0; }
.plates .figure img { width: 100%; }

/* A section head with a caps kicker beside it */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.2rem; border-bottom: 3px solid var(--ink); padding-bottom: 0.4rem; margin: 2.6rem 0 0; }
.section-head h2 { margin: 0; border: 0; padding: 0; }
.section-head .kicker {
  font-family: var(--font-ui); font-size: var(--step--2); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* ---- Notice (preservation appeal / highlighted note) ------------------ */
.callout {
  background: var(--paper-2); border: 1px solid var(--ink);
  padding: 2rem 2.4rem; margin: 2.4rem 0; text-align: center;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout p { max-width: 46ch; margin-inline: auto; }
.callout__tagline {
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 0.9rem; max-width: none;
}
/* The paragraph directly after the eyebrow carries the display face */
.callout__tagline + p {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; color: var(--ink);
}
.callout h2, .callout h3 { border: 0; padding: 0; }

/* ==========================================================================
   Burial directory
   ========================================================================== */
/* Legend of abbreviations and relationship symbols */
.legend { font-family: var(--font-ui); font-size: var(--step--1); border-bottom: 1px solid var(--rule); }
.legend summary {
  cursor: pointer; font-weight: 600; color: var(--accent);
  padding: 0.7rem 0; letter-spacing: 0.06em;
}
.legend summary:hover { color: var(--accent-deep); }
.legend dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.25rem 1.5rem; margin: 0.5rem 0 1rem; }
.legend dt { font-weight: 700; color: var(--accent); }
.legend dd { margin: 0 0 0.4rem; color: var(--ink-soft); }
.legend div { display: flex; gap: 0.5rem; }
.legend p { color: var(--ink-muted); }

/* Standing caveat about the researched family information (Burial Directory) */
.recordnote {
  font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.55;
  color: var(--ink-soft); background: var(--paper-2);
  border-left: 4px solid var(--accent);
  padding: 0.9rem 1.1rem; margin: 1.4rem 0 0; max-width: var(--maxw-prose);
}
.recordnote > :first-child { margin-top: 0; }
.recordnote > :last-child { margin-bottom: 0; }
.recordnote h2 {
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  border: 0; padding: 0; margin: 0 0 0.45rem;
}

/* The register itself */
/* A size container as well as the register's scroll box: the family panel sizes
   itself in container units (cqw) so it measures this box's *visible* width
   rather than the window's. See the panel rules below. */
.table-scroll { overflow-x: auto; margin-top: 1.6rem; container-type: inline-size; }
table.burials { border-collapse: collapse; width: 100%; font-size: var(--step-0); background: transparent; }
table.burials caption {
  text-align: left; padding: 0 0 0.6rem; font-family: var(--font-ui);
  font-size: var(--step--1); color: var(--ink-muted);
}
table.burials th, table.burials td { padding: 0.7em 0.6em; text-align: left; vertical-align: top; }
table.burials thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ink-deep); color: var(--cream);
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
/* Sortable header buttons (injected by directory.js) */
table.burials thead th button {
  all: unset; cursor: pointer; font-family: var(--font-ui); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream);
  display: inline-flex; align-items: center; gap: 0.5rem; width: 100%;
}
table.burials thead th button:hover { color: #fff; }
th[aria-sort] button::after { content: "\2195"; opacity: 0.5; font-size: 0.85em; }
th[aria-sort="ascending"] button::after { content: "\25B2"; opacity: 1; }
th[aria-sort="descending"] button::after { content: "\25BC"; opacity: 1; }

table.burials tbody td { border-bottom: 1px solid var(--rule-hair); }
table.burials tbody tr:hover { background: var(--paper-2); }
/* Surname and given name share one cell. They were two columns until Aug 2026,
   when the pair cost ~290px of a 335px phone screen and the pinned Family
   column painted over the clipped given name. Merged and allowed to wrap, the
   name takes the width it needs and the record columns stay reachable.
   The floor was 9.5rem until Oct 2026, when the pinned Family column grew a
   reserved strip for its "more this way" arrow; on a phone the name's right
   end runs under the pin, so the floor came down by the same amount. A long
   name now wraps to a second line rather than hiding its last initial. */
table.burials td.name { white-space: normal; min-width: 8.5rem; text-wrap: balance; }
table.burials td.name .sur { font-weight: 700; }
/* Keep the short columns (Plot, Born, Died, Age) on one line */
table.burials td:nth-child(2),
table.burials td:nth-child(3),
table.burials td:nth-child(4),
table.burials td:nth-child(5) { white-space: nowrap; }
/* Veteran marker. There is no Notes column: service is shown as a muted line
   under the given name, which costs the table no extra width and puts the mark
   at the left where it is seen without scrolling. */
table.burials td .vetmark {
  display: block; margin-top: 0.15em;
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; color: var(--accent); white-space: normal;
}
table.burials td .vetmark::before { content: "\2605\00a0"; }
/* Notes ride under the name for the same reason the veteran mark does: the
   name column already wraps, so a line beneath it costs the table no width,
   and it puts the note at the far left where it is read without scrolling
   sideways and without opening the family panel. Inside the panel a note was
   invisible until clicked, and on a narrow desktop window it landed in the
   panel's right-hand column, furthest of all from the name it belongs to. */
table.burials td .notemark {
  display: block; margin-top: 0.15em;
  font-family: var(--font-ui); font-size: var(--step--1);
  color: var(--ink-soft); white-space: normal;
}
table.burials td .notemark .notelab {
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-muted);
}
/* Alternate surnames (maiden "née", prior-married "later", or cross-listed
   "also") as a muted second line — adds no table width */
table.burials td.name .altname {
  display: block; font-weight: 400; font-family: var(--font-ui);
  font-size: var(--step--1); color: var(--ink-muted); white-space: normal; margin-top: 0.15em;
}
/* ---- Family panel ------------------------------------------------------
   Each burial may be followed by a .family row holding the relationships the
   sheet records. It ships visible so it is indexable and usable with no JS;
   directory.js collapses it and adds the toggle button in .fam-cell. */
table.burials th.fam-col, table.burials td.fam-cell { width: 1%; white-space: nowrap; }
/* The register is wider than a phone, so the Family button used to sit off the
   right edge and had to be scrolled to. Pin the column to the right of the
   scroll box instead: it stays in view at every width, sideways scrolling moves
   only the record columns underneath it. */
table.burials th.fam-col, table.burials td.fam-cell {
  position: sticky; right: 0;
  background: var(--paper); border-left: 1px solid var(--rule-hair);
  box-shadow: -8px 0 8px -8px rgba(28, 26, 21, 0.35);
}
table.burials th.fam-col { background: var(--ink-deep); z-index: 3; }
table.burials tbody tr:hover td.fam-cell { background: var(--paper-2); }
/* "More this way." On a phone, Plot, Born, Died and Age start out tucked under
   the pinned column, and nothing said so: the constant shadow above reads as
   decoration, and the header row has scrolled away by the second screen.
   directory.js sets .has-more on the scroll box only while columns are still
   hidden under the pin, and this deepens the shadow and paints an arrow down
   its left edge. Scrolled to the end, both go, so the cue never claims more
   than there is. Tapping the arrow slides the table across (directory.js) — an
   arrow that did nothing when pressed would be a trap of its own.

   The arrow sits in the pinned cell's own left padding, reserved at every
   width. Drawn over the neighbouring cell instead, with a fade, it covered
   the end of the name: "Albert L" read as "Albert I". Reserving the space
   always, rather than only while .has-more is set, keeps the column from
   changing width — and the table from jumping — as the cue comes and goes. */
table.burials th.fam-col, table.burials td.fam-cell { padding-left: 1.6rem; }
.table-scroll.has-more th.fam-col,
.table-scroll.has-more td.fam-cell { box-shadow: -10px 0 10px -8px rgba(28, 26, 21, 0.55); }
.table-scroll.has-more th.fam-col::before,
.table-scroll.has-more td.fam-cell::before {
  content: "\203A"; position: absolute; top: 0; bottom: 0; left: 0; width: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: var(--step-1); font-weight: 700; line-height: 1;
  color: var(--accent); cursor: pointer;
}
.table-scroll.has-more th.fam-col::before { color: var(--cream); }
/* The sentence above the register that says the same thing in words. Shown by
   directory.js only while the register is wider than its box, and dropped once
   the visitor has scrolled it sideways — by then they know. */
.scroll-hint {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700;
  color: var(--ink-soft); margin: 1.6rem 0 0; max-width: none;
}
.scroll-hint .arrow { color: var(--accent); }
.scroll-hint:not([hidden]) + .table-scroll { margin-top: 0.5rem; }
table.burials tr.family > td { background: var(--paper-2); padding: 0.9rem 1rem 1rem; }
table.burials tr.family dl.fam { margin: 0; display: grid; gap: 0.35rem 1.5rem; }
/* The panel sits inside the table's horizontal scroll box, so it inherits the
   table's full width and has to be sized back down to what the reader can see.

   It is also pinned to the LEFT of the scroll box, mirroring the Family column
   pinned to the right. Anchored to the table's left edge it did not follow the
   reader: on a 375px phone the register scrolls 808px, so scrolling right to
   read Died and Age and then pressing the pinned button opened the panel some
   430px off the left of the screen — an empty band and nothing else. Sticky,
   it slides along and stays in view at any scroll position.

   The width is measured in container units against .table-scroll, NOT in vw or
   in a percentage of the cell. Both of those overshoot the moment the register
   scrolls sideways: 100vw is the whole window and ignores the page's side
   margins, and 100% is the *table*, which is by definition wider than the strip
   on show. Either way the panel came out fixed at ~904px inside a 538–898px
   strip, so its right-hand column — Parents and Children — hung off the right
   edge, invisible and clipped mid-name until the reader scrolled. 100cqw is the
   scroll box's own visible width, less the cell's 1rem of side padding. The vw
   line above it is the fallback for browsers without container queries.

   max-width then keeps the two columns together near the name on a wide strip
   instead of letting them spread to the far edges; it is in rem so it grows
   with the text-size control. Splitting into two columns is likewise a question
   about this box, not the window, so it is a container query. */
table.burials tr.family dl.fam {
  position: sticky; left: 0;
  width: calc(100vw - 3rem);
  width: calc(100cqw - 2rem);
  max-width: 46rem;
}
@container (min-width: 46rem) {
  table.burials tr.family dl.fam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
table.burials tr.family dl.fam > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline;
}
table.burials tr.family dt {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
table.burials tr.family dd {
  margin: 0; font-family: var(--font-ui); font-size: var(--step--1);
  color: var(--ink); white-space: normal;
}
/* The toggle button injected into .fam-cell. It is filled rather than outlined:
   as a hairline tag it read as a decorative label and visitors did not realise
   the record opened. The label says "Show family", not "Family", for the same
   reason — a bare noun reads as a column value, not as something to press. */
button.fam-toggle {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.04em; line-height: 1; white-space: nowrap;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 2px;
  color: var(--cream); /* ~7.4:1 on the oxblood fill */
  cursor: pointer; padding: 0.55rem 0.6rem;
  min-height: 44px; /* comfortable tap target — many visitors are older */
}
button.fam-toggle:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
button.fam-toggle::after { content: " \25BE"; }
button.fam-toggle[aria-expanded="true"] {
  background: var(--paper-2); border-color: var(--accent); color: var(--accent);
}
button.fam-toggle[aria-expanded="true"]::after { content: " \25B4"; }
.no-results { padding: 2rem; text-align: center; font-family: var(--font-ui); color: var(--ink-muted); }
.table-note { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); margin-top: 1rem; max-width: none; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--ink-deep); color: var(--cream);
  font-family: var(--font-ui); margin-top: 3rem; padding-block: 2.1rem;
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: #fff; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; justify-content: space-between; }
.site-footer p { max-width: none; margin: 0.25rem 0; font-size: var(--step--1); }
.site-footer .footer-brand {
  font-family: var(--font-display); font-size: var(--step-1); color: #fff; margin-bottom: 0.3rem;
}
.site-footer .muted { color: var(--cream-soft); }

/* ---- No-JS ------------------------------------------------------------ */
.no-js .js-only { display: none !important; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 640px) {
  :root { --step-4: 2.5rem; --step-3: 2rem; --step-2: 1.5rem; }
  .flag { align-items: flex-start; padding-block: 1.2rem 0.8rem; }
  .flag__stamp { text-align: left; padding-bottom: 0; }
  .mainnav ul { flex-direction: column; }
  .mainnav a { border-left: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .mainnav li:last-child a { border-right: 0; border-bottom: 0; }
  .topbar .wrap { justify-content: flex-start; }
  .callout { padding: 1.4rem 1.2rem; }
}

/* ---- Print ------------------------------------------------------------ */
@media print {
  .topbar, .mainnav, .site-footer, .searchband, .textsize, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .brand { color: #000; }
  table.burials thead th { position: static; background: #000; color: #fff; }
  .figure img { border-color: #999; }

  /* Print every family, not only the panels the reader happened to open.
     The panels are in the served HTML already - directory.js collapses them
     by setting [hidden] - so paper only has to countermand the collapse.
     But [hidden] does double duty: it also marks a row filtered out by the
     search box. Keying off the burial row that precedes each panel reveals
     only the families whose record survived the filter, so printing a search
     for "Botkin" cannot bring the Wiltons back with it. */
  table.burials tr.burial:not([hidden]) + tr.family[hidden] { display: table-row; }
  button.fam-toggle { display: none; }

  /* The Family column is pinned with position: sticky and the table sits in a
     horizontal scroll box. Both are right for a phone and wrong on paper,
     where there is no viewport to pin against and overflow is clipped for
     good rather than scrolled to. */
  table.burials th.fam-col, table.burials td.fam-cell {
    position: static; box-shadow: none;
  }
  .table-scroll { overflow: visible; }
  /* Nothing to swipe on paper. */
  .scroll-hint { display: none; }
  .table-scroll.has-more th.fam-col::before,
  .table-scroll.has-more td.fam-cell::before { content: none; }

  /* Keep a record on the same page as its own family panel. */
  table.burials tr.burial { break-after: avoid; }
  table.burials tr.family { break-inside: avoid; }

  /* Bind each panel to the record it belongs to. On screen a panel is tinted
     and opens in response to clicking that row's own button, so whose it is
     is never in question. Backgrounds do not print, and the hairline above
     runs under records and panels alike, which on paper leaves every panel
     evenly spaced between two records with nothing to say which way it
     attaches - and a panel routinely names the person in the row below it
     ("married Dianna K Ayres" landing directly above Ayres, Dianna K), so the
     wrong reading is the natural one. Rule above the record, nothing between
     the record and its panel, panel indented: the eye then groups them
     without needing colour. */
  table.burials tbody tr.burial > td {
    border-bottom: 0; border-top: 1.5pt solid #000; padding-top: 0.55rem;
  }
  table.burials tbody tr.family > td {
    border-bottom: 0; padding-top: 0.1rem; padding-left: 2.4rem; background: none;
  }
}