/* ==========================================================================
   IAmWilcox.com — Bar W Bar Ranch Horses & Family History
   ========================================================================== */

:root {
  --cream: #faf5ec;
  --paper: #fffdf8;
  --ink: #2c2317;
  --ink-soft: #5a4c3a;
  --saddle: #7a4a21;
  --saddle-dark: #5c3717;
  --rust: #9c4a1e;
  --sage: #4a5d43;
  --gold: #c8a15a;
  --line: #e2d7c3;
  --shadow: 0 2px 12px rgba(60, 42, 20, 0.12);
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Lora", "Georgia", serif;
  --font-ui: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.2rem; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--rust); }
a:hover { color: var(--saddle-dark); }

/* ---------- Header / Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(44, 35, 23, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--gold);
}

.site-nav .nav-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
}

.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.7rem 0.4rem 0.7rem 0;
  letter-spacing: 0.02em;
}
.nav-brand:hover { color: var(--gold); }
.nav-brand .brand-mark { color: var(--gold); margin-right: 0.4rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--cream);
  font: 600 0.9rem var(--font-ui);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.nav-links {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0 auto;         /* links sit centred between the brand and the search */
  padding: 0;
  gap: 0.5rem;
  /* NO overflow here, ever: the dropdown menus are absolutely positioned
     inside this list, and an overflow container clips them into a tiny
     scroll box. The nav wraps (flex-wrap on .nav-inner) instead. */
}

/* one look for every item on the bar — links and the dropdown button alike */
.nav-links a {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #e8ddc8;
  text-decoration: none;
  padding: 1.05rem 0.75rem 0.85rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-links a:hover { color: var(--gold); border-bottom-color: rgba(197, 160, 89, 0.45); }
.nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(44, 35, 23, 0.98);
    border-bottom: 2px solid var(--gold);
    padding: 0.4rem 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.65rem 1.2rem; border-bottom: none; border-left: 3px solid transparent; }
  .nav-links a.active { border-left-color: var(--gold); }
}

/* ---------- Hero ---------- */

.hero {
  background:
    linear-gradient(rgba(35, 26, 15, 0.55), rgba(35, 26, 15, 0.72)),
    url("../img/pasture-horses.jpg") center 40% / cover no-repeat,
    var(--saddle-dark);
  color: var(--cream);
  text-align: center;
  padding: clamp(4rem, 12vw, 8.5rem) 1.25rem clamp(4rem, 11vw, 8rem);
}

.hero .brand-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 2px;
  padding: 0.45rem 1.1rem;
  margin-bottom: 1.6rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 3.9rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 1rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.hero .hero-sub {
  font-size: clamp(1.02rem, 2.4vw, 1.3rem);
  font-style: italic;
  color: #f0e6d2;
  max-width: 42rem;
  margin: 0 auto 0.5rem;
}

.hero .hero-byline {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1.4rem;
}

/* ---------- Archive search ---------- */

.nav-search {
  position: relative;
  flex: 0 1 12.5rem;      /* search closes the right side; links centre themselves */
  min-width: 8rem;
}
/* mid widths: tighten the bar so every item stays on one line */
@media (min-width: 861px) and (max-width: 1560px) {
  .nav-links a, .drop-btn { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.85rem; }
  .nav-links { gap: 0.25rem; }
  .nav-search { flex-basis: 11rem; }
}

/* round toolbar buttons: theme toggle + the one cycling text-size button */
.nav-tool {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  cursor: pointer;
  min-width: 2.4rem;
  min-height: 2.4rem;
  font-size: 1.05rem;
  line-height: 1;
}
.nav-tool:hover { background: var(--gold); color: #2c2317; }
.nav-tool:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.ts-cycle.ts-large { font-size: 1.25rem; }
.ts-cycle.ts-largest { font-size: 1.45rem; }

.search-input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}
.search-input:focus { outline: 3px solid var(--rust); outline-offset: 1px; }

.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  width: min(26rem, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper);
  border: 2px solid var(--saddle);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(50, 34, 16, 0.35);
  z-index: 60;
}
.search-results.open { display: block; }

.sr-item {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover, .sr-item:focus-visible { background: #f4ecdd; }

.sr-kind {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sage);
  border-radius: 4px;
  padding: 0.12rem 0.45rem;
  margin-right: 0.5rem;
  vertical-align: 0.1rem;
}

.sr-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--saddle-dark); }
.sr-years { display: block; font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.15rem; }
.sr-none { padding: 0.9rem 1rem; font-family: var(--font-ui); color: var(--ink-soft); }

@media (max-width: 860px) {
  /* second row: search grows, the two round buttons sit beside it */
  .nav-search { flex: 1 1 auto; margin-left: 0; min-width: 0; order: 5; }
  .nav-tool { flex: 0 0 auto; order: 6; }
  .nav-toggle { margin-left: auto; }
  .site-nav .nav-inner { padding-bottom: 0.5rem; }
}

/* ---------- Home: story grid ---------- */

.story-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2rem;
}

.story-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s;
}
.story-card:hover { border-color: var(--saddle); transform: translateY(-3px); color: var(--ink); }
.story-card:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }

.story-card img { width: 100%; height: 13rem; object-fit: cover; }
.story-card .sc-body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
.story-card .sc-years {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rust);
}
.story-card .sc-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--saddle-dark); line-height: 1.2; }
.story-card .sc-blurb { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.5; }

.family-head {
  font-family: var(--font-display);
  color: var(--sage);
  font-size: 1.35rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.3rem;
  margin: 2.4rem 0 0.2rem;
}
.story-grid { margin-top: 1.2rem; }

/* ---------- Index of Names ---------- */

.people-group h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--saddle-dark);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.3rem;
  margin: 2.4rem 0 1rem;
}

.person {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.p-photo {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--paper);
  cursor: zoom-in;
}

.p-noface {
  width: 6.5rem;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px dashed var(--line);
  background: #f4ecdd;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: #c4b696;
  user-select: none;
}

