/* ============ Design tokens ============ */
:root{
--paper: #EFE8D8;
--paper-deep: #E5DCC6;
--card: #FBF8EF;
--card-edge: #E3D9C0;
--ink: #2A2420;
--ink-soft: #6E6255;
--ink-faint: #9C907F;
--brass: #A97C3D;
--brass-deep: #8B5E2A;
--brass-pale: #E9D9B8;
--walnut: #4A3826;
--burgundy: #7C4038;
--moss: #565F45;
--line: rgba(74,56,38,0.32);
--shadow-card: 0 1px 2px rgba(42,36,32,0.06), 0 8px 20px -10px rgba(42,36,32,0.28);
--shadow-modal: 0 30px 80px -20px rgba(20,16,12,0.45);
--radius-card: 14px;
--font-display: "Fraunces", Georgia, serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
position: relative;
}
.paper-texture{
position: fixed; inset:0; pointer-events:none; z-index:0;
background-image:
radial-gradient(circle at 15% 8%, rgba(169,124,61,0.10), transparent 42%),
radial-gradient(circle at 88% 82%, rgba(124,64,56,0.08), transparent 45%);
opacity:1;
}
/* ============ Header ============ */
.site-header{
position:relative; z-index:1;
padding: 64px 32px 34px;
max-width: 1180px;
margin: 0 auto;
}
.header-inner{ max-width: 720px; }
.kicker{
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--brass-deep);
margin: 0 0 14px;
}
.site-header h1{
font-family: var(--font-display);
font-optical-sizing: auto;
font-weight: 560;
font-size: clamp(34px, 5.4vw, 56px);
line-height: 1.05;
margin: 0 0 20px;
color: var(--walnut);
letter-spacing: -0.01em;
}
.surname-accent{
font-style: italic;
font-weight: 440;
color: var(--brass-deep);
}
.lede{
font-size: 17px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 62ch;
margin: 0 0 30px;
}
.meta-row{
display:flex; flex-wrap:wrap; gap: 30px 42px;
margin:0; padding: 18px 0 0;
border-top: 1px solid var(--line);
}
.meta-row > div{ display:flex; flex-direction:column; gap:4px; }
.meta-row dt{
font-size: 12px; color: var(--ink-faint); font-weight: 500;
}
.meta-row dd{
margin:0; font-family: var(--font-display); font-size: 20px; font-weight: 560; color: var(--walnut);
}
/* ============ Controls ============ */
.controls-bar{
position: sticky; top:0; z-index: 30;
background: rgba(239,232,216,0.92);
backdrop-filter: blur(10px);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.controls-inner{
max-width: 1180px; margin:0 auto;
padding: 12px 32px;
display:flex; align-items:center; justify-content:space-between;
gap: 20px;
flex-wrap: wrap;
}
.gen-pills{
display:flex; gap:8px; overflow-x:auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 2px;
}
.gen-pills::-webkit-scrollbar{ display:none; }
.gen-pill{
flex: none;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 15px;
cursor:pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
white-space: nowrap;
}
.gen-pill:hover{ border-color: var(--brass); color: var(--walnut); }
.gen-pill.is-active{
background: var(--walnut); border-color: var(--walnut); color: var(--card);
}
.zoom-controls{ display:flex; align-items:center; gap:8px; flex: none; }
.ctrl-btn{
font-family: var(--font-body);
font-size: 16px;
width: 32px; height: 32px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--card);
color: var(--walnut);
cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition: border-color .15s ease, background .15s ease;
}
.ctrl-btn:hover{ border-color: var(--brass); background: var(--brass-pale); }
.ctrl-btn-wide{ width:auto; padding: 0 14px; font-size: 13.5px; font-weight: 500; }
.zoom-level{
font-size: 13px; color: var(--ink-soft); min-width: 42px; text-align:center;
font-variant-numeric: tabular-nums;
}
/* ============ Tree viewport ============ */
main{ position:relative; z-index:1; }
.tree-viewport{
position: relative;
width: 100%;
height: 74vh;
min-height: 480px;
overflow: hidden;
background:
radial-gradient(circle, rgba(74,56,38,0.09) 1px, transparent 1.4px) 0 0/26px 26px,
var(--paper-deep);
cursor: grab;
touch-action: none;
}
.tree-viewport.is-grabbing{ cursor: grabbing; }
.tree-canvas{
position: absolute; top:0; left:0;
transform-origin: 0 0;
will-change: transform;
}
#connector-svg{
position:absolute; top:0; left:0; overflow: visible;
}
#cards-layer{ position:absolute; top:0; left:0; }
.viewport-hint{
position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
font-size:12.5px; color: var(--ink-soft);
background: rgba(251,248,239,0.88);
border: 1px solid var(--line);
padding: 6px 14px; border-radius: 999px;
pointer-events:none;
transition: opacity .4s ease;
}
.row-label{
position:absolute;
width: 230px;
transform: translateX(-100%);
padding-right: 26px;
text-align: right;
}
.row-label .row-num{
font-size: 11.5px; color: var(--brass-deep); font-weight:600; letter-spacing:.02em;
display:block; margin-bottom:3px;
}
.row-label .row-name{
font-family: var(--font-display); font-size: 19px; color: var(--walnut); font-weight:560;
display:block; line-height:1.25;
}
/* ============ Person cards ============ */
.p-card{
position:absolute;
width: var(--card-w, 176px);
background: var(--card);
border: 1px solid var(--card-edge);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 14px 12px 13px;
text-align:center;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.p-card:hover{
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(42,36,32,0.08), 0 18px 34px -14px rgba(42,36,32,0.36);
border-color: var(--brass);
}
.p-card:focus-visible{ outline: 2px solid var(--brass-deep); outline-offset: 2px; }
.p-card.is-nodata{ cursor:default; opacity:.72; }
.p-card.is-nodata:hover{ transform:none; box-shadow:var(--shadow-card); border-color:var(--card-edge); }
.p-card--flat{
padding: 12px 10px;
background: var(--paper-deep);
border-style: dashed;
border-color: var(--card-edge);
box-shadow: none;
}
.p-card--flat:hover{
transform: none;
box-shadow: 0 4px 10px -4px rgba(42,36,32,0.22);
border-color: var(--brass);
}
.p-card--flat .p-name--flat{
font-size: 13.5px;
line-height: 1.3;
}
.p-card--flat .p-place{ margin-top: 2px; }
.p-card--flat.is-nodata .p-name--flat{ color: var(--ink-faint); font-style: italic; }
.p-photo-wrap{
position:relative;
width: 88px; height:88px; margin: 0 auto 10px;
}
.p-photo{
width:100%; height:100%; border-radius:50%;
object-fit: cover;
border: 2.5px solid var(--brass);
background: var(--paper-deep);
display:block;
}
.p-photo.gender-f{ border-color: var(--burgundy); }
.p-photo-placeholder{
width:100%; height:100%; border-radius:50%;
border: 2.5px dashed var(--ink-faint);
background: var(--paper-deep);
display:flex; align-items:center; justify-content:center;
color: var(--ink-faint); font-size: 26px;
}
.p-badge{
position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
background: var(--brass-deep); color:#fff;
font-size: 9.5px; font-weight:600; letter-spacing:.01em;
padding: 3px 8px; border-radius:999px; white-space:nowrap;
box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}
.p-mia{
position:absolute; top:-4px; right:-2px;
width:20px;height:20px; border-radius:50%;
background: var(--walnut); color:#fff; font-size:11px;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.p-name{
font-family: var(--font-display);
font-size: 15.5px;
line-height:1.22;
color: var(--ink);
margin: 0 0 3px;
}
.p-name b{ font-weight:650; }
.p-years{
font-size: 12px; color: var(--ink-soft);
font-variant-numeric: tabular-nums;
margin-bottom: 5px;
}
.p-place{
font-size: 11.5px; color: var(--ink-faint);
line-height:1.35;
}
.p-note{
margin-top:6px;
font-size: 11px; font-style: italic; color: var(--moss);
line-height:1.3;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* connector lines */
.conn-line{ stroke: var(--walnut); stroke-width: 1.6; fill:none; opacity:.55; }
.conn-dot{ fill: var(--brass-deep); }
/* ============ Legend ============ */
.legend{
position:relative; z-index:1;
border-top: 1px solid var(--line);
background: var(--paper);
}
.legend-inner{
max-width:1180px; margin:0 auto; padding: 18px 32px;
display:flex; flex-wrap:wrap; gap: 10px 30px;
}
.legend-item{ font-size:12.5px; color: var(--ink-soft); display:flex; align-items:center; gap:8px; }
.legend-badge{
background: var(--brass-deep); color:#fff; font-size:10px; font-weight:600;
padding: 3px 9px; border-radius:999px;
}
.legend-swatch{ width:14px;height:14px; border-radius:50%; display:inline-block; flex:none; }
.legend-swatch--mia{ background: var(--walnut); }
.legend-swatch--angel{ background:transparent; border:1.5px solid var(--brass); }
/* ============ Footer ============ */
.site-footer{
position:relative; z-index:1;
max-width:1180px; margin:0 auto; padding: 26px 32px 60px;
}
.site-footer p{
font-size:12.5px; color: var(--ink-faint); max-width:70ch; line-height:1.6; margin:0;
}
/* ============ Modal ============ */
.modal-overlay{
position:fixed; inset:0; z-index:100;
background: rgba(30,24,18,0.55);
display:none; align-items:center; justify-content:center;
padding: 24px;
}
.modal-overlay.is-open{ display:flex; }
.modal-card{
position:relative;
background: var(--card);
border-radius: 20px;
box-shadow: var(--shadow-modal);
max-width: 460px; width:100%;
max-height: 86vh; overflow-y:auto;
padding: 40px 32px 32px;
}
.modal-close{
position:absolute; top:14px; right:14px;
width:32px;height:32px; border-radius:50%;
border:1px solid var(--line); background:var(--paper);
font-size:20px; line-height:1; color:var(--ink-soft); cursor:pointer;
}
.modal-close:hover{ background: var(--brass-pale); border-color:var(--brass); }
.modal-photo-wrap{ width:120px;height:120px; margin: 0 auto 18px; position:relative; }
.modal-photo{ width:100%;height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--brass); }
.modal-photo-placeholder{
width:100%;height:100%; border-radius:50%; border:3px dashed var(--ink-faint);
display:flex;align-items:center;justify-content:center; color:var(--ink-faint); font-size:36px;
background: var(--paper-deep);
}
.modal-badge{ display:block; text-align:center; margin-bottom:8px; }
.modal-badge span{ background:var(--brass-deep); color:#fff; font-size:11px; font-weight:600; padding:4px 11px; border-radius:999px; }
.modal-name{
font-family: var(--font-display); font-size:26px; font-weight:600; text-align:center;
margin: 0 0 6px; color: var(--walnut);
}
.modal-years{ text-align:center; color:var(--ink-soft); font-size:14.5px; margin-bottom:18px; font-variant-numeric:tabular-nums; }
.modal-section{ border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.modal-section h4{
font-size:11.5px; text-transform:none; letter-spacing:.02em; color:var(--brass-deep);
margin:0 0 6px; font-weight:600;
}
.modal-section p{ margin:0; font-size:14px; color:var(--ink); line-height:1.55; }
.modal-note{ font-style:italic; color:var(--moss); }
.modal-links{ display:flex; flex-wrap:wrap; gap:8px; }
.modal-link-btn{
font-family: var(--font-body); font-size:13px; color:var(--walnut);
background: var(--paper); border:1px solid var(--line); border-radius:999px;
padding:6px 13px; cursor:pointer; transition: border-color .15s ease, background .15s ease;
}
.modal-link-btn:hover{ border-color:var(--brass); background:var(--brass-pale); }
/* ============ Responsive ============ */
@media (max-width: 760px){
.site-header{ padding: 44px 20px 24px; }
.lede{ font-size:15.5px; }
.meta-row{ gap:20px 28px; }
.controls-inner{ padding: 10px 16px; }
.legend-inner, .site-footer{ padding-left:20px; padding-right:20px; }
.tree-viewport{ height: 62vh; }
.modal-card{ padding: 34px 20px 24px; }
}
@media (prefers-reduced-motion: reduce){
*{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
html{ scroll-behavior:auto; }
}