:root{
  --ink:#151a24;
  --ink-2:#1c2231;
  --ink-3:#10141c;
  --ink-lamp:#1d2436;
  --rule:#333d54;
  --rule-soft:#262e42;
  --ivory:#ece5d8;
  --ivory-soft:#a49b8a;
  --ivory-dim:#756c5c;
  --saffron:#d98a2b;
  --saffron-soft:#e3a355;
  --mount:#ece5d8;
  --mount-living:#c7bfb0;
  --mount-ink:#1d212b;
  --mount-ink-soft:#675f52;
  --mount-photo:#d3cab9;
  --mount-photo-deep:#c4baa7;
  --mono-ink:#8a8171;
  --line:#6d6a64;
  --scrim:rgba(16,20,28,.74);
  --shadow:rgba(3,5,10,.46);
  --display:"adobe-garamond-pro","Iowan Old Style","Palatino Linotype",Palatino,serif;
  --body:"freight-text-pro","Palatino Linotype",Palatino,Georgia,serif;
  --label:"brandon-grotesque","Futura","Century Gothic",sans-serif;
  --card-w:136px;
  --card-h:236px;
  --photo-h:160px;
  --bar-h:64px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--ivory)}
html,body{overscroll-behavior:none}
body{font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--saffron);color:var(--ink-3)}
a{color:var(--saffron);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--saffron-soft)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- top bar */
.bar{
  position:fixed;inset:0 0 auto 0;height:var(--bar-h);z-index:30;
  display:flex;align-items:center;gap:clamp(.6rem,2vw,1.4rem);
  padding:0 clamp(.75rem,2.4vw,1.5rem);
  background:var(--ink);border-bottom:1px solid var(--rule-soft);
}
.bar-back{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;
  font-family:var(--label);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory-soft);text-decoration:none;padding:.6rem .2rem;
}
.bar-back:hover{color:var(--ivory)}
.bar-back svg{width:18px;height:18px}
.bar-title{
  font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1;letter-spacing:-.005em;
  white-space:nowrap;flex:none;
}
.find{position:relative;flex:1 1 auto;max-width:420px;margin-left:auto}
.find-input{
  width:100%;height:44px;padding:0 .9rem 0 2.5rem;
  background:var(--ink-2);color:var(--ivory);border:1px solid var(--rule);border-radius:6px;
  font-family:var(--body);font-size:1rem;caret-color:var(--saffron);
}
.find-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.find-input::placeholder{color:var(--ivory-soft)}
.find-input:focus{outline:none;border-color:var(--saffron)}
.find-icon{position:absolute;left:.8rem;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ivory-soft);pointer-events:none}
.find-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:min(60vh,420px);overflow-y:auto;
  list-style:none;background:var(--ink-2);border:1px solid var(--rule);border-radius:6px;
  padding:.3rem;
}
.find-results button{
  display:flex;align-items:center;gap:.75rem;width:100%;padding:.45rem .5rem;border:0;border-radius:4px;
  background:transparent;text-align:left;cursor:pointer;
}
.find-results button[aria-selected="true"],.find-results button:hover{background:var(--ink-lamp)}
.find-results .r-name{display:block;font-family:var(--display);font-size:1.08rem;line-height:1.15}
.find-results .r-rel{display:block;font-family:var(--label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory-soft)}
.find-empty{padding:.7rem .8rem;color:var(--ivory-soft);font-size:.95rem}
.bar-help{
  flex:none;height:44px;padding:0 .9rem;border:1px solid var(--rule);border-radius:6px;background:transparent;
  font-family:var(--label);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-soft);cursor:pointer;
}
.bar-help:hover{color:var(--ivory);border-color:var(--ivory-dim)}

/* ---------------------------------------------------------------- stage */
.stage{
  position:fixed;inset:var(--bar-h) 0 0 0;overflow:hidden;touch-action:none;cursor:grab;
  background:radial-gradient(ellipse 80% 70% at 50% 42%,var(--ink-lamp) 0%,var(--ink) 58%,var(--ink-3) 100%);
  user-select:none;-webkit-user-select:none;
}
.stage.is-dragging{cursor:grabbing}
.stage:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--saffron)}
.world{position:absolute;left:0;top:0;transform-origin:0 0}
.stage.is-moving .world{will-change:transform}
.load-error{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;color:var(--ivory-soft)}
.lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.lines path{fill:none;stroke:var(--line);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.lines path.is-line{stroke:var(--saffron);stroke-width:2.6}
.lines path.is-probable{stroke-dasharray:7 6}
.lines path.is-marriage{stroke-width:1.7}

/* ---------------------------------------------------------------- cards */
.card{
  position:absolute;width:var(--card-w);height:var(--card-h);padding:6px 6px 0;
  display:flex;flex-direction:column;text-align:left;cursor:pointer;
  background:var(--mount);color:var(--mount-ink);border:0;border-radius:3px;
  box-shadow:0 1px 2px var(--shadow),0 8px 22px var(--shadow);
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out);
}
.card:hover{transform:translateY(-2px)}
.card.is-line{box-shadow:0 0 0 2px var(--saffron),0 8px 22px var(--shadow)}
.card.is-root{box-shadow:0 0 0 3px var(--saffron),0 0 0 9px rgba(217,138,43,.18),0 10px 26px var(--shadow)}
.card.is-living{background:var(--mount-living)}
.card.is-selected{transform:translateY(-4px);box-shadow:0 0 0 3px var(--ivory),0 16px 34px var(--shadow)}
.card.is-selected.is-line{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px var(--saffron),0 16px 34px var(--shadow)}
.card-photo{display:block;width:100%;height:calc(var(--photo-h) - 6px);overflow:hidden;background:var(--mount-photo);border-radius:1px}
.card-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%;-webkit-user-drag:none;pointer-events:none}
.card-text{display:flex;flex-direction:column;flex:1;padding:0 3px 8px;min-width:0}
.card-mono{
  display:grid;place-items:center;height:100%;
  background:radial-gradient(circle at 50% 38%,var(--mount-photo) 0%,var(--mount-photo-deep) 100%);
  font-family:var(--display);font-style:italic;font-size:46px;color:var(--mono-ink);letter-spacing:.02em;
}
.card.is-living .card-mono{background:transparent;color:var(--mount-ink-soft);font-size:40px}
.card-name{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:8px;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.08;letter-spacing:-.005em;
}
.card-meta{
  display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin-top:auto;padding-top:4px;
  font-family:var(--label);font-size:12.5px;letter-spacing:.03em;color:var(--mount-ink-soft);font-variant-numeric:tabular-nums lining-nums;
}
.card-meta span{white-space:nowrap}
.card-meta .sep{width:10px;height:1.5px;background:currentColor;flex:none}
.card-meta .lv{letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.card.is-compact{height:66px;flex-direction:row;align-items:center;gap:8px;padding:6px 8px 6px 6px}
.card.is-compact:not(:has(.card-photo)){padding-left:12px}
.card.is-compact .card-photo{flex:none;width:40px;height:50px}
.card.is-compact .card-mono{font-size:19px}
.card.is-compact.is-living .card-mono{font-size:18px}
.card.is-compact .card-text{padding:0;justify-content:center}
.card.is-compact .card-name{margin-top:0;font-size:15.5px;line-height:1.1;-webkit-line-clamp:2}
.card.is-compact .card-meta{margin-top:3px;padding-top:0}
.card.is-compact.is-selected{transform:translateY(-2px)}

/* ---------------------------------------------------------------- generation rail */
.rail{position:fixed;left:0;top:var(--bar-h);bottom:0;width:0;z-index:12;pointer-events:none}
/* labels sit in the gap above each row */
.gen-short{display:none}
.gen{
  top:0;transition:opacity .2s ease;
  position:absolute;left:10px;transform-origin:0 50%;white-space:nowrap;
  font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-soft);
  background:var(--scrim);padding:5px 9px;border-radius:3px;
}

/* ---------------------------------------------------------------- controls */
.controls{
  position:fixed;right:clamp(.75rem,2vw,1.25rem);bottom:clamp(.75rem,2vw,1.25rem);z-index:20;
  display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:8px;overflow:hidden;
  background:var(--ink-2);
}
.controls button{
  width:46px;height:46px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:var(--ivory);
}
.controls button+button{border-top:1px solid var(--rule-soft)}
.controls button:hover{background:var(--ink-lamp)}
.controls svg{width:20px;height:20px}
.controls .ctl-sam{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.01em;width:46px}

.minimap{
  position:fixed;left:clamp(.75rem,2vw,1.25rem);bottom:clamp(.75rem,2vw,1.25rem);z-index:20;
  width:232px;height:132px;border:1px solid var(--rule);border-radius:8px;background:var(--scrim);
  cursor:pointer;display:none;transition:opacity .25s ease;
}
.minimap.is-idle{opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- hint */
.hint{
  position:fixed;left:50%;bottom:clamp(1rem,3vw,1.6rem);z-index:19;transform:translateX(-50%);
  max-width:calc(100% - 7.5rem);padding:.7rem 1rem;border-radius:999px;
  background:var(--ink-2);border:1px solid var(--rule);
  font-size:.98rem;line-height:1.35;text-align:center;transition:opacity .5s ease,transform .5s var(--ease-out);
}
.hint-mouse{display:none}
@media (hover:hover) and (pointer:fine){.hint-mouse{display:inline}.hint-touch{display:none}}
.hint.is-gone{opacity:0;transform:translate(-50%,12px);pointer-events:none}

/* ---------------------------------------------------------------- legend popover */
.legend{
  position:fixed;inset:auto;top:calc(var(--bar-h) + 10px);right:clamp(.75rem,2.4vw,1.5rem);
  width:min(380px,calc(100% - 1.5rem));margin:0;padding:1.3rem 1.3rem 1.1rem;
  background:var(--ink-2);color:var(--ivory);border:1px solid var(--rule);border-radius:10px;
  
}
.legend h2{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.1;margin-bottom:.8rem}
.legend p{font-size:.98rem;line-height:1.5;color:var(--ivory)}
.legend p+p{margin-top:.6rem}
.legend ul{list-style:none;margin:.9rem 0 .2rem;display:grid;gap:.7rem}
.legend li{display:grid;grid-template-columns:44px 1fr;gap:.8rem;align-items:center;font-size:.95rem;line-height:1.4}
.legend svg{width:44px;height:20px}
.legend .swatch{width:40px;height:26px;border-radius:2px;background:var(--mount)}
.legend .swatch.line{box-shadow:0 0 0 2px var(--saffron)}
.legend .swatch.living{background:var(--mount-living)}
.legend-close{
  position:absolute;top:.6rem;right:.6rem;width:40px;height:40px;border:0;border-radius:6px;background:transparent;cursor:pointer;color:var(--ivory-soft);
  display:grid;place-items:center;
}
.legend-close:hover{color:var(--ivory);background:var(--ink-lamp)}
.legend-close svg{width:18px;height:18px}

/* ---------------------------------------------------------------- person sheet */
.sheet{
  position:fixed;z-index:25;top:var(--bar-h);right:0;bottom:0;width:min(460px,100%);
  display:flex;flex-direction:column;
  background:var(--ink-2);border-left:1px solid var(--rule);
  transform:translateX(104%);transition:transform .42s var(--ease-out);visibility:hidden;
}
.sheet.is-open{transform:none;visibility:visible}
.sheet-grip{display:none}
.sheet-head{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;
  padding:.55rem .6rem 0;background:var(--ink-2);
}
.sheet-close{
  width:44px;height:44px;border:0;border-radius:50%;background:var(--ink-2);box-shadow:0 2px 10px var(--shadow);cursor:pointer;color:var(--ivory-soft);display:grid;place-items:center;
}
.sheet-close:hover{color:var(--ivory);background:var(--ink-lamp)}
.sheet-close svg{width:20px;height:20px}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:0 1.5rem 2.5rem;flex:1}
.sheet-figure{margin:0 -1.5rem 1.3rem;background:var(--ink-3)}
.sheet-figure img{display:block;width:100%;max-height:46vh;object-fit:contain}
.sheet-figure figcaption{padding:.6rem 1.5rem .7rem;font-family:var(--label);font-size:.78rem;letter-spacing:.04em;line-height:1.45;color:var(--ivory-soft)}
.sheet-noimg{
  margin:0 -1.5rem 1.3rem;height:120px;display:grid;place-items:center;background:var(--ink-3);
  font-family:var(--display);font-style:italic;font-size:3.2rem;color:var(--ivory-dim);
}
.sheet-name:focus{outline:none}
.sheet-name{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.6vw,2.35rem);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.sheet-aka{margin-top:.35rem;font-style:italic;color:var(--ivory-soft);font-size:1rem;line-height:1.4}
.sheet-rel{margin-top:.8rem;font-family:var(--label);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron);line-height:1.5}
.sheet-rel-also{display:block;margin-top:.2rem;color:var(--ivory-soft);letter-spacing:.06em;text-transform:none;font-size:.86rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin-top:1.15rem;font-size:1.02rem}
.facts dt{font-family:var(--label);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-soft);padding-top:.22rem}
.facts dd{line-height:1.45}
.sheet-note{margin-top:1.2rem;font-size:1.08rem;line-height:1.62}
.sheet-note+.sheet-note{margin-top:.8rem}
.sheet-sure{
  margin-top:1.1rem;padding:.8rem .9rem;border:1px dashed var(--rule);border-radius:6px;
  font-size:.96rem;line-height:1.5;color:var(--ivory-soft);
}
.sheet-sure strong{font-weight:600;color:var(--ivory)}
.sheet-living{margin-top:1.1rem;color:var(--ivory-soft);font-size:1rem;line-height:1.55}
.sheet-link{margin-top:.8rem;font-size:1rem}
.fam{margin-top:1.7rem}
.fam h3{font-family:var(--label);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-soft);margin-bottom:.6rem}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}
.chip{
  display:flex;align-items:center;gap:.65rem;min-height:56px;padding:.45rem .6rem;text-align:left;cursor:pointer;
  background:var(--ink);border:1px solid var(--rule-soft);border-radius:6px;
}
.chip:hover{border-color:var(--ivory-dim);background:var(--ink-lamp)}
.chip-av{flex:none;width:38px;height:44px;border-radius:2px;overflow:hidden;background:var(--mount-photo);display:grid;place-items:center;font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--mono-ink)}
.chip-av img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.chip.is-living .chip-av{background:var(--mount-living)}
.chip-name{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.15}
.chip-years{display:block;font-family:var(--label);font-size:.72rem;letter-spacing:.06em;color:var(--ivory-soft);margin-top:.1rem}
.trail{list-style:none;display:grid;gap:.1rem}
.trail li{position:relative;padding-left:calc(var(--d,0) * 1rem)}
.trail button{
  display:flex;align-items:baseline;gap:.5rem;padding:.35rem .4rem;border:0;border-radius:4px;background:transparent;cursor:pointer;text-align:left;
}
.trail button:hover{background:var(--ink-lamp)}
.trail .t-rel{font-family:var(--label);font-size:.74rem;letter-spacing:.06em;color:var(--ivory-soft);white-space:nowrap}
.trail .t-name{font-family:var(--display);font-size:1.06rem;font-weight:600}
.trail li:not(:first-child)::before{
  content:"";position:absolute;left:calc(var(--d,0) * 1rem - .55rem);top:.2rem;width:.45rem;height:.85rem;
  border-left:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule);
}
.trail li.is-here .t-name{color:var(--saffron)}
.sheet-ask{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--rule-soft);font-size:.98rem;line-height:1.55;color:var(--ivory-soft)}

/* ---------------------------------------------------------------- phones */
@media (max-width:759px){
  :root{--bar-h:60px}
  .bar-title{display:none}
  .bar-back span{display:none}
  .bar-back{padding:.6rem .3rem}
  .find{max-width:none}
  .bar-help{padding:0 .75rem}
  .gen .gen-long{display:none}
  .gen .gen-short{display:inline}
  .sheet{
    top:auto;left:0;width:100%;height:92dvh;border-left:0;border-top:1px solid var(--rule);border-radius:14px 14px 0 0;
    transform:translateY(104%);
  }
  .sheet.is-open{transform:translateY(var(--sheet-y,40dvh))}
  .sheet.is-full{--sheet-y:0px}
  .sheet.is-dragging{transition:none}
  .sheet-grip{display:block;width:100%;height:26px;border:0;background:transparent;cursor:grab;touch-action:none;flex:none}
  .sheet-grip::before{content:"";display:block;width:42px;height:5px;margin:10px auto 0;border-radius:3px;background:var(--rule)}
  .sheet-head{position:absolute;top:0;right:0;background:transparent;padding:.3rem .3rem 0}
  .sheet-body{padding:0 1.15rem 2.5rem}
  .sheet-figure{margin:0 -1.15rem 1.1rem}
  .sheet-figure img{max-height:24dvh}
  .sheet.is-full .sheet-figure img{max-height:44dvh}
  .sheet-figure figcaption{padding:.55rem 1.15rem .6rem}
  .sheet-noimg{margin:0 -1.15rem 1.1rem;height:92px}
  .chips{grid-template-columns:1fr 1fr}
  .hint{bottom:.9rem;max-width:calc(100% - 5.5rem);left:calc(50% - 1.8rem)}
}
@media (min-width:1100px){ .minimap{display:block} }
@media (prefers-reduced-motion:reduce){
  .card,.sheet,.hint{transition:none}
}