.p-body { min-width: 0; }

@media (max-width: 480px) {
  .person { grid-template-columns: 4.6rem 1fr; gap: 0.8rem; }
  .p-photo, .p-noface { width: 4.6rem; height: 4.6rem; }
}
.person:last-child { border-bottom: none; }
.person .p-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: var(--ink); }
.person .p-dates { font-family: var(--font-ui); color: var(--rust); font-weight: 700; margin-left: 0.4rem; font-size: 0.95rem; }
.person .p-rel { margin: 0.25rem 0 0.35rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.person .p-refs { font-family: var(--font-ui); font-size: 0.92rem; }
.person .p-refs a { margin-right: 0.9rem; }
.person:target { background: #f7edd2; outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

/* ---------- Read it to me (TTS) ---------- */

.tts-listen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--saddle-dark);
  background: #f4ecdd;
  border: 2px solid var(--saddle);
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  margin: 0 0 1.4rem;
  cursor: pointer;
}
.tts-listen:hover { background: var(--saddle); color: var(--cream); }
.tts-listen:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }

.tts-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  background: var(--saddle-dark);
  color: var(--cream);
  border-top: 3px solid var(--gold);
  padding: 0.8rem 1rem 0.9rem;
  box-shadow: 0 -4px 18px rgba(40, 26, 12, 0.35);
}
.tts-bar.open { display: flex; }

.tts-now {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  min-width: 12rem;
  text-align: center;
}
.tts-now .tts-label { color: var(--gold); font-weight: 700; }
.tts-now .tts-title { font-weight: 600; }

.tts-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

.tts-btn {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  min-height: 3rem;
  cursor: pointer;
}
.tts-btn:hover { background: var(--gold); color: var(--ink); }
.tts-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tts-btn.tts-main { background: var(--gold); color: var(--ink); min-width: 8.5rem; }
.tts-btn.tts-main:hover { background: #d9b671; }
.tts-btn.tts-close { border-color: rgba(255, 255, 255, 0.5); }

.tts-options {
  display: flex;
  gap: 1rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  align-items: center;
}
.tts-options label { display: flex; align-items: center; gap: 0.4rem; color: #e8ddc8; }
.tts-options select {
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: var(--cream);
  color: var(--ink);
  max-width: 11rem;
}

.tts-reading {
  background: #f7edd2;
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (max-width: 700px) {
  .tts-options { display: none; } /* phone: keep the bar to the big controls */
  .tts-now { min-width: 0; width: 100%; }
}

/* ---------- Logo ---------- */

.nav-logo {
  width: 2.3rem;
  height: 2.3rem;
  margin-right: 0.55rem;
  vertical-align: middle;
}
.nav-brand { display: inline-flex; align-items: center; }

.hero-logo {
  width: clamp(7.5rem, 18vw, 11rem);
  height: auto;
  margin: 0 auto 1.4rem;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
}

/* ---------- Family Timeline ---------- */

.timeline-section {
  background: #f1e9d8;
  border-bottom: 1px solid var(--line);
  padding: 2.2rem 0 2.6rem;
}

.timeline-section .tl-head {
  text-align: center;
  padding: 0 1.25rem;
  margin-bottom: 1.4rem;
}

.timeline-section .tl-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--saddle-dark);
  margin: 0 0 0.35rem;
}

.timeline-section .tl-head p {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0;
}

.tl-decades {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  margin-bottom: 1.5rem;
}

.tl-pill {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--saddle-dark);
  background: var(--paper);
  border: 2px solid var(--saddle);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tl-pill:hover { background: var(--saddle); color: var(--cream); }
.tl-pill.active { background: var(--saddle-dark); border-color: var(--saddle-dark); color: var(--gold); }
.tl-pill:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }

.tl-strip-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.tl-arrow {
  flex: 0 0 auto;
  width: 3.2rem;
  border: none;
  background: linear-gradient(to right, #f1e9d8 55%, rgba(241, 233, 216, 0));
  color: var(--saddle-dark);
  font-size: 2rem;
  cursor: pointer;
  z-index: 2;
}
.tl-arrow-right { background: linear-gradient(to left, #f1e9d8 55%, rgba(241, 233, 216, 0)); }
.tl-arrow:hover { color: var(--rust); }
.tl-arrow:disabled { opacity: 0.25; cursor: default; }
.tl-arrow:focus-visible { outline: 3px solid var(--rust); outline-offset: -3px; }
.tl-arrow-left { margin-right: -2.4rem; }
.tl-arrow-right { margin-left: -2.4rem; }

.tl-strip {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--saddle) transparent;
  flex: 1 1 auto;
  padding-bottom: 0.6rem;
}

.tl-track {
  position: relative;
  display: flex;
  gap: 1.1rem;
  width: max-content;
  padding: 0 3rem;
}

/* the rail the year-dots sit on */
.tl-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.02rem;
  height: 3px;
  background: var(--gold);
}

.tl-card {
  scroll-snap-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(15rem, 22vw, 17.5rem);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 10px;
  margin-top: 2.1rem;
  padding: 0.7rem 0.7rem 0.9rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s;
}
.tl-card:hover { border-color: var(--saddle); transform: translateY(-3px); color: var(--ink); }
.tl-card:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }

.tl-dot {
  position: absolute;
  top: -1.72rem;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateX(-50%);
  background: var(--paper);
  border: 3px solid var(--saddle);
  border-radius: 50%;
}
.tl-card.current .tl-dot { background: var(--rust); border-color: var(--rust); }

.tl-years {
  position: absolute;
  top: -3.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--saddle-dark);
  background: #f1e9d8;
  padding: 0 0.5rem;
  white-space: nowrap;
}

.tl-thumb {
  width: 100%;
  height: 9.5rem;
  object-fit: cover;
  border-radius: 6px;
}

.tl-title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--saddle-dark);
  margin: 0.65rem 0.2rem 0.15rem;
}

.tl-era {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0.2rem;
}

