/* The palette (story 011): internal/brand fills the :root blocks at build. */
:root {
  --paper: #fefdfb;
  --ink: #0f1953;
  --muted: #546380;
  --rule: #c8d9ef;
  --panel: #ebf3fc;
  --link: #2151bb;
  --copper: #b4662f;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #070d25;
    --ink: #d8e6f9;
    --muted: #909fb8;
    --rule: #2e3a55;
    --panel: #101834;
    --link: #99c0f8;
    --copper: #eea471;
  }
}

html { font: 17px/1.55 Georgia, "Times New Roman", serif; color: var(--ink); background: var(--paper); }
body { margin: 0 auto; padding: 0 1rem 3rem; max-width: 52rem; }
a { color: var(--link); }
header.site { font-family: system-ui, sans-serif; font-size: .9rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
header.site a { text-decoration: none; color: var(--muted); display: inline-flex; align-items: center; gap: .5rem; }
.mark { height: 1.75rem; width: auto; color: var(--link); }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 .25rem; }
h2 { font-size: 1.3rem; border-bottom: 1px solid var(--rule); padding-bottom: .2rem; margin-top: 2rem; }
.bio h2:first-child { margin-top: 0; }
.album, .items, .resources, .links, .sources { clear: both; }
.person > header.with-portrait { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1rem; }
.portrait { width: 10rem; flex: none; border: 1px solid var(--rule); border-radius: 4px; }
@media (max-width: 40rem) { .portrait { width: 6rem; } }
.lifespan, .years, .kind, figcaption small, footer { color: var(--muted); }
.lifespan { margin: 0; }
.summary { font-size: 1.1rem; margin: .5rem 0 1rem; }
.facts { float: right; width: 16rem; margin: 0 0 1rem 1.5rem; padding: .75rem 1rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; font-family: system-ui, sans-serif; font-size: .9rem; }
.facts dl { margin: 0; }
.facts dt { font-weight: 600; margin-top: .6rem; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0; }
.bio blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--muted); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; white-space: nowrap; width: 6rem; }
.photos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.photos figure { margin: 0; }
.photos img { width: 100%; height: 14rem; object-fit: cover; border: 1px solid var(--rule); border-radius: 3px; display: block; }
.item .sides figure { margin: 1.5rem 0; }
.item .sides img { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 3px; display: block; }
.item .record th { width: 10rem; }
.item .copies { width: auto; font-size: .85rem; margin-top: .5rem; }
.item .copies th, .item .copies td { padding: 0.15rem 0.75rem 0.15rem 0; text-align: left; white-space: nowrap; }
.item .copies thead th { font-weight: normal; color: var(--muted); border-bottom: 1px solid var(--rule); }
figcaption { font-size: .85rem; margin-top: .3rem; }
.kind { font-family: system-ui, sans-serif; font-size: .8rem; border: 1px solid var(--rule); border-radius: 3px; padding: 0 .35rem; margin-left: .25rem; }
.people { padding-left: 1.2rem; }
.document h1 { margin-top: 0; }
footer { font-family: system-ui, sans-serif; font-size: .8rem; border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: .75rem; clear: both; }
code { font-size: .9em; }
@media (max-width: 40rem) {
  .facts { float: none; width: auto; margin: 0 0 1rem; }
}

/* The front page */
.front .slogan { font-size: 1.4rem; font-style: italic; margin: 0 0 .25rem; }
.front .count { margin: 0 0 1rem; color: var(--muted); }
.search { font-family: system-ui, sans-serif; margin-bottom: 2rem; }
.search label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .25rem; }
.search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.1rem; padding: .5rem .75rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); }
.results { list-style: none; padding: 0; margin: .5rem 0 0; }
.results li { padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.results li.none { color: var(--muted); border: 0; }
.results button { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.results .summary { font-size: .95rem; margin: 0; color: var(--muted); }
.featured > header.with-portrait { display: flex; gap: 1.5rem; align-items: flex-start; }
.featured h1 a { color: inherit; text-decoration: none; }
.tree { font-family: system-ui, sans-serif; font-size: .9rem; margin: 1.5rem 0 0; }
.generation { position: relative; text-align: center; }
.generation + .generation { margin-top: 1.25rem; }
.generation + .generation::before { content: ""; position: absolute; top: -1.25rem; left: 50%; height: 1.25rem; border-left: 1px solid var(--rule); }
.generation h3 { font-size: .8rem; font-weight: normal; color: var(--muted); margin: 0 0 .3rem; }
.generation ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; padding: 0; margin: 0; }
.generation li { padding: .35rem .7rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.generation li.self { border-color: var(--copper); font-weight: 600; }
.generation li.spouse { border-style: dashed; }
.generation .years { display: block; font-size: .8rem; color: var(--muted); font-weight: normal; }
.kinship { font-family: system-ui, sans-serif; max-width: 30rem; padding: 1.25rem 1.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); }
.kinship::backdrop { background: rgba(0, 0, 0, .4); }
.kinship h2 { margin-top: 0; border: 0; }
.kinship ol { padding-left: 1.2rem; }
.kinship li { margin: .35rem 0; }
.kinship .tie { color: var(--muted); font-size: .85rem; display: block; }
.kinship form { text-align: right; margin: 1rem 0 0; }
.kinship button { font: inherit; padding: .3rem .8rem; }

/* The floral margins (story 009, and person pages by story 012): the build's
   margin.svg, one ink in tones, read as a luminance mask and coloured in the
   link ink, down both sides of the page where the viewport leaves room
   beside the column; mirrored on the right; never over the text, never in
   print. */
@media (min-width: 70rem) {
  body.front::before, body.front::after, body.person::before, body.person::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100vw - 56rem) / 2);
    max-width: 14rem;
    background: var(--link);
    mask: url(margin.svg) no-repeat left bottom / contain;
    mask-mode: luminance;
    pointer-events: none;
    z-index: -1;
  }
  body.front::before, body.person::before { left: 0; }
  body.front::after, body.person::after { right: 0; transform: scaleX(-1); }
}
@media print {
  body.front::before, body.front::after, body.person::before, body.person::after { display: none; }
}

/* The portrait tile (story 012): a record with no portrait shows one of the
   build's tiles in its place, chosen by the id, the file named in the
   element's own style so its URL resolves against the page, masked in the
   ink like the margin. */
.tile { display: block; aspect-ratio: 1; border: 0; background: var(--link); mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-mode: luminance; }