:root {
  --parchment: #f3e6c8;
  --parchment-dark: #e6d3a3;
  --ink: #3b2f22;
  --gold: #b8892b;
  --branch: #8a6a3d;
  --male: #6b8f71;
  --female: #b8892b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Georgia', 'Cormorant Garamond', serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top, #fbf3dd 0%, var(--parchment) 55%, var(--parchment-dark) 100%);
  min-height: 100vh;
}

.page-frame {
  margin: 24px;
  padding: 28px;
  border: 3px double var(--gold);
  border-radius: 6px;
  background: rgba(255,255,255,0.35);
  position: relative;
}

.site-title {
  text-align: center;
  font-size: 2.2rem;
  letter-spacing: 2px;
  color: var(--ink);
  margin: 0 0 4px;
}
.site-subtitle {
  text-align: center;
  color: var(--branch);
  margin: 0 0 20px;
  font-style: italic;
}

.top-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.btn {
  display: inline-block;
  padding: 8px 18px;
  background: var(--branch);
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--gold); }
.btn.secondary { background: #8b8b8b; }

/* ===== Tree background flourish ===== */
.tree-wrapper {
  position: relative;
  overflow-x: auto;
  padding: 40px 20px 60px;
}
.tree-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, rgba(139,111,58,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ===== CSS org-chart tree (nested ul/li) ===== */
.family-tree, .family-tree ul {
  list-style: none;
  margin: 0;
  padding-top: 30px;
  position: relative;
  display: flex;
  justify-content: center;
}
.family-tree { padding-top: 0; }

.family-tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 30px 14px 0 14px;
}

/* connector lines */
.family-tree li::before,
.family-tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid var(--branch);
  width: 50%;
  height: 30px;
}
.family-tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--branch);
}
.family-tree li:only-child::after,
.family-tree li:only-child::before { display: none; }
.family-tree li:only-child { padding-top: 0; }
.family-tree li:first-child::before,
.family-tree li:last-child::after { border: 0 none; }
.family-tree li:last-child::before {
  border-right: 2px solid var(--branch);
  border-radius: 0 6px 0 0;
}
.family-tree li:first-child::after {
  border-radius: 6px 0 0 0;
}
.family-tree ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid var(--branch);
  width: 0;
  height: 30px;
}
.family-tree > li { padding-top: 0; }
.family-tree > li::before,
.family-tree > li::after { display: none; }

/* ===== couple + member card ===== */
.couple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 10px 14px;
}
.couple-link {
  color: var(--gold);
  font-size: 1.1rem;
}

.member-card {
  width: 108px;
}
.member-photo {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 6px;
  border: 3px solid var(--gold);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-card.male .member-photo { border-color: var(--male); }
.member-card.female .member-photo { border-color: var(--female); }

.member-name {
  font-weight: bold;
  font-size: 0.92rem;
  line-height: 1.15;
}
.member-relation {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--branch);
}
.member-years {
  font-size: 0.72rem;
  color: #6b6b6b;
}

/* ===== Add member form ===== */
.form-card {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 24px 28px;
}
.form-card label {
  display: block;
  margin: 14px 0 4px;
  font-weight: bold;
  font-size: 0.9rem;
}
.form-card input[type=text],
.form-card input[type=number],
.form-card select,
.form-card input[type=file] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #c9b98a;
  border-radius: 6px;
  background: #fffdf7;
  font-family: inherit;
}
.form-card .row { display: flex; gap: 14px; }
.form-card .row > div { flex: 1; }
.form-actions { margin-top: 20px; text-align: center; }
.msg {
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 10px 16px;
  border-radius: 8px;
}
.msg.success { background: #e3f3e0; border: 1px solid #7bb87b; }
.msg.error   { background: #fbe3e3; border: 1px solid #d97b7b; }