.tl-here {
  display: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rust);
  border-radius: 4px;
  padding: 0.25rem 0.55rem;
  margin: 0.55rem 0.2rem 0;
  align-self: flex-start;
}

.tl-card.current {
  border-color: var(--rust);
  border-width: 3px;
  transform: scale(1.045);
  box-shadow: 0 6px 22px rgba(156, 74, 30, 0.35);
  background: #fffaf0;
}
.tl-card.current:hover { transform: scale(1.045) translateY(-2px); }
.tl-card.current .tl-here { display: inline-block; }
.tl-card.current .tl-years { color: var(--rust); font-size: 1.1rem; }

.tl-strip { cursor: grab; }
.tl-strip.dragging { cursor: grabbing; scroll-behavior: auto; }
.tl-strip.dragging .tl-card { pointer-events: none; }

.tl-card.flash { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200, 161, 90, 0.45); }

/* spacing needed for the year badges above the rail */
.tl-strip { padding-top: 3.6rem; }

@media (max-width: 600px) {
  .tl-arrow { width: 2.4rem; font-size: 1.6rem; }
  .tl-card { width: 15rem; }
}

/* ---------- Previous / Next story bar ---------- */

.story-nav {
  display: flex;
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.4rem 1.25rem 3rem;
}

.sn-btn {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.sn-btn:hover { border-color: var(--saddle); color: var(--ink); }
.sn-btn:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.sn-next { text-align: right; align-items: flex-end; }

.sn-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
}
.sn-prev .sn-label::before { content: "\2190\00a0"; }
.sn-next .sn-label::after { content: "\00a0\2192"; }

.sn-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--saddle-dark);
  line-height: 1.25;
}

.sn-years { font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink-soft); }

@media (max-width: 560px) {
  .story-nav { flex-direction: column; }
}

/* ---------- Layout ---------- */

main { display: block; }

.section {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
}

.section:nth-of-type(even) { background: var(--paper); }

.section-inner { max-width: 46rem; margin: 0 auto; }
.section-inner.wide { max-width: 62rem; }

.section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 700;
  color: var(--saddle-dark);
  line-height: 1.2;
  margin: 0 0 0.4rem;
}

.section h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--sage);
  margin: 2.2rem 0 0.6rem;
}

.kicker {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 0.5rem;
}

.rule {
  width: 4.5rem;
  height: 3px;
  background: var(--gold);
  border: none;
  margin: 0 0 1.8rem;
}

p { margin: 0 0 1.25rem; }

.note {
  background: #f4ecdd;
  border-left: 4px solid var(--gold);
  padding: 0.9rem 1.2rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.98rem;
  margin: 0 0 1.4rem;
}

blockquote {
  margin: 1.8rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 4px solid var(--sage);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ink-soft);
}

/* ---------- Figures ---------- */

figure {
  margin: 1.8rem 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem;
  box-shadow: var(--shadow);
}

figure img {
  width: 100%;
  border-radius: 3px;
  cursor: zoom-in;
}

figcaption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 0.6rem 0.3rem 0.15rem;
}

@media (min-width: 700px) {
  figure.f-left, figure.f-right { max-width: 46%; margin-top: 0.4rem; }
  figure.f-left  { float: left;  margin-right: 1.6rem; }
  figure.f-right { float: right; margin-left: 1.6rem; }
}

.clear { clear: both; }

.figure-row {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
  margin: 1.8rem 0;
}
.figure-row figure { margin: 0; }

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 1.8rem;
}
.gallery figure { margin: 0; }

/* ---------- Records / tables ---------- */

details.records {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin: 1.4rem 0;
  overflow: hidden;
}

details.records summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--saddle-dark);
  padding: 1rem 1.25rem;
  list-style: none;
  position: relative;
}
details.records summary::-webkit-details-marker { display: none; }
details.records summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  font-size: 1.4rem;
  color: var(--rust);
  line-height: 1;
}
details.records[open] summary::after { content: "\2212"; }
details.records summary:hover { background: #f6efe1; }

details.records .records-body { padding: 0 1.25rem 1.25rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.4;
  background: #fff;
}

th, td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

thead th {
  background: var(--saddle-dark);
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}

tbody tr:nth-child(even) { background: #faf6ec; }

ol.horse-list { padding-left: 1.4rem; }
ol.horse-list li { margin-bottom: 0.45rem; }

/* ---------- Memorial band ---------- */

.memorial {
  background: var(--saddle-dark);
  color: var(--cream);
  text-align: center;
  padding: 2.8rem 1.25rem;
}
.memorial .names {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: 0.04em;
}
.memorial .dates { color: var(--gold); font-family: var(--font-ui); letter-spacing: 0.12em; margin-top: 0.4rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #cbbfa8;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: center;
  padding: 2.2rem 1.25rem;
}
.site-footer a { color: var(--gold); }
.site-footer .pdf-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.6rem 1.3rem;
  margin-bottom: 1.2rem;
}
.site-footer .pdf-btn:hover { background: #d9b671; color: var(--ink); }
.site-footer .site-credit {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(200, 161, 90, 0.3);
  font-size: 0.84rem;
  color: #a3987f;
}

/* ---------- Image viewer ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(20, 14, 6, 0.95);
}
.lightbox.open { display: block; }

.lb-stage {
  position: absolute;
  inset: 0 0 6.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.lb-stage img {
  max-width: 94%;
  max-height: 94%;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
  border-radius: 3px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  cursor: zoom-in;
  user-select: none;
}
.lb-stage.zoomed img { cursor: grab; transition: none; }
.lb-stage.zoomed img:active { cursor: grabbing; }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 5.5rem;
  background: rgba(122, 74, 33, 0.85);
  border: 2px solid var(--gold);
  border-radius: 10px;
  color: var(--cream);
  font-size: 2rem;
  cursor: pointer;
  z-index: 2;
}
.lb-prev { left: 0.8rem; }
.lb-next { right: 0.8rem; }
.lb-nav:hover { background: var(--gold); color: var(--ink); }

.lb-toolbar {
  position: absolute;
  left: 50%;
  bottom: 3.6rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(44, 35, 23, 0.95);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  z-index: 3;
}
.lb-toolbar button {
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 2.8rem;
  min-height: 2.8rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--cream);
  cursor: pointer;
  padding: 0.2rem 0.8rem;
}
.lb-toolbar button:hover { background: var(--gold); color: var(--ink); }
.lb-zoom {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 3.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.lb-caption {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  width: min(60rem, 92vw);
  color: #e8ddc8;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
}
.lb-count {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  color: #e8ddc8;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  background: rgba(44, 35, 23, 0.9);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
}

@media (max-width: 700px) {
  .lb-nav { width: 2.8rem; height: 4.2rem; font-size: 1.5rem; }
  .lb-stage { inset: 0 0 7.5rem 0; }
}

/* ---------- Back to top ---------- */

.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 80;
  display: none;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
  background: var(--saddle-dark);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(40, 26, 12, 0.4);
}
.back-to-top.show { display: inline-flex; }
.back-to-top:hover { background: var(--gold); color: var(--ink); }
.back-to-top:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }

