:root {
  /* features7: colours are tokens, so the reader has a light and a dark look; "Light or dark" in What to show sets
     data-theme on <html>, or leaves it to the device */
  --paper: #f4ede0;
  --card: #fffaf1;
  --card2: #fbf6ec;
  --tint: #f6efe2;
  --tint2: #efe5d2;
  --hover: #f8efdf;
  --flash: #f6e7c4;
  --ink: #2a2520;
  --ink2: #463e35;
  --soft: #665b50;
  --line: #d8ccb7;
  --line2: #b8a98f;
  --accent: #8a3a2c;
  --navy: #22344f;
  --navy2: #34496a;
  --headink: #f4ecdc;
  --headsoft: #c3cbd8;
  --ann: #a2453a;
  --tom: #2f5d8a;
  --other: #5c6a30;
  --ship: #2f5d8a;
  --world: #5a6773;
  --culture: #7a5a3a;
  --family: #a2453a;
  --rail: #c9b99f;
  --mark: #f0d98c;
  --q1: #c9dcef; --q2: #d9e8c4; --q3: #efcfc6;
  --sea: #e6edf2;
  --grat: #c5d0d9;
  --chipink: #fff;
  --focus: #1d5fbf;
  --fs: 1;
  --btn: #22344f;
  --btnink: #fff;
  --shadow: 0 2px 10px rgba(40, 30, 20, .10);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1815; --card: #24211d; --card2: #2a2622; --tint: #2b2722; --tint2: #322d27; --hover: #302b25; --flash: #4a3d1f;
    --ink: #ece4d6; --ink2: #d6ccbc; --soft: #b3a897; --line: #4a433b; --line2: #6b6258; --accent: #f0a48f;
    --navy: #121b29; --navy2: #23324a; --headink: #f4ecdc; --headsoft: #aab4c4;
    --ann: #ec9a8c; --tom: #8fbbe8; --other: #b9c67e; --ship: #8fbbe8; --world: #a9b6c2; --culture: #d9b48c; --family: #ec9a8c;
    --rail: #5a5248; --mark: #7a6420; --q1: #2e4a66; --q2: #3c5230; --q3: #5c3a33; --sea: #1f2a33; --grat: #33414d;
    --chipink: #1a1815; --btn: #e3c56d; --btnink: #1b1916; --focus: #8ab8ff; --shadow: 0 2px 10px rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1a1815; --card: #24211d; --card2: #2a2622; --tint: #2b2722; --tint2: #322d27; --hover: #302b25; --flash: #4a3d1f;
  --ink: #ece4d6; --ink2: #d6ccbc; --soft: #b3a897; --line: #4a433b; --line2: #6b6258; --accent: #f0a48f;
  --navy: #121b29; --navy2: #23324a; --headink: #f4ecdc; --headsoft: #aab4c4;
  --ann: #ec9a8c; --tom: #8fbbe8; --other: #b9c67e; --ship: #8fbbe8; --world: #a9b6c2; --culture: #d9b48c; --family: #ec9a8c;
  --rail: #5a5248; --mark: #7a6420; --q1: #2e4a66; --q2: #3c5230; --q3: #5c3a33; --sea: #1f2a33; --grat: #33414d;
  --chipink: #1a1815; --btn: #e3c56d; --btnink: #1b1916; --focus: #8ab8ff; --shadow: 0 2px 10px rgba(0, 0, 0, .45); color-scheme: dark;
}
* { box-sizing: border-box; }
:root { --hh: 52px; } /* header height, measured by app.js */
html { scroll-padding-top: calc(var(--hh) + 18px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: calc(17px * var(--fs))/1.55 Georgia, "Times New Roman", serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.missing { max-width: 640px; margin: 12vh auto; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.missing h1 { font-weight: normal; color: var(--accent); }

/* top bar */

/* layout */

/* timeline */
.tl { padding: 18px 20px 120px 8px; position: relative; }
.chapter { position: relative; margin: 26px 0 8px; }
.chapter-head { position: relative; margin-left: 46px; padding: 16px 18px; border-radius: 6px; background: var(--navy) center/cover no-repeat; color: #f6efe1; }
.chapter-head.has-img::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(20,25,35,.82), rgba(20,25,35,.45)); }
.chapter-head > * { position: relative; }
.chapter-head h2 { margin: 0 0 4px; font-weight: normal; font-size: calc(24px * var(--fs)); }
.chapter-head p { margin: 0; color: #d8dce4; font-size: calc(15px * var(--fs)); max-width: 680px; }
.items { position: relative; padding-left: 46px; }
.items::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--rail); }

.entry, .event { position: relative; margin: 14px 0; }
.entry .dot { position: absolute; left: -32px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--other); border: 3px solid var(--paper); box-sizing: content-box; }
.entry.from-ann .dot { background: var(--ann); }
.entry.from-tom .dot { background: var(--tom); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.entry.open .card { border-color: var(--line2); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 16px; }
.head:hover { background: var(--hover); }
.head:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.when { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); letter-spacing: .02em; }
.who { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin: 3px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p { font-weight: bold; }
.p.ann { color: var(--ann); } .p.tom { color: var(--tom); } .p.other { color: var(--other); }
.arrow { color: var(--soft); }
.kind { font-size: calc(13px * var(--fs)); text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.head h3 { margin: 4px 0 2px; font-weight: normal; font-size: calc(19px * var(--fs)); line-height: 1.3; }
.sum { margin: 0; color: var(--ink2); font-size: calc(15px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head > div { min-width: 0; }
.thumbs { display: flex; gap: 4px; align-items: flex-start; }
.thumbs img { height: 56px; width: auto; border: 1px solid var(--line); background: #fff; display: block; }

/* events */
.event .diamond { position: absolute; left: -30px; top: 8px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--paper); border: 2px solid var(--world); }
.event.cat-ship .diamond { border-color: var(--ship); background: var(--ship); }
.event.cat-family .diamond { border-color: var(--family); }
.event.cat-world .diamond { border-color: var(--world); }
.event .etext { font-size: calc(15px * var(--fs)); color: var(--ink2); }
.event .etext b { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin-right: 6px; }
.event .esrc { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin-top: 2px; }

/* detail */
.detail { border-top: 1px solid var(--line); padding: 0 16px 18px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 -16px 14px; padding: 0 12px; background: var(--tint); border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 12px 7px; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.modes { display: flex; gap: 6px; align-items: center; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin-bottom: 10px; }
.modes button { background: none; border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px; }
.modes button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.script { font-size: calc(18px * var(--fs)); max-width: 680px; }
.script p { margin: 0 0 .9em; }
.script .ln { min-height: 1.25em; }
.script .ed { color: var(--soft); font: italic calc(14px * var(--fs))/1.4 Arial, sans-serif; margin: 3px 0; }
.script .sep { margin: 16px 0 10px; color: var(--soft); font: calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 8px; }
.unc { border-bottom: 1px dotted var(--accent); cursor: help; }
.gap { color: var(--accent); font-style: italic; font-size: .85em; }
.ins { vertical-align: super; font-size: .8em; }
.viewer .pages { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.viewer .pages button { background: none; border: 1px solid var(--line); border-radius: 3px; padding: 3px 10px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.viewer .pages button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.viewer .stage { background: #3b352e; border-radius: 4px; padding: 12px; text-align: center; }
.viewer img { max-width: 100%; height: auto; background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.45); }
.viewer .hint { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin-top: 6px; }
dl.facts, dl.dfacts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: calc(15px * var(--fs)); }
dl.facts dt, dl.dfacts dt { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); padding-top: 3px; }
dl.facts dd, dl.dfacts dd { margin: 0; }
.empty { color: var(--soft); font-style: italic; padding: 30px 46px; }

/* names in a transcript */
a.pl { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(138, 58, 44, .45); }
a.pl:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* density strip */
.strip { margin: 8px 0 0 46px; }
.strip .cap { font: calc(14px * var(--fs))/1.4 Arial, sans-serif; color: var(--soft); margin-bottom: 4px; }
.strip .bars { display: flex; height: 18px; border-bottom: 1px solid var(--rail); }
.strip .wk { flex: 1 1 0; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
.wk.l1 { background: rgba(34, 52, 79, .22); }
.wk.l2 { background: rgba(34, 52, 79, .45); }
.wk.l3 { background: rgba(34, 52, 79, .7); }
.wk.l4 { background: var(--navy); }
.strip .wk:hover, .strip .wk:focus-visible { background: var(--accent); outline: none; }
.strip .yrs { position: relative; height: 16px; overflow: hidden; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.strip .yrs span { position: absolute; top: 0; padding-left: 3px; border-left: 1px solid var(--rail); }

/* person bar */
.pbar { margin: 16px 0 0 46px; padding: 12px 16px; background: var(--tint2); border: 1px solid var(--line); border-radius: 6px; font-size: calc(15px * var(--fs)); }
.pbar .ptop { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; }
.pbar .all { font: bold calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.pbar details { margin-top: 8px; }
.pbar summary { cursor: pointer; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.pbar .about { max-width: 680px; }
.pbar .about p { margin: 8px 0 0; }

/* panels: search results, people, on this day */
.panel { padding: 16px 0 60px 46px; max-width: 860px; }
.panel .back { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.panel h2 { margin: 10px 0 4px; font-weight: normal; font-size: calc(26px * var(--fs)); }
.panel .lead { margin: 0 0 12px; color: var(--soft); font-size: calc(15px * var(--fs)); }
.hits { list-style: none; margin: 0; padding: 0; }
.hit { display: block; margin: 10px 0; padding: 10px 16px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.hit:hover, .hit:focus-visible { background: var(--hover); border-color: var(--line2); outline: none; }
.hit h3 { margin: 4px 0 2px; font-weight: normal; font-size: calc(19px * var(--fs)); line-height: 1.3; }
.hit .snip { margin: 6px 0 0; color: var(--ink2); font-size: calc(15px * var(--fs)); overflow-wrap: anywhere; }
.hit .fld { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
mark { background: var(--mark); color: inherit; padding: 0 1px; border-radius: 2px; }
.plist { list-style: none; margin: 0; padding: 0; columns: 2 230px; column-gap: 28px; }
.plist li { break-inside: avoid; }
.plist a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.plist a:hover { color: var(--accent); }
.plist .n { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); padding-top: 2px; }

/* storylines: filter menu links, panel and bar */
.threads { display: flex; flex-direction: column; }
.thread-link { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; color: var(--ink); text-decoration: none; }
.thread-link:hover, .thread-link.on { color: var(--accent); }
.thread-link.on { font-weight: bold; }
.thread-link .n { color: var(--soft); font-size: calc(14px * var(--fs)); }
.thread-link.more { color: var(--accent); font-size: calc(14px * var(--fs)); margin-top: 4px; text-decoration: underline; }
.tlist { list-style: none; margin: 0; padding: 0; }
.tlist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tlist a:hover .tname { color: var(--accent); }
.tlist .tname { font-size: calc(18px * var(--fs)); }
.tlist .n { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); padding-top: 4px; }
.tlist .tabout { grid-column: 1 / -1; font-size: calc(15px * var(--fs)); color: var(--ink2); }
.pbar .tabout { margin: 6px 0 0; color: var(--ink2); max-width: 680px; }
.pbar .others { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); }

/* summary, details, how we know */
.csum { max-width: 680px; margin: 0 0 14px; padding: 8px 12px; background: var(--tint); border-left: 3px solid var(--line); }
.csum p { margin: 0; font-size: calc(16px * var(--fs)); color: var(--ink2); }
.csum .clabel { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin-top: 4px; }
.block { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 760px; }
.block h4 { margin: 0 0 8px; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; font: calc(14px * var(--fs))/1.5 Arial, sans-serif; padding: 0 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); color: var(--ink); text-decoration: none; }
a.tag.th { color: var(--accent); border-color: var(--line2); }
a.tag.th:hover { background: var(--hover); }
.tag.dating { background: var(--tint); border-color: var(--line); }
.hwk .jhead { margin: 0 0 4px; font-size: calc(16px * var(--fs)); }
.hwk .jparts { margin: 0 0 10px; padding-left: 24px; font-size: calc(15px * var(--fs)); }
.hwk .jparts li { margin: 2px 0; }
.hwk .jholds { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.hwk .join { margin: 8px 0; padding: 8px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 4px; font-size: calc(15px * var(--fs)); }
.hwk .jparts-line { font: bold calc(14px * var(--fs)) Arial, sans-serif; overflow-wrap: anywhere; }
.hwk .jstr { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--navy); margin-top: 2px; }
.hwk .join p { margin: 4px 0 0; color: var(--ink2); }
.joinnote { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin: 0 0 10px; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; }
.modes { flex-wrap: wrap; }
.modes .keybtn { margin-left: 6px; font-size: calc(14px * var(--fs)); }

/* reading key */
.key { max-width: 760px; margin: 0 0 14px; padding: 10px 14px; background: var(--card2); border: 1px solid var(--line); border-radius: 6px; font: calc(14px * var(--fs))/1.45 Arial, sans-serif; }
.key .khead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.key .kclose { background: none; border: 1px solid var(--line); border-radius: 3px; padding: 1px 8px; font-size: calc(14px * var(--fs)); }
.key .klead { margin: 4px 0 8px; color: var(--soft); font-size: calc(14px * var(--fs)); }
.krow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 14px; padding: 7px 0; border-top: 1px solid var(--line); }
.kmark code { font: bold calc(14px * var(--fs)) Consolas, "Courier New", monospace; }
.kmark .kn { display: block; font-size: calc(14px * var(--fs)); color: var(--soft); }
.kex { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.kex code.typed { font: calc(14px * var(--fs)) Consolas, "Courier New", monospace; background: #fff; border: 1px solid var(--line); padding: 0 4px; overflow-wrap: anywhere; }
.kex .karrow { color: var(--soft); }
.kex .shown { font: calc(16px * var(--fs)) Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.kex .shown .ed { color: var(--soft); font: italic calc(14px * var(--fs))/1.4 Arial, sans-serif; }
.kex .shown .sep { color: var(--soft); font: calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 2px; }

/* ---------- features3 ---------- */
.mem a, .mletters a, .wanted a, .talk a, .minfo a, .howsure a { color: var(--accent); }
.entry .where { font: calc(14px * var(--fs))/1.4 Arial, sans-serif; color: var(--soft); margin-top: 3px; }

/* call and answer */
.talk .tk { margin: 4px 0 8px; font-size: calc(15px * var(--fs)); }
.talk .tk > b { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.talk ul { margin: 2px 0 0; padding-left: 20px; }
.talk li { margin: 3px 0; }
.talk .str { font: calc(14px * var(--fs)) Arial, sans-serif; border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; color: var(--navy); cursor: help; }
.talk .conv, .talk .wline a { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.talk .wline, .talk .none { font: calc(14px * var(--fs))/1.45 Arial, sans-serif; color: var(--soft); margin: 6px 0 0; }
.howsure { max-width: 760px; margin: 0 0 10px; padding: 8px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 4px; font-size: calc(15px * var(--fs)); }
.howsure p { margin: 4px 0 0; color: var(--ink2); font-size: calc(14px * var(--fs)); }
.qpairs { margin: 0 0 14px; padding-left: 24px; font-size: calc(15px * var(--fs)); max-width: 860px; }
.qpairs li { margin: 3px 0; }
.qpairs .karrow { color: var(--soft); }
.talk2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.talk2 .col { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px 14px; max-height: 78vh; overflow: auto; }
.talk2 .colhead { position: sticky; top: -10px; background: var(--card); padding: 4px 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); z-index: 1; }
.talk2 .colhead .lbl { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.talk2 .colhead h3 { margin: 2px 0; font-weight: normal; font-size: calc(18px * var(--fs)); line-height: 1.3; }
.talk2 .colhead .open, .talk2 .part { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.talk2 .part { color: var(--soft); margin: 12px 0 6px; }
.talk2 .script { font-size: calc(16px * var(--fs)); }
mark.q { cursor: pointer; padding: 0 1px; }
mark.q0 { background: var(--mark); } mark.q1 { background: var(--q1); } mark.q2 { background: var(--q2); } mark.q3 { background: var(--q3); }
mark.q.flash { outline: 2px solid var(--accent); }
sup.qn { font: bold calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); margin-right: 1px; }

/* map */
.mapctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.mapctl button, .mslider button { background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 2px 10px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.mapctl .mhint { color: var(--soft); }
.mapbox { width: 100%; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--sea); }
#mapsvg { display: block; touch-action: none; cursor: grab; user-select: none; }
#mapsvg .sea { fill: var(--sea); }
#mapsvg .coast { fill: none; stroke: #8b8f86; stroke-width: 1; }
#mapsvg .grat { stroke: var(--grat); stroke-width: .7; fill: none; }
#mapsvg .grat.eq { stroke: var(--grat); }
#mapsvg .gl { font: 10px Arial, sans-serif; fill: #8796a5; }
#mapsvg .rt { fill: none; stroke-linejoin: round; stroke-linecap: round; }
#mapsvg .rt.tom { stroke: var(--tom); stroke-width: 2; }
#mapsvg .rt.tom.est { stroke-dasharray: 5 4; }
#mapsvg .rt.ship { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 1.5 3.5; }
#mapsvg .pl { fill: #fffaf1; stroke: var(--ink); stroke-width: 1.2; }
#mapsvg .pn { font: 11px Arial, sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; stroke-linejoin: round; }
#mapsvg .mk.tom { fill: var(--tom); stroke: #fff; stroke-width: 2.5; }
#mapsvg .mk.tom.old { fill: #fff; stroke: var(--tom); }
#mapsvg .mk.ship { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.mlegend { display: flex; flex-wrap: wrap; gap: 4px 16px; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin: 6px 0 0; }
.mlegend .lg { display: inline-block; width: 26px; height: 0; vertical-align: middle; margin-right: 5px; border-top: 2px solid var(--tom); }
.mlegend .lg.est { border-top-style: dashed; }
.mlegend .lg.ship { border-top: 2px dotted var(--accent); }
.mlegend .lg.dot { width: 8px; height: 8px; border: 1.2px solid var(--ink); border-radius: 50%; background: #fffaf1; }
.nocoast { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin: 4px 0 0; }
.mslider { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; }
.mslider input { flex: 1; min-width: 0; accent-color: var(--navy); }
.minfo .mdate { font-size: calc(20px * var(--fs)); margin-top: 6px; }
.minfo p { margin: 4px 0; font-size: calc(15px * var(--fs)); }
.minfo .mact { color: var(--ink2); }
.minfo h3 { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin: 12px 0 4px; }
.mletters { margin: 0; padding-left: 20px; font-size: calc(15px * var(--fs)); }
.mletters li { margin: 3px 0; }
.minfo .none, .wanted .mention { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }

/* missing letters */
.lead.invite { color: var(--ink); font-size: calc(17px * var(--fs)); }
.wgroup h3 { font-weight: normal; font-size: calc(22px * var(--fs)); margin: 22px 0 4px; }
.wgroup h3 .n { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.wgroup h4 { font: bold calc(14px * var(--fs)) Arial, sans-serif; letter-spacing: .12em; color: var(--soft); margin: 14px 0 4px; }
.wanted { list-style: none; margin: 0; padding: 0; }
.wanted li { margin: 8px 0; padding: 8px 14px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.wanted p { margin: 4px 0; font-size: calc(15px * var(--fs)); overflow-wrap: anywhere; }
.wanted .wwho { color: var(--soft); }

/* in memory */
.mem { max-width: 760px; margin-top: 18px; }
.mem h3 { font-weight: normal; font-size: calc(21px * var(--fs)); margin: 18px 0 6px; }
.mem p { font-size: calc(16px * var(--fs)); }
.mem .src, .mem .nsrc { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.mem .note { font: calc(14px * var(--fs))/1.45 Arial, sans-serif; color: var(--soft); }
.names { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 28px; }
.names li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--line); }
.names .nm { font-size: calc(17px * var(--fs)); }
.names .rate { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.names .nnote { font-size: calc(14px * var(--fs)); color: var(--ink2); }
.srckey { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.srckey dt { font-weight: bold; }
.srckey dd { margin: 0; color: var(--ink2); }

/* ---------- features4: words and things ---------- */
.gw { border-bottom: 1px dotted var(--soft); cursor: help; }
.gw:hover, .gw:focus-visible, .gw[aria-expanded="true"] { border-bottom-color: var(--accent); background: var(--hover); outline: none; }
.wcard { position: fixed; z-index: 30; width: 330px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto; padding: 10px 14px 10px; background: var(--card); border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 4px 18px rgba(40, 30, 20, .22); font: calc(14px * var(--fs))/1.45 Arial, sans-serif; color: var(--ink); }
.wcard p { margin: 2px 0 8px; }
.wcard .wc-x { float: right; background: none; border: 0; font-size: calc(18px * var(--fs)); line-height: 1; padding: 0 2px; color: var(--soft); }
.wcard .wc-t { font: calc(17px * var(--fs)) Georgia, "Times New Roman", serif; margin-right: 20px; }
.wcard .wc-k { font: calc(13px * var(--fs)) Arial, sans-serif; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.wc-l { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-top: 4px; }
.wcard .wc-ref { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; }
.wcard .wc-ref:first-of-type:nth-child(2) { border-top: 0; padding-top: 0; }
.wcard a, .gloss a, .rgroup a { color: var(--accent); }
.wcard .wc-foot { display: flex; flex-wrap: wrap; gap: 2px 14px; border-top: 1px solid var(--line); padding-top: 6px; font-size: calc(14px * var(--fs)); }
.ni { font-size: calc(14px * var(--fs)); color: var(--soft); }
.more { font-size: calc(14px * var(--fs)); }
.rmade { color: var(--soft); font-size: calc(14px * var(--fs)); }
.az { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 12px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.az button, .az span { min-width: 26px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); text-align: center; }
.az span { color: #b9ad9b; background: none; }
.gent { padding: 10px 2px 10px; border-bottom: 1px solid var(--line); max-width: 760px; scroll-margin-top: calc(var(--hh) + 12px); }
.gent h3, .gent h4 { margin: 0 0 2px; font-weight: normal; font-size: calc(19px * var(--fs)); }
.gent .gcat { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.gent p { margin: 2px 0 6px; font-size: calc(15px * var(--fs)); }
.gent .gmean { color: var(--ink2); }
.glet, .gnone { font: calc(14px * var(--fs))/1.6 Arial, sans-serif; color: var(--soft); margin: 4px 0 0; overflow-wrap: anywhere; }
.glet summary { cursor: pointer; }
.glet .gn { color: var(--soft); }
.gent.flash { background: var(--flash); }
.rgroup { margin-top: 14px; scroll-margin-top: calc(var(--hh) + 12px); }
.rgroup .rgh { font-weight: normal; font-size: calc(22px * var(--fs)); margin: 18px 0 4px; scroll-margin-top: calc(var(--hh) + 12px); }
.rgroup .rgh .n { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.lead.also { color: var(--ink); }
.lead.thnote { font-size: calc(14px * var(--fs)); }

/* ---------- features5 ---------- */
/* welcome and who is reading */
.welcome { margin: 4px 0 14px 46px; max-width: 760px; }
.welcome .wintro { margin: 0 0 6px; font-size: calc(17px * var(--fs)); }
.welcome .wplay { margin: 6px 0 0; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.welcome a { color: var(--accent); }
.wq { margin: 8px 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.wq .wqq { display: block; margin-bottom: 6px; font-weight: bold; }
.wq .wopt { font-weight: normal; color: var(--soft); }
.wq .wbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.wq button { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 3px 12px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.wq button:hover, .wq button.on { border-color: var(--accent); color: var(--accent); }
.wq .wskip { color: var(--soft); }
.whoside { font-size: calc(14px * var(--fs)); }
.whoside .wcur { color: var(--ink); }

/* listen */
.listen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); max-width: 760px; }
.listen button { background: none; border: 1px solid var(--line); border-radius: 3px; padding: 3px 10px; color: var(--ink); }
.listen .lbtn { background: var(--navy); border-color: var(--navy); color: #fff; }
.listen .lbtn[aria-disabled="true"] { background: none; color: var(--soft); border-style: dashed; cursor: default; }
.listen select, .pl-row select { font: 13px Arial, sans-serif; max-width: 210px; min-width: 0; }
.listen .lsel { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.listen .lstat { color: var(--soft); }
.listen.rec { gap: 10px; }
.listen .lrec { font-weight: bold; color: var(--navy); }
.listen audio { max-width: 100%; }
.script .rd { background: var(--tint); box-shadow: -8px 0 0 var(--tint); }
::highlight(reading) { background-color: var(--mark); color: inherit; }

/* mirror writing */
.flip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.flip button { background: var(--card); border: 1px solid var(--accent); border-radius: 3px; padding: 3px 10px; color: var(--accent); }
.flip button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.viewer .stage img { transition: transform .25s; }

/* print and cite */
.dtools { display: flex; justify-content: flex-end; margin: -8px 0 8px; }
.printbtn { background: none; border: 0; padding: 2px 0; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); text-decoration: underline; }
.cite { max-width: 760px; margin: 16px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font: calc(14px * var(--fs))/1.5 Arial, sans-serif; color: var(--soft); overflow-wrap: anywhere; }
.cite b { color: var(--ink); font-weight: normal; }
#printView { display: none; }

/* play the story */
body.playing { overflow: hidden; }
.play { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #1f1c19; color: #f2ead9; font: 17px/1.5 Georgia, "Times New Roman", serif; }
.play[hidden] { display: none; }
.play:focus { outline: none; }
.pl-setup { max-width: 640px; margin: auto; padding: 24px 20px; overflow: auto; max-height: 100%; }
.pl-setup h2 { font-weight: normal; font-size: 30px; margin: 0 0 8px; }
.pl-setup p { color: #d6cdbd; }
.pl-setup fieldset { border: 1px solid #5a5248; border-radius: 6px; margin: 12px 0; padding: 8px 14px 10px; }
.pl-setup legend { font: bold 12px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #b9ad9b; }
.pl-setup label { display: block; margin: 6px 0; }
.pl-setup select, .pl-setup input[type=number] { font: 15px Arial, sans-serif; max-width: 100%; }
.pl-setup input[type=number] { width: 5em; }
.pl-row { display: block; margin: 10px 0; font-size: 16px; }
.pl-row .lsel { display: inline-block; margin-right: 12px; font: 14px Arial, sans-serif; }
.pl-go { display: flex; gap: 10px; margin-top: 16px; }
.pl-go button, .pl-bar button { background: #34302b; color: #f2ead9; border: 1px solid #6a6155; border-radius: 4px; padding: 6px 16px; font: 15px Arial, sans-serif; }
.pl-go .pl-primary { background: var(--accent); border-color: var(--accent); font-weight: bold; }
.pl-stage { flex: 1; min-height: 0; display: flex; }
.pl-chapter { margin: auto; max-width: 760px; padding: 20px; text-align: center; }
.pl-chapter .pl-kicker { font: bold 13px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #b9ad9b; }
.pl-chapter h2 { font-weight: normal; font-size: 44px; line-height: 1.15; margin: 8px 0 14px; }
.pl-chapter p { font-size: 21px; color: #d6cdbd; }
.pl-doc { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.pl-doc.noimg { grid-template-columns: minmax(0, 1fr); }
.pl-img { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }
.pl-img img { max-width: 100%; max-height: calc(100vh - 92px); background: #fff; box-shadow: 0 4px 22px rgba(0, 0, 0, .6); }
.pl-text { align-self: center; margin: 14px 18px 14px 4px; padding: 18px 22px; background: var(--card); color: var(--ink); border-radius: 6px; max-height: calc(100vh - 110px); overflow: auto; }
.pl-text .when { font-size: 16px; }
.pl-text .who { font-size: 15px; }
.pl-text h2 { font-weight: normal; font-size: 28px; line-height: 1.25; margin: 6px 0 10px; }
.pl-text p { font-size: 19px; margin: 0; }
.pl-text .pl-more { font: 13px Arial, sans-serif; color: var(--soft); margin-top: 10px; }
.pl-prog { height: 3px; background: #3a352f; }
.pl-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; background: #161412; }
.pl-bar .pl-pos { font: 13px Arial, sans-serif; color: #b9ad9b; margin-left: 6px; }
.pl-bar .pl-sp { flex: 1; }
.pl-bar button[aria-pressed="true"] { border-color: #e3c56d; color: #f6e2a4; }

@media print {
  body { background: #fff; }
  .top, .side, .strip, .welcome, .tabs, .dtools, .modes, .listen, .pbar, .back { display: none !important; }
  body.printing > :not(#printView) { display: none !important; }
  body.printing #printView { display: block; color: #000; font: 12pt/1.45 Georgia, "Times New Roman", serif; }
  #printView .pv-ed { font: 9pt Arial, sans-serif; color: #444; }
  #printView h1 { font-weight: normal; font-size: 18pt; margin: 2pt 0 8pt; }
  #printView h2 { font: bold 10pt Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; margin: 14pt 0 6pt; }
  #printView .pv-mode { font-weight: normal; text-transform: none; letter-spacing: 0; }
  #printView .pfacts { display: grid; grid-template-columns: max-content 1fr; gap: 2pt 12pt; margin: 0; font-size: 11pt; }
  #printView .pfacts dt { font: bold 9pt Arial, sans-serif; text-transform: uppercase; padding-top: 2pt; }
  #printView .pfacts dd { margin: 0; }
  #printView .script { max-width: none; font-size: 12pt; }
  #printView .cite { color: #000; font-size: 10pt; }
  #printView h2.pv-pages { break-before: page; page-break-before: always; }
  #printView .ppage { margin: 0 0 10pt; text-align: center; break-inside: avoid; page-break-inside: avoid; }
  #printView .ppage img { max-width: 100%; max-height: 9in; }
  #printView .ppage figcaption { font: 9pt Arial, sans-serif; color: #444; }
}

@media (max-width: 860px) {
  .welcome { margin-left: 30px; }
  .pl-doc { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pl-img { padding: 8px; }
  .pl-img img { max-height: 50vh; }
  .pl-text { margin: 0 8px 8px; padding: 10px 14px; max-height: 38vh; }
  .pl-text h2 { font-size: 21px; }
  .pl-text p { font-size: 16px; }
  .pl-chapter h2 { font-size: 30px; }
  .pl-chapter p { font-size: 17px; }
  .talk2 { grid-template-columns: minmax(0, 1fr); }
  .talk2 .col { max-height: none; }
  .talk2 .colhead { position: static; }
  .srckey { grid-template-columns: minmax(0, 1fr); }
  .krow { grid-template-columns: minmax(0, 1fr); }
  .kex { grid-column: 1; }
  .strip, .pbar { margin-left: 30px; }
  .panel { padding: 10px 0 60px 12px; }
  .tl { padding: 10px 12px 80px 0; }
  .chapter-head { margin-left: 30px; }
  .items { padding-left: 30px; }
  .items::before { left: 13px; }
  .entry .dot { left: -24px; }
  .event .diamond { left: -22px; }
  .head { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .thumbs img { height: 44px; }
  .detail { padding: 0 12px 16px; }
  .tabs { margin: 0 -12px 12px; padding: 0 6px; }
  dl.facts, dl.dfacts { grid-template-columns: 1fr; gap: 2px; }
  dl.facts dd, dl.dfacts dd { margin-bottom: 8px; }
}

/* ---------- features6: family tree, two lanes, stationery, public edition ---------- */
.welcome .wpublic { font: calc(14px * var(--fs))/1.45 Arial, sans-serif; color: var(--soft); border-left: 3px solid var(--line); padding: 2px 0 2px 10px; }

.treebox { overflow-x: auto; overflow-y: hidden; max-width: min(100%, calc(100vw - 28px)); background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin: 10px 0 8px; -webkit-overflow-scrolling: touch; }
.treebox svg { display: block; }
#treesvg .tp rect { fill: var(--card); stroke: #a99a80; stroke-width: 1.2; }
#treesvg .tp.liv rect { fill: var(--tint2); }
#treesvg .tp.uns rect { stroke-dasharray: 5 3; }
#treesvg .tp a:hover rect, #treesvg .tp a:focus rect { stroke: var(--accent); stroke-width: 2; }
#treesvg .tp a .tn { fill: var(--accent); }
#treesvg text { font-family: Arial, sans-serif; text-anchor: middle; }
#treesvg .tn { font-size: 12.5px; fill: var(--ink); }
#treesvg .ty { font-size: 11px; fill: var(--soft); }
#treesvg .tp.liv .ty { font-style: italic; }
#treesvg .tq { font-size: 11px; font-weight: bold; fill: var(--soft); }
#treesvg line { stroke: #7d6f5a; stroke-width: 1.3; }
#treesvg .tmar line { stroke: var(--ann); }
#treesvg .uns line, #treesvg line.uns { stroke-dasharray: 5 4; }
#treesvg .tmar path { stroke: var(--ann); stroke-width: 1.3; }  /* fix4: a later marriage drawn over the boxes between */
#treesvg .uns path { stroke-dasharray: 5 4; }
#treesvg .tmn { font-size: 10.5px; font-weight: bold; fill: var(--ann); }  /* fix4: 1, 2, 3: the order of one person's marriages */
.tkey { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.thow summary { cursor: pointer; color: var(--accent); font: calc(14px * var(--fs)) Arial, sans-serif; }
.tsources { font: calc(13.5px * var(--fs))/1.5 Arial, sans-serif; padding-left: 18px; }
.tsources > li { margin: 6px 0; }
.tsources ul { margin: 2px 0; padding-left: 16px; color: var(--soft); }
.tsources .tliv { font-style: italic; color: var(--soft); }
.tsources .tyrs { color: var(--soft); }

.lanes { margin-top: 10px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.lanes .lw, .lanes .lhead { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 9px; min-height: 20px; border-top: 1px solid rgba(201, 185, 159, .25); }
.lanes .lhead { position: sticky; top: var(--hh); z-index: 2; background: var(--paper); font: bold calc(14px * var(--fs)) Arial, sans-serif; border-bottom: 1px solid var(--line); padding: 4px 0; }
.lanes .lhead .ann { color: var(--ann); text-align: right; padding-right: 8px; }
.lanes .lhead .tom { color: var(--tom); padding-left: 8px; }
.lanes .lhead1 { display: none; }
.lanes .lane { display: flex; flex-wrap: wrap; gap: 2px 3px; align-content: center; padding: 1px 6px; }
.lanes .lw .lane.ann { justify-content: flex-end; }
.lanes .lax { border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; color: var(--soft); line-height: 18px; }
.lanes .lmon b { color: var(--ink); }
.lanes .lch { display: inline-block; padding: 0 5px; border-radius: 9px; line-height: 16px; text-decoration: none; white-space: nowrap; color: #fff; }
.lanes .lch.w-ann { background: var(--ann); }
.lanes .lch.w-tom { background: var(--tom); }
.lanes .lch.about { background: transparent; border: 1px dashed currentColor; }
.lanes .lch.about.w-ann { color: var(--ann); }
.lanes .lch.about.w-tom { color: var(--tom); }
.lanes .lch:hover, .lanes .lch:focus { outline: 2px solid var(--accent); }
.lanes .lch .cw { display: none; }
.lanes .lplace { color: var(--soft); font-style: italic; margin-right: 6px; }
.lanes .lband { background: transparent; }
.lanes .lband.t0 { background: #9fb3c9; }
.lanes .lband.t1 { background: #5f7d9c; }
.lanes .lband.sea { background: #d3dde8; }

.paperlist { list-style: none; margin: 10px 0 0; padding: 0; }
.paperlist .pk { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.paperlist .pthumb img { display: block; max-width: 96px; max-height: 120px; border: 1px solid var(--line); background: #fff; }
.paperlist h3 { margin: 0 0 2px; font-weight: normal; font-size: calc(19px * var(--fs)); }
.paperlist h3 .n { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); margin-left: 6px; }
.paperlist p { margin: 2px 0 6px; font-size: calc(15px * var(--fs)); }
.paperlist .pdates { font: calc(14px * var(--fs))/1.6 Arial, sans-serif; }
.paperlist summary { cursor: pointer; color: var(--accent); font: calc(14px * var(--fs)) Arial, sans-serif; }

@media (max-width: 700px) {
  .lanes .lw, .lanes .lhead { grid-template-columns: 50px minmax(0, 1fr) 8px; }
  .lanes .lhead { display: none; }
  .lanes .lhead1 { display: block; font: bold calc(14px * var(--fs)) Arial, sans-serif; padding: 4px 0; border-bottom: 1px solid var(--line); }
  .lanes .lw .lax { grid-column: 1; grid-row: 1 / span 2; text-align: left; padding-left: 2px; }
  .lanes .lw .lane.ann { grid-column: 2; grid-row: 1; justify-content: flex-start; }
  .lanes .lw .lane.tom { grid-column: 2; grid-row: 2; }
  .lanes .lw .lane:empty { padding: 0; }
  .lanes .lw .lband { grid-column: 3; grid-row: 1 / span 2; }
  .lanes .lch .cw { display: inline; font-weight: bold; margin-right: 3px; }
  .paperlist .pk { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .paperlist .pthumb img { max-width: 64px; }
}
.tl { min-width: 0; }
.treebox { width: 100%; }

/* ---------- features7: four doors, What to show, the world and the culture, silences, missing letters, photographs,
   stories, sources; dark mode, text size, focus, tap targets of at least 44 px ---------- */
body { font-size: calc(17px * var(--fs)); }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top :focus-visible { outline-color: #ffd866; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: 8px; top: 8px; padding: 10px 14px; background: var(--card); color: var(--ink); border-radius: 4px; }

/* header: brand, the four doors and search, What to show */
.top { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 16px; background: var(--navy); color: var(--headink); }
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand .home { display: inline-flex; align-items: center; min-height: 44px; color: var(--headink); text-decoration: none; font-size: 20px; white-space: nowrap; }
.brand .ed { font: 12px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--headsoft); white-space: nowrap; }
.doors { display: flex; gap: 2px; }
.doors a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; color: var(--headink); text-decoration: none; font: 16px Arial, sans-serif; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; }
.doors a:hover { background: var(--navy2); }
.doors a[aria-current="page"] { border-bottom-color: #e3c56d; font-weight: bold; background: rgba(255, 255, 255, .07); }
.doors .searchdoor { display: none; }
.find { display: flex; flex: 1 1 180px; max-width: 320px; min-width: 0; margin-left: auto; }
.find input { flex: 1; min-width: 0; min-height: 44px; font: 16px Arial, sans-serif; padding: 0 10px; border: 1px solid #5d6f8a; border-right: 0; border-radius: 4px 0 0 4px; background: #f6f1e6; color: #2a2520; }
.find button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 15px Arial, sans-serif; padding: 0 12px; border: 1px solid #5d6f8a; border-radius: 0 4px 4px 0; background: var(--navy2); color: var(--headink); }
.showbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: #e3c56d; color: #1b1916; font: bold 15px Arial, sans-serif; white-space: nowrap; }
.showbtn:hover { background: #f0d47e; }
.showbtn[aria-expanded="true"] { background: #fff; }
.ic { width: 20px; height: 20px; flex: none; }
@media (max-width: 1060px) {
  .brand { order: 1; flex: 1 1 auto; }
  .showbtn { order: 2; }
  .doors { order: 3; }
  .find { order: 4; }
}
@media (max-width: 640px) {
  .top { padding: 2px 8px 0; gap: 0 8px; }
  .brand .ed { display: none; }
  .brand .home { font-size: 18px; }
  .find { display: none; }
  .doors { width: 100%; justify-content: space-between; }
  .doors a { flex: 1 1 auto; padding: 0 4px; font-size: 15px; }
  .doors .searchdoor { display: inline-flex; }
  .showbtn { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 400px) { .doors .searchdoor .ic { display: none; } }

/* the page under the header: one column */
.tl { max-width: 1000px; margin: 0 auto; padding: 10px 20px 100px; min-width: 0; }
.panel { padding: 0 0 60px; max-width: 900px; }
.panel h2 { margin: 6px 0 6px; font-weight: normal; font-size: calc(28px * var(--fs)); }
.panel h2:focus { outline: none; }
.panel .lead { font-size: calc(15px * var(--fs)); color: var(--soft); }
.panel .lead a { color: var(--accent); }
.crumbs { font: calc(14px * var(--fs)) Arial, sans-serif; margin: 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.crumbs li + li::before { content: "\203A"; margin: 0 8px; color: var(--soft); }
.crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs [aria-current] { color: var(--soft); }
.readbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 4px 0 2px 46px; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.readbar .jump { display: inline-flex; align-items: center; gap: 8px; }
.readbar select, .srcfind input, .f2row input { min-height: 44px; font: calc(16px * var(--fs)) Arial, sans-serif; background: var(--card); color: var(--ink); border: 1px solid var(--line2); border-radius: 4px; max-width: 100%; }
.readbar select { max-width: min(320px, calc(100vw - 150px)); }
.hidden-note { color: var(--ink); }
.linkish { min-height: 44px; }
.hidden-note .linkish, .empty .linkish { font: bold calc(14px * var(--fs)) Arial, sans-serif; }

/* What to show: a drawer on the right, the whole screen on a phone */
.show-back { position: fixed; inset: 0; z-index: 40; background: rgba(10, 10, 10, .45); }
.showpanel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 100vw); overflow: auto; padding: 0 18px 24px; background: var(--paper); color: var(--ink); box-shadow: -4px 0 24px rgba(0, 0, 0, .35); font: calc(15px * var(--fs))/1.4 Arial, sans-serif; }
.showpanel:focus { outline: none; }
body.show-open, body.wel-open { overflow: hidden; }
.sp-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.sp-head h2 { margin: 0; font: normal 24px Georgia, "Times New Roman", serif; }
.sp-lead { color: var(--soft); margin: 8px 0 0; }
.sp-done { min-height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: var(--navy); color: #fff; font: bold calc(15px * var(--fs)) Arial, sans-serif; }
.sp-group { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.sp-group legend { padding: 0; margin-bottom: 4px; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.tg { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }
.tg:hover { background: var(--hover); }
.tg input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--navy); }
.tg .tgl { display: flex; flex-direction: column; min-width: 0; }
.tg .tgn { font-weight: bold; }
.tg .n { font-weight: normal; font-size: calc(14px * var(--fs)); color: var(--soft); }
.tg .tgw { font-size: calc(14px * var(--fs)); color: var(--soft); }
.mk { display: inline-block; flex: none; width: 14px; height: 14px; }
.mk.dot { border-radius: 50%; }
.mk.diamond { width: 11px; height: 11px; margin: 0 2px; transform: rotate(45deg); border: 2px solid var(--family); }
.mk.shp { background: var(--ship); border-color: var(--ship); }
.mk.square { border: 2px solid var(--world); background: var(--card); }
.mk.cul { border-color: var(--culture); border-radius: 3px; }
.mk.dash { height: 0; width: 16px; border-top: 3px dotted var(--soft); }
.mk.ghostm { border: 2px dashed var(--soft); border-radius: 3px; }
.mk.camera { width: 16px; height: 12px; border: 2px solid var(--ink2); border-radius: 3px; }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.sp-k { width: 100%; font-weight: bold; }
.rd { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); cursor: pointer; }
.rd input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.rd:has(input:checked) { border-color: var(--ink2); background: var(--tint2); font-weight: bold; }
.sp-more summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: bold; }
.sp-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.sp-reset { min-height: 44px; padding: 0 18px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); color: var(--ink); font: calc(15px * var(--fs)) Arial, sans-serif; }

/* reading choices */
body.no-marks .unc { border-bottom: 0; cursor: auto; }
body.no-marks .gap { font-size: 0; }
body.no-marks .gap::after { content: "\2026"; font-size: calc(17px * var(--fs)); color: var(--soft); }
body.no-marks .script .ed.k-printed, body.no-marks .script .ed.k-stamp, body.no-marks .script .ed.k-picture { display: none; }
body.no-marks .ins { vertical-align: baseline; font-size: inherit; }
body.no-sums .entry .sum, body.no-sums .csum { display: none; }
body.no-words .gw { border-bottom: 0; cursor: auto; background: none; }
body.hide-world .nw-world, body.hide-culture .nw-culture, body.hide-photos .nw-photo,
body.hide-photos .event .pfig { display: none; }
.script { font-size: calc(18px * var(--fs)); }
.head h3 { font-size: calc(19px * var(--fs)); }
.sum { font-size: calc(15px * var(--fs)); color: var(--ink2); }
.csum p { font-size: calc(16px * var(--fs)); color: var(--ink2); }
.welcome .wintro { font-size: calc(17px * var(--fs)); }
.hit h3 { font-size: calc(19px * var(--fs)); }
.hit .snip { font-size: calc(15px * var(--fs)); color: var(--ink2); }
.event .etext { font-size: calc(15px * var(--fs)); color: var(--ink2); }

/* the war and the world, radio, movies and music: small, quiet cards */
.ev7 { margin: 4px 0; }
.ev7 .square { position: absolute; left: -29px; top: 14px; width: 10px; height: 10px; border: 2px solid var(--world); background: var(--paper); }
.ev7.cat-culture .square { border-color: var(--culture); border-radius: 3px; }
.evhead { display: block; width: 100%; min-height: 44px; padding: 5px 10px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--ink2); }
.evhead:hover { background: var(--hover); border-color: var(--line); }
.evtop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.ev7 .when { color: var(--soft); font-size: calc(14px * var(--fs)); }
.evkind { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--world); }
.cat-culture .evkind, li .evkind { color: var(--culture); }
.cat-world .evkind { color: var(--world); }
.approx { font: italic calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.ettl { display: block; font-size: calc(15px * var(--fs)); color: var(--ink2); line-height: 1.35; }
.ev7.open .evhead { background: var(--card); border-color: var(--line); border-radius: 6px 6px 0 0; }
.evbody { padding: 4px 14px 10px; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; font-size: calc(15px * var(--fs)); }
.evbody p, .sevent p { margin: 6px 0; }
.evq q, .squote { font-style: italic; }
.evdocs, .evapprox, .esrc { font: calc(14px * var(--fs))/1.5 Arial, sans-serif; color: var(--soft); }
.event .esrc { overflow-wrap: anywhere; }
.event.flash, .gap7.flash { background: var(--flash); border-radius: 6px; }

/* silences */
.gap7 { position: relative; margin: 10px 0; }
.gapline { position: absolute; left: -26px; top: -10px; bottom: -10px; width: 4px; background: var(--paper); border-left: 2px dotted var(--soft); }
.gaphead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; background: transparent; border: 1px dashed var(--line2); border-radius: 6px; color: var(--soft); }
.gaphead:hover { background: var(--hover); }
.gaptitle { font-style: italic; font-size: calc(15px * var(--fs)); color: var(--ink2); }
.gapwhen { font: calc(14px * var(--fs)) Arial, sans-serif; }
.gapmore { margin-left: auto; font: bold calc(14px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.gap7.open .gaphead { border-style: solid; border-radius: 6px 6px 0 0; background: var(--card); }
.gapbody { padding: 4px 16px 12px; background: var(--card); border: 1px solid var(--line2); border-top: 0; border-radius: 0 0 6px 6px; font-size: calc(15px * var(--fs)); }
.gapbody h4 { margin: 12px 0 2px; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.gapbody p { margin: 4px 0; }
.gapbody ul { margin: 4px 0; padding-left: 20px; }
.gapbody li { margin: 4px 0; }
.gapbody .when { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.gapbody .annnote { margin-top: 10px; padding: 6px 10px; background: var(--tint2); border-left: 3px solid var(--ann); }
.gapbody .mention, .gapends { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }

/* missing letters on the timeline: ghost cards */
.ghost { position: relative; margin: 12px 0; }
.ghost .gdot { position: absolute; left: -32px; top: 16px; width: 12px; height: 12px; border: 2px dashed var(--soft); border-radius: 50%; background: var(--paper); }
.gcard { padding: 8px 14px 10px; border: 2px dashed var(--line2); border-radius: 6px; color: var(--ink2); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--tint) 10px 11px); }
.gtag { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.gcard .when { color: var(--soft); }
.gcard .gwho { font-weight: bold; }
.ghost.from-tom .gwho { color: var(--tom); }
.ghost.from-ann .gwho { color: var(--ann); }
.gcard p { margin: 4px 0; font-size: calc(15px * var(--fs)); font-style: italic; overflow-wrap: anywhere; }
.gcard .mention { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }

/* photographs from the record */
.photo7 { position: relative; margin: 14px 0; }
.photo7 .camera { position: absolute; left: -33px; top: 16px; width: 16px; height: 12px; border: 2px solid var(--ink2); border-radius: 3px; background: var(--paper); }
.pfig { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); margin: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.pfig.small { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); margin: 8px 0; }
.pfig .pimg { display: block; background: #2b2722; }
.pfig .pimg img { display: block; width: 100%; height: auto; }
.pfig figcaption { padding: 8px 14px 10px; font-size: calc(14px * var(--fs)); min-width: 0; }
.ptag { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.pcap { margin: 4px 0; font-size: calc(15px * var(--fs)); }
.caution { margin: 6px 0; padding: 4px 8px; font: calc(14px * var(--fs))/1.4 Arial, sans-serif; color: var(--ink); background: var(--tint2); border-left: 3px solid var(--accent); }
.standin .caution { border-left-width: 6px; font-size: calc(14px * var(--fs)); }
.credit { margin: 4px 0 0; font: calc(14px * var(--fs))/1.4 Arial, sans-serif; color: var(--soft); }
.credit .rights { white-space: normal; }

/* in a letter: meanwhile */
.news .nw h4 { margin: 10px 0 4px; }
.news ul { margin: 0; padding-left: 20px; font-size: calc(15px * var(--fs)); }
.news li { margin: 4px 0; }
.news li .when { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.news .evgo { font: calc(14px * var(--fs)) Arial, sans-serif; }
.news .nsum { color: var(--ink2); }
.nwnote { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }

/* doors: Stories, Explore, About */
.storycards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0; padding: 0; }
.storycards.one { grid-template-columns: minmax(0, 420px); }
.scard { display: flex; flex-direction: column; height: 100%; padding: 14px 16px; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.scard:hover { background: var(--hover); border-color: var(--line2); }
.scard h3 { margin: 0 0 6px; font: normal calc(21px * var(--fs)) Georgia, "Times New Roman", serif; color: var(--accent); }
.scard p { flex: 1; margin: 0 0 10px; font-size: calc(15px * var(--fs)); color: var(--ink2); }
.smeta { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.more-h { margin: 22px 0 4px; font: normal calc(21px * var(--fs)) Georgia, "Times New Roman", serif; }
.doorcards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 10px 0; padding: 0; }
.doorcards a { display: block; height: 100%; min-height: 44px; padding: 12px 14px; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.doorcards a:hover { background: var(--hover); border-color: var(--line2); }
.doorcards b { display: block; font: normal calc(19px * var(--fs)) Georgia, "Times New Roman", serif; color: var(--accent); }
.doorcards span { display: block; margin-top: 3px; font: calc(14px * var(--fs))/1.4 Arial, sans-serif; color: var(--soft); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); color: var(--ink); font: calc(15px * var(--fs)) Arial, sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: bold; }
.about { max-width: 760px; }
.about h3 { margin: 18px 0 6px; font: normal calc(21px * var(--fs)) Georgia, "Times New Roman", serif; }
.about p { font-size: calc(16px * var(--fs)); }
.about .btn { margin: 4px 6px 4px 0; }

/* the story reader */
.stitle { font-size: calc(24px * var(--fs)) !important; }
.sprog { height: 6px; margin: 4px 0 2px; overflow: hidden; background: var(--tint2); border-radius: 3px; }
.sprog i { display: block; height: 100%; background: var(--accent); }
.snav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.snav.last { margin-top: 16px; }
.spos { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); text-align: center; }
.slead { margin: 8px 0 14px; padding: 10px 16px; background: var(--tint); border-left: 4px solid var(--accent); border-radius: 0 6px 6px 0; }
.slead p { margin: 0; font-size: calc(19px * var(--fs)); line-height: 1.5; }
.squote { margin: 10px 0 0; font-size: calc(17px * var(--fs)); }
.qlab { display: block; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--soft); }
mark.sq { background: var(--mark); box-shadow: 0 0 0 2px var(--mark); }
.sdoc, .sevent { padding: 12px 18px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.sdoc h3, .sevent h3 { margin: 4px 0 4px; font: normal calc(22px * var(--fs)) Georgia, "Times New Roman", serif; }
.sevent .evkind { margin-bottom: 2px; }
.stools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 2px 0 6px; font: calc(14px * var(--fs)) Arial, sans-serif; }
.stools a, .stools button { display: inline-flex; align-items: center; min-height: 44px; }
.senv { margin: 16px 0 4px; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.origs { margin-top: 12px; }
.origs summary, .ssteps summary, .thow summary, .glet summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font: calc(15px * var(--fs)) Arial, sans-serif; }
.ogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ogrid figure { margin: 0; }
.ogrid img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); }
.ogrid figcaption { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.skeys { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.sintro p { max-width: 680px; font-size: calc(18px * var(--fs)); }
.sgo { display: flex; flex-wrap: wrap; gap: 8px; }
.ssteps ol { font-size: calc(15px * var(--fs)); padding-left: 28px; }
.ssteps li { margin: 3px 0; }
.ssteps li a { display: inline-block; padding: 4px 0; }

/* sources, search page, photographs */
.srcfind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; font: bold calc(15px * var(--fs)) Arial, sans-serif; }
.srcfind input { flex: 1 1 220px; max-width: 420px; padding: 0 10px; }
.srcn { font-weight: normal; color: var(--soft); }
.sgroup h3 { margin: 20px 0 6px; font: normal calc(22px * var(--fs)) Georgia, "Times New Roman", serif; }
.sgroup h3 .n, .az .n { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.slist { list-style: none; margin: 0; padding: 0; }
.slist li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: calc(15px * var(--fs)); overflow-wrap: anywhere; }
.slinks { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.slinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; font: calc(14px * var(--fs)) Arial, sans-serif; text-decoration: none; overflow-wrap: anywhere; }
.slinks a.wb { border-style: dashed; }
.sn { display: inline-block; margin-top: 2px; font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.find2 { margin: 6px 0 10px; }
.find2 label { display: block; margin-bottom: 4px; font: bold calc(14px * var(--fs)) Arial, sans-serif; }
.f2row { display: flex; gap: 8px; }
.f2row input { flex: 1; min-width: 0; padding: 0 10px; }
.gallery { list-style: none; margin: 10px 0; padding: 0; }
.gallery > li { margin: 0 0 24px; }
.gallery h3 { margin: 0 0 6px; font: normal calc(20px * var(--fs)) Georgia, "Times New Roman", serif; }
.gallery h3 .when { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.pwhere { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }

/* the first-visit welcome */
.welmodal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 10, 10, .55); }
.welmodal[hidden] { display: none; }
.welbox { width: 100%; max-width: 560px; max-height: 100%; overflow: auto; padding: 20px 22px; background: var(--paper); color: var(--ink); border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.welstep { font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.welbox h2 { margin: 6px 0 10px; font: normal calc(28px * var(--fs)) Georgia, "Times New Roman", serif; }
.welbox h2:focus { outline: none; }
.welbox p { font-size: calc(17px * var(--fs)); }
.welshow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; background: #e3c56d; color: #1b1916; font: bold calc(15px * var(--fs)) Arial, sans-serif; }
.welbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.welbtns .sp { flex: 1; }
.welbtns button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); color: var(--ink); font: calc(15px * var(--fs)) Arial, sans-serif; }
.welbtns .welgo { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: bold; }
.welbtns .welskip { background: transparent; border-color: transparent; text-decoration: underline; padding: 0 8px; }

/* tap targets: every control at least 44 px high */
.tabs button, .modes button, .viewer .pages button, .mapctl button, .mslider button, .az button, .az span, .listen button, .flip button,
.printbtn, .key .kclose, .wq button, .pl-bar button, .pl-go button, .listen select, .lsel, .whoside .linkish, .joinnote .linkish,
.keybtn, .pl-setup select { min-height: 44px; }
.modes button, .viewer .pages button, .mapctl button, .mslider button, .listen button, .flip button, .wq button { padding: 0 12px; }
.printbtn, .joinnote .linkish, .whoside .linkish { display: inline-flex; align-items: center; }
.az span { display: inline-flex; align-items: center; justify-content: center; }
.az button { display: inline-flex; align-items: center; gap: 6px; }
.plist a, .tlist a { min-height: 44px; align-items: center; }
.mletters a, .wanted .mention a, .glet a, .pdates a, .mem a { display: inline-block; padding: 6px 0; }
.lanes .lch { line-height: 22px; }
.mslider input { min-height: 44px; }
.tg input:focus-visible, .rd input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* colours that were fixed before features7 */
.lanes .lch { color: var(--chipink); }
#mapsvg .pl { fill: var(--card); }
.mapbox { background: var(--sea); }
#treesvg .tp rect { fill: var(--card); }
#treesvg .tp.liv rect { fill: var(--tint2); }
.viewer .stage { background: #3b352e; }
.find input::placeholder { color: #6d6257; }

@media (max-width: 860px) {
  .readbar { margin-left: 30px; }
  .tl { padding: 8px 12px 80px; }
  .panel { padding: 0 0 60px; }
}
@media (max-width: 640px) {
  .pfig, .pfig.small { grid-template-columns: minmax(0, 1fr); }
  .readbar { margin-left: 0; }
  .snav .btn { padding: 0 12px; }
  .stitle { font-size: calc(21px * var(--fs)) !important; }
  .sdoc, .sevent { padding: 10px 12px 14px; }
  .showpanel { width: 100vw; padding: 0 14px 24px; }
  .gapmore { margin-left: 0; }
}

@media print {
  .top, .readbar, .crumbs, .snav, .stools, .skeys, .showpanel, .show-back, .welmodal, .skip, .sprog, .modes, .origs summary { display: none !important; }
  body { background: #fff; color: #000; }
  .tl { max-width: none; padding: 0; }
  .slead { background: none; border-left: 2px solid #000; }
  .sdoc, .sevent { box-shadow: none; border: 0; padding: 0; }
  #printView .pv-lead { font-size: 13pt; font-style: italic; }
  #printView .pv-quote { margin: 6pt 0 10pt 18pt; font-style: italic; }
  #printView mark.sq { background: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 1.5pt; }
}
.az button .n { border: 0; min-height: 0; padding: 0; background: none; display: inline; }
.inl { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--ink2); border: 1px solid var(--line2); border-radius: 8px; padding: 0 6px; }

.btn.primary, .sp-done, .welbtns .welgo, .modes button.on, .listen .lbtn, .viewer .pages button.on { background: var(--btn); border-color: var(--btn); color: var(--btnink); }
.tg input, .rd input, .mslider input, .chk input { accent-color: var(--btn); }

.gapall summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font: calc(14px * var(--fs)) Arial, sans-serif; }
.gapev a { color: var(--accent); }
@media (max-width: 640px) { .welcome { margin-left: 0; } }

/* ---------- features8: the 2026-10-15 usability review ---------- */
/* research notes (B2): the plain version (.vv) is shown; in the family edition the full note (.rv) can be shown instead */
.rv { display: none; }
body.research .rv { display: revert; }
body.research .vv { display: none; }
body.research div.rv, body.research p.rv, body.research dd.rv { background: var(--tint); border-left: 3px solid var(--line2); padding-left: 6px; }
.srcref { border-bottom: 1px dotted var(--soft); cursor: help; }
.ratew { color: var(--soft); font-size: .92em; }
abbr[title] { text-decoration: none; }

/* phone overflow in About this letter (B4): grid items may shrink; long words and numbers wrap anywhere */
dl.facts > dt, dl.facts > dd, dl.dfacts > dt, dl.dfacts > dd { min-width: 0; overflow-wrap: anywhere; }
.tags { flex-wrap: wrap; max-width: 100%; }
.detail, .card, .block, .hwk, .join, .csum, .evbody, .gapbody, .gcard, .about, .tsources, .names li, .slead, .sdoc, .wanted li { min-width: 0; overflow-wrap: anywhere; }

/* keyboard (B3): a visible ring on everything that takes the focus */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.head:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.hit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gw:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.lanes .lch:focus-visible { outline: 3px solid var(--focus); }
.strip .wk:hover { background: var(--accent); }
.strip .bars { position: relative; border-radius: 2px; }
.strip .bars:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.strip .wk.cur { background: var(--accent); box-shadow: 0 0 0 2px var(--focus); position: relative; z-index: 1; min-width: 3px; }
.brand { margin: 0; font: inherit; }

/* the week strip: visible in dark mode, the last year label kept inside (m15) */
:root { --wk1: rgba(34, 52, 79, .22); --wk2: rgba(34, 52, 79, .45); --wk3: rgba(34, 52, 79, .7); --wk4: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wk1: rgba(143, 187, 232, .25); --wk2: rgba(143, 187, 232, .45); --wk3: rgba(143, 187, 232, .7); --wk4: #8fbbe8; } }
:root[data-theme="dark"] { --wk1: rgba(143, 187, 232, .25); --wk2: rgba(143, 187, 232, .45); --wk3: rgba(143, 187, 232, .7); --wk4: #8fbbe8; }
.wk.l1 { background: var(--wk1); } .wk.l2 { background: var(--wk2); } .wk.l3 { background: var(--wk3); } .wk.l4 { background: var(--wk4); }
.strip .yrs span:last-child { transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--rail); padding: 0 3px 0 0; }

/* a person or a topic chosen (M1): the welcome and the strip step aside; a bar under the header says what is shown */
body.narrowed #welcome, body.narrowed #strip { display: none; }
html:has(body.narrowed) { scroll-padding-top: calc(var(--hh) + 70px); }
.fbar { position: sticky; top: var(--hh); z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px;
  margin: 8px 0 0 46px; padding: 0 14px; background: var(--navy2); color: var(--headink); border-radius: 0 0 6px 6px; font: calc(15px * var(--fs)) Arial, sans-serif; }
.fbar[hidden], body.bar-seen .fbar { display: none; }
.fbar .all { display: inline-flex; align-items: center; min-height: 44px; color: #ffe39a; font-weight: bold; }
.pbar .ptitle { margin: 0 0 4px; font: normal calc(24px * var(--fs)) Georgia, "Times New Roman", serif; }
.pbar .ptitle:focus { outline: none; }
.pbar .all, .pbar .others { display: inline-flex; align-items: center; min-height: 44px; }
.pbar summary { display: flex; align-items: center; min-height: 44px; }

/* the open letter (M12, M13): one row of reading tools; what the lines under words mean */
.entry.open .head .sum { display: none; }  /* 2026-11-03: shown instead at the top of the open letter, above Listen */
.rtools { gap: 6px 8px; }
.rtools .printbtn { margin-left: auto; }
.lopts[hidden] { display: none !important; }
.mkey { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 0 10px; font: calc(14px * var(--fs))/1.5 Arial, sans-serif; color: var(--soft); }
.mkey .mkk { white-space: nowrap; }
body.no-words .mkey .kw, body.no-names .mkey .kn, body.no-marks .mkey .ku { display: none; }
a.pl { color: var(--accent); text-decoration: none; border-bottom: 0; font-weight: bold; }
a.pl:hover, a.pl:focus-visible { text-decoration: underline; }
.mkey a.pl { cursor: default; }
body.no-names .script a.pl { color: inherit; font-weight: inherit; pointer-events: none; }
.unc { border-bottom: 0; text-decoration: underline wavy var(--soft); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
body.no-marks .unc { text-decoration: none; }
.gw { border-bottom: 2px dotted var(--soft); text-decoration: none; }
.script u, .mkey u { text-decoration: underline solid; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

/* the page viewer (M4) */
body.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: rgba(18, 16, 14, .96); color: #f2ead9; }
.lightbox[hidden] { display: none; }
.lightbox:focus { outline: none; }
.lb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; background: #161412; }
.lb-t { flex: 1 1 200px; min-width: 0; margin: 0; font: calc(16px * var(--fs))/1.3 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.lb-nav, .lb-zoom { display: inline-flex; align-items: center; gap: 4px; }
.lb-nav[hidden] { display: none; }
.lb-pos { min-width: 4.5em; text-align: center; font: calc(14px * var(--fs)) Arial, sans-serif; color: #c9bfae; }
.lb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 6px 10px 0; background: #161412; }
.lb-tools button, .lb-file,
.lb-bar button { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid #6a6155; border-radius: 22px; background: #34302b; color: #f2ead9;
  font: calc(15px * var(--fs)) Arial, sans-serif; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.lb-bar button:disabled { opacity: .45; cursor: default; }
.lb-bar .lb-close { background: #e3c56d; border-color: #e3c56d; color: #1b1916; font-weight: bold; font-size: calc(17px * var(--fs)); }
.lb-bar :focus-visible, .lb-tools :focus-visible { outline-color: #ffd866; }
.lb-tools button:disabled { opacity: .45; cursor: default; }
@media (max-width: 520px) { .lbw { display: none; } .lb-file { min-width: 0; padding: 0 10px; } }
.lb-hint { background: #161412; }
.lb-stage { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 10px; touch-action: none; }
.lb-stage img { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .6); transform-origin: center center; user-select: none; }
.lb-stage img.zoomed { cursor: grab; }
.lb-hint { margin: 0; padding: 6px 12px 10px; font: calc(13px * var(--fs)) Arial, sans-serif; color: #b9ad9b; text-align: center; }
.viewer .hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.viewer .hint .linkish, .viewer .hint .imgfile { display: inline-flex; align-items: center; min-height: 44px; }
.viewer .stage a, .thumbs img { cursor: zoom-in; }

/* family tree (M6) */
.tviews { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tviews .btn[aria-pressed="true"] { background: var(--tint2); border-color: var(--ink2); font-weight: bold; }
.treectl[hidden], .treebox[hidden], .treelist[hidden] { display: none; }
.treebox { overflow: auto; max-height: 72vh; cursor: grab; }
.treebox.dragging { cursor: grabbing; user-select: none; }
.treelist .tgen h3 { margin: 16px 0 4px; font: normal calc(20px * var(--fs)) Georgia, "Times New Roman", serif; }
.treelist ul { list-style: none; margin: 0; padding: 0; }
.treelist li { padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: calc(16px * var(--fs)); }
.treelist li a { display: inline-flex; align-items: center; min-height: 44px; }
.treelist .tyrs, .treelist .tliv { color: var(--soft); font-size: .9em; }
.treelist .tsp { color: var(--ink2); font-size: .92em; }

/* the opening (M7) and the welcome (M3) */
.welcome .wcont { margin: 6px 0; padding: 2px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; font: calc(15px * var(--fs))/1.45 Arial, sans-serif; }
.welcome .wplay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.welcome a.wbtn, .wbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); color: var(--accent); text-decoration: none; }
.wbtn:hover { background: var(--hover); }
.welbox .wq { margin: 10px 0 4px; }
.wqstat { min-height: 1.2em; margin: 4px 0 0; font: italic calc(15px * var(--fs)) Georgia, serif; color: var(--ink2); }
button.welshow { border: 0; cursor: pointer; }
button.welshow:hover { background: #f0d47e; }
.wq button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: bold; }
@media (max-width: 520px) {
  .welbtns { display: grid; grid-template-columns: 1fr 1fr; }
  .welbtns .sp { display: none; }
  .welbtns .welgo { grid-column: 1 / -1; grid-row: 1; }
}

/* the empty state at the top (m14) */
.empty { margin: 12px 0 12px 46px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line2); border-radius: 8px; font-style: normal; color: var(--ink); }
.empty[hidden] { display: none; }
.empty p { margin: 0 0 8px; font-size: calc(17px * var(--fs)); }
body.all-off #strip { display: none; }

/* missing letters and family photographs */
.ghost.golink .gcard { cursor: pointer; }
.ghost.golink .gcard:hover { background-color: var(--hover); }
.famgrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; padding: 0; }
.famph { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.famph:hover { background: var(--hover); }
.famph img { width: 100%; height: 150px; object-fit: contain; background: #2b2722; border-radius: 4px; }
.famph .fwhen { font: calc(13px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.famph .ftitle { font-size: calc(15px * var(--fs)); line-height: 1.3; }

/* tap targets (M8): links standing alone get a 44 px hit area */
.gcard .mention a, .gapbody .mention a, .gapends a, .evdocs a, .news .evgo, .glet a, .pdates a, .mem a, .mletters a, .wanted .mention a, .tsources a,
.crumbs a, .talk a, .minfo a, .howsure a, .gapev a, .pwhere a, .lead a, .more a.out {
  display: inline-flex; align-items: center; min-height: 44px; }
.printbtn { min-height: 44px; display: inline-flex; align-items: center; }
.tg input { width: 24px; height: 24px; }
.rd input { width: 22px; height: 22px; }
@media (max-width: 860px), (pointer: coarse) {
  .lanes .lch { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.2; padding: 0 9px; }
  .az button, .az span { min-width: 44px; }
}
@media (max-width: 640px) {
  .strip .bars { pointer-events: none; }
  .strip .capgo { display: none; }
  .fbar { margin-left: 0; }
  .empty { margin-left: 0; }
}
.wideonly { display: inline; } .narrowonly { display: none; }
@media (max-width: 700px) { .wideonly { display: none; } .narrowonly { display: inline; } }
@media (pointer: coarse) { .skeys { display: none; } }
.sshare { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
@media print { .lightbox, .fbar, .mkey, .sshare { display: none !important; } .rv { display: none !important; } }

/* minor and polish items (m4, m6, m7, p3, p6) */
body[data-door="search"] .find { display: none; }
.dym a { font-weight: bold; }
.dl { white-space: nowrap; }
.scard.start { border-color: var(--accent); }
.shere { align-self: flex-start; margin-bottom: 6px; padding: 2px 10px; border-radius: 12px; background: var(--accent); color: var(--card); font: bold calc(13px * var(--fs)) Arial, sans-serif; }
.pl-setup input[type=radio], .pl-setup input[type=checkbox] { width: 20px; height: 20px; accent-color: #e3c56d; vertical-align: middle; }
.pl-setup label { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pl-setup select, .pl-row select, .pl-setup input[type=number] { min-height: 40px; max-width: 100%; border-radius: 4px; }
.pl-row .lsel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; margin: 4px 0; }
@media (max-width: 860px) { .thumbs img { height: 56px; } }

/* M12 on a phone: short tab and button names, a long summary cut to four lines */
@media (max-width: 640px) {
  .tabmore { display: none; }
  .tabs button { padding: 9px 8px 7px; font-size: calc(14px * var(--fs)); }
  .rtools button { padding: 0 9px; }
  .rtools { gap: 4px 6px; }
  .mkey { gap: 0 12px; margin-bottom: 6px; }
  .csum { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px; }
  .csum p { flex: 1 1 100%; }
  .rtools .lsel { font-size: calc(14px * var(--fs)); }
  .csum.clamp p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .csum p { font-size: calc(15px * var(--fs)); line-height: 1.45; }
  .rtools { font-size: 0; }
  .rtools > * { font-size: calc(14px * var(--fs)); }
  .rtools .printbtn { margin-left: 0; }
}
.csmore[hidden] { display: none; }
.csum .csmore { min-height: 44px; font: calc(14px * var(--fs)) Arial, sans-serif; }

/* rights footer (2026-10-15) */
.rightsfoot { max-width: 60rem; margin: 2.5rem auto 1.5rem; padding: 1rem 16px 0; border-top: 1px solid var(--line, #d8cfbf); font-size: .82rem; line-height: 1.5; color: var(--soft, #665b50); text-align: center; }
.rightsfoot a { color: inherit; text-decoration: underline; }
@media print { .rightsfoot { margin-top: 1rem; } }

/* recorded readings (2026-10-15): label and player on one line, a slim player */
.listen.rec { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 4px 0; }
.listen.rec .lrec { white-space: nowrap; font-size: .85rem; }
.listen.rec audio { flex: 1 1 auto; min-width: 0; height: 36px; }

/* ---------- features9: the reading desk. Wide screens: map | letters | details. Medium: a map bar under the header and a
   panel that slides over the letters. Phones: a one-line bar and a bottom sheet. Body classes set by app.js:
   rl-col / rl-edge (map column / folded), rl-bar (map bar), sd-col / sd-edge (details column / folded), sd-open (details
   shown), sd-over (over the letters), sd-sheet (bottom sheet). ---------- */
.desk { min-width: 0; }
@media (min-width: 1200px) {
  .desk { display: grid; grid-template-columns: var(--lw, 0px) minmax(0, 1fr) var(--rw, 0px); align-items: start; }
  .desk > .rail { grid-column: 1; } .desk > .tl { grid-column: 2; width: 100%; } .desk > .side { grid-column: 3; }
}
body.rl-col { --lw: clamp(230px, 19vw, 320px); }
body.rl-edge { --lw: 46px; }
body.sd-col { --rw: clamp(310px, 26vw, 420px); }
body.sd-edge { --rw: 46px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* left: where they were */
.rail { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: auto; background: var(--card2); border-right: 1px solid var(--line);
  font: calc(14px * var(--fs))/1.45 Arial, sans-serif; color: var(--ink); }
.rail-in { padding: 6px 12px 16px; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rail-t { margin: 0; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.fold, .unfold { min-width: 44px; min-height: 44px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink2); font: bold 22px/1 Arial, sans-serif; }
.fold:hover, .unfold:hover { background: var(--hover); border-color: var(--line); }
.rail .unfold, .side .unfold { display: none; }
body.rl-edge .rail { overflow: hidden; }
body.rl-edge .rail .rail-in { display: none; }
body.rl-edge .rail .unfold, body.sd-edge:not(.sd-over) .side .unfold { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 12px 0; border-radius: 0; }
body.sd-edge:not(.sd-over) .side .side-in { display: none; }
body.sd-edge:not(.sd-over) .side { overflow: hidden; }
.ufl { writing-mode: vertical-rl; font: bold calc(14px * var(--fs)) Arial, sans-serif; letter-spacing: .08em; color: var(--soft); }
.rdate { margin: 2px 0 6px; color: var(--soft); }
.rmap { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.rmap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rsvg { display: block; width: 100%; height: 200px; background: var(--sea); }
.rsvg.indrop { height: min(40vh, 300px); }
.rsvg .sea { fill: var(--sea); }
.rsvg .coast { fill: none; stroke: #8b8f86; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rsvg .rt { fill: none; stroke: var(--tom); stroke-width: 1.4; opacity: .35; vector-effect: non-scaling-stroke; }
.rsvg .rt.est { stroke-dasharray: 4 3; }
.rsvg .annline { stroke: var(--ann); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.rsvg .mk.tom { fill: var(--tom); stroke: #fff; }
.rsvg .mk.tom.est { fill: var(--tom); fill-opacity: .45; stroke: var(--tom); }
.rsvg .mk.ann { fill: var(--ann); stroke: #fff; }
.rsvg .mk.ship { fill: none; stroke: var(--accent); }
.rsvg text { font-family: Arial, sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--sea); stroke-linejoin: round; }
.rsvg .annlbl { fill: var(--ann); }
.rline { margin: 8px 0 2px; font-weight: bold; }
.rwhere { margin: 4px 0; color: var(--ink2); }
.rstate { margin: 8px 0 0; font: calc(20px * var(--fs)) Georgia, "Times New Roman", serif; }
.rest { margin: 4px 0; color: var(--soft); display: flex; align-items: center; gap: 6px; }
.restk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px dashed var(--tom); background: var(--card); flex: none; }
.rlegend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 6px 0; color: var(--soft); font-size: calc(13px * var(--fs)); }
.rlegend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.lg.dtom { background: var(--tom); } .lg.dann { background: var(--ann); } .lg.dship { border: 2px solid var(--accent); }
.rfull a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }

/* the map bar, at the foot of the header on medium widths and phones */
.mapbar { order: 30; flex: 1 1 100%; min-width: 0; position: relative; margin: 2px -16px 0; }
.mapbar[hidden] { display: none; }
.mb-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; border: 0; border-top: 1px solid rgba(255, 255, 255, .14);
  background: var(--navy2); color: var(--headink); font: calc(14px * var(--fs)) Arial, sans-serif; text-align: left; }
.mb-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-x { flex: none; padding: 2px 10px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 12px; font-size: calc(13px * var(--fs)); }
.mb-x::after { content: " \25BE"; }
.mapbar.open .mb-x::after { content: " \25B4"; }
.mb-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 25; max-height: calc(100vh - var(--hh) - 8px); overflow: auto; padding: 10px 16px 12px;
  background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line2); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); font: calc(14px * var(--fs))/1.45 Arial, sans-serif; }
.mb-drop[hidden] { display: none; }
@media (max-width: 640px) { .mapbar { margin: 2px -8px 0; } .mb-btn { padding: 0 10px; gap: 6px; } }

/* right: the details panel */
.side { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: auto; overscroll-behavior: contain; background: var(--card2); border-left: 1px solid var(--line);
  font: calc(15px * var(--fs))/1.5 Arial, sans-serif; color: var(--ink); }
.side:focus { outline: none; }
.side-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 14px; background: var(--card2); border-bottom: 1px solid var(--line); }
.side-l { flex: 1 1 auto; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.side-x { min-height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); color: var(--ink); font: bold calc(14px * var(--fs)) Arial, sans-serif; }
.side-x[hidden] { display: none; }
.grab { display: none; }
.side-body { padding: 8px 16px 40px; }
.sd-head { margin: 6px 0 8px; }
.sd-full { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font: calc(13px * var(--fs)) Arial, sans-serif; color: var(--ink); text-decoration: none; background: var(--paper); }
.sd-full:hover, .sd-full:focus-visible { border-color: var(--accent, #22344f); }
.sd-kind { margin: 0; font: bold calc(12px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.sd-title { margin: 2px 0 0; font: normal calc(24px * var(--fs))/1.25 Georgia, "Times New Roman", serif; }
.sd-title:focus { outline: none; }
.sd-title:focus-visible { outline: 3px solid var(--focus); }
.sd-empty p { color: var(--ink2); }
.sd-empty .ex-name { color: var(--tom); font-weight: bold; }
.sd-empty .ex-word { border-bottom: 2px dotted var(--soft); }
.sd-about { color: var(--ink2); } .sd-about p { margin: 0 0 8px; }
.sd-note { padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 10px; }
.sd-note p { margin: 4px 0 0; }
.sd-ref { margin: 0 0 10px; } .sd-rt { margin: 8px 0 0; font: normal calc(19px * var(--fs)) Georgia, "Times New Roman", serif; }
.sd-k { margin: 0; color: var(--soft); font-size: calc(13px * var(--fs)); }
.side .more .from { color: var(--soft); }
.side a { color: var(--accent); }
.side .more a.out, .sd-page a, .sd-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.sd-only .btn { display: inline-flex; align-items: center; min-height: 44px; }
.sd-h { margin: 14px 0 4px; font: bold calc(14px * var(--fs)) Arial, sans-serif; color: var(--ink2); }
.sd-h .n { font-weight: normal; color: var(--soft); }
.sd-list { list-style: none; margin: 0; padding: 0; }
.sd-list li { padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
.sd-list li[hidden] { display: none; }
.sd-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; text-decoration: none; }
.sd-go .when { font-weight: bold; text-decoration: underline; }
.sd-go .sd-who { color: var(--soft); }
.sd-line { margin: 0 0 2px; color: var(--ink2); font: calc(15px * var(--fs))/1.45 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.sd-line mark { background: var(--mark); color: inherit; }
.sd-go.here, .hit.here { background: var(--flash); border-radius: 4px; }
.sd-hits .hit { padding: 8px 12px 10px; }
.sd-hits .hit h3 { font-size: calc(17px * var(--fs)); }
.sd-foot { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 12px; font-size: calc(14px * var(--fs)); }
.side-back { position: fixed; inset: 0; z-index: 45; background: rgba(10, 10, 10, .42); }
.side-back[hidden] { display: none; }
.script .flash, .card.flash { background: var(--flash); border-radius: 3px; transition: background .4s; }

/* the panel over the letters (medium widths, or a folded panel on a wide screen) */
body.sd-over, body.sd-sheet { overflow: hidden; }
body.sd-over .side { position: fixed; top: 0; right: 0; bottom: 0; left: auto; height: auto; width: min(440px, 92vw); z-index: 46; box-shadow: -6px 0 26px rgba(0, 0, 0, .35); animation: sdIn .18s ease-out; }
body.sd-over .side .fold, body.sd-sheet .side .fold { display: none; }
@keyframes sdIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
/* the bottom sheet (phones) */
body.sd-sheet .side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: min(80vh, calc(100vh - 48px)); z-index: 46; border: 0; border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .35); animation: sheetIn .2s ease-out; }
body.sd-sheet .side:not(.dragging) { transition: transform .18s ease-out; }
body.sd-sheet .side-top { padding-top: 14px; touch-action: none; cursor: grab; border-radius: 14px 14px 0 0; }
body.sd-sheet .grab { display: block; position: absolute; top: 5px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--line2); }
body.sd-sheet .side-body { padding: 8px 14px 40px; }
@keyframes sheetIn { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.sd-over .side, body.sd-sheet .side { animation: none; } }

/* explained words: a cue after the first, a one-time hint, the subjects of the letter; the listening note */
.gwi { margin-left: 2px; color: var(--accent); font: bold .75em Arial, sans-serif; vertical-align: super; line-height: 0; cursor: pointer; }
body.no-words .gwi, body.no-words .whint, body.no-words .inthis { display: none; }
.whint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; max-width: 680px; margin: 0 0 10px; padding: 2px 6px 2px 12px; background: var(--tint); border-left: 3px solid var(--accent);
  font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--ink); }
.whint .gwi { vertical-align: baseline; font-size: 1.1em; line-height: inherit; }
.whint .whint-x { font: bold calc(14px * var(--fs)) Arial, sans-serif; }
.inthis .it-lead { margin: 0; color: var(--soft); font: calc(14px * var(--fs)) Arial, sans-serif; }
.itlist { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; padding: 0; }
.itbtn { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; max-width: 100%; padding: 3px 12px; border: 1px solid var(--line2);
  border-radius: 8px; background: var(--card); color: var(--ink); font: calc(14px * var(--fs))/1.3 Arial, sans-serif; text-align: left; overflow-wrap: anywhere; }
.itbtn:hover { background: var(--hover); }
.itk { font-size: calc(12px * var(--fs)); color: var(--soft); }
.lnote { max-width: 680px; margin: 0 0 10px; font: calc(13px * var(--fs))/1.45 Arial, sans-serif; color: var(--soft); }
.kthis { margin: 4px 0 10px; padding: 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.kthis .mkey { margin: 4px 0 0; }

@media print {
  .rail, .side, .side-back, .mapbar, .whint, .gwi { display: none !important; }
  .desk { display: block !important; }
}
.sd-about.clamp { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.sd-aboutmore { font: bold calc(14px * var(--fs)) Arial, sans-serif; }
body.rl-col .strip .capgo, body.sd-col .strip .capgo { display: none; }
.sd-who2 { margin: 0 0 8px; color: var(--soft); font-size: calc(14px * var(--fs)); }
.sd-fam { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 12px; margin: 4px 0 8px; }
.sd-fam dt { color: var(--soft); font-weight: bold; font-size: calc(13px * var(--fs)); align-self: center; }
.sd-fam dd { margin: 0; }
.sd-tree { font: calc(15px * var(--fs)) Arial, sans-serif; color: var(--accent); text-decoration: underline; padding: 0; background: none; border: 0; text-align: left; }
.sd-tnote, .sd-src { margin: 4px 0 8px; color: var(--ink2); font-size: calc(14px * var(--fs)); overflow-wrap: anywhere; }
.sd-k2 { font-weight: bold; color: var(--soft); }
.sd-photo { margin: 10px 0; } .sd-photo img { display: block; max-width: 100%; max-height: 220px; border: 1px solid var(--line); background: #fff; }
.sd-photo figcaption { margin-top: 4px; color: var(--soft); font-size: calc(13px * var(--fs)); }
/* the map page holds still while the date slider moves (features9) */
.minfo .mdate { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.6em; line-height: 1.6em; }
.mclamp { height: calc(15px * var(--fs) * 1.55 * 4 + 12px); overflow: hidden; }
.mclamp.open { height: auto; }
.mmore { font: bold calc(14px * var(--fs)) Arial, sans-serif; }
.minfo .mweek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlbox { height: 12em; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; background: var(--card); }
.mlbox:focus-visible { outline: 3px solid var(--focus); }
.mslider input { touch-action: none; }
.rbody .rwhere { min-height: 4.4em; }

/* ---------- features10: one entry per letter (the seam between parts found apart), possible joins, Share ---------- */
.script .seam { margin: 18px 0 12px; padding: 8px 0 0; border-top: 1px dashed var(--line2); color: var(--soft);
  font: calc(13.5px * var(--fs))/1.45 Arial, sans-serif; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.script .seam .seam-pg { letter-spacing: .14em; text-transform: uppercase; font-size: calc(13px * var(--fs)); }
.script .seam .seam-t { font-style: italic; }
.script .seam.kept { border-top-style: dotted; }
.script .seam.flash { background: var(--flash); border-radius: 3px; }
.maybe { font: calc(14px * var(--fs))/1.45 Arial, sans-serif; color: var(--soft); margin: 0 0 10px; }
.maybe a { display: inline-block; padding: 4px 0; }
.lpart { font: calc(13px * var(--fs)) Arial, sans-serif; color: var(--soft); align-self: center; }
.sharebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 22px;
  background: var(--card); color: var(--ink); font: calc(14px * var(--fs)) Arial, sans-serif; cursor: pointer; }
.sharebtn:hover { background: var(--hover); }
.sharebtn .ic { width: 18px; height: 18px; }
.rtools .sharebtn, .dtools .sharebtn { margin-left: 4px; }
.pbar .ptop .sharebtn { margin-left: 8px; }
.sshare .sharebtn, .sd-share .sharebtn { margin: 4px 0; }
body.no-share .sharebtn { display: none !important; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; max-width: calc(100vw - 32px);
  background: var(--navy); color: var(--headink); border-radius: 22px; padding: 12px 20px; box-shadow: var(--shadow);
  font: calc(15px * var(--fs)) Arial, sans-serif; text-align: center; }
.toast[hidden] { display: none; }
.toast.wide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; border-radius: 10px; }
.toast input { flex: 1 1 220px; min-height: 40px; font: calc(14px * var(--fs)) Arial, sans-serif; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line2); }
.toast .toast-x { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--headsoft); background: transparent; color: var(--headink); }
@media print { .sharebtn, .toast, .sd-share { display: none !important; } .script .seam { color: #444; } }
@media (prefers-reduced-motion: reduce) { .script .seam.flash { transition: none; } }

/* ---------- features11 (work/audit/ux_review_2026-10-18.md): map motion, the public-record frame, the page shell, and the
   rest of the review's findings ---------- */
:root { --prov: #3f6488; --provbg: #2e4b69; --provink: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --prov: #8fb3d6; --provbg: #20354b; --provink: #e6f0fa; } }
:root[data-theme="dark"] { --prov: #8fb3d6; --provbg: #20354b; --provink: #e6f0fa; }

/* the page shell, painted before the letters load (G2) */
.shell-top .home { cursor: default; }
.shell { max-width: 640px; margin: 18vh auto 0; padding: 0 20px; font: calc(16px * var(--fs))/1.5 Arial, sans-serif; color: var(--ink2); text-align: center; }
.shell-t { font: calc(24px * var(--fs)) Georgia, "Times New Roman", serif; color: var(--ink); margin: 0 0 6px; }
.shell-s { margin: 0 0 18px; }
.shell-bar { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.shell-bar i { position: absolute; top: 0; bottom: 0; width: 30%; border-radius: 2px; background: var(--navy); animation: shellGo 1.3s ease-in-out infinite; }
@keyframes shellGo { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .shell-bar i { animation: none; left: 0; width: 100%; opacity: .5; } }

/* the brand is not a heading (m16) */
p.brand { margin: 0; }

/* G5: the recorded reading's label can be read in dark mode; m12: its length */
.listen .lrec, .listen.rec .lrec { color: var(--ink); }
.listen .llen { font-weight: normal; color: var(--soft); }

/* m13: Print and Share are the same kind of button */
.printbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 22px;
  background: var(--card); color: var(--ink); font: calc(14px * var(--fs)) Arial, sans-serif; text-decoration: none; cursor: pointer; }
.printbtn:hover { background: var(--hover); }
.printbtn .ic { width: 18px; height: 18px; }
.rtools .printbtn { margin-left: auto; }
.dtools { gap: 6px; }
/* p5: "Exactly as written" whole, on two lines if it must */
.modes button[data-mode="exact"] { white-space: normal; line-height: 1.15; text-align: center; max-width: 9.5em; }

/* decision 3: photographs from the public record, the same frame everywhere (not by colour alone: dashes and words) */
.pimgw { position: relative; display: block; min-width: 0; }
.pfig.pub { border: 2px dashed var(--prov); }
.pfig.fam { border: 1px solid var(--line); }
.entry.offtl:not(.open) { display: none !important; }  /* 2026-11-01: digital-only photographs: on bios and the photo page, not the timeline */
.provtag { position: absolute; left: 6px; top: 6px; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding: 2px 12px; border: 1px dashed var(--provink);
  border-radius: 14px; background: var(--provbg); color: var(--provink); font: bold calc(12.5px * var(--fs))/1.2 Arial, sans-serif; letter-spacing: .02em; cursor: pointer; opacity: .96; }
.provtag:hover, .provtag[aria-expanded="true"] { opacity: 1; }
.provtag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.provcred { position: absolute; left: 6px; right: 6px; top: 56px; z-index: 1; padding: 6px 10px; border-radius: 6px; background: var(--provbg); color: var(--provink);
  font: calc(13px * var(--fs))/1.35 Arial, sans-serif; }
.provcred[hidden] { display: none; }
body.no-prov .pfig.pub { border: 1px solid var(--line); }
body.no-prov .provtag, body.no-prov .provcred { display: none; }
.lightbox.lb-pub #lbImg { outline: 3px dashed var(--prov); outline-offset: 4px; }
body.no-prov .lightbox.lb-pub #lbImg { outline: 0; }
.lb-prov { margin: 0; padding: 6px 12px 0; background: #161412; color: #cfe0f0; font: bold calc(13px * var(--fs)) Arial, sans-serif; text-align: center; }
.lb-prov[hidden], body.no-prov .lb-prov { display: none; }
.provkey { color: var(--ink2); }
.pkswatch { display: inline-flex; align-items: center; vertical-align: middle; height: 26px; min-width: 34px; margin: 0 6px 0 0; padding: 0 8px; border-radius: 4px; background: var(--card); }
.pkswatch.pub { border: 2px dashed var(--prov); }
.pkswatch.pub span { font: bold 11px Arial, sans-serif; color: var(--provink); background: var(--provbg); border-radius: 9px; padding: 1px 7px; }
.pkswatch.fam { border: 1px solid var(--line2); margin-left: 6px; }

/* the maps (features11): drawn once, the view moves; lines keep their width */
.mapbox { position: relative; }
#mapsvg { touch-action: pan-y; cursor: grab; }
#mapsvg.grabbing { cursor: grabbing; }
#mapsvg .coast, #mapsvg .grat, #mapsvg .rt, #mapsvg .pl, #mapsvg .mk { vector-effect: non-scaling-stroke; }
#mapsvg .coasthi { display: none; }
#mapsvg.hi .coasthi { display: inline; }
#mapsvg.hi .coastlo { display: none; }
#mapsvg .rt.tom { opacity: .45; }
#mapsvg .rt.done { stroke: var(--tom); stroke-width: 3.4; opacity: 1; fill: none; stroke-linejoin: round; stroke-linecap: round; }
#mapsvg .pn { font-size: inherit; stroke-width: inherit; }
#mapsvg .gl { font-size: inherit; font-family: Arial, sans-serif; fill: #6f7f8f; }
#mapsvg .pnl, #mapsvg .gll { transition: opacity .15s; }
#mapsvg.moving .gll { opacity: 0; }
#mapsvg .mk.ship { transition: opacity .2s; }
#mapsvg .mk.ship.off { opacity: 0; }
#mapsvg, .rsvg { transition: opacity .15s; }
#mapsvg.xf, .rsvg.xf { opacity: 0; }
.mtouch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 22px; background: rgba(20, 24, 32, .82); color: #fff;
  font: bold calc(15px * var(--fs)) Arial, sans-serif; pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.mtouch.on { opacity: 1; }
.mlegend .lg.done { border-top: 4px solid var(--tom); }
.mlegend .lg.tom { opacity: .5; }
/* p6: the distance is the headline of the map beside the letters */
.rdist { margin: 8px 0 0; font: bold calc(19px * var(--fs))/1.25 Georgia, "Times New Roman", serif; color: var(--ink); }
.rdist .rmi { font-variant-numeric: tabular-nums; }
.rline { font-weight: normal; margin-top: 2px; }
.rsvg.indrop { height: min(30vh, 220px); }
body.simple-motion .side, body.simple-motion .mb-drop { animation: none !important; }

/* the family tree: a fade at an edge when there is more to see (m11) */
.treebox.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), rgba(0, 0, 0, .25)); }
.treebox.more-l { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 46px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 46px); }
.treebox.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 46px, #000 calc(100% - 46px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 46px, #000 calc(100% - 46px), rgba(0, 0, 0, .25)); }

/* What to show: a note under a choice */
.sp-note { margin: -2px 0 8px; font: calc(13px * var(--fs))/1.4 Arial, sans-serif; color: var(--soft); }

/* p1: In memory, the records as small numbers and a list of notes */
.mem sup.fn { line-height: 0; }
.fnb { min-width: 24px; min-height: 24px; padding: 0 4px; border: 0; border-radius: 4px; background: none; color: var(--accent); font: bold calc(12px * var(--fs)) Arial, sans-serif; vertical-align: super; cursor: pointer; }
.fnb:hover { background: var(--hover); }
.fnlist { font: calc(14px * var(--fs))/1.5 Arial, sans-serif; color: var(--ink2); padding-left: 1.6em; }
.fnlist li { margin: 2px 0; scroll-margin-top: calc(var(--hh) + 20px); }
.fnlist li:focus { outline: none; }
.fnlist li.flash { background: var(--flash); border-radius: 3px; }

/* p2: On this day, the nearest days and a day to choose */
.daynear { display: flex; flex-wrap: wrap; gap: 8px; }
.daynear .btn .n { margin-left: 6px; color: var(--soft); font-size: .9em; }
.dayform select { min-height: 44px; font: calc(15px * var(--fs)) Arial, sans-serif; border-radius: 4px; }
.dayform .f2row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* m6: Play the story's setup in the site's own look, light or dark */
.play.setup { background: var(--paper); color: var(--ink); }
.play.setup .pl-setup p { color: var(--ink2); }
.play.setup .pl-setup fieldset { border-color: var(--line2); background: var(--card); }
.play.setup .pl-setup legend { color: var(--soft); }
.play.setup .pl-setup input[type=radio], .play.setup .pl-setup input[type=checkbox] { accent-color: var(--btn); }
.play.setup .pl-setup select { background: var(--card); color: var(--ink); border: 1px solid var(--line2); padding: 0 8px; }
.play.setup .pl-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.play.setup .pl-go .btn { min-width: 120px; }

/* p4: family photographs large enough to see */
.famgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.famph img { height: 220px; }

/* m15: links inside text are easier to hit with a finger */
@media (pointer: coarse) {
  #tl p a:not(.btn):not(.hit):not(.wbtn), #tl li a:not(.btn):not(.hit), .rightsfoot a, .vis-welinv a, .welbox p a, .gapends a, .mention a { padding-block: 6px; }
}
@media print { .provtag, .provcred, .mtouch { display: none !important; } .pfig.pub { border: 1px dashed #555; } }
.play.setup .pl-go button { background: var(--card); color: var(--ink); border: 1px solid var(--line2); border-radius: 22px; padding: 0 18px; min-height: 44px; }
.play.setup .pl-go .pl-primary { background: var(--btn); border-color: var(--btn); color: var(--btnink); }
/* p3 / m1 (features11, from the style sheet only: ask.js belongs to another job): Ask the archive pushes the letters over instead
   of covering them, and on a phone the map bar does not peek out above its sheet */
@media (min-width: 1200px) { body.ask-open { --rw: min(420px, 100vw); } body.ask-open .side { visibility: hidden; } }
@media (min-width: 861px) and (max-width: 1199px) { body.ask-open .tl { margin-right: min(420px, 48vw); } }
@media (max-width: 860px) { body.ask-open .mapbar { visibility: hidden; } }

/* mapmother (2026-10-19): a place known only by inference from the records (Toledo, Tom's probable discharge), quieter than
   the places the letters and the war diaries name: hollow, dashed, its label in italic grey; the same mark in the legend,
   the map beside the letters, the day's caption and the place's panel. Not by colour alone: the words say "probably here". */
#mapsvg .pl.inf { fill: var(--sea); stroke: var(--soft); stroke-width: 1.6; stroke-dasharray: 2.5 2; }
#mapsvg .pn.inf { fill: var(--soft); font-style: italic; }
#mapsvg .mk.tom.inf, .rsvg .mk.tom.inf { fill: var(--sea); stroke: var(--tom); stroke-dasharray: 3 2.2; }
.mlegend .lg.dot.inf { background: var(--sea); border: 1.6px dashed var(--soft); width: 9px; height: 9px; }
.rlegend .lg.dinf { border: 2px dashed var(--soft); background: var(--sea); box-sizing: border-box; }
.infk, .plk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; box-sizing: border-box; }
.infk { border: 2px dashed var(--soft); background: var(--sea); }
.plk { border: 1.5px solid var(--ink); background: #fffaf1; }
.minf, .sd-pk { display: flex; align-items: baseline; gap: 8px; }
.minf .infk, .sd-pk .infk, .sd-pk .plk { position: relative; top: 1px; }
.minf { color: var(--ink2); }
.rinf .linkish, .minf .linkish { min-height: 0; padding-block: 2px; }
@media (pointer: coarse) { .rinf .linkish, .minf .linkish { min-height: 44px; } }
.sd-days { margin: 4px 0 8px; padding-left: 20px; }
.sd-days li { margin: 2px 0; }
@media print { #mapsvg .pl.inf { stroke: #555; } .infk { border-color: #555; } }

/* 2026-11-01: lists, tables and forms in Easy reading (work/layouts.json) */
.script .laycap { color: var(--soft); font: italic calc(15px * var(--fs))/1.45 Arial, sans-serif; margin: 6px 0 8px; }
.script .lay { font-family: Arial, sans-serif; font-size: calc(16px * var(--fs)); line-height: 1.4; margin: 6px 0 16px; }
.script .lay-list { list-style: none; padding: 0; }
.script .lay-verse p { margin: 0 0 12px; }
.script .lay-list li { padding: 1px 0; overflow-wrap: anywhere; }
.script .lay-list li.laylab { color: var(--soft); font-size: calc(13px * var(--fs)); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
.script .lay-list li.laylab:first-child { margin-top: 0; }
.script .lay-list li.laygh { font-weight: bold; margin-top: 12px; }
.script .lay-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.script .lay-table th, .script .lay-table td { text-align: left; vertical-align: top; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-weight: normal; }
.script .lay-table thead th { color: var(--soft); font-size: calc(13px * var(--fs)); letter-spacing: .06em; text-transform: uppercase; border-bottom-width: 2px; }
.script .lay-table tbody th { width: 34%; }
.script .lay-form { margin-left: 0; }
.script .lay-form > div { display: grid; grid-template-columns: minmax(6.5em, 36%) 1fr; column-gap: 14px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.script .lay-form dt { color: var(--soft); }
.script .lay-form dd { margin: 0; overflow-wrap: anywhere; }
@media print {
  .script .lay, #printView .script .lay { font-size: 10.5pt; }
  .script .lay-table thead { display: table-header-group; }
  .script .lay-table tr, .script .lay-form > div, .script .lay-list li { break-inside: avoid; }
  .script .lay-table th, .script .lay-table td, .script .lay-form > div { border-color: #999; }
  .script .laycap, .script .lay-form dt, .script .lay-table thead th { color: #333; }
}

/* 2026-11-01: relation links and the crew's book */
.rel { margin: 6px 0; font-size: .95em; }
.rel .relk { color: var(--soft); }
.rel ul { display: inline; margin: 0; padding: 0; list-style: none; }
.rel li { display: inline; }
.rel div li, .rel li + li::before { content: " · "; color: var(--soft); }
details.rel ul { display: block; padding-left: 18px; list-style: disc; }
details.rel li { display: list-item; }
details.rel li + li::before { content: ""; }
.sd-bio { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 6px 0 12px; padding: 0; }
.sd-bio img { display: block; height: 84px; max-width: 150px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.booktab { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0; }
.booktab-cover img { display: block; height: 180px; width: auto; border: 1px solid var(--line); border-radius: 4px; }
.booktab > div { flex: 1 1 240px; min-width: 0; }
.booktoc { columns: 2; padding-left: 18px; margin: 6px 0; }
.bookwrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1.15fr); gap: 16px; align-items: start; }
.bookwrap.notext { grid-template-columns: minmax(0, 1fr); }
.bookcol { min-width: 0; }
.bkview { position: relative; display: flex; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; perspective: 2400px; background: #2b2a28; border-radius: 6px; padding: 4px; min-height: 240px; }
.bk { position: relative; margin: auto; flex: none; transform-style: preserve-3d; }
.bkpg { position: absolute; top: 0; height: 100%; width: 50%; background-color: #fff; background-repeat: no-repeat; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.bkpg.l { left: 0; } .bkpg.r { left: 50%; }
.bkpg.cv { background-color: transparent; box-shadow: none; }
.bkpg.whole { left: 0; width: 100%; }
.bk.single .bkpg { background-size: 200% 100%; }
.bkflip { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform .55s ease-in-out; z-index: 5; }
.bkflip div { position: absolute; inset: 0; backface-visibility: hidden; background-repeat: no-repeat; background-color: #fff; }
.bkflip .bkb { transform: rotateY(180deg); }
.bkedge { position: absolute; top: 0; bottom: 0; width: 22%; background: none; border: 0; cursor: pointer; z-index: 6; padding: 0; }
#bkL { left: 0; } #bkR { right: 0; }
.bkedge:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.bkview.zoomed .bkedge { display: none; }
.bknav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bknav .btn { padding: 0 12px; }
.bknav .btn:disabled { opacity: .45; cursor: default; }
.bkz { min-width: 44px; }
#bkInd { flex: 1 1 200px; text-align: center; min-width: 0; }
.bkjump { display: inline-flex; align-items: center; gap: 6px; }
.bkjump select { min-height: 44px; max-width: 200px; font: inherit; background: var(--card); color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; }
.btn[aria-pressed="true"] { font-weight: bold; }
.bkprint { display: none; }
.booktext { min-width: 0; max-height: calc(100vh - 150px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; position: sticky; top: 88px; }
.booktext h3 { margin: 12px 0 6px; }
.bkfind { margin: 8px 0; }
.bkfind label { display: block; font-size: .92em; color: var(--ink2); }
.bkfindrow { display: flex; gap: 6px; margin-top: 4px; }
.bkfindrow input { flex: 1; min-width: 0; min-height: 44px; font: inherit; padding: 0 8px; background: var(--card2); color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; }
.bkhits { margin: 6px 0; padding-left: 18px; }
@media (max-width: 900px) {
  .bookwrap { grid-template-columns: minmax(0, 1fr); }
  .booktext { position: static; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .bkflip { transition: none; } }
@media print {
  .bkview, .bknav, .bkfind, .booktext .modes { display: none !important; }
  .bookwrap { display: block; }
  .bkprint { display: block; width: 100%; height: auto; break-inside: avoid; }
  .booktext { max-height: none; overflow: visible; position: static; border: 0; }
}
body.bookpage .panel { max-width: min(1560px, 100%); }

/* ---------- ui_2026-11-02 (the design review): Settings, an open letter, search, the slide show ---------- */
/* Settings: four everyday choices, then "More settings" */
.sp-main { margin-top: 10px; }
.sp-big .rd { min-height: 48px; padding: 0 14px; font-size: calc(15px * var(--fs)); }
.sp-bg { border-bottom: 0; padding-top: 10px; }
.sp-moreset { margin-top: 14px; border-top: 2px solid var(--line); }
.sp-moreset > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; font: bold calc(16px * var(--fs)) Arial, sans-serif; color: var(--accent); list-style: none; }
.sp-moreset > summary::-webkit-details-marker { display: none; }
.sp-moreset > summary::before { content: "\25B8"; display: inline-block; width: 1em; transition: transform .15s; }
.sp-moreset[open] > summary::before { transform: rotate(90deg); }
.sp-moreset > .sp-group:first-of-type { margin-top: 4px; }

/* an open letter: one row of buttons, the More panel, the letter, previous and next */
.ltools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; font: calc(15px * var(--fs)) Arial, sans-serif; }
.ltb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); color: var(--ink); font: calc(15px * var(--fs)) Arial, sans-serif; }
.ltb:hover { background: var(--hover); }
.ltb .ic { width: 18px; height: 18px; flex: none; }
.ltb[aria-pressed="true"], .ltb[aria-expanded="true"] { background: var(--tint2); border-color: var(--ink2); font-weight: bold; }
.ltb.llisten { background: var(--btn); border-color: var(--btn); color: var(--btnink); font-weight: bold; }
.ltb.llisten .llen { font-weight: normal; }
.ltb.lmorebtn { margin-left: auto; }
.ltb .caret::after { content: "\25BE"; font-size: .85em; }
.ltb.lmorebtn[aria-expanded="true"] .caret::after { content: "\25B4"; }
.lmenu { margin: 0 0 14px; padding: 10px 12px 12px; background: var(--tint); border: 1px solid var(--line); border-radius: 8px; max-width: 760px; }
.lmenu .csum { background: none; border-left: 3px solid var(--line2); padding: 2px 10px; margin: 0 0 10px; }
.lmenu .modes { flex-wrap: wrap; margin: 0 0 10px; }
.lm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.lmb { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 22px; background: var(--card); color: var(--ink); font: calc(14px * var(--fs)) Arial, sans-serif; }
.lmb:hover { background: var(--hover); }
.lm-acts .printbtn { margin-left: 0; }
.listen.rec[hidden] { display: none; }
.listen.rec { flex-wrap: wrap; margin: 0 0 12px; }
.listen.rec audio { flex: 1 1 260px; }
.listen.rec .lnote { flex: 1 1 100%; margin: 2px 0 0; }
.lnav { display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 4px; max-width: 760px; }
.lnavb { display: flex; flex-direction: column; justify-content: center; flex: 0 1 48%; min-height: 56px; padding: 6px 16px; border: 1px solid var(--line2); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; font: calc(15px * var(--fs)) Arial, sans-serif; }
.lnavb:hover { background: var(--hover); }
.lnavb.lnext { text-align: right; }
.lnavb.none { visibility: hidden; border: 0; }
.lnavb .lnk { font-weight: bold; color: var(--accent); }
.lnavb .lnd { font-size: calc(13px * var(--fs)); color: var(--soft); }
.joinnote { margin-top: 14px; }
.envh { margin: 4px 0 8px; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.hwkd { margin-top: 16px; max-width: 760px; border-top: 1px solid var(--line); }
.hwkd > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font: bold calc(15px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.hwkd .dfacts { margin-top: 4px; }
.hwkd .hwk, .hwkd .cite { border-top: 0; margin-top: 8px; }
@media (max-width: 640px) {
  .ltools { gap: 6px; }
  .ltb { padding: 0 12px; }
  .ltb.lmorebtn { margin-left: 0; }
  .lnavb { padding: 6px 10px; }
}
@media print { .ltools, .lmenu, .lnav, .listen.rec { display: none !important; } .hwkd > summary { display: none; } }

/* search: the best match first */
.besth { margin: 16px 0 6px; font: bold calc(13px * var(--fs)) Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.bestlist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.best { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 12px; border: 2px solid var(--line2); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; }
.best:hover { background: var(--hover); }
.best .bk { font: bold calc(12px * var(--fs)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.best b { font-weight: normal; font-size: calc(19px * var(--fs)); color: var(--accent); }
.best span:last-child { font-size: calc(15px * var(--fs)); color: var(--ink2); }
.sorder { font: calc(14px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.xlink { margin-top: 0; }

/* the slide show's first screen */
.pl-go1 { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.pl-opts > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: bold 16px Arial, sans-serif; }
.pl-setup label.pl-choice { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.pl-setup label.pl-choice > span { flex: 1 1 auto; min-width: 0; }
.pl-setup label.pl-choice input { flex: none; }

/* the crew book: one page on a phone, the controls above it */
.bookcol .bknav { margin: 0 0 10px; }
.bkrights { margin-top: 12px; }

/* reduced motion: no transitions left on the map or in the panels */
@media (prefers-reduced-motion: reduce) {
  #mapsvg *, .rsvg *, .sp-moreset > summary::before, .side, .lmenu { transition: none !important; animation: none !important; }
}
.welcome a.wbtn.wfirst { background: var(--btn); border-color: var(--btn); color: var(--btnink); font-weight: bold; }
@media (max-width: 420px) { .ltb[data-tab="orig"] .ic { display: none; } .ltb { padding: 0 11px; } .ltools { gap: 5px; } }
.tabonly { display: none; }
@media (max-width: 640px) { .tabonly { display: inline; } }
/* ui_2026-11-02: on a tablet the doors come before Settings (the content first, the settings last) */
@media (min-width: 641px) and (max-width: 1060px) {
  .brand { flex: 0 1 auto; }
  .doors { order: 2; }
  .find { order: 3; flex: 1 1 120px; }
  .showbtn { order: 5; }
}
body.treepage .panel { max-width: min(1560px, 100%); }
.pabout { margin: 4px 0 10px; }
.pabout > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: bold calc(15px * var(--fs)) Arial, sans-serif; color: var(--accent); }
.plead p { margin: 6px 0; }
body.treepage .tl { max-width: min(1600px, 100%); }
.side .side-top .fold, .side > .unfold { display: none !important; }  /* ui_2026-11-02: Close puts the panel away */
/* 2026-11-03: a week with no letter is a faint track, so in dark mode a gap does not read as the fullest week */
.strip .bars { background: color-mix(in srgb, var(--line) 55%, transparent); }

/* 2026-11-03: a photograph or keepsake shows itself on the timeline; an open letter's pages show at a readable size */
.entry.pic .thumbs img { height: 220px; max-width: 100%; object-fit: contain; }
@media (max-width: 600px) { .entry.pic .thumbs img { height: 180px; } }
.entry.open:not(.pic) .thumbs img { height: 130px; }

/* 2026-11-03: the color anniversary photo at the top of the timeline; the software note is a faint "i" */
.welcome .wcover { margin: 0 0 12px; }
.welcome .wcover img { display: block; width: auto; max-width: 100%; max-height: min(340px, 45vh); height: auto; border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.welcome .wcover figcaption { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font: calc(14px * var(--fs))/1.45 Arial, sans-serif; color: var(--soft); }
.welcome .wcover figcaption > a { color: var(--soft); text-decoration: none; flex: 1; }
.welcome .wcover figcaption > a:hover { text-decoration: underline; }
.welcome .wcnote { flex: 0 1 auto; text-align: right; }
.welcome .wcnote summary { list-style: none; cursor: pointer; display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center;
  border: 1px solid var(--line); border-radius: 50%; font: italic 11px Georgia, serif; color: var(--soft); opacity: .55; }
.welcome .wcnote summary::-webkit-details-marker { display: none; }
.welcome .wcnote summary:hover, .welcome .wcnote summary:focus-visible, .welcome .wcnote[open] summary { opacity: 1; }
.welcome .wcnote span { display: block; max-width: 340px; margin-top: 4px; font-size: calc(13px * var(--fs)); text-align: left; }
@media print { .welcome .wcnote { display: none; } }

/* 2026-11-03: background notes under the summary */
.ctxnote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 6px 6px 0; font: calc(15px * var(--fs))/1.5 Arial, sans-serif; }
.ctxnote p { margin: 4px 0; }
.ctxnote .clabel { font-size: calc(12px * var(--fs)); color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }

/* 2026-11-03: Youngstown in their time */
.ypage { max-width: 760px; }
.ypage section { margin: 18px 0; }
.ypage p { line-height: 1.6; }
.ypage .yid { font: calc(12px * var(--fs)) Arial, sans-serif; color: var(--accent); white-space: nowrap; }
.ypage .ysrc { font: calc(11px * var(--fs)) Arial, sans-serif; color: var(--soft); }
.ypage .ypic { margin: 10px 0 14px; }
.ypage .ypic img { display: block; max-width: 100%; max-height: 520px; height: auto; border-radius: 4px; }
.ypage .ypic.pubrec img { border: 2px dashed #5b7590; padding: 3px; }
.ypage .ypic figcaption { font: calc(13px * var(--fs))/1.45 Arial, sans-serif; color: var(--soft); margin-top: 4px; }
.ypage .ysources ol { font: calc(13px * var(--fs))/1.5 Arial, sans-serif; padding-left: 22px; }