:root{
  --ink:#1f281c;
  --muted:#6f735f;
  --green:#344f2f;
  --green-2:#526a48;
  --sage:#dfe4d3;
  --cream:#f5f0e5;
  --paper:#fffdf7;
  --line:#d7d0c1;
  --shadow:0 4px 18px rgba(48,43,31,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.55;
}
.site-header{
  position:sticky; top:0; z-index:20;
  min-height:94px;
  display:flex; align-items:center; justify-content:space-between;
  gap:30px;
  padding:14px 28px;
  background:rgba(255,253,247,.97);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 9px rgba(40,35,25,.07);
}
.brand{display:flex;align-items:center;gap:14px;min-width:390px}
.brand-home{color:inherit;text-decoration:none}
.tree-mark{
  width:54px;height:60px;display:grid;place-items:center;
  color:var(--green);font-size:52px;line-height:1;
  transform:none;
}
.brand-title{font-size:34px;font-weight:700;line-height:1;color:#172016;letter-spacing:-.5px}
.brand-tagline{font-size:16px;font-style:italic;margin-top:6px}
.top-nav{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.top-nav a{
  color:#252b22;text-decoration:none;padding:27px 13px 22px;
  border-bottom:3px solid transparent;font-size:17px;
}
.top-nav a:hover,.top-nav a.active{color:var(--green);border-bottom-color:var(--green)}
.site-shell{display:grid;grid-template-columns:270px minmax(0,1fr);max-width:1600px;margin:0 auto}
.archive-sidebar{
  min-height:calc(100vh - 94px);
  padding:0 18px 32px;
  border-right:1px solid var(--line);
  background:#faf7ee;
}
.sidebar-heading{
  margin:0 -18px 18px;padding:13px 19px;
  background:var(--green);color:white;font-size:20px;font-weight:700;
}
.sidebar-all{
  display:flex;flex-direction:column;gap:2px;color:var(--ink);
  text-decoration:none;padding:2px 4px 14px;border-bottom:1px solid var(--line);
}
.sidebar-all span{font-size:14px;color:var(--muted)}
.sidebar-section-title{
  margin:20px 4px 8px;text-transform:uppercase;
  letter-spacing:.05em;font-size:13px;font-weight:700;color:#2b3527;
}
.decade-row,.year-link{
  display:flex;justify-content:space-between;gap:12px;
  padding:4px 5px;color:#3c4336;font-size:15px;
}
.decade-row{font-weight:700;margin-top:5px}
.year-link{text-decoration:none;padding-left:18px}
.year-link:hover{background:var(--sage);border-radius:4px;color:var(--green)}
.sidebar-nav{
  display:block;padding:5px;color:#35412f;text-decoration:none;
}
.sidebar-nav:hover{text-decoration:underline}
.sidebar-about{
  margin-top:28px;padding:15px 14px;background:#f8f4e9;
  border:1px solid var(--line);border-radius:6px;font-size:14px;
}
.sidebar-about p{margin:8px 0}
.heart-line{border-top:1px solid var(--line);padding-top:10px}
.archive-content{
  min-width:0;padding:28px 34px 50px;
  background:linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,.72));
}
.archive-content>section,.archive-heading{
  max-width:1250px;margin-left:auto;margin-right:auto;
}
.portrait-hero{
  display:grid;grid-template-columns:minmax(320px,560px) minmax(280px,1fr);
  gap:30px;align-items:center;
  padding:28px;background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow);border-radius:8px;margin-bottom:28px;
}
.portrait-wrap{text-align:center}
.portrait-wrap img{
  display:block;max-width:100%;max-height:610px;width:auto;height:auto;
  margin:0 auto;border:10px solid #fff;box-shadow:0 1px 8px rgba(0,0,0,.16);
}
.portrait-caption{text-align:left}
.portrait-caption h2{font-size:36px;margin:0 0 8px;color:#21331e}
.portrait-caption p{font-size:17px}
.story,.facts,#memories{
  background:var(--paper);border:1px solid var(--line);
  border-radius:7px;padding:25px 29px;margin:22px auto;box-shadow:0 2px 10px rgba(60,50,30,.05);
}
.story h2,.facts h2,#memories h2{font-size:30px;color:var(--green);margin-top:0}
.facts ul{padding-left:22px}
.archive-heading{border-top:1px solid var(--line);padding:34px 0 12px}
.archive-heading .eyebrow{text-transform:uppercase;letter-spacing:.13em;color:var(--green-2);font-size:13px;font-weight:700}
.archive-heading h2{font-size:38px;margin:4px 0 0}
.archive-heading p{margin:4px 0 0;color:var(--muted)}
#archive{max-width:1250px}
.year-section{
  margin:30px 0 44px;padding-top:8px;
}
.year-section>h2{
  margin:0 0 14px;padding-bottom:8px;
  color:#24351f;font-size:31px;border-bottom:1px solid var(--line);
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.photo-card{
  margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:7px;overflow:hidden;box-shadow:0 2px 8px rgba(50,40,20,.08);
  transition:transform .15s ease,box-shadow .15s ease;
}
.photo-card:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(50,40,20,.13)}
.photo-card img{
  display:block;width:100%;height:300px;object-fit:contain;
  background:#ece8df;cursor:zoom-in;
}
.photo-meta{padding:14px 15px 15px}
.photo-date{font-weight:700;color:#263d23;margin-bottom:6px}
.photo-identification{font-size:15px;line-height:1.45;color:#30332c}
.photo-filename,.photo-file{font-size:12px;color:#7d7a70;margin-top:9px;word-break:break-all}
#lightbox{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(15,18,13,.94);align-items:center;justify-content:center;padding:36px;
}
#lightbox.open{display:flex}
#lightbox img{max-width:95vw;max-height:92vh;object-fit:contain;box-shadow:0 8px 30px #000}
#close{position:absolute;right:24px;top:14px;color:white;font-size:42px;cursor:pointer}
footer{
  padding:18px;text-align:center;background:#e8e7da;border-top:1px solid #c9c7b8;
  color:#4f5448;font-size:14px;
}
@media(max-width:1120px){
  .site-header{position:relative;align-items:flex-start}
  .brand{min-width:0}
  .brand-title{font-size:28px}
  .site-shell{grid-template-columns:220px minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portrait-hero{grid-template-columns:1fr}
  .portrait-caption{text-align:center}
}
@media(max-width:760px){
  .site-header{display:block;padding:15px 18px}
  .brand{margin-bottom:10px}
  .top-nav{justify-content:flex-start}
  .top-nav a{padding:9px 9px 7px}
  .site-shell{display:block}
  .archive-sidebar{min-height:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:16px}
  .archive-sidebar .decade-row,.archive-sidebar .year-link{display:none}
  .sidebar-section-title{display:none}
  .sidebar-about{display:none}
  .sidebar-nav{display:inline-block}
  .archive-content{padding:20px 14px 40px}
  .gallery{grid-template-columns:1fr}
  .photo-card img{height:auto;max-height:520px}
  .portrait-hero{padding:16px}
}

.filter-link{
  width:100%;display:flex;justify-content:space-between;gap:10px;
  padding:5px 6px;border:0;background:none;color:#35412f;
  font:inherit;text-align:left;cursor:pointer;border-radius:4px;
}
.filter-link:hover{background:var(--sage)}
.active-filter{
  max-width:1250px;margin:0 auto 18px;padding:10px 14px;
  background:#e7ebdc;border:1px solid #cbd3bd;border-radius:6px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.active-filter button{
  border:1px solid var(--green);background:white;color:var(--green);
  padding:6px 10px;border-radius:4px;cursor:pointer;
}
.photo-card.filtered-out{display:none}
.photo-detail{
  position:fixed;top:0;right:-760px;width:min(760px,96vw);height:100vh;z-index:120;
  background:#f9f6ec;border-left:1px solid #cfc8b8;box-shadow:-12px 0 35px rgba(0,0,0,.22);
  overflow:auto;transition:right .22s ease;
}
.photo-detail.open{right:0}
.detail-close{
  position:sticky;top:12px;float:right;margin:12px 16px 0 0;z-index:3;
  width:42px;height:42px;border-radius:50%;border:1px solid #b7b0a2;
  background:#fff;color:#253220;font-size:30px;line-height:1;cursor:pointer;
}
.detail-image-wrap{background:#e6e1d7;padding:26px 26px 14px;clear:both;text-align:center}
.detail-image-wrap img{max-width:100%;max-height:55vh;object-fit:contain;background:white;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.detail-body{padding:24px 30px 38px}
.detail-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--green-2);font-weight:700}
.detail-body h2{margin:4px 0 10px;font-size:28px;color:var(--green)}
.detail-meta{margin:22px 0;border-top:1px solid var(--line)}
.detail-meta>div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.detail-meta dt{font-weight:700;color:#47513f}
.detail-meta dd{margin:0}
.detail-subhead{font-size:18px;font-weight:700;color:var(--green);margin:22px 0 9px}
.tag-list{display:flex;flex-wrap:wrap;gap:7px}
.tag-chip{
  border:1px solid #b8c2ad;background:#edf0e6;color:#364330;
  padding:5px 9px;border-radius:16px;font-size:13px;cursor:pointer;
}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.related-item{border:1px solid var(--line);background:#fff;padding:7px;cursor:pointer;border-radius:5px}
.related-item img{width:100%;height:120px;object-fit:contain;background:#ece8df}
.related-item div{font-size:12px;margin-top:5px;color:#4d5147}
.photo-card img{cursor:pointer}
@media(max-width:760px){
  .photo-detail{width:100vw}
  .detail-meta>div{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr 1fr}
}

.people-hub{background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:25px 29px;margin:22px auto;box-shadow:0 2px 10px rgba(60,50,30,.05)}
.people-hub h2{font-size:30px;color:var(--green);margin:3px 0 6px}
.people-home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.person-home-card{min-height:282px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#f9f6ed;border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:0 2px 8px rgba(50,40,20,.08)}
.person-home-card:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(50,40,20,.13)}
.person-home-photo{height:190px;background:#e8e3d9;display:flex;align-items:center;justify-content:center}
.person-home-photo img{width:100%;height:100%;object-fit:contain}
.person-home-copy{flex:1;padding:12px 13px;display:flex;flex-direction:column}
.person-home-copy strong{font-size:19px;color:var(--green)}
.person-home-copy span{font-size:13px;color:var(--muted);margin-top:2px}
.person-home-copy .person-home-relation{color:#4d5748;font-weight:700}
.person-home-copy .person-home-count{margin-top:auto;padding-top:7px}
.person-hero{display:grid;grid-template-columns:minmax(260px,430px) 1fr;gap:30px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:28px;box-shadow:var(--shadow);margin-bottom:28px}
.person-hero-photo{text-align:center}
.person-hero-photo img{max-width:100%;max-height:500px;object-fit:contain;border:9px solid white;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.person-hero-copy h1{font-size:38px;color:var(--green);margin:4px 0 4px}
.person-subtitle{font-size:18px;font-style:italic;color:#606758}
.person-count{display:inline-block;margin-top:12px;padding:7px 10px;background:var(--sage);border-radius:5px;font-weight:700;color:#34422f}
.embedded-archive{margin-top:34px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px;box-shadow:var(--shadow);scroll-margin-top:18px}
.embedded-archive-heading{margin-bottom:16px}
.embedded-archive-heading h2{margin:4px 0 6px;color:var(--green);font-size:30px}
.embedded-archive-heading p{margin:0;color:var(--muted)}
.embedded-archive-content{min-height:260px}
.embedded-archive-content .archive-shell{margin-top:0}
.embedded-archive-loading{padding:30px;text-align:center;color:var(--muted)}
.embedded-archive-error{padding:20px;border:1px solid #b66;background:#fff5f3;color:#743b32;border-radius:6px}
@media(max-width:950px){.people-home-grid{grid-template-columns:repeat(2,1fr)}.person-hero{grid-template-columns:1fr}.person-hero-copy{text-align:center}}
@media(max-width:560px){.people-home-grid{grid-template-columns:1fr}}

.tree-page{background:#f3efe4}
.tree-main{max-width:1500px;margin:0 auto;padding:38px 28px 60px}
.archive-community-areas{display:grid;gap:22px;margin:42px auto 26px;max-width:1440px}
.archive-community-section{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px;box-shadow:var(--shadow);scroll-margin-top:18px}
.archive-community-heading{margin-bottom:18px}
.archive-community-heading h2{margin:3px 0 6px;color:var(--green);font-size:30px}
.archive-community-heading p{margin:0;max-width:850px;color:var(--muted)}
.archive-community-grid{display:grid;gap:12px}
.archive-community-grid-eight{grid-template-columns:repeat(8,minmax(0,1fr))}
.archive-community-couple{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:4px;align-items:stretch}
.archive-community-marriage{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--green);font-size:10px;line-height:1.1;text-align:center}
.archive-community-marriage span{font-size:21px;color:#9b4047}
.tree-grandparents .tree-person{min-height:390px !important;height:390px !important}
.archive-community-placeholder{grid-column:1/-1;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:18px;border:2px dashed #b8b7a8;border-radius:8px;background:#f8f5ec;color:var(--muted)}
.archive-community-placeholder strong{color:var(--green);font-size:18px}
.archive-community-mark{display:grid;place-items:center;width:42px;height:42px;margin-bottom:3px;border-radius:50%;background:var(--sage);color:var(--green);font-weight:800;letter-spacing:.05em}
.archive-community-card{min-width:0;min-height:250px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 10px 12px;border:1px solid var(--line);border-radius:9px;background:#fbf8f0;color:var(--ink);text-decoration:none;box-shadow:0 3px 10px rgba(50,40,20,.08)}
a.archive-community-card{transition:transform .16s,border-color .16s,box-shadow .16s}
a.archive-community-card:hover,a.archive-community-card:focus-visible{transform:translateY(-2px);border-color:#8f9d83;box-shadow:0 6px 16px rgba(50,40,20,.14)}
.archive-community-card .archive-community-mark{flex:0 0 auto;width:48px;height:48px;margin-bottom:8px;font-size:15px}
.archive-community-photo{width:100%;height:112px;margin-bottom:9px;overflow:hidden;border-radius:7px;background:#e8e3d9}
.archive-community-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.archive-community-photo-andrew img{object-position:12% 28%}
.archive-community-photo-katie img{object-position:center 24%}
.archive-community-photo-contain img{object-fit:contain;object-position:center}
.archive-community-photo-will img{object-position:center 6%}
.archive-community-photo-tammy img{object-position:76% 24%}
.archive-community-photo-patsy img{object-position:30% 35%}
.archive-community-photo-suade img{object-position:28% 35%}
#extended-family .archive-community-photo img,
#family-friends .archive-community-photo img,
#family-pets .archive-community-photo img,
#fallen-first-responders .archive-community-photo img{cursor:zoom-in}
.archive-community-name{margin:0;color:var(--green);font-family:Georgia,serif;font-size:16px;line-height:1.18;overflow-wrap:normal;word-break:normal;hyphens:none}
.archive-community-card .tree-vitals{min-height:0 !important;margin:8px 0 0;padding:0 !important;font-size:11px !important;line-height:1.35 !important}
.archive-community-note,.archive-community-cod{margin:8px 0 0;color:#514b42;font-size:10.5px;line-height:1.35;overflow-wrap:anywhere}
.archive-community-cod{color:#6a403a}
.archive-community-count{width:100%;margin-top:auto;padding-top:10px;color:var(--muted);font-size:10.5px;font-weight:700;line-height:1.25}
.archive-community-count-link{text-decoration:underline;text-underline-offset:2px}
.archive-community-pet{min-height:300px}
@media(max-width:1150px){.archive-community-grid-eight{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.archive-community-grid-eight{grid-template-columns:repeat(2,minmax(0,1fr))}.archive-community-section{padding:18px}.archive-community-card{min-height:235px}.archive-community-pet{min-height:270px}}
@media(max-width:440px){.archive-community-grid-eight{grid-template-columns:1fr}.archive-community-couple{grid-column:span 1}.archive-community-marriage{padding:0}}
.tree-intro{text-align:center;max-width:800px;margin:0 auto 34px}
.tree-intro h1{font-size:48px;color:var(--green);margin:5px 0 6px}
.family-tree{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.tree-generation{display:flex;align-items:stretch;justify-content:center;gap:28px;flex-wrap:wrap;position:relative;z-index:2}
.tree-person{width:210px;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px rgba(50,40,20,.10);overflow:hidden;text-align:center;transition:.16s}
.tree-person.not-living,.archive-community-card.not-living{background:#fef3f3}
.tree-person:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(50,40,20,.16);border-color:#aeb9a2}
.tree-photo{height:180px;background:#e8e3d9;display:flex;align-items:center;justify-content:center}
.tree-photo img{width:100%;height:100%;object-fit:contain}
.tree-name{font-size:22px;color:var(--green);font-weight:700;padding:11px 10px 0}
.tree-relation{font-size:14px;color:#686c5e;padding:2px 10px}
.tree-count{font-size:12px;color:#888477;padding:4px 10px 12px}
.tree-connector.marriage{align-self:center;font-size:24px;color:#6c4f43}
.tree-line.vertical{width:2px;height:42px;background:#8d9b82}
.tree-line.vertical.short{height:28px}
.tree-note{max-width:800px;margin:40px auto 0;background:var(--paper);border:1px solid var(--line);padding:22px 26px;border-radius:8px;text-align:center}
.tree-note h2{color:var(--green);margin-top:0}
@media(max-width:700px){.tree-person{width:160px}.tree-photo{height:145px}.tree-intro h1{font-size:38px}}

.branched-tree{gap:0}.tree-trunk{width:2px;height:46px;background:#8d9b82}
.sibling-branches{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:42px;position:relative;padding-top:35px}
.sibling-branches:before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;background:#8d9b82}
.family-branch{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 12px 28px;background:rgba(255,253,247,.45);border-radius:10px}
.family-branch:before{content:"";position:absolute;top:-35px;left:50%;width:2px;height:35px;background:#8d9b82}
.branch-title{font-size:23px;font-weight:700;color:var(--green);margin-bottom:18px}
.couple-row,.children-row{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}
.branch-line{width:2px;height:34px;background:#8d9b82;margin:8px auto}.branch-line.short{height:24px}
@media(max-width:1000px){.sibling-branches{grid-template-columns:1fr}.sibling-branches:before{display:none}.family-branch:before{display:none}}

.descendant-branches{align-items:flex-start;gap:40px}
.descendant-branch{display:flex;flex-direction:column;align-items:center}
.great-grandchildren-row{display:flex;justify-content:center;align-items:flex-start;gap:14px;flex-wrap:wrap}
.descendant-person{width:180px}
.descendant-person .tree-photo{height:145px}
@media(max-width:700px){.descendant-branches{gap:22px}.descendant-person{width:150px}}

.tree-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tree-vitals{font-size:.82rem;line-height:1.35;margin-top:4px;color:#4b443b}
.tree-vitals span{display:block}

.tree-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tree-vitals{font-size:12px;line-height:1.4;color:#4f5048;padding:5px 9px 1px}
.tree-vitals span{display:block}
.couple-row{position:relative;padding-top:26px}
.marriage-date{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:700;color:#59654f;background:#f3efe4;padding:2px 8px;border-radius:10px}

.tree-grandparents{position:relative;padding-top:26px}.grandparent-marriage{top:0}


/* Compact side-by-side family tree layout */
@media (min-width: 900px){
  .tree-main{max-width:1400px;margin:0 auto;padding-left:18px;padding-right:18px}
  .family-tree{width:100%;max-width:1360px;margin-left:auto;margin-right:auto}
  .sibling-branches{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:18px !important;
    align-items:start !important;
  }
  .family-branch{min-width:0 !important;width:auto !important}
  .tree-person{min-width:0 !important;max-width:190px !important}
  .tree-photo{width:105px !important;height:105px !important;margin-left:auto !important;margin-right:auto !important}
  .tree-name{font-size:15px !important}
  .tree-vitals{font-size:11px !important;line-height:1.3 !important}
  .tree-relation,.tree-count{font-size:11px !important}
  .couple-row,.children-row,.great-grandchildren-row{
    gap:10px !important;
    justify-content:center !important;
  }
  .descendant-branches{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
  }
  .descendant-branch{min-width:0 !important}
  .marriage-date{font-size:11px !important}
}
/* On narrower screens return to a readable single-column tree. */
@media (max-width:899px){
  .sibling-branches{display:block !important}
  .family-branch{margin-bottom:28px}
}



/* Tune portrait crop positions where faces need different framing */
.tree-person[href="spooky.html"] .tree-photo img{
  object-position:center 12% !important;
}
.tree-person[href="buster.html"] .tree-photo img,
.tree-person[href="alma.html"] .tree-photo img,
.tree-person[href="heather.html"] .tree-photo img,
.tree-person[href="rickey.html"] .tree-photo img,
.tree-person[href="stephanie.html"] .tree-photo img{
  object-position:center 22% !important;
}
.tree-person.descendant-person{
  width:165px !important;
  min-height:285px !important;
  height:285px !important;
}
.tree-person.descendant-person .tree-photo{
  height:135px !important;
  min-height:135px !important;
}

@media(max-width:700px){
  .tree-person{
    width:165px !important;
    min-height:300px !important;
    height:300px !important;
  }
  .tree-photo{
    height:135px !important;
    min-height:135px !important;
  }
  .tree-person.descendant-person{
    width:150px !important;
    min-height:270px !important;
    height:270px !important;
  }
}


/* Consistent family-tree cards and improved portrait framing */
.tree-person{
  display:flex !important;
  flex-direction:column !important;
  width:190px !important;
  min-height:345px !important;
  height:345px !important;
}
.tree-photo{
  width:100% !important;
  height:160px !important;
  min-height:160px !important;
  overflow:hidden !important;
  background:#e8e3d9 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.tree-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 20% !important;
  display:block !important;
}
.tree-name{
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:8px 8px 2px !important;
}
.tree-vitals{
  min-height:54px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding:5px 8px 0 !important;
}
.tree-relation{
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:4px 8px !important;
  overflow:visible !important;
  line-height:1.25 !important;
}
.tree-count{
  margin-top:auto !important;
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:4px 8px 10px !important;
}

/* Face crop tuning: show more headroom for portraits that were cropped too tightly */
.tree-person[href="spooky.html"] .tree-photo img{
  object-position:center 5% !important;
}
.tree-person[href="heather.html"] .tree-photo img{
  object-position:center 7% !important;
}
.tree-person[href="stephanie.html"] .tree-photo img{
  object-position:center 6% !important;
}

/* Other adults use a slightly higher crop, but not as aggressive */
.tree-person[href="buster.html"] .tree-photo img,
.tree-person[href="alma.html"] .tree-photo img,
.tree-person[href="rickey.html"] .tree-photo img,
.tree-person[href="sonja.html"] .tree-photo img{
  object-position:center 14% !important;
}

/* Descendant cards need enough height to show the full relationship text */
.tree-person.descendant-person{
  width:170px !important;
  min-height:315px !important;
  height:315px !important;
}
.tree-person.descendant-person .tree-photo{
  height:135px !important;
  min-height:135px !important;
}
.tree-person.descendant-person .tree-relation{
  min-height:54px !important;
  padding:5px 8px !important;
  white-space:normal !important;
}
.tree-person.descendant-person .tree-count{
  min-height:42px !important;
  white-space:normal !important;
}

/* Explicitly keep Sophia, Olivia and Ivy text visible */
.great-grandchildren-row .tree-person{
  overflow:visible !important;
}
.great-grandchildren-row .tree-relation,
.great-grandchildren-row .tree-count{
  overflow:visible !important;
  text-overflow:clip !important;
}

@media(max-width:700px){
  .tree-person{
    width:165px !important;
    min-height:325px !important;
    height:325px !important;
  }
  .tree-photo{
    height:140px !important;
    min-height:140px !important;
  }
  .tree-person.descendant-person{
    width:155px !important;
    min-height:300px !important;
    height:300px !important;
  }
}


.tree-person[href="dickey.html"] .tree-photo img{
  object-position:center 12% !important;
}

/* Vitals visibility correction */
.tree-vitals{
  display:block !important;
  min-height:58px !important;
  height:auto !important;
  overflow:visible !important;
  text-align:center !important;
  padding:5px 7px !important;
  box-sizing:border-box !important;
}
.tree-vitals span{
  display:block !important;
  white-space:normal !important;
  overflow:visible !important;
  line-height:1.25 !important;
}


/* Bell family relationship tree clean layout v4 */
.dickey-family-branch-v3{
  width:min(1280px,100%);
  margin:0 auto;
  padding:0 28px 36px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.dickey-family-branch-v3 .branch-title{
  margin:0 -28px 26px;
  padding:14px 20px;
  text-align:center;
  background:var(--paper);
  border-bottom:0;
  font-size:24px;
  font-weight:700;
  color:var(--green);
}
.dickey-top-row{
  display:grid;
  grid-template-columns:210px 90px 210px 90px 210px;
  gap:18px;
  justify-content:center;
  align-items:center;
}
.relationship-marker{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:3px;
  min-width:80px;
}
.relationship-symbol{font-size:36px;line-height:1;font-weight:700}
.heart-symbol{color:#a2364b}
.x-symbol{color:#6a4b44;font-size:40px}
.relationship-text{font-size:12px;line-height:1.25}
.relationship-text strong,.relationship-text span{display:block}
.tree-person-static{cursor:default}
.tree-photo-placeholder{
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ece7dc;
  color:var(--muted);
  font-size:13px;
  font-style:italic;
  text-align:center;
}
.parent-line{
  position:relative;
  width:820px;
  height:62px;
  margin:0 auto;
}
.parent-line-left{
  position:absolute;left:16px;top:14px;width:2px;height:24px;background:#7b8971;
}
.parent-line-right{
  position:absolute;right:16px;top:14px;width:2px;height:24px;background:#7b8971;
}
.parent-line::before{
  content:"";position:absolute;left:16px;right:16px;top:37px;height:2px;background:#7b8971;
}
.parent-line-down{
  position:absolute;left:50%;top:37px;width:2px;height:25px;background:#7b8971;
}
.parentage-caption{
  text-align:center;margin:-2px 0 18px;color:var(--muted);font-size:12px;font-style:italic;
}
.rickey-stephanie-row{
  display:grid;
  grid-template-columns:210px 95px 210px;
  gap:22px;
  justify-content:center;
  align-items:center;
}
.children-line{
  position:relative;
  width:610px;
  height:64px;
  margin:0 auto;
}
.children-line::before{
  content:"";position:absolute;left:50%;top:0;width:2px;height:30px;background:#7b8971;
}
.children-line::after{
  content:"";position:absolute;left:25%;right:25%;top:30px;height:2px;background:#7b8971;
}
.children-generation-row{
  display:grid;
  grid-template-columns:360px 620px;
  gap:80px;
  align-items:start;
  justify-content:center;
}
.child-family{display:flex;justify-content:center}
.jarred-dominique-row{
  display:grid;
  grid-template-columns:210px 100px 210px;
  gap:18px;
  align-items:center;
  justify-content:center;
}
.grandchildren-row{
  position:relative;
  display:grid;
  grid-template-columns:210px 210px 210px;
  gap:42px;
  justify-content:center;
  align-items:start;
  margin-top:78px;
}
.grandchildren-row::before{
  content:"";position:absolute;left:14%;right:14%;top:-42px;height:2px;background:#7b8971;
}
.grandchildren-row > .tree-person{position:relative}
.grandchildren-row > .tree-person::before{
  content:"";position:absolute;left:50%;top:-42px;width:2px;height:42px;background:#7b8971;
}
.grandchildren-row > .tree-person::after{
  content:"";position:absolute;left:50%;top:-78px;width:2px;height:36px;background:#7b8971;
}

@media(max-width:1180px){
  .dickey-family-branch-v3{padding-left:18px;padding-right:18px}
  .dickey-family-branch-v3 .branch-title{margin-left:-18px;margin-right:-18px}
  .children-generation-row{grid-template-columns:300px 560px;gap:40px}
  .jarred-dominique-row{grid-template-columns:200px 90px 200px;gap:12px}
}
@media(max-width:930px){
  .dickey-top-row{
    grid-template-columns:210px 70px 210px;
    grid-template-areas:"dickey heart sonja" "dickey ex debbie";
  }
  .dickey-top-row > :nth-child(1){grid-area:dickey}
  .dickey-top-row > :nth-child(2){grid-area:heart}
  .dickey-top-row > :nth-child(3){grid-area:sonja}
  .dickey-top-row > :nth-child(4){grid-area:ex}
  .dickey-top-row > :nth-child(5){grid-area:debbie}
  .parent-line{display:none}
  .children-generation-row{display:flex;flex-direction:column;align-items:center;gap:44px}
  .grandchildren-row{grid-template-columns:repeat(2,210px)}
}
@media(max-width:650px){
  .dickey-top-row,.rickey-stephanie-row,.jarred-dominique-row{
    display:flex;flex-direction:column;align-items:center;
  }
  .children-line,.grandchildren-row::before,.grandchildren-row > .tree-person::before,.grandchildren-row > .tree-person::after{
    display:none;
  }
  .grandchildren-row{grid-template-columns:210px;margin-top:36px}
}


/* Bell family relationship tree compact layout v5 */

.dickey-family-branch-v3{
  width:100%;
  max-width:1000px;
  padding-left:20px;
  padding-right:20px;
}
.dickey-family-branch-v3 .branch-title{
  margin-left:-20px;
  margin-right:-20px;
}

.dickey-family-branch-v3 .tree-person{
  width:185px;
}
.dickey-family-branch-v3 .tree-photo{
  height:155px;
}
.dickey-family-branch-v3 .tree-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.dickey-family-branch-v3 .tree-name{
  font-size:16px;
}
.dickey-family-branch-v3 .tree-vitals,
.dickey-family-branch-v3 .tree-relation,
.dickey-family-branch-v3 .tree-count{
  font-size:11px;
}

.dickey-top-row{
  grid-template-columns:185px 60px 185px 60px 185px;
  gap:10px;
}
.relationship-marker{
  min-width:54px;
}
.relationship-symbol{
  font-size:31px;
}
.x-symbol{
  font-size:34px;
}
.relationship-text{
  font-size:11px;
}

.parent-line{
  width:700px;
}

.rickey-stephanie-row{
  grid-template-columns:185px 65px 185px;
  gap:12px;
}

.children-line{
  width:500px;
}
.children-generation-row{
  grid-template-columns:260px 500px;
  gap:28px;
}
.jarred-dominique-row{
  grid-template-columns:185px 70px 185px;
  gap:10px;
}

.grandchildren-row{
  grid-template-columns:repeat(3,185px);
  gap:24px;
  margin-top:66px;
}

.sibling-branches{
  width:100%;
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
  gap:18px;
  align-items:flex-start;
}
.sibling-branches > .family-branch:first-child{
  flex:0 1 540px;
  max-width:540px;
}
.sibling-branches > .dickey-family-branch-v3{
  flex:1 1 900px;
  min-width:0;
}

@media(max-width:1450px){
  .sibling-branches{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .sibling-branches > .family-branch:first-child,
  .sibling-branches > .dickey-family-branch-v3{
    width:min(100%,1000px);
    max-width:1000px;
  }
}

@media(max-width:1000px){
  .dickey-top-row{
    grid-template-columns:185px 55px 185px;
  }
  .parent-line{
    display:none;
  }
  .children-generation-row{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
}


/* Bell family explicit lineage lines v8 */

.lineage-rickey-children{
  position:relative;
  width:814px;
  height:68px;
  margin:0 auto;
}
.lineage-rickey-children .line-down-from-parents{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:30px;
  background:#74826c;
}
.lineage-rickey-children .line-horizontal{
  position:absolute;
  left:140px;
  right:250px;
  top:29px;
  height:2px;
  background:#74826c;
}
.lineage-rickey-children .line-down-samatha{
  position:absolute;
  left:140px;
  top:29px;
  width:2px;
  height:39px;
  background:#74826c;
}
.lineage-rickey-children .line-down-jarred{
  position:absolute;
  left:564px;
  top:29px;
  width:2px;
  height:39px;
  background:#74826c;
}

.children-generation-row.lineage-children-row{
  display:grid;
  grid-template-columns:280px 500px;
  gap:34px;
  justify-content:center;
  align-items:start;
}
.lineage-family{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.samatha-sophia-line{
  width:2px;
  height:64px;
  background:#74826c;
  margin:0 auto;
}

.jarred-dom-children-line{
  position:relative;
  width:394px;
  height:64px;
  margin:0 auto;
}
.jarred-dom-children-line .couple-mid{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:31px;
  background:#74826c;
}
.jarred-dom-children-line .couple-horizontal{
  position:absolute;
  left:92px;
  right:92px;
  top:30px;
  height:2px;
  background:#74826c;
}
.jarred-dom-children-line .olivia-stem{
  position:absolute;
  left:92px;
  top:30px;
  width:2px;
  height:34px;
  background:#74826c;
}
.jarred-dom-children-line .ivy-stem{
  position:absolute;
  right:92px;
  top:30px;
  width:2px;
  height:34px;
  background:#74826c;
}

.jarred-children-row{
  display:grid;
  grid-template-columns:185px 185px;
  gap:24px;
  justify-content:center;
  align-items:start;
}

.samatha-family > .descendant-person,
.jarred-children-row > .descendant-person{
  margin-top:0;
}

.jarred-dominique-row{
  grid-template-columns:185px 62px 185px !important;
  gap:8px !important;
}
.jarred-dom-marker{
  min-width:58px !important;
}

.grandchildren-row,
.grandchildren-row::before,
.grandchildren-row > .tree-person::before,
.grandchildren-row > .tree-person::after,
.single-parent-connector,
.couple-children-connector{
  display:none !important;
}

@media(max-width:1000px){
  .lineage-rickey-children{display:none}
  .children-generation-row.lineage-children-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:44px;
  }
}


/* Bell family child-line trim v9 */

/* Stop Rickey + Stephanie's horizontal child line at Jarred's stem.
   This removes the stray segment extending to the right of Jarred. */
.lineage-rickey-children .line-horizontal{
  left:140px !important;
  right:auto !important;
  width:424px !important;
}


/* Definitive lineage connector cleanup v10 */

.children-line::before,
.children-line::after{
  content:none !important;
  display:none !important;
}

.lineage-rickey-children{
  position:relative !important;
  width:814px !important;
  height:68px !important;
  margin:0 auto !important;
}
.lineage-rickey-children .line-down-from-parents{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:2px !important;
  height:30px !important;
  background:#74826c !important;
}
.lineage-rickey-children .line-horizontal{
  display:block !important;
  position:absolute !important;
  left:140px !important;
  top:29px !important;
  width:424px !important;
  height:2px !important;
  background:#74826c !important;
}
.lineage-rickey-children .line-down-samatha{
  display:block !important;
  position:absolute !important;
  left:140px !important;
  top:29px !important;
  width:2px !important;
  height:39px !important;
  background:#74826c !important;
}
.lineage-rickey-children .line-down-jarred{
  display:block !important;
  position:absolute !important;
  left:564px !important;
  top:29px !important;
  width:2px !important;
  height:39px !important;
  background:#74826c !important;
}

.samatha-sophia-line{
  display:block !important;
  width:2px !important;
  height:64px !important;
  margin:0 auto !important;
  background:#74826c !important;
}

.jarred-dom-children-line{
  display:block !important;
  position:relative !important;
  width:394px !important;
  height:64px !important;
  margin:0 auto !important;
}
.jarred-dom-children-line .couple-mid{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:2px !important;
  height:31px !important;
  background:#74826c !important;
}
.jarred-dom-children-line .couple-horizontal{
  display:block !important;
  position:absolute !important;
  left:92px !important;
  right:92px !important;
  top:30px !important;
  height:2px !important;
  background:#74826c !important;
}
.jarred-dom-children-line .olivia-stem{
  display:block !important;
  position:absolute !important;
  left:92px !important;
  top:30px !important;
  width:2px !important;
  height:34px !important;
  background:#74826c !important;
}
.jarred-dom-children-line .ivy-stem{
  display:block !important;
  position:absolute !important;
  right:92px !important;
  top:30px !important;
  width:2px !important;
  height:34px !important;
  background:#74826c !important;
}

.grandchildren-row::before,
.grandchildren-row > .tree-person::before,
.grandchildren-row > .tree-person::after,
.jarred-children-row > .tree-person::before,
.jarred-children-row > .tree-person::after,
.samatha-family > .tree-person::before,
.samatha-family > .tree-person::after{
  content:none !important;
  display:none !important;
}


/* Bell family lineage bars v11 */

.children-line::before,
.children-line::after,
.lineage-rickey-children .line-down-from-parents,
.lineage-rickey-children .line-horizontal,
.lineage-rickey-children .line-down-samatha,
.lineage-rickey-children .line-down-jarred,
.jarred-dom-children-line .couple-mid,
.jarred-dom-children-line .couple-horizontal,
.grandchildren-row::before,
.grandchildren-row > .tree-person::before,
.grandchildren-row > .tree-person::after,
.jarred-children-row > .tree-person::before,
.jarred-children-row > .tree-person::after{
  content:none !important;
  display:none !important;
}

.lineage-couple-children{
  position:relative !important;
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.lineage-couple-children .parent-stem,
.lineage-couple-children .child-stem,
.lineage-couple-children .family-bar{
  display:block !important;
  position:absolute !important;
  background:#74826c !important;
}

.lineage-rickey-children{
  width:814px !important;
  height:72px !important;
}
.lineage-rickey-children .family-bar{
  left:140px !important;
  top:30px !important;
  width:404px !important;
  height:2px !important;
}
.lineage-rickey-children .rickey-stem{
  left:270px !important;
  top:0 !important;
  width:2px !important;
  height:32px !important;
}
.lineage-rickey-children .stephanie-stem{
  left:544px !important;
  top:0 !important;
  width:2px !important;
  height:32px !important;
}
.lineage-rickey-children .samatha-stem{
  left:140px !important;
  top:30px !important;
  width:2px !important;
  height:42px !important;
}
.lineage-rickey-children .jarred-stem{
  left:433px !important;
  top:30px !important;
  width:2px !important;
  height:42px !important;
}

.samatha-sophia-line{
  display:block !important;
  width:2px !important;
  height:64px !important;
  margin:0 auto !important;
  background:#74826c !important;
}

.jarred-dom-children-line{
  width:500px !important;
  height:72px !important;
}
.jarred-dom-children-line .family-bar{
  left:119px !important;
  top:30px !important;
  width:263px !important;
  height:2px !important;
}
.jarred-dom-children-line .jarred-parent-stem{
  left:119px !important;
  top:0 !important;
  width:2px !important;
  height:32px !important;
}
.jarred-dom-children-line .dominique-parent-stem{
  left:382px !important;
  top:0 !important;
  width:2px !important;
  height:32px !important;
}
.jarred-dom-children-line .olivia-stem{
  left:146px !important;
  top:30px !important;
  width:2px !important;
  height:42px !important;
}
.jarred-dom-children-line .ivy-stem{
  left:355px !important;
  top:30px !important;
  width:2px !important;
  height:42px !important;
}

@media(max-width:1000px){
  .lineage-rickey-children{
    display:none !important;
  }
}

/* Disable the previous generic trunk/branch pseudo-lines for these two areas. */
.tree-trunk,
.spooky-helen-child-line::before,
.spooky-helen-child-line::after{
  background:none !important;
  border:0 !important;
}

/* ------------------------------------------------------------
   Buster + Alma -> Spooky and Dickey
   One shared family bar, with separate parent and child stems.
   ------------------------------------------------------------ */
.ancestor-children-line{
  position:relative;
  display:block;
  width:min(1180px,92vw);
  height:82px;
  margin:-2px auto 0;
}
.ancestor-children-line span{
  position:absolute;
  display:block;
  background:#74826c;
}
.ancestor-bar{
  left:8%;
  right:8%;
  top:34px;
  height:2px;
}
.buster-parent{
  left:39%;
  top:0;
  width:2px;
  height:36px;
}
.alma-parent{
  left:59%;
  top:0;
  width:2px;
  height:36px;
}
.spooky-child{
  left:16%;
  top:34px;
  width:2px;
  height:48px;
}
.dickey-child{
  left:73%;
  top:34px;
  width:2px;
  height:48px;
}

/* ------------------------------------------------------------
   Spooky + Helen -> Heather
   ------------------------------------------------------------ */
.spooky-helen-child-line{
  position:relative;
  display:block;
  width:410px;
  height:72px;
  margin:0 auto;
}
.spooky-helen-child-line span{
  position:absolute;
  display:block;
  background:#74826c;
}
.spooky-family-bar{
  left:75px;
  right:75px;
  top:30px;
  height:2px;
}
.spooky-parent{
  left:105px;
  top:0;
  width:2px;
  height:32px;
}
.helen-parent{
  right:105px;
  top:0;
  width:2px;
  height:32px;
}
.heather-child{
  left:50%;
  top:30px;
  width:2px;
  height:42px;
}

/* Make sure the upper connector does not create horizontal overflow. */
.family-tree,
.sibling-branches{
  overflow:visible;
}
@media(max-width:1000px){
  .ancestor-children-line{
    width:92%;
  }
}

/* Same heart-marker look for all couple relationships. */
.grandparent-heart,
.spooky-heart{
  min-width:72px;
}

/* Buster + Alma -> Spooky and Dickey.
   One vertical line from the center of the couple heart to a shared sibling bar. */
.ancestor-center-v14{
  position:relative !important;
  width:min(1180px,92vw) !important;
  height:82px !important;
  margin:0 auto !important;
}
.ancestor-center-v14 span{
  position:absolute !important;
  display:block !important;
  background:#74826c !important;
}
.ancestor-center-v14 .ancestor-couple-down{
  left:50% !important;
  top:0 !important;
  width:2px !important;
  height:32px !important;
}
.ancestor-center-v14 .ancestor-family-bar{
  left:14% !important;
  right:14% !important;
  top:31px !important;
  height:2px !important;
}
.ancestor-center-v14 .ancestor-spooky-down{
  left:22% !important;
  top:31px !important;
  width:2px !important;
  height:51px !important;
}
.ancestor-center-v14 .ancestor-dickey-down{
  left:73% !important;
  top:31px !important;
  width:2px !important;
  height:51px !important;
}

/* Remove old upper-line attempts. */
.ancestor-children-line::before,
.ancestor-children-line::after,
.tree-trunk{
  content:none !important;
  display:none !important;
}

/* Spooky + Helen -> Heather.
   One vertical from the relationship heart center to a short family bar. */
.spooky-center-v14{
  position:relative !important;
  width:390px !important;
  height:72px !important;
  margin:0 auto !important;
}
.spooky-center-v14 span{
  position:absolute !important;
  display:block !important;
  background:#74826c !important;
}
.spooky-center-v14 .spooky-couple-down{
  left:50% !important;
  top:0 !important;
  width:2px !important;
  height:30px !important;
}
.spooky-center-v14 .spooky-family-bar{
  left:22% !important;
  right:22% !important;
  top:29px !important;
  height:2px !important;
}
.spooky-center-v14 .heather-down{
  left:50% !important;
  top:29px !important;
  width:2px !important;
  height:43px !important;
}

.spooky-helen-child-line::before,
.spooky-helen-child-line::after{
  content:none !important;
  display:none !important;
}

/* Center Heather directly below Spooky/Helen. */
.sibling-branches > .family-branch:first-child .children-row{
  justify-content:center !important;
}


/* Clean upper SVG lineage v15 */

/* Hide all obsolete upper lineage remnants. */
.tree-trunk,
.ancestor-children-line,
.spooky-helen-child-line,
.sibling-branches > .family-branch:first-child .branch-line{
  display:none !important;
}

/* Buster + Alma -> Spooky + Dickey */
.upper-lineage-svg-wrap{
  width:min(1180px,94vw);
  height:92px;
  margin:0 auto -4px;
  overflow:visible;
}
.upper-lineage-svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.upper-lineage-svg path{
  fill:none;
  stroke:#74826c;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

/* Spooky + Helen -> Heather */
.spooky-lineage-svg-wrap{
  width:410px;
  height:72px;
  margin:0 auto;
  overflow:visible;
}
.spooky-lineage-svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.spooky-lineage-svg path{
  fill:none;
  stroke:#74826c;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

/* Keep branch panels immediately under the SVG child stems. */
.sibling-branches{
  margin-top:0 !important;
}
.sibling-branches > .family-branch:first-child .children-row{
  margin-top:0 !important;
  justify-content:center !important;
}

@media(max-width:1450px){
  .upper-lineage-svg-wrap{
    width:min(1000px,92vw);
  }
}


/* Dynamic family tree lines v1 */
.tree-trunk,
.branch-line,
.parent-line,
.children-line,
.samatha-sophia-line,
.jarred-dom-children-line,
.ancestor-children-line,
.spooky-helen-child-line,
.upper-lineage-svg-wrap,
.spooky-lineage-svg-wrap,
.ancestor-lineage,
.spooky-lineage,
.sibling-branches::before,
.family-branch::before,
.grandchildren-row::before,
.grandchildren-row > .tree-person::before,
.grandchildren-row > .tree-person::after,
.jarred-children-row > .tree-person::before,
.jarred-children-row > .tree-person::after{
  display:none !important;
  content:none !important;
}

.family-tree{
  position:relative !important;
}
#familyTreeLineLayer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:10;
}
#familyTreeLineLayer path{
  fill:none;
  stroke:#74826c;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.tree-person,
.relationship-marker,
.branch-title{
  position:relative;
  z-index:11;
}
.family-branch{
  z-index:1;
}
.sibling-branches{
  padding-top:24px !important;
}


/* Dynamic family tree generation spacing v2 */

/*
  The JavaScript now draws the lineage from the real card positions.
  These rules only create vertical breathing room between generations.
  They do NOT draw any lines.
*/

/* Dickey/Debbie -> Rickey/Stephanie */
.parentage-caption{
  margin-top:12px !important;
  margin-bottom:22px !important;
}
.rickey-stephanie-row{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Rickey/Stephanie -> Samatha and Jarred */
.children-generation-row.lineage-children-row{
  margin-top:78px !important;
}

/* Keep Samatha and the Jarred/Dominique pair at the same generation height. */
.samatha-family,
.jarred-family{
  align-self:start !important;
}

/* Samatha -> Sophia */
.samatha-family > .descendant-person{
  margin-top:76px !important;
}

/* Jarred + Dominique -> Olivia and Ivy */
.jarred-children-row{
  margin-top:76px !important;
}

/* Keep Olivia and Ivy level with one another. */
.jarred-children-row > .tree-person{
  margin-top:0 !important;
}

/* Do not let hidden legacy connector elements reserve stray space. */
.samatha-sophia-line,
.jarred-dom-children-line,
.children-line,
.parent-line{
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* A little room beneath the last generation. */
.children-generation-row.lineage-children-row{
  padding-bottom:28px !important;
}

@media(max-width:1000px){
  .children-generation-row.lineage-children-row{
    margin-top:38px !important;
  }
  .samatha-family > .descendant-person,
  .jarred-children-row{
    margin-top:38px !important;
  }
}


/* Dickey-Debbie middle lineage spacing v3 */

/*
  The dynamic JavaScript connector is correct here; the problem is that
  the parentage caption occupies the same vertical band as the horizontal
  Dickey + Debbie -> Rickey family line.
*/

/* Create a clear connector band immediately below Dickey and Debbie. */
.dickey-top-row{
  margin-bottom:0 !important;
}

/* Push the caption below the dynamic horizontal lineage bar. */
.parentage-caption{
  margin-top:52px !important;
  margin-bottom:16px !important;
  position:relative !important;
  z-index:12 !important;
  line-height:1.3 !important;
}

/* Give the caption a small page-colored pad so it stays readable without
   covering the actual vertical child stem. */
.parentage-caption{
  display:table !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:2px 10px !important;
  background:var(--paper) !important;
}

/* Keep Rickey and Stephanie comfortably below the caption. */
.rickey-stephanie-row{
  margin-top:0 !important;
}

/* The old hidden static parent-line must reserve absolutely no room. */
.parent-line,
.dickey-debbie-line{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* On narrower screens use a slightly smaller gap. */
@media(max-width:1000px){
  .parentage-caption{
    margin-top:34px !important;
  }
}


/* Middle tree alignment fine-tune v4 */

/* Shift the Dickey + Debbie parentage caption about 3/8 inch to the right.
   3/8 inch at standard browser CSS resolution is approximately 36px. */
.parentage-caption{
  transform:translateX(36px) !important;
}

/* Move Heather down to approximately the same generation level as Rickey.
   The dynamic lineage JavaScript will automatically lengthen/reposition
   the Spooky/Helen -> Heather connector after the card moves. */
.sibling-branches > .family-branch:first-child .children-row{
  margin-top:82px !important;
}

/* Keep Heather centered under Spooky and Helen. */
.sibling-branches > .family-branch:first-child .children-row .tree-person[href="heather.html"]{
  margin-left:auto !important;
  margin-right:auto !important;
}


/* Center descendants under Buster and Alma v5 */

/*
  The Dickey branch is much wider than the Spooky branch, so the combined
  descendants visually lean to the right even though the container itself
  is centered. Shift the complete descendant block left so its visual center
  sits under Buster + Alma.
*/
.sibling-branches{
  transform:translateX(-92px) !important;
}

/*
  The dynamic family-tree-line script measures the cards after layout, so
  its connector lines will automatically follow this shift.
*/

/* Keep the shift modest on narrower screens and remove it once branches stack. */
@media(max-width:1550px){
  .sibling-branches{
    transform:translateX(-70px) !important;
  }
}
@media(max-width:1450px){
  .sibling-branches{
    transform:none !important;
  }
}


/* Grandchild card height + Debbie count v6 */

/* Sophia, Olivia and Ivy need more room for vitals, relationship text,
   and archive/count text. Keep their widths the same, only increase height. */
.tree-person.descendant-person{
  min-height:355px !important;
  height:355px !important;
}

/* Give the bottom text areas enough room so nothing is clipped. */
.tree-person.descendant-person .tree-relation{
  min-height:66px !important;
  height:auto !important;
  overflow:visible !important;
}
.tree-person.descendant-person .tree-count{
  min-height:48px !important;
  height:auto !important;
  overflow:visible !important;
  padding-bottom:12px !important;
}

/* Extra safety for the three bottom-generation cards specifically. */
.tree-person[href="sophia.html"],
.tree-person[href="olivia.html"],
.tree-person[href="ivy.html"]{
  overflow:hidden !important;
}

@media(max-width:700px){
  .tree-person.descendant-person{
    min-height:340px !important;
    height:340px !important;
  }
}


/* Family tree portrait crop fine-tune v7 */

/* Spooky: move the portrait down in the frame so the top of his head is visible. */
.tree-person[href="spooky.html"] .tree-photo img{
  object-position:center 0% !important;
}

/* Dickey: move the portrait slightly upward in the frame. */
.tree-person[href="dickey.html"] .tree-photo img{
  object-position:center 18% !important;
}

/* Heather: move the portrait slightly downward in the frame. */
.tree-person[href="heather.html"] .tree-photo img{
  object-position:center 2% !important;
}

/* DICKEY 85 SPOOKY MINUS20 - START */
.tree-person[href="dickey.html"] .tree-photo img, img[src*="dickey_bell"] {
 object-fit:cover !important; object-position:center 85% !important;
}
.tree-person[href="spooky.html"] .tree-photo img, img[src*="james_s_spooky_bell_iii"], img[src*="spooky_bell"] {
 object-fit:cover !important; object-position:center -20% !important;
}
/* DICKEY 85 SPOOKY MINUS20 - END */

/* DICKEY 85 SPOOKY 0 - START */
.tree-person[href="dickey.html"] .tree-photo img, img[src*="dickey_bell"] { object-fit: cover !important; object-position: center 85% !important; }
.tree-person[href="spooky.html"] .tree-photo img, img[src*="james_s_spooky_bell_iii"], img[src*="spooky_bell"] { object-fit: cover !important; object-position: center 0% !important; }
/* DICKEY 85 SPOOKY 0 - END */

/* BELL TREE UPRIGHT FIX - START */
/* Correct orientation of the Bell Family header tree SVG. */
.tree-logo {
    transform: none !important;
    transform-origin: center center !important;
}

/* Memorial tiles: placed last so later tree layout rules cannot override the color. */
.tree-page .tree-person.not-living,
.tree-page .archive-community-card.not-living,
.tree-page .archive-community-card[data-living="false"],
.tree-page .archive-community-card:has(.archive-community-cod),
#fallen-first-responders .archive-community-card,
.tree-page .archive-community-card:has([data-archive-person="Dick Bell"]),
.tree-page .archive-community-card:has([data-archive-person="Rachel Bell"]),
.tree-page .archive-community-card:has([data-archive-person="Johnny Tharp"]){
  background:#fef3f3 !important;
}
/* BELL TREE UPRIGHT FIX - END */

/* Debbie Phillips and Irvin Phillips couple */
.dickey-top-row{
  grid-template-columns:185px 55px 185px 55px 185px 55px 185px;
  gap:8px;
}
.tree-person[href="irvin.html"] .tree-photo img{
  object-position:center 32% !important;
}

@media(max-width:1180px){
  .dickey-top-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
}

@media(max-width:1750px){
  .sibling-branches{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    transform:none !important;
  }
  .sibling-branches > .family-branch:first-child,
  .sibling-branches > .dickey-family-branch-v3{
    flex:none !important;
  }
  .sibling-branches > .family-branch:first-child{
    width:min(100%,540px) !important;
    max-width:540px;
  }
  .sibling-branches > .dickey-family-branch-v3{
    width:min(100%,1000px) !important;
    max-width:1000px;
  }
}

@media(max-width:650px){
  .dickey-top-row{
    flex-direction:column;
  }
}

/* Stephanie Bell's parents: Donna and Charlie Brown */
.rickey-stephanie-row{
  display:grid !important;
  grid-template-columns:auto auto !important;
  gap:34px !important;
  justify-content:center !important;
  align-items:center !important;
}
.rickey-stephanie-couple,
.stephanie-parents-couple{
  display:grid;
  grid-template-columns:190px 55px 190px;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.rickey-stephanie-couple{
  position:relative;
}
.rickey-stephanie-row{
  margin-top:70px !important;
}
.rickey-stephanie-couple .parentage-caption,
.stephanie-parents-label{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:-28px !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:block !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-size:12px !important;
  font-style:italic !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  text-align:center !important;
}
.rickey-stephanie-couple .parentage-caption{
  transform:translateX(36px) !important;
}
.stephanie-parents-block{
  position:relative;
  z-index:11;
}
.stephanie-parents-block::before{
  content:"";
  position:absolute;
  left:-34px;
  top:50%;
  width:34px;
  height:2px;
  background:#74826c;
}
.stephanie-parents-label{
  position:absolute;
  left:0;
  right:0;
  top:-28px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  font-style:italic;
}
.tree-person-static:hover{
  transform:none;
  box-shadow:0 4px 14px rgba(50,40,20,.10);
  border-color:var(--line);
}
.tree-initials{
  display:flex;
  align-items:center;
  justify-content:center;
  width:86px;
  height:86px;
  border-radius:50%;
  background:#d9d2c4;
  color:var(--green);
  font-size:30px;
  font-weight:700;
  font-style:normal;
  letter-spacing:1px;
}
.person-profile-placeholder{
  width:min(100%,430px);
  min-height:360px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e8e3d9;
  border:9px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.person-profile-placeholder .tree-initials{
  width:132px;
  height:132px;
  font-size:44px;
}
.brown-children-line{
  position:absolute;
  left:0;
  top:100%;
  width:451px;
  height:72px;
}
.brown-children-line span{
  display:block;
  position:absolute;
  background:#74826c;
}
.brown-children-line .donna-brown-stem{
  left:95px;
  top:0;
  width:2px;
  height:32px;
}
.brown-children-line .charlie-brown-stem{
  left:356px;
  top:0;
  width:2px;
  height:32px;
}
.brown-children-line .brown-family-bar{
  left:95px;
  top:30px;
  width:261px;
  height:2px;
}
.brown-children-line .rickii-lear-stem{
  left:356px;
  top:30px;
  width:2px;
  height:42px;
}
.brown-children-row{
  position:absolute;
  left:0;
  top:calc(100% + 72px);
  width:451px;
  display:grid;
  grid-template-columns:190px 55px 190px;
  gap:8px;
}
.rickii-lear-card{
  grid-column:3;
}
.rickii-children-line{
  position:absolute;
  left:0;
  top:calc(100% + 417px);
  width:451px;
  height:82px;
}
.rickii-children-line span{
  display:block;
  position:absolute;
  background:#74826c;
}
.rickii-children-line .rickii-parent-stem{
  left:356px;
  top:0;
  width:2px;
  height:32px;
}
.rickii-children-line .rickii-family-bar{
  left:189px;
  top:30px;
  width:198px;
  height:2px;
}
.rickii-children-line .breana-lear-stem{
  left:189px;
  top:30px;
  width:2px;
  height:52px;
}
.rickii-children-line .xavier-lear-stem{
  left:387px;
  top:30px;
  width:2px;
  height:52px;
}
.rickii-children-row{
  position:absolute;
  left:104px;
  top:calc(100% + 499px);
  width:368px;
  display:grid;
  grid-template-columns:170px 170px;
  gap:28px;
}
.rickii-child-card{
  width:170px !important;
  min-height:315px !important;
  height:315px !important;
}
.jarred-family{
  transform:translateX(-80px);
}
.samatha-family > .descendant-person{
  transform:translateX(-1px);
}
.jarred-children-row{
  grid-template-columns:170px 170px !important;
  gap:28px !important;
  transform:translateX(-48px);
}
.children-generation-row.lineage-children-row{
  transform:translateX(-120px) !important;
}

@media(max-width:1100px){
  .rickey-stephanie-row{
    display:flex !important;
    flex-direction:column;
    gap:62px !important;
  }
  .stephanie-parents-block::before{
    display:none;
  }
  .brown-children-line,
  .brown-children-row,
  .rickii-children-line,
  .rickii-children-row{
    position:relative;
    left:auto;
    top:auto;
  }
  .jarred-family{
    transform:none;
  }
  .samatha-family > .descendant-person,
  .jarred-children-row{
    transform:none;
  }
  .children-generation-row.lineage-children-row{
    transform:none !important;
  }
}

@media(max-width:650px){
  .rickey-stephanie-couple,
  .stephanie-parents-couple{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .brown-children-line,
  .rickii-children-line{
    display:none;
  }
  .brown-children-row,
  .rickii-children-row{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-top:38px;
  }
}

/* Final tree-page status colors. Keep this block last in the stylesheet. */
.tree-page .tree-person,
.tree-page .archive-community-card.archive-community-person,
.tree-page .archive-community-card.archive-community-pet{
  background:#f6fdf7 !important;
}

.tree-page .tree-person[href="buster.html"],
.tree-page .tree-person[href="alma.html"],
.tree-page .tree-person[href="spooky.html"],
.tree-page .tree-person[href="heather.html"],
.tree-page .tree-person[href="dickey.html"],
.tree-page .tree-person[href="debbie.html"],
.tree-page .tree-person[href="irvin.html"],
.tree-page .archive-community-card.not-living,
.tree-page .archive-community-card[data-living="false"],
.tree-page .archive-community-card:has(.archive-community-cod),
#fallen-first-responders .archive-community-card,
.tree-page .archive-community-card:has([data-archive-person="Dick Bell"]),
.tree-page .archive-community-card:has([data-archive-person="Rachel Bell"]),
.tree-page .archive-community-card:has([data-archive-person="Johnny Tharp"]){
  background:#fef3f3 !important;
}