/* ---------- Dropdown menus ---------- */

.nav-drop { position: relative; }
.drop-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #e8ddc8;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 1.05rem 0.75rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.drop-btn:hover, .nav-drop.open .drop-btn { color: var(--gold); border-bottom-color: rgba(197, 160, 89, 0.45); }
.drop-btn::after { content: " \25BE"; font-size: 0.8em; }

.drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 17rem;
  max-height: 75vh;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: var(--paper);
  border: 2px solid var(--saddle);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 26px rgba(50, 34, 16, 0.35);
  z-index: 70;
}
.nav-drop.open .drop-menu { display: block; }
/* desktop: open on hover too — the standard menu behavior; click still works */
@media (hover: hover) and (min-width: 861px) {
  .nav-drop:hover .drop-menu { display: block; }
  .nav-drop:hover .drop-btn { color: var(--gold); }
}
.drop-menu a {
  display: block;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--saddle-dark);
  text-decoration: none;
  border-bottom: none !important;
}
.drop-menu a span {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.drop-menu a:hover { background: #f4ecdd; color: var(--rust); }

/* family-grouped stories menu */
.drop-menu-families { min-width: 21rem; max-height: 75vh; overflow-y: auto; }
.fam-group { border-bottom: 1px solid var(--line); }
.fam-group:last-child { border-bottom: none; }
.fam-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--saddle-dark);
  background: none;
  border: none;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
}
.fam-btn::after { content: "\25BE"; font-size: 0.8em; color: var(--rust); }
.fam-group.open .fam-btn::after { content: "\25B4"; }
.fam-btn:hover { background: #f4ecdd; }
.fam-count {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cream);
  background: var(--sage);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-left: auto;
  margin-right: 0.5rem;
}
.fam-list { display: none; list-style: none; margin: 0; padding: 0 0 0.4rem; }
.fam-group.open .fam-list { display: block; }
.fam-list a { padding-left: 2rem !important; }

/* story rows: click the name to open that story's chapter list */
.story-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.7rem 1.1rem 0.7rem 2rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--saddle-dark);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.story-btn::after {
  content: "\25BE";
  position: absolute;
  right: 1.1rem;
  top: 0.8rem;
  font-size: 0.8em;
  color: var(--rust);
}
.story-item.open .story-btn::after { content: "\25B4"; }
.story-btn span {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.story-btn:hover { background: #f4ecdd; color: var(--rust); }
.story-btn.active { color: var(--rust); }

/* every story's chapters, nested inside its entry in the one menu */
.chap-list { display: none; list-style: none; margin: 0 0 0.3rem; padding: 0; }
.story-item.open .chap-list { display: block; }
.chap-list .chap-start { font-weight: 700 !important; color: var(--saddle-dark) !important; }
.chap-list .chap-link {
  display: block;
  padding: 0.42rem 1.1rem 0.42rem 3.1rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  border-left: 3px solid var(--gold);
  margin-left: 1.6rem;
}
.chap-list .chap-link:hover { color: var(--rust) !important; background: #f4ecdd; }
@media (max-width: 860px) {
  .story-btn { color: #e8ddc8; }
  .story-btn span { color: #cbbfa8; }
  .story-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--gold); }
  .story-btn.active { color: var(--gold); }
  .chap-list .chap-link { color: #cbbfa8 !important; }
  .chap-list .chap-start { color: #e8ddc8 !important; }
  .chap-list .chap-link:hover { background: rgba(255, 255, 255, 0.08); color: var(--gold) !important; }
}

@media (max-width: 860px) {
  .fam-btn { color: var(--gold); }
  .fam-btn:hover { background: rgba(255, 255, 255, 0.08); }
  .drop-menu-families { max-height: none; overflow: visible; }
}

@media (max-width: 860px) {
  .drop-menu {
    position: static;
    max-height: none;
    overflow: visible;
    border: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
  }
  .drop-menu a { color: #e8ddc8; padding-left: 2rem; }
  .drop-menu a span { color: #b8ac93; }
  .drop-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--gold); }
  .drop-btn { font-size: 0.95rem; padding: 0.65rem 1.2rem; }
}

/* ---------- Text size control ---------- */

.text-size {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.7rem;
}
.text-size button {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  cursor: pointer;
  min-width: 2.2rem;
  min-height: 2.2rem;
}
.text-size .ts-minus { font-size: 0.85rem; }
.text-size .ts-plus { font-size: 1.15rem; }
.text-size button:hover { background: var(--gold); color: var(--ink); }
.text-size .ts-state {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: #b8ac93;
  min-width: 3.4rem;
  text-align: center;
}
@media (max-width: 600px) { .text-size .ts-state { display: none; } }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- People links inside stories ---------- */

a.p-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dotted var(--rust);
}
a.p-link:hover {
  color: var(--rust);
  border-bottom-style: solid;
  background: #f7edd2;
}

/* ---------- Print ---------- */

@media print {
  .site-nav, .lightbox, .nav-toggle { display: none !important; }
  .hero { background: none; color: var(--ink); padding: 1rem; }
  .hero .brand-badge, .hero .hero-byline { color: var(--saddle); border-color: var(--saddle); }
  body { background: #fff; }
  figure { box-shadow: none; break-inside: avoid; }
  details.records { display: block; }
  details.records:not([open]) .records-body { display: block; }
}

/* ==========================================================================
   Family Tree — the interactive tree page and the story-page branch widget
   ========================================================================== */

.ft-page main { max-width: none; }

.ft-hero {
  background:
    linear-gradient(rgba(35, 26, 15, 0.62), rgba(35, 26, 15, 0.78)),
    url("../img/family-1949.jpg") center 30% / cover no-repeat,
    var(--saddle-dark);
  color: var(--cream);
  text-align: center;
  padding: 2.6rem 1.25rem 2.2rem;
}
.ft-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  font-weight: 800;
  margin: 0 0 0.3rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.ft-hero p { margin: 0 auto; max-width: 46rem; color: #f0e6d2; font-size: 1.02rem; }
.ft-hero .ft-stats {
  font-family: var(--font-ui);
  color: var(--gold);
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  margin-top: 0.6rem;
}

/* ---------- Toolbar ---------- */

.ft-toolbar {
  position: sticky;
  top: 3.35rem;
  z-index: 40;
  background: var(--paper);
  border-bottom: 2px solid var(--gold);
  box-shadow: var(--shadow);
  padding: 0.6rem 1rem;
}
.ft-toolbar .ftb-inner {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
}
.ft-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ft-toolbar select, .ft-toolbar input[type="search"] {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  min-height: 2.6rem;
}
.ft-toolbar select:focus, .ft-toolbar input:focus { outline: 3px solid var(--rust); outline-offset: 1px; }
.ft-search-wrap { position: relative; flex: 1 1 14rem; max-width: 20rem; }
.ft-search-wrap input { width: 100%; border-color: var(--gold); border-radius: 999px; padding-left: 1rem; }
.ft-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  width: min(24rem, 92vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--paper);
  border: 2px solid var(--saddle);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(50, 34, 16, 0.35);
  z-index: 60;
}
.ft-suggest.open { display: block; }
.ft-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0.9rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}
.ft-suggest button:hover, .ft-suggest button:focus-visible { background: #f4ecdd; }
.ft-suggest .fs-years { color: var(--rust); font-weight: 700; font-size: 0.88rem; margin-left: 0.4rem; }

.ft-btn {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--saddle-dark);
  background: #f4ecdd;
  border: 2px solid var(--saddle);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  min-height: 2.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.ft-btn:hover { background: var(--saddle); color: var(--cream); }
.ft-btn:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.ft-btn[aria-pressed="true"], .ft-btn.active { background: var(--saddle-dark); border-color: var(--saddle-dark); color: var(--gold); }
.ft-btn:disabled { opacity: 0.4; cursor: default; }

.ft-view-toggle { display: inline-flex; border-radius: 8px; overflow: hidden; border: 2px solid var(--saddle); }
.ft-view-toggle .ft-btn { border: none; border-radius: 0; }
.ft-view-toggle .ft-btn + .ft-btn { border-left: 2px solid var(--saddle); }

.ft-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  min-height: 2.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.ft-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--rust); cursor: pointer; }

/* ---------- Stage ---------- */

.ft-shell { position: relative; background: #efe6d2; border-bottom: 1px solid var(--line); }
.ft-viewport {
  position: relative;
  /* capped at 70vh so the tree pane never outgrows the window — a taller pane
     made the page scroll oddly and hid the controls on the right */
  height: max(24rem, min(calc(100vh - 14.5rem), 70vh));
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;          /* dragging the tree must never select text */
  -webkit-user-select: none;
}
.ft-viewport.dragging { cursor: grabbing; }
.ft-viewport:focus-visible { outline: 3px solid var(--rust); outline-offset: -3px; }

.ft-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ft-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ft-edges path { fill: none; stroke: #a98d63; stroke-width: 2.5; }
.ft-edges path.mar { stroke: var(--rust); stroke-width: 3; }
.ft-edges path.dim { stroke-opacity: 0.25; }

.ft-node {
  position: absolute;
  width: 212px;               /* px on purpose: the layout math is in px, so the
                                 text-size control can never make cards overlap */
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 7px 9px;
  font-family: var(--font-ui);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ft-node .ftn-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-node { z-index: 1; }
.ft-node:hover, .ft-node:focus-within { z-index: 6; }
.ft-node.focus { z-index: 3; }
.ft-node:hover { border-color: var(--saddle); box-shadow: 0 4px 16px rgba(60, 42, 20, 0.25); }
.ft-node:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.ft-node.focus { border-color: var(--rust); border-width: 3px; background: #fffaf0; box-shadow: 0 6px 22px rgba(156, 74, 30, 0.35); }
.ft-node.sel { outline: 3px solid var(--gold); outline-offset: 2px; }
.ft-node .ftn-face {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  background: #f4ecdd;
}
.ft-node .ftn-noface {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px dashed var(--line);
  background: #f4ecdd;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: #c4b696;
}
.ft-node .ftn-body { min-width: 0; }
.ft-node .ftn-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--saddle-dark);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ft-node .ftn-years { display: block; font-size: 0.85rem; font-weight: 700; color: var(--rust); letter-spacing: 0.03em; }
.ft-node .ftn-mar { display: block; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.03em; }
.ft-node .ftn-flag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sage);
}
.ft-node .ftn-badges { position: absolute; right: -0.55rem; top: 0.3rem; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; }
.ft-node .ftn-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--sage);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}
.ft-node .ftn-badge.doc { background: var(--saddle); }

/* the pop-out Focus / Back button on every card */
.ftn-side {
  position: absolute;
  right: -10px;
  bottom: -12px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cream);
  background: var(--saddle);
  border: 2px solid var(--paper);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0.9;
}
.ftn-side:hover { background: var(--rust); opacity: 1; }
.ftn-side:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.ftn-side.ftn-back { background: var(--rust); font-size: 0.8rem; padding: 0.34rem 0.75rem; }
.ftn-side.ftn-back:hover { background: var(--saddle-dark); color: var(--paper); }
[data-theme="dark"] .ftn-side { color: #14100c; }

/* right-click menu */
.ft-ctx {
  position: fixed;
  z-index: 120;
  display: none;
  min-width: 15rem;
  background: var(--paper);
  border: 2px solid var(--saddle);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 0.35rem 0;
  font-family: var(--font-ui);
}
.ft-ctx.show { display: block; }
.ft-ctx .ctx-head {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--saddle-dark);
  padding: 0.5rem 1rem 0.35rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.25rem;
}
.ft-ctx button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: 600 0.95rem var(--font-ui);
  color: var(--ink);
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.ft-ctx button:hover, .ft-ctx button:focus-visible { background: #f4ecdd; color: var(--rust); }
[data-theme="dark"] .ft-ctx button:hover, [data-theme="dark"] .ft-ctx button:focus-visible { background: #2b2318; }
.ft-ctx hr { border: none; border-top: 1px solid var(--line); margin: 0.25rem 0; }

/* little confirmation toast */
.ft-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%) translateY(1rem);
  z-index: 130;
  max-width: min(34rem, 92vw);
  background: var(--saddle-dark);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.98rem;
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  overflow-wrap: anywhere;
}
.ft-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .ft-toast { background: #241c13; color: #eadfca; }

.ft-more {
  position: absolute;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--saddle-dark);
  background: #f1e5cd;
  border: 2px dashed var(--saddle);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.ft-more:hover { background: var(--saddle); color: var(--cream); }

/* generation labels on the left */
.ft-genlabel {
  position: absolute;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a08a6a;
  white-space: nowrap;
  pointer-events: none;
}

/* floating stage controls */
.ft-controls {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 5;
}
.ft-controls .ft-btn { min-width: 3rem; text-align: center; box-shadow: var(--shadow); }
/* ---------- Family Birthdays page ---------- */
.bd-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.bd-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--saddle-dark); min-width: 11rem; text-align: center; }
.bd-body { max-width: 72rem; margin: 1.4rem auto 0.6rem; padding: 0 1rem; }
.bd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bd-dow { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); text-align: center; padding: 0.3rem 0; }
.bd-cell {
  min-height: 5.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.3rem 0.35rem;
}
.bd-cell.empty { background: none; border-color: transparent; }
.bd-cell.has { border-color: var(--saddle); }
.bd-cell.today { outline: 3px solid var(--rust); outline-offset: -1px; }
.bd-daynum { display: block; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 0.2rem; }
.bd-chip {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cream);
  background: var(--saddle);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  margin-top: 0.25rem;
  text-decoration: none;
  line-height: 1.25;
}
.bd-chip:hover { background: var(--rust); }
.bd-chip .bd-age { display: block; font-weight: 600; font-size: 0.72rem; opacity: 0.85; }
.bd-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.bd-mini { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.85rem; }
.bd-mini.today { border-color: var(--rust); border-width: 2px; }
.bd-mini h3 { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.05rem; color: var(--saddle-dark); margin: 0 0 0.4rem; }
.bd-mini h3 .cr { font-family: var(--font-ui); font-size: 0.8rem; color: var(--rust); }
.bd-listwrap { max-width: 46rem; margin: 0 auto; }
.bd-listmonth { margin-bottom: 1.3rem; }
.bd-listmonth h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--saddle-dark); border-bottom: 2px solid var(--gold); padding-bottom: 0.25rem; }
.bd-row {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid var(--line);
}
.bd-row:hover { color: var(--rust); }
.bd-row.sm { font-size: 0.88rem; padding: 0.22rem 0; border-bottom: none; }
.bd-day { font-weight: 700; color: var(--rust); min-width: 3.4rem; }
.bd-row.sm .bd-day { min-width: 1.6rem; }
.bd-row .bd-age { margin-left: auto; font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; }
.bd-none { font-family: var(--font-ui); color: var(--ink-soft); text-align: center; padding: 1rem; }
.bd-none.sm { display: block; text-align: left; padding: 0; }
.bd-note { max-width: 72rem; margin: 0 auto 2rem; padding: 0 1rem; font-family: var(--font-ui); font-size: 0.88rem; color: var(--ink-soft); }
[data-theme="dark"] .bd-cell, [data-theme="dark"] .bd-mini { background: #241d15; }
[data-theme="dark"] .bd-cell.empty { background: none; }
@media (max-width: 700px) {
  .bd-grid { grid-template-columns: repeat(2, 1fr); }
  .bd-dow { display: none; }
  .bd-cell.empty { display: none; }
  .bd-cell { min-height: 0; }
}

/* line-colour key, bottom left of the tree */
.ft-legend {
  position: absolute;
  left: 0.9rem;
  bottom: 2.6rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.8rem;
  max-width: 26rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.ft-legend:empty { display: none; }
.ft-legend .ftl { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.ft-legend .ftl i { width: 1.1rem; height: 3px; border-radius: 2px; }
[data-theme="dark"] .ft-legend { background: rgba(25, 20, 16, 0.88); }

.ft-hint {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 5;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  pointer-events: none;
  max-width: min(26rem, 60vw);
}
.ft-canvas3d { position: relative; display: none; height: max(24rem, min(calc(100vh - 14.5rem), 70vh)); overflow: hidden; }
.ft-shell.mode-3d .ft-canvas3d { display: block; }
.ft-shell.mode-3d .ft-viewport2d { display: none; }
.ft-canvas3d canvas { display: block; cursor: grab; }
.ft-canvas3d canvas:active { cursor: grabbing; }

/* hover tooltip (both views) */
.ft-tip {
  position: fixed;
  z-index: 95;
  display: none;
  max-width: 20rem;
  background: var(--saddle-dark);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.45;
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.ft-tip .tip-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold); }
.ft-tip.show { display: block; }

/* ---------- Profile panel ---------- */

.ft-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  width: min(30rem, 100vw);
  background: var(--paper);
  border-left: 3px solid var(--gold);
  box-shadow: -10px 0 30px rgba(40, 26, 12, 0.35);
  transform: translateX(102%);
  transition: transform 0.22s ease-out;
  display: flex;
  flex-direction: column;
}
.ft-panel.open { transform: translateX(0); }
.ft-panel-head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.1rem 0.8rem;
  background: var(--saddle-dark);
  color: var(--cream);
}
.ft-panel-head img.ftp-face {
  width: 5.4rem;
  height: 5.4rem;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  border: 2px solid var(--gold);
  cursor: zoom-in;
}
.ft-panel-head .ftp-noface {
  width: 5.4rem;
  height: 5.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px dashed rgba(200, 161, 90, 0.6);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(232, 221, 200, 0.6);
}
.ftp-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.ftp-years { font-family: var(--font-ui); color: var(--gold); font-weight: 700; letter-spacing: 0.05em; margin-top: 0.15rem; }
.ftp-line { font-family: var(--font-ui); font-size: 0.85rem; color: #e8ddc8; margin-top: 0.2rem; }
.ftp-close {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: var(--cream);
  font: 700 1.05rem var(--font-ui);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  align-self: flex-start;
}
.ftp-close:hover { background: var(--gold); color: var(--ink); }
.ft-panel-body { overflow-y: auto; padding: 1rem 1.1rem 2rem; }
.ft-panel-body h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--sage);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.25rem;
  margin: 1.4rem 0 0.6rem;
}
.ft-panel-body h3:first-child { margin-top: 0.2rem; }
.ftp-facts { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.ftp-facts li { display: flex; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px dotted var(--line); }
.ftp-facts .k {
  flex: 0 0 6.2rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  padding-top: 0.15rem;
}
.ftp-facts .v { min-width: 0; }
.ftp-kin { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ftp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--saddle-dark);
  background: #f4ecdd;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.ftp-chip:hover { border-color: var(--saddle); background: #eee0c5; }
.ftp-chip .cr { font-size: 0.75rem; font-weight: 700; color: var(--rust); letter-spacing: 0.04em; }
.ftp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.ftp-gallery figure { margin: 0; padding: 0.35rem; }
.ftp-gallery figcaption { font-size: 0.78rem; padding: 0.35rem 0.15rem 0.05rem; }
.ftp-note {
  background: #f4ecdd;
  border-left: 4px solid var(--gold);
  border-radius: 0 6px 6px 0;
  padding: 0.8rem 1rem;
  font-size: 0.98rem;
  white-space: pre-wrap;
}
.ftp-src { font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-soft); margin-top: 1.2rem; }
.ftp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.2rem; }
.ftp-story {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 0.55rem 0.2rem;
}

/* family videos in the profile: playlist heading + thumbnail rows */
.ftp-ytpl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 0.55rem 0.2rem 0.25rem;
}
.ftp-ytpl .cr { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.ftp-vids { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; }
.ftp-vid {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.ftp-vid:hover { border-color: var(--rust); color: var(--rust); }
.ftp-vid img { width: 6.4rem; aspect-ratio: 16/9; object-fit: cover; border-radius: 5px; flex: none; background: #d8ccb4; }
.ftp-vid .dur { color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
[data-theme="dark"] .ftp-vid { background: #241d15; }

/* ---------- People list drawer ---------- */

.ft-list {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 96;
  width: min(26rem, 100vw);
  background: var(--paper);
  border-right: 3px solid var(--gold);
  box-shadow: 10px 0 30px rgba(40, 26, 12, 0.35);
  transform: translateX(-102%);
  transition: transform 0.22s ease-out;
  display: flex;
  flex-direction: column;
}
.ft-list.open { transform: translateX(0); }
.ft-list-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--saddle-dark);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.ft-list-head .ftp-close { align-self: center; }
.ft-list-tools { display: flex; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ft-list-tools select { flex: 1 1 8rem; }
.ft-list-body { overflow-y: auto; flex: 1; }
.ft-li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}
.ft-li:hover, .ft-li:focus-visible { background: #f4ecdd; }
.ft-li img { width: 2.6rem; height: 2.6rem; border-radius: 6px; object-fit: cover; object-position: top center; }
.ft-li .li-years { margin-left: auto; color: var(--rust); font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.ft-list-count { padding: 0.5rem 1rem; font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-soft); border-top: 1px solid var(--line); }

/* ---------- Help modal ---------- */

.ft-help {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: none;
  background: rgba(20, 14, 6, 0.7);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ft-help.open { display: flex; }
.ft-help-box {
  background: var(--paper);
  border: 3px solid var(--gold);
  border-radius: 14px;
  max-width: 38rem;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5);
}
.ft-help-box h2 { font-family: var(--font-display); color: var(--saddle-dark); margin: 0 0 0.6rem; }
.ft-help-box h3 { font-family: var(--font-display); color: var(--sage); font-size: 1.08rem; margin: 1.1rem 0 0.3rem; }
.ft-help-box ul { padding-left: 1.3rem; margin: 0.3rem 0 0.8rem; }
.ft-help-box li { margin-bottom: 0.35rem; }
.ft-help-box kbd {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  background: #f1e5cd;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.05rem 0.45rem;
}

/* ---------- Story-page branch widget ---------- */

.tree-widget {
  background: #f1e9d8;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem 1.2rem 1.4rem;
  margin: 2rem 0;
}
.tree-widget h3 { margin-top: 0; }
.tw-rows { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.9rem 0 1.1rem; }
.tw-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.tw-rowlabel {
  flex-basis: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a08a6a;
}
.tw-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-ui);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.tw-card:hover { border-color: var(--saddle); color: var(--ink); }
.tw-card img { width: 2.5rem; height: 2.5rem; border-radius: 6px; object-fit: cover; object-position: top center; }
.tw-card .twc-name { font-weight: 700; color: var(--saddle-dark); font-size: 0.95rem; line-height: 1.15; display: block; }
.tw-card .twc-years { font-size: 0.8rem; color: var(--rust); font-weight: 700; }
.tw-card.tw-focus { border-color: var(--rust); background: #fffaf0; }
.tw-open { text-align: center; }

@media (max-width: 700px) {
  .ft-toolbar { position: static; }
  .ft-viewport { height: 70vh; }
  .ftp-gallery { grid-template-columns: 1fr; }
  .ft-hint { display: none; }
}

/* Bar W Bar: her PDF page marker, shown as a marker not as body text */
a[href^="http"], .url { word-break: break-all; }
ul.plain-list { list-style: none; padding-left: 0; }
ul.plain-list li { margin-bottom: 0.9rem; }
aside.note h3 { margin-top: 0; font-size: 1.05rem; }
.url { color: var(--ink-soft); }
.doc-verbatim .pg-mark{font-family:'Source Sans 3',sans-serif;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#a08a6a;margin:2.4rem 0 .9rem;padding-top:1rem;border-top:1px solid #e6dcc8;}

/* ==========================================================================
   Dark mode — toggled from the nav (moon/sun), remembered on this device.
   Token flips first, then the handful of hard-coded light surfaces.
   ========================================================================== */

:root[data-theme="dark"] {
  --paper: #201a14;
  --ink: #eadfca;
  --ink-soft: #bfae92;
  --line: #3d3527;
  --saddle: #a97a48;
  --saddle-dark: #dab984;   /* now a TEXT tone; dark surfaces are set below */
  --rust: #d97b45;
  --sage: #93a888;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] body { background: #14100c; }

/* panels & bands */
[data-theme="dark"] .timeline-section { background: #191410; }
[data-theme="dark"] .tl-years { background: #191410; }
[data-theme="dark"] .tl-arrow { background: linear-gradient(to right, #191410 55%, rgba(25, 20, 16, 0)); }
[data-theme="dark"] .tl-arrow-right { background: linear-gradient(to left, #191410 55%, rgba(25, 20, 16, 0)); }
[data-theme="dark"] .tl-card.current { background: #26200f; }
[data-theme="dark"] .memorial { background: #241c13; color: #eadfca; }
[data-theme="dark"] .tts-bar { background: #241c13; color: #eadfca; }
[data-theme="dark"] .tts-listen { background: #2b2318; color: var(--saddle-dark); }
[data-theme="dark"] .tts-reading, [data-theme="dark"] .person:target, [data-theme="dark"] a.p-link:hover { background: #33290f; }
[data-theme="dark"] .tl-card.flash { border-color: var(--gold); }

/* light chips, notes and hovers */
[data-theme="dark"] .note, [data-theme="dark"] aside.note { background: #2b2318; }
[data-theme="dark"] .ftp-note { background: #2b2318; }
[data-theme="dark"] .sr-item:hover, [data-theme="dark"] .sr-item:focus-visible,
[data-theme="dark"] .drop-menu a:hover, [data-theme="dark"] .fam-btn:hover,
[data-theme="dark"] .story-btn:hover,
[data-theme="dark"] details.records summary:hover,
[data-theme="dark"] .chap-list .chap-link:hover,
[data-theme="dark"] .ft-suggest button:hover, [data-theme="dark"] .ft-suggest button:focus-visible,
[data-theme="dark"] .ft-li:hover, [data-theme="dark"] .ft-li:focus-visible { background: #2b2318; }
[data-theme="dark"] .p-noface, [data-theme="dark"] .ftn-noface, [data-theme="dark"] .ft-node .ftn-face { background: #2b2318; }
[data-theme="dark"] .ft-btn, [data-theme="dark"] .ft-check, [data-theme="dark"] .ftp-chip { background: #2b2318; }
[data-theme="dark"] .ft-btn:hover { background: var(--saddle); color: #14100c; }
[data-theme="dark"] .ftp-chip:hover { background: #362c1d; }
[data-theme="dark"] .ft-btn[aria-pressed="true"], [data-theme="dark"] .ft-btn.active { background: #443413; color: var(--gold); border-color: #443413; }
[data-theme="dark"] .ft-more { background: #2b2318; }

/* inputs */
[data-theme="dark"] .search-input,
[data-theme="dark"] .ft-toolbar select, [data-theme="dark"] .ft-toolbar input[type="search"],
[data-theme="dark"] .ft-list-tools select,
[data-theme="dark"] .tts-options select { background: #14100c; color: var(--ink); }

/* tables */
[data-theme="dark"] table { background: #1a1510; }
[data-theme="dark"] tbody tr:nth-child(even) { background: #211b14; }
[data-theme="dark"] thead th { background: #241c13; color: #eadfca; }

/* family tree page */
[data-theme="dark"] .ft-shell { background: #191410; }
[data-theme="dark"] .ft-hint { background: rgba(26, 21, 16, 0.92); }
[data-theme="dark"] .ft-tip { background: #241c13; }
[data-theme="dark"] .ft-node.focus, [data-theme="dark"] .story-card:hover { background: #241d14; }
[data-theme="dark"] .ft-panel-head, [data-theme="dark"] .ft-list-head { background: #241c13; color: #eadfca; }
[data-theme="dark"] .ft-genlabel { color: #7d6a4e; }
[data-theme="dark"] .tree-widget { background: #191410; }
[data-theme="dark"] .back-to-top { background: #241c13; }
[data-theme="dark"] .back-to-top:hover { background: var(--gold); color: #14100c; }
[data-theme="dark"] .ft-hero .ft-stats, [data-theme="dark"] .hero { color: #f0e6d2; }

/* photographs keep their own light; soften the paper mats around them */
[data-theme="dark"] figure { background: #1e1813; }