:root {
  --bg: #f6f1e7;
  --paper: #f2ecdf;
  --field: #f7f2e8;
  --surface-hover: #e8e4d8;
  --ink: #242a25;
  --muted: #6c716b;
  --rust: #a75a3d;
  --line: #ddd6ca;
  --sage: #7c8975;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font:
    16px/1.65 system-ui,
    -apple-system,
    sans-serif;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button,
.pill {
  font: 600 14px/1.3 system-ui;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 19px;
  text-decoration: none;
}
button:hover,
.pill:hover {
  background: #e8e9df;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.primary {
  background: var(--rust);
  color: white;
  border-color: var(--rust);
}
button.primary:hover {
  background: #89492f;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 4px;
}
header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px 4vw;
  border-bottom: 1px solid var(--line);
  max-width: 1500px;
  margin: auto;
}
.brand {
  font:
    bold 28px Georgia,
    serif;
  text-decoration: none;
}
.brand span {
  color: var(--rust);
}
nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
nav a {
  font-size: 13px;
  text-decoration: none;
}
nav button {
  font-size: 12px;
  padding: 10px 15px;
}
main {
  max-width: 1280px;
  margin: auto;
  padding: 34px 36px 60px;
}
h1,
h2,
h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 1.1;
}
h1 {
  font-size: clamp(42px, 5.4vw, 72px);
  letter-spacing: -2px;
  margin: 18px 0 24px;
}
h2 {
  font-size: 36px;
  margin: 14px 0 18px;
}
h3 {
  font-size: 25px;
  line-height: 1.25;
  margin: 14px 0;
}
p {
  margin: 12px 0 20px;
}
.eyebrow {
  text-transform: uppercase;
  color: var(--rust);
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 750;
}
.deck {
  font-size: 21px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 850px;
}
.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  margin: 0 0 65px;
}
.hero-copy {
  padding: 44px;
  background: var(--paper);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-copy h1 {
  font-size: clamp(44px, 5vw, 68px);
}
.intro {
  font-size: 17px;
  line-height: 1.8;
}
.intro a {
  color: var(--rust);
}
.hero-photo {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  min-height: 550px;
  background: #d6d4c5;
}
.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.photo-placeholder {
  height: 100%;
  min-height: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background:
    radial-gradient(ellipse at 30% 20%, #e1ddcd, transparent),
    linear-gradient(135deg, #a5b09c, #c9baa1);
  color: #39453a;
}
.portrait-mark {
  display: grid;
  place-items: center;
  width: 155px;
  height: 190px;
  border: 1px solid #ffffff70;
  border-radius: 90px 90px 6px 6px;
  font: 80px Georgia;
  color: #ffffffe0;
}
.photo-placeholder p {
  font: 28px Georgia;
  margin-top: 24px;
}
.photo-placeholder button {
  margin-top: 30px;
  background: #ffffff70;
}
.photo-note {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #242a25bb;
  color: white;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12px;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.quiet,
small,
.section-deck {
  color: var(--muted);
}
.quiet {
  font-size: 13px;
}
.section-deck {
  margin-bottom: 28px;
}
section {
  margin-bottom: 48px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--paper);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e5ded2;
  transition: transform 0.2s;
}
.card:hover {
  transform: translateY(-3px);
}
.card-copy {
  padding: 24px;
}
.card h3 a {
  text-decoration: none;
}
.card h3 a:after {
  content: " ↗";
  font: 18px system-ui;
  color: var(--rust);
}
.card p {
  font-size: 14px;
  color: #62665f;
}
.card-top {
  height: 118px;
  padding: 24px;
  display: flex;
  align-items: end;
  background: #dee3d5;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.card-top.story {
  background: linear-gradient(145deg, #73836e, #b5bea8);
  color: white;
}
.story:nth-child(2) .card-top {
  background: linear-gradient(135deg, #b09879, #ded0b7);
}
.story:nth-child(3) .card-top {
  background: linear-gradient(135deg, #576b7a, #9faeb6);
}
.story:nth-child(4) .card-top {
  background: #b87c60;
}
.story:nth-child(5) .card-top {
  background: #a39b73;
}
.story:nth-child(6) .card-top {
  background: #9b8b87;
}
.meta {
  font-size: 10px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 13px;
}
.silhouette {
  position: relative;
  border-radius: 50%;
  background: #b0b5a8;
  color: transparent;
  width: 34px;
  height: 34px;
  margin: 0 auto 20px;
}
.silhouette:after {
  content: "";
  position: absolute;
  top: 36px;
  left: -12px;
  width: 58px;
  height: 25px;
  border-radius: 45px 45px 0 0;
  background: #b0b5a8;
}
.wander {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 38px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 55px;
}
.pathways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pathways a {
  display: flex;
  justify-content: space-between;
  padding: 18px;
  background: var(--paper);
  border-radius: 14px;
  text-decoration: none;
}
.pathways span {
  color: var(--rust);
}
.invitation {
  text-align: center;
  padding: 30px;
}
.invitation > a {
  display: block;
  font-size: 13px;
  margin-top: 24px;
}
footer {
  text-align: center;
  padding: 25px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.back {
  display: block;
  font-size: 13px;
  margin: 0 0 25px;
  color: var(--rust);
}
.detail-head {
  max-width: 960px;
  margin-bottom: 35px;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 60px;
}
.prose {
  font: 20px/1.85 Georgia;
  white-space: normal;
  padding: 0 0 24px;
}
.detail-grid h2 {
  font-size: 29px;
  margin-top: 35px;
}
aside {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  align-self: start;
}
aside h3 {
  font-size: 22px;
}
.badge {
  display: inline-block;
  background: #e8ecdf;
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 8px;
  text-transform: capitalize;
}
.badge.disputed {
  background: #f2dad4;
  color: #94391d;
}
.evidence {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.evidence p {
  font-size: 13px;
  margin-bottom: 10px;
}
details {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}
details p {
  font-size: 12px;
  overflow-wrap: anywhere;
}
blockquote {
  margin: 18px 0;
  background: var(--paper);
  border-left: 3px solid var(--sage);
  padding: 24px;
  border-radius: 0 14px 14px 0;
  white-space: pre-wrap;
}
blockquote p {
  font: 19px/1.7 Georgia;
}
cite {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: var(--paper);
  overflow: hidden;
}
figure img,
figure video {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
}
figure audio {
  width: 100%;
}
figcaption {
  font-size: 13px;
  padding: 10px 0;
  overflow-wrap: anywhere;
}
figure button {
  font-size: 11px;
}
.map-treatment {
  background: #e4e8db;
  border-radius: 20px;
  padding: 25px;
}
.map-treatment button {
  display: block;
  margin-top: 20px;
}
.related p {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.timeline {
  display: grid;
  gap: 18px;
  max-width: 900px;
}
.timeline .card {
  display: grid;
  grid-template-columns: 130px 1fr;
}
.timeline .card-top {
  height: 100%;
  align-items: center;
  background: #e5e2d5;
}
dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  width: min(620px, 92vw);
  max-height: 88vh;
  padding: 30px;
  box-shadow: 0 24px 100px #2225;
}
dialog::backdrop {
  background: #252b2566;
  backdrop-filter: blur(4px);
}
.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.modal-head h2 {
  font-size: 30px;
  margin-top: 0;
}
.modal-head button {
  font-size: 12px;
}
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 18px 0;
}
input,
textarea,
select {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font: 16px/1.5 system-ui;
  margin-top: 7px;
}
textarea {
  resize: vertical;
}
.check {
  display: flex;
  align-items: start;
  gap: 9px;
  font-weight: 400;
  font-size: 13px;
  margin: 10px 0;
}
.check input {
  width: 18px;
  height: 18px;
  margin: 2px 0;
}
.checks {
  max-height: 220px;
  overflow: auto;
  padding: 10px;
}
.form-error {
  color: #a13027;
  font-size: 13px;
}
#toast:not(:empty) {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 16px;
  background: var(--ink);
  color: white;
  padding: 14px 22px;
  z-index: 100;
  max-width: 90vw;
  font-size: 14px;
}
.signin {
  max-width: 630px;
  margin: 4vh auto;
}
.signin form {
  max-width: 400px;
}
.signin h1 {
  font-size: 64px;
}
.signin .brand {
  display: block;
  margin-bottom: 40px;
}
@media (max-width: 800px) {
  header {
    padding: 16px 20px;
    align-items: start;
  }
  nav {
    justify-content: end;
  }
  nav > a {
    display: none;
  }
  nav button {
    padding: 8px 10px;
    font-size: 11px;
  }
  main {
    padding: 25px 20px 40px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-copy {
    padding: 28px;
  }
  .hero-photo,
  .photo-placeholder {
    min-height: 330px;
  }
  .hero-photo > img {
    position: relative;
    max-height: 480px;
  }
  .hero-copy h1 {
    font-size: 48px;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .wander,
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .detail-grid aside {
    order: 2;
  }
  .deck {
    font-size: 18px;
  }
  h1 {
    font-size: 44px;
  }
  .invitation {
    padding: 20px 0;
  }
}
@media (max-width: 500px) {
  .cards {
    grid-template-columns: 1fr;
  }
  .card-top {
    height: 100px;
  }
  .hero-copy h1 {
    font-size: 42px;
  }
  .hero-copy {
    padding: 24px;
  }
  .hero-copy .intro {
    font-size: 15px;
  }
  .pathways {
    gap: 8px;
  }
  .pathways a {
    padding: 14px;
  }
  .media-grid {
    grid-template-columns: 1fr;
  }
  .timeline .card {
    grid-template-columns: 85px 1fr;
  }
  .timeline .card-top {
    padding: 12px;
    font-size: 10px;
  }
  h2 {
    font-size: 30px;
  }
  header .brand {
    font-size: 24px;
  }
  nav {
    gap: 6px;
  }
  .signin h1 {
    font-size: 48px;
  }
}
/* Editorial expansion: quiet tools live behind the story. */
.portrait-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: #e6ded0;
}
.portrait-track,
.portrait-slide {
  height: 100%;
  margin: 0;
}
.portrait-slide[hidden] {
  display: none;
}
.portrait-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-slide figcaption {
  position: absolute;
  bottom: 70px;
  left: 24px;
  right: 24px;
  background: rgba(225, 221, 206, 0.9);
  padding: 10px 14px;
  font-size: 13px;
}
.carousel-controls {
  position: absolute;
  bottom: 16px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: rgba(20, 30, 20, 0.55);
  border-radius: 30px;
  padding: 4px 8px;
}
.carousel-controls button {
  background: var(--paper);
  color: #263b32;
  min-width: 44px;
  min-height: 44px;
}
.narrow-form {
  max-width: 660px;
  margin: 24px 0;
}
.narrow-form textarea,
.narrow-form input {
  width: 100%;
}
.narrow-form input[type="checkbox"] {
  width: auto;
}
.conversation {
  max-width: 760px;
}
.conversation article {
  padding: 20px 24px;
  margin: 18px 0;
  border-radius: 12px;
}
.question {
  background: #e9e7dc;
}
.answer {
  background: var(--paper);
  border-left: 3px solid #54755c;
}
.conversation p,
.draft-prose {
  white-space: pre-wrap;
}
.draft-prose {
  margin: 24px 0;
}
.hero-photo:has(.portrait-carousel) {
  overflow: hidden;
}
.evidence input {
  width: 100%;
}
@media (max-width: 700px) {
  .portrait-carousel {
    height: 450px;
    min-height: 0;
  }
  nav {
    flex-wrap: wrap;
  }
  .portrait-slide figcaption {
    left: 14px;
    right: 14px;
  }
}
.tree-toolbar {
  display: flex;
  gap: 24px;
  align-items: end;
  flex-wrap: wrap;
  margin: 32px 0;
}
.tree-toolbar label {
  max-width: 420px;
  flex: 1;
}
.family-tree {
  background: radial-gradient(ellipse at center, #eef0e5 0, #f8f4eb 75%);
  border: 1px solid #d5dccd;
  border-radius: 24px;
  padding: 36px 20px;
}
.generation-label {
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: #6a7868;
  margin: 16px 0;
}
.tree-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tree-person {
  background: var(--paper);
  border: 1px solid #d8ddcf;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  width: 220px;
  box-shadow: 0 8px 26px #243d2c08;
  position: relative;
}
.tree-person h3 {
  font-size: 22px;
  margin: 10px 0;
}
.tree-person a {
  text-decoration: none;
}
.tree-person.tree-anchor {
  border: 2px solid #5a745f;
  background: #eef1e7;
}
.tree-portrait {
  display: flex;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 18px;
  background: #e3e6dc;
  align-items: center;
  justify-content: center;
}
.tree-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person-silhouette {
  width: 36px;
  height: 40px;
  border-radius: 50% 50% 35% 35%;
  background: #84917c;
  color: transparent;
  position: relative;
  margin-top: 26px;
}
.person-silhouette:before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background: #84917c;
  border-radius: 50%;
  top: -23px;
  left: 5px;
}
.branch-link {
  display: block;
  font-size: 13px;
  margin-top: 18px;
  color: #476950;
}
.tree-note {
  font-size: 12px;
  color: #7a7a69;
}
.tree-stem {
  height: 34px;
  width: 1px;
  margin: 0 auto;
  background: #adbba4;
}
.tree-gap {
  text-align: center;
  color: #6e7b67;
  padding: 20px;
  max-width: 420px;
  line-height: 1.7;
}
.residence-path {
  margin: 48px 0;
}
.residence-stop {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  position: relative;
  padding: 0 0 54px;
}
.residence-stop:not(:last-child):before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50px;
  bottom: 8px;
  border-left: 1px solid #a2b09b;
}
.stop-marker {
  background: #e4eadc;
  color: #3e5c45;
  border: 1px solid #acbca1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 22px;
}
.residence-stop h2 {
  margin: 5px 0 14px;
}
.geography-lead {
  background: #ebece0;
  padding: 24px;
  border-radius: 16px;
  margin: 24px 0;
}
.pathways a[href="#/tree"],
.pathways a[href="#/geography"] {
  background: #e3e9da;
  font-weight: 600;
}
@media (max-width: 700px) {
  .family-tree {
    padding: 24px 8px;
  }
  .tree-row {
    gap: 12px;
  }
  .tree-person {
    width: min(100%, 260px);
  }
  .residence-stop {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }
  .stop-marker {
    width: 36px;
    height: 36px;
  }
  .residence-stop:not(:last-child):before {
    left: 18px;
    top: 42px;
  }
  .tree-toolbar {
    gap: 12px;
  }
}
.event-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.event-controls button {
  font-size: 12px;
  padding: 8px 12px;
}
.event-controls button[data-action="event-delete"] {
  color: #87443b;
}
.tree-canvas {
  width: 100%;
  overflow: auto;
  background: radial-gradient(ellipse at center, #eef0e5, #f9f6ef);
  border: 1px solid #d7dfcd;
  border-radius: 24px;
  margin: 16px 0 28px;
}
.tree-canvas svg {
  display: block;
  min-width: 680px;
}
.family-connector {
  fill: none;
  stroke: #9baa8e;
  stroke-width: 2;
}
.disputed-connector {
  stroke: #9b5b4d;
}
.tree-svg-card {
  fill: #fffdf8;
  stroke: #d5ddca;
  stroke-width: 1.5;
}
.tree-svg-card.focused {
  fill: #edf2e5;
  stroke: #5a7659;
  stroke-width: 2.5;
}
.tree-svg-name {
  font:
    20px Georgia,
    serif;
  fill: #263d2b;
  text-anchor: middle;
}
.tree-svg-status {
  font:
    11px system-ui,
    sans-serif;
  fill: #717f69;
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tree-svg-branch {
  font:
    12px system-ui,
    sans-serif;
  fill: #436446;
  text-anchor: middle;
}
.generation-svg {
  font:
    11px system-ui,
    sans-serif;
  fill: #6b7c60;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.tree-view-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tree-view-controls button {
  min-width: 44px;
  min-height: 44px;
}
.tree-canvas a:hover .tree-svg-name {
  text-decoration: underline;
}
.tree-canvas a:focus-visible {
  outline: 2px solid #446846;
}
.portrait-carousel {
  position: absolute;
  inset: 0;
}
.portrait-track,
.portrait-slide,
.portrait-slide > a {
  height: 100%;
  display: block;
}
.portrait-slide[hidden] {
  display: none;
}
@media (max-width: 700px) {
  .portrait-carousel {
    position: relative;
    height: 450px;
  }
  .tree-canvas svg {
    min-width: 1000px;
  }
}

.journey-intro {
  max-width: 760px;
}
.journey-form {
  max-width: 760px;
  padding: 32px;
  background: var(--paper, #faf8f3);
  border: 1px solid #ded8cc;
  border-radius: 6px;
  margin: 30px 0;
}
.journey-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.journey-form details,
.discovery-save details {
  margin: 20px 0;
}
.discovery-candidate {
  max-width: 880px;
  padding: 36px;
  margin: 34px 0;
  background: var(--paper);
  border: 1px solid #ded8cc;
  border-radius: 8px;
}
.discovery-candidate h2 {
  margin-top: 8px;
}
.match-context {
  border-left: 3px solid #b78c57;
  padding-left: 22px;
  margin: 26px 0;
}
.discovery-fact {
  border-bottom: 1px solid #e7e1d7;
  padding: 16px 0;
}
.discovery-fact > a {
  font-size: 14px;
  margin-left: 28px;
}
.discovery-save {
  margin: 30px 0;
}
.discovery-leads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.discovery-wait {
  max-width: 760px;
  padding: 28px;
  border-left: 3px solid #b78c57;
  background: #f3eee4;
}
.discovery-saved {
  padding: 20px;
  background: #eaf0e6;
}
@media (max-width: 640px) {
  .journey-fields,
  .discovery-leads {
    grid-template-columns: 1fr;
  }
  .journey-form,
  .discovery-candidate {
    padding: 22px 18px;
  }
}

/* Hero photos are full portraits, independent of archive figure sizing. */
.portrait-slide {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #d6d4c5;
  position: relative;
  overflow: hidden;
}
.portrait-slide > a {
  position: absolute;
  inset: 0 0 128px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.portrait-slide img {
  max-height: none;
  height: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 0;
  object-position: center;
}
.portrait-slide figcaption {
  bottom: 66px;
  max-height: 56px;
  overflow: auto;
}
@media (max-width: 700px) {
  .hero-photo:has(.portrait-carousel) {
    min-height: 450px;
  }
  .portrait-slide > a {
    padding: 12px;
  }
}
.tree-svg-relation {
  font-family: var(--sans, Arial, sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  fill: #764b2d;
}
.contribution-invitations {
  border-left: 3px solid #a57947;
  background: #eee9df;
  padding: 24px 30px;
  margin: 28px 0;
  max-width: 920px;
}
.contribution-invitations > div {
  margin: 18px 0;
}
.contribution-invitations p {
  max-width: 720px;
  line-height: 1.65;
}
.contribution-invitations small {
  color: var(--muted);
}
.memory-invitation {
  padding: 18px;
  background: #f3eee4;
  border-left: 3px solid #a57947;
}

/* An editorial research interlude, without invented progress percentages. */
.research-spotlight { position:relative; overflow:hidden; max-width:780px; margin:28px auto; padding:44px 38px; border-radius:18px; background:#193f38; color:#fff7e9; box-shadow:0 18px 50px #193f3826; text-align:center; }
.research-spotlight .eyebrow { color:#edcf92; letter-spacing:.16em; }
.research-spotlight h2 { color:#fff7e9; font-size:clamp(28px,5vw,42px); margin:14px 0 22px; }
.research-orbit { width:68px; height:68px; margin:0 auto 22px; border:1px solid #edcf9280; border-radius:50%; display:grid; place-items:center; color:#edcf92; font-size:36px; animation:research-glow 3s ease-in-out infinite; }
.research-status { min-height:3em; font-size:19px; line-height:1.5; }
.research-track { height:5px; max-width:330px; margin:24px auto 14px; overflow:hidden; border-radius:8px; background:#ffffff25; }
.research-track span { display:block; height:100%; width:35%; background:#edcf92; border-radius:8px; animation:research-travel 2.4s ease-in-out infinite alternate; }
.research-clock { color:#edcf92; font-size:13px; }
.research-reassurance { max-width:540px; margin:24px auto 0; color:#e3e8de; line-height:1.65; font-size:15px; }
@keyframes research-travel { from { transform:translateX(-100%); } to { transform:translateX(290%); } }
@keyframes research-glow { 50% { box-shadow:0 0 0 12px #edcf9212; transform:scale(1.05); } }
@media(max-width:600px) { .research-spotlight { padding:32px 22px; } }
@media(prefers-reduced-motion:reduce) { .research-orbit,.research-track span { animation:none; } }
.person-photo-story { max-width:720px; margin:28px auto; height:540px; position:relative; border-radius:24px; overflow:hidden; background:#d9d9cd; }
.person-photo-story .portrait-slide { height:100%; }
.person-paths { margin:32px 0; }
.work-thread { padding:22px 0; border-bottom:1px solid var(--line,#dedbd2); }
.work-thread h2,.work-thread h3 { margin:8px 0; }
.discovery-fact select { margin-top:8px; }
.fact-correction { padding:14px; background:#eff2e8; border-radius:10px; }
.rejected-match { opacity:.8; border-style:dashed; }
.tree-path-summary { background:#e5ebde; padding:18px 22px; border-radius:12px; line-height:1.7; }
.family-connector.path-muted { opacity:.22; }
.family-connector.path-highlight { stroke:#264e3e!important; stroke-width:5; opacity:1; }
.tree-svg-card.path-highlight { stroke:#264e3e; stroke-width:3; fill:#eaf0e3; }
[data-collapse] { cursor:pointer; }
[data-collapse]:focus rect { stroke:#264e3e; stroke-width:2; }
.tree-mobile-list { display:none; }
@media(max-width:650px) {
 .person-photo-story { height:420px; }
 .tree-mobile-list { display:grid; gap:12px; margin-top:20px; }
 .tree-mobile-list article { padding:18px; border:1px solid #dedbd2; border-radius:16px; background:#fffdf7; }
 .tree-mobile-list h3 { margin:8px 0; }
 .tree-canvas { max-height:480px; }
 .tree-toolbar { flex-wrap:wrap; }
 .tree-toolbar label { max-width:100%; }
 .tree-toolbar select { width:100%; }
}
.story-shortlists { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.story-shortlists ol { padding:0; list-style:none; margin:0; }
.story-shortlists li { display:flex; align-items:flex-start; gap:18px; border-top:1px solid #dedbd2; padding:18px 0; }
.story-shortlists li>div { flex:1; }
.story-shortlists h3 { margin:0 0 7px; font-size:24px; }
.story-shortlists p { margin:0; font-size:15px; line-height:1.5; }
.story-shortlists button { padding:7px 11px; min-width:56px; }
.story-shortlists button[aria-pressed=true] { background:#264e3e; color:white; }
.interview-voice { padding:22px; background:#eff2e8; border-radius:18px; margin-bottom:20px; }
.interview-voice button { margin:0 7px 10px 0; }
.portrait-slide figcaption button { font-size:12px; padding:3px 8px; margin-left:8px; }
@media(max-width:650px) { .story-shortlists { grid-template-columns:1fr; gap:24px; } }
.accomplishment-entries { max-width:920px; margin:32px auto; }
.accomplishment-entry { border-top:1px solid #dedbd2; padding:30px 0; }
.accomplishment-entry h2 { margin:10px 0; }
/* Keep hidden forms, optional correction fields, and picker results out of view. */
[hidden] { display:none!important; }

.favorite-songs { margin: 3rem 0; }
.song-memory { padding: 1.5rem 0; border-top: 1px solid var(--line, #ddd6ca); max-width: 720px; }
.song-memory h3 { margin-bottom: .3rem; }
.song-memory blockquote { margin: 1rem 0; font-family: Georgia, serif; font-size: 1.2rem; }
.song-player iframe { margin-top: 1rem; border-radius: 12px; max-width: 100%; }
#existing-profiles { background: #f0eee5; padding: 1rem; border-radius: 8px; }
.story-contribute { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.song-result { display: block; text-align: left; width: 100%; border-radius: 12px; margin: .6rem 0; padding: .85rem; background: #f5f2ea; }
.song-result strong, .song-result span, .song-result small { display: block; }
.song-result span { margin: .3rem 0; font-weight: normal; }
.song-result[aria-pressed="true"] { outline: 2px solid #596b54; background: #e9ede3; }
#song-results { max-height: 330px; overflow: auto; margin: 1rem 0; }
.place-landing { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; padding: 2rem 0; margin-bottom: 2rem; border-bottom: 1px solid #ded8cd; }
.place-landing h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.place-map iframe { border: 0; border-radius: 18px; display: block; }
.map-placeholder { min-height: 250px; padding: 2rem; border-radius: 18px; background: #e9e8dd; display: grid; align-content: center; text-align: center; }
@media(max-width:700px) { .place-landing { grid-template-columns: 1fr; gap: 1rem; } }

.family-welcome { padding: 2rem 0; }
.family-welcome-photo { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; margin-bottom: 1rem; }
.family-welcome .card-copy { display: flex; flex-direction: column; gap: .6rem; }
.family-welcome .card-copy .pill { align-self: flex-start; margin-top: auto; }

/* A personal preview before the first profile is saved. */
.self-preview { padding: 1.6rem; border: 1px solid var(--line, #ddd7ca); border-radius: 12px; background: var(--paper); margin: 1.5rem 0; overflow-wrap: anywhere; }
.self-preview h2 { margin: .5rem 0; }
.self-preview p { white-space: pre-line; }

.upload-progress { padding: 1rem; margin-top: 1rem; background: #f2eee5; border-radius: 10px; }
.upload-progress progress { width: 100%; height: 1rem; accent-color: #975d40; }

/* A warm, quiet footer keeps tools away from the photograph. */
.hero-photo { background: #d6d4c5; }
.hero-photo .portrait-carousel,
.hero-photo .portrait-slide { background: #d6d4c5; }
.hero-photo .portrait-slide > a { inset: 0 0 108px; padding: 12px; }
.hero-photo .portrait-slide figcaption {
  bottom: 46px; left: 18px; right: 18px;
  max-height: 54px; padding: 8px 0;
  background: linear-gradient(180deg, #d6d4c500, #d6d4c5b3 35%);
  color: #494b40; font-size: 12px; line-height: 1.45;
}
.hero-photo .portrait-slide figcaption small { color: #606256; }
.hero-photo .portrait-slide figcaption button {
  background: transparent; border-color: #73766540; color: #494b40;
  font-size: 11px; padding: 2px 7px;
}
.hero-photo .carousel-controls {
  bottom: 10px; left: 12px; right: auto;
  gap: 8px; padding: 0; background: transparent;
  color: #494b40; font-size: 11px;
}
.hero-photo .carousel-controls button {
  min-width: 34px; min-height: 34px; padding: 0;
  background: #c7c6b680; color: #494b40;
  border: 1px solid #73766530; font-size: 16px;
}
.hero-photo-actions {
  position: absolute; top: auto; bottom: 10px; right: 14px; z-index: 5;
}
.hero-photo-actions button {
  min-height: 34px; padding: 5px 10px; font-size: 11px;
  background: #c7c6b650; color: #494b40;
  border: 1px solid #73766530; box-shadow: none;
}
.hero-photo-actions button:hover,
.hero-photo .carousel-controls button:hover { background: #bcbdaa90; }
@media (max-width: 700px) {
  .hero-photo .portrait-slide figcaption { left: 14px; right: 14px; }
}


/* Songs carry the page’s warm tones into recollections and player controls. */
.song-memory blockquote {
  background: linear-gradient(90deg, #eae3d580, #f6f1e700);
  border-left: 2px solid #8a92745c;
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}
.favorite-songs button {
  background: #eae3d54d; border-color: #b9b09e66;
  padding: 8px 13px; font-size: 12px; color: #52554a;
}
.favorite-songs button:hover { background: #e5decf99; }
.song-player:not(:empty) {
  margin-top: 16px; padding: 12px;
  background: linear-gradient(180deg, #eae3d533, #eee7da80);
  border: 1px solid #ddd6ca66; border-radius: 16px;
}
.song-player iframe { display: block; margin-top: 0; }

/* Shared warm surfaces: gradual separation instead of white blocks. */
.card, aside, .pathways a, .discovery-candidate, .tree-person, .self-preview {
  background: linear-gradient(145deg, #f2ecdf, #f4eee3);
}
button:not(.primary):not([aria-pressed="true"]):hover,
.pill:hover { background: var(--surface-hover); }
blockquote:not(.song-memory blockquote) {
  background: linear-gradient(90deg, #eee7d9, #f3ede2);
}
.conversation .answer { background: var(--paper); }
.person-photo-story .carousel-controls {
  background: #c7c6b666; color: #494b40;
  left: 16px; right: auto; gap: 8px; font-size: 11px;
}
.person-photo-story .carousel-controls button {
  min-width: 34px; min-height: 34px; padding: 0;
  background: #d6d4c580; color: #494b40;
}

.event-controls [data-action="event-edit"] { font-size: 11px; padding: 5px 10px; background: transparent; }

.trip-opening { max-width: 780px; }
.trip-fields, .trip-logistics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.trip-day { border-top: 1px solid var(--line, #ded8cc); padding: 2rem 0; max-width: 850px; }
.trip-day h4 { font-size: 1.35rem; margin: .8rem 0; }
#trip-form fieldset { border: 1px solid var(--line, #ded8cc); padding: 1rem; margin-bottom: 1.5rem; max-height: 300px; overflow: auto; }
@media (max-width: 650px) { .trip-fields, .trip-logistics { grid-template-columns: 1fr; gap: .5rem; } }

.achievement-document { max-width: 780px; margin: 2rem 0; }
.achievement-document h2 { font-size: clamp(1.6rem,3vw,2.1rem); margin-top: 2rem; }
.achievement-document li { margin-bottom: .8rem; line-height: 1.65; }

.tree-scope { border: 1px solid var(--line, #ded8cc); border-radius: 16px; padding: 1rem 1.3rem; max-width: 640px; }
.tree-scope legend { padding: 0 .4rem; font-weight: 600; }
.tree-scope .check { display: inline-flex; margin-right: 1.5rem; }
.tree-scope .quiet { margin: .6rem 0 0; }

/* A quiet research companion that stays beside the story. */
.companion-panel {position:fixed;right:0;top:0;height:100dvh;width:min(480px,100vw);overflow-y:auto;z-index:90;background:#faf7f0;box-shadow:-12px 0 60px #28251d33;padding:26px;box-sizing:border-box;border-left:1px solid #d8cdbb;}
.companion-panel[hidden]{display:none}
.companion-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.companion-heading h2{font-size:2rem;margin:0 0 20px}.companion-heading button{font-size:1.6rem}
.companion-panel label{display:block;margin:14px 0}.companion-panel input:not([type=checkbox]),.companion-panel select,.companion-panel textarea{width:100%;box-sizing:border-box}.companion-panel .check{display:flex;gap:10px;align-items:flex-start;font-size:.87rem}.companion-panel .check input{flex:none;margin-top:5px}
.companion-message{padding:18px;margin:18px 0;background:white;border-radius:8px;border:1px solid #e3dccf}.companion-message.user{background:#e8eddf;margin-left:24px}.companion-message p,.companion-finding>p{white-space:pre-wrap;overflow-wrap:anywhere}.companion-sources{font-size:.8rem;padding-left:18px;overflow-wrap:anywhere}.companion-panel section{border-top:1px solid #d8cdbb;margin-top:28px;padding-top:22px}.companion-finding{border:1px solid #d8cdbb;border-radius:8px;padding:18px;margin:18px 0;background:#fff}.companion-finding h4{font:1.4rem Georgia,serif;margin:12px 0}.companion-actions{display:flex;flex-wrap:wrap;gap:8px}.companion-actions button{font-size:.8rem}.email-setup-note{padding:12px;background:#eee4cf}.companion-progress.research-working{padding:18px;background:#dfe8d3;border-left:4px solid #566a44;font-weight:600;animation:companion-breathe 2s ease-in-out infinite}@keyframes companion-breathe{50%{opacity:.65}}@media(prefers-reduced-motion:reduce){.companion-progress.research-working{animation:none}}@media(max-width:600px){.companion-panel{padding:20px}}