/* Archive surfaces and navigational views. */
:root { --paper:#f7f4ec; --line:#d2c6ad; --panel:#fffdf8; }
body { background:var(--paper); }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:url('./assets/media/brand/landscape-background.png') center top/cover; opacity:.13; pointer-events:none; }
.site-header { min-height:88px; gap:24px; }
.header-logo { display:block; flex:0 1 360px; width:360px; max-width:100%; min-width:0; line-height:0; }
.header-logo img { display:block; width:100%; height:auto; }
.site-header nav { gap:6px; font-size:14px; }
.site-header nav a { padding:10px 13px; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--ink); text-decoration:underline; }
.page-heading { padding:28px 0 23px; }
.page-heading h1 { font-size:54px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.home-hero { grid-template-columns:1fr; gap:0; padding:32px; margin:28px 0 30px; min-height:390px; border:1px solid #c5b89c; border-radius:12px; background:linear-gradient(90deg,rgba(250,248,242,.2),rgba(250,248,242,.02) 70%),url('./assets/media/brand/landscape-background.png') center/cover; box-shadow:0 18px 40px #173c3808; }
.home-hero>* { min-width:0; }
.home-hero>.preview-tree { width:100%; max-width:560px; justify-self:start; }
.preview-node { background:#fffdf7e8; border-color:#a99269; box-shadow:0 3px 8px #173c3805; }
.preview-root { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.preview-root:hover { background:#27544c; color:white; }
.preview-root .tree-node-name { color:var(--paper); }
.branch-section { padding:14px 0 32px; border-top:0; }
.branch-section h2 { font-size:37px; }
.branch-columns { margin-top:24px; }
.branch-columns h3 { font-size:29px; }
.branch-columns p { font-size:22px; }
.branch-columns a { font-size:18px; }
.archive-preview { margin-top:34px; }
.featured-record img { border:1px solid #c4b99f; padding:7px; background:var(--panel); box-shadow:0 7px 18px #173c380b; }
.featured-stories { padding-left:34px; }
.featured-stories article { padding-block:4px 24px; }
.featured-stories article+article { margin-top:8px; padding-top:28px; }
.featured-stories h2 { font-size:34px; margin-bottom:24px; }
.featured-stories h3 { margin-bottom:18px; }
.person-inspector { position:sticky; top:24px; max-height:calc(100vh - 48px); overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-top:4px solid var(--ink); border-radius:8px; padding:24px; background:var(--panel); box-shadow:0 10px 28px #173c3808; scrollbar-width:thin; }
.person-inspector h2 { font-size:34px; overflow-wrap:normal; }
.person-inspector .lifespan { font-size:19px; margin-block:15px 18px; }
.person-inspector .fact-list div { grid-template-columns:53px 1fr; gap:9px; }
.person-inspector .fact-list dt { font-size:13px; }
.person-inspector .fact-list dd { font-size:16px; }
.person-inspector li { font-size:16px; }
.person-inspector .relation-label { margin-top:16px; font-size:11px; }
.generation-position { display:flex; align-items:center; gap:10px; margin-top:19px; padding:10px 12px; border-radius:4px; background:#eaf0e7; }
.generation-position b { font:500 31px/1 var(--serif); }
.generation-position span { font:500 12px/1.4 var(--sans); max-width:135px; }
.profile-photo-link { border:0; padding:0; text-align:left; font:inherit; text-decoration:underline; text-underline-offset:4px; }
.ancestry-path { padding-top:15px; border-top:1px solid var(--line); }
.ancestry-path summary { cursor:pointer; font:550 14px var(--sans); }
.person-inspector .ancestry-path ol { padding-left:20px; margin:15px 0 0; }
.person-inspector .ancestry-path ol li { display:list-item; padding-bottom:7px; }
.profile-detail summary,.sources summary { font-size:14px; }
.source-entry { font-size:13px; }
.family-layout { gap:27px; }
.family-toolbar { margin-bottom:22px; background:#fffdf540; }
.directory-controls { display:flex; gap:20px; margin:0 0 20px; font:500 13px var(--sans); }
.directory-controls label { display:flex; gap:10px; align-items:center; }
.directory-controls select { min-width:170px; font-size:13px; min-height:38px; padding:7px 12px; }
.directory-pagination { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 0; margin-bottom:7px; font:500 12px var(--sans); color:var(--muted); }
.directory-pagination>div { display:flex; gap:7px; }
.directory-pagination button { padding:7px 11px; border:1px solid var(--line); border-radius:4px; font-size:12px; background:var(--panel); min-height:34px; }
.directory-scroll { max-height:calc(100vh - 420px); min-height:350px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:7px; background:var(--panel); scrollbar-width:thin; }
.directory-list>li { border-color:#e3dbc9; }
.directory-list .generation-heading { position:sticky; top:0; z-index:2; background:#ecebdf; padding:10px 15px; border-top:1px solid var(--line); }
.generation-heading h2 { font-size:22px; letter-spacing:-.01em; }
.directory-person { position:relative; padding:15px 14px 15px 16px; min-height:86px; gap:6px 15px; align-items:center; }
.directory-person strong { font-size:22px; }
.directory-person span { font-size:12px; align-self:center; }
.directory-person small { font-size:12px; }
.directory-person .directory-relation { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.directory-relation>span { line-height:1.4; }
.generation-number { flex:none; min-width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:4px; color:#69604c; background:#f7f3e8; font:600 12px var(--sans); }
.directory-person[aria-pressed=true] { border-left-color:var(--brass); }
.ancestry-canvas { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); box-shadow:0 8px 25px #173c3806; }
.canvas-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--line); font:500 12px var(--sans); }
.canvas-toolbar label { display:flex; align-items:center; gap:8px; }
.canvas-toolbar select { min-height:33px; padding:5px 9px; font-size:12px; }
.canvas-count { margin-right:auto; color:var(--muted); }
.canvas-zoom { display:flex; align-items:center; gap:6px; }
.canvas-zoom button { min-width:33px; min-height:33px; padding:5px 9px; border:1px solid var(--line); border-radius:4px; font-size:12px; background:var(--panel); }
.canvas-zoom output { min-width:44px; text-align:center; }
.tree-viewport { height:min(67vh,700px); min-height:340px; overflow:auto; position:relative; cursor:grab; overscroll-behavior:contain; scrollbar-width:thin; background-color:#f4f3e9; background-image:radial-gradient(#b8b39d66 .65px,transparent .65px); background-size:18px 18px; }
.tree-viewport.is-dragging { cursor:grabbing; }
.tree-space,.tree-drawing { position:relative; }
.tree-drawing { transform-origin:0 0; }
.tree-connections { position:absolute; inset:0; pointer-events:none; fill:none; stroke:#aa9264; stroke-width:1.3; }
.canvas-generation { position:absolute; top:21px; width:232px; color:#6c644f; text-transform:uppercase; letter-spacing:.1em; font:600 11px var(--sans); }
.canvas-person { width:232px; height:88px; position:absolute; border:1px solid #ae9b77; border-radius:6px; background:var(--panel); box-shadow:0 3px 7px #173c3809; }
.canvas-person.is-selected { background:#f4e6ca; border-color:#8b6425; box-shadow:0 0 0 2px #b68e46; }
.canvas-person-name { display:flex; flex-direction:column; justify-content:center; width:196px; height:86px; border:0; padding:11px 10px 11px 13px; text-align:left; font:700 17px/1.12 var(--serif); }
.canvas-person-name small { font:400 10px/1.3 var(--sans); margin-top:7px; color:var(--muted); }
.canvas-expand { position:absolute; right:8px; top:29px; width:28px; height:28px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font:400 18px var(--sans); background:#faf6ed; }
.shared-ancestor { position:absolute; right:6px; bottom:4px; font:500 8px var(--sans); color:var(--muted); }
.photo-counter { font:500 13px var(--sans); align-self:center; white-space:nowrap; }
#media-reader[open] { display:flex; flex-direction:column; }
#media-reader .media-content { height:auto; flex:1; min-height:0; }
.places-toolbar { margin-bottom:18px!important; }
.map-regions { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 15px; }
.map-regions button { border:1px solid var(--line); border-radius:5px; min-height:37px; padding:8px 14px; font-size:13px; background:var(--panel); }
.map-regions button[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.places-map { position:relative; height:420px; border:1px solid #adb7a9; border-radius:10px; overflow:hidden; background:#e1e9e1; box-shadow:0 8px 24px #173c3808; }
.map-controls { position:absolute; z-index:2; left:13px; right:13px; top:12px; display:flex; align-items:flex-start; justify-content:space-between; pointer-events:none; }
.map-controls>div { display:flex; gap:6px; pointer-events:auto; }
.map-controls button { border:1px solid #b4baa9; background:var(--panel); border-radius:5px; min-height:33px; min-width:33px; font-size:13px; padding:6px 10px; box-shadow:0 2px 5px #173c380c; }
.map-legend { background:#fffdf4e6; padding:9px 10px; border:1px solid #c4c7b6; border-radius:5px; font:500 11px var(--sans); gap:15px!important; }
.map-legend span { display:flex; align-items:center; gap:6px; }
.map-legend span::before { content:""; display:block; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink); }
.legend-locality::before { background:var(--ink); }
.family-map { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.family-map.is-dragging { cursor:grabbing; }
.map-grid path { fill:none; stroke:#aebdb133; stroke-width:.6; vector-effect:non-scaling-stroke; }
.map-land path { fill:#e7e1d0; stroke:#9aab99; stroke-width:.7; vector-effect:non-scaling-stroke; }
.map-land path.has-family { fill:#f8f3e5; }
.map-country-labels text { fill:#556d5e; font-family:var(--sans); font-weight:500; letter-spacing:.04em; text-anchor:middle; }
.map-marker { cursor:pointer; }
.map-marker circle { fill:var(--ink); stroke:var(--panel); stroke-width:2; vector-effect:non-scaling-stroke; }
.map-marker text { fill:var(--panel); text-anchor:middle; font-family:var(--sans); font-weight:700; pointer-events:none; }
.map-marker.country-marker circle { fill:#faf7ec; stroke:var(--ink); }
.map-marker.country-marker text { fill:var(--ink); }
.country-leader { fill:none; stroke:#627b6c; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.map-marker.paternal-marker:not(.country-marker) circle { fill:#87622e; }
.map-marker.is-selected circle { stroke:#c1913e; stroke-width:4; }
.map-marker:focus-visible { outline:none; }
.map-marker:focus-visible circle { stroke:#9e571d; stroke-width:4; }
.map-empty { position:absolute; bottom:25px; left:20px; padding:10px 14px; background:var(--panel); font:500 14px var(--sans); border-radius:5px; }
.map-sources { font:400 12px var(--sans); color:var(--muted); margin:12px 0 22px; }
.map-sources summary { cursor:pointer; }
.map-sources p { margin:12px 0; }
.place-count { display:flex; align-items:center; margin:0 0 16px; gap:15px; font:500 13px var(--sans); }
.places-browser { grid-template-columns:330px minmax(0,1fr); gap:28px; }
.place-directory { position:sticky; top:24px; background:var(--panel); border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.place-directory .directory-pagination { padding:12px; border-bottom:1px solid var(--line); margin:0; }
.place-directory .record-index { position:static; padding:0; border:0; max-height:560px; }
.place-directory .record-index button { padding:14px 12px; min-height:85px; gap:13px; }
.place-directory .record-index strong { font-size:18px; }
.place-directory .record-index small { font-size:11px; margin-top:5px; }
.place-directory .record-index img { width:65px; height:58px; }
.place-reader { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:25px; }
.place-reader .record-image img { max-height:340px; }
.place-reader h2 { font-size:33px; }
.place-events ol { list-style:none; padding:0; }
.place-events li { display:flex; flex-direction:column; padding:13px 0; border-bottom:1px solid var(--line); gap:5px; font-size:18px; }
.place-events li span { font:500 11px var(--sans); color:#6c634f; }
.map-position { font:400 13px var(--sans); border-top:1px solid var(--line); padding-top:16px; margin-top:20px; }
.map-position dt { font-weight:600; margin-bottom:5px; }
.map-position dd { margin:0; }
@media(min-width:981px) and (max-width:1200px) {
  .home-hero { padding:30px; gap:28px; }
  .site-header nav { gap:0; font-size:13px; }
  .person-inspector { padding:19px; }
  .person-inspector h2 { font-size:28px; }
  .directory-person { grid-template-columns:minmax(0,1fr); }
  .directory-person .directory-relation { justify-content:flex-start; }
  .places-browser { grid-template-columns:290px minmax(0,1fr); }
}
@media(max-width:980px) {
  .site-header { min-height:90px; }
  .home-hero { padding:30px 24px; gap:23px; }
  .person-inspector { position:static; max-height:none; margin-top:10px; padding:24px; }
  .person-inspector .fact-list { display:block; }
  .person-inspector ul { display:block; }
  .directory-scroll { max-height:540px; }
  .family-layout--canvas { grid-template-columns:1fr; }
  .places-browser { grid-template-columns:260px minmax(0,1fr); gap:20px; }
  .place-reader { padding:20px; }
  .place-reader h2 { font-size:29px; }
}
@media(max-width:640px) {
  .site-header { min-height:83px; }
  .page-heading { padding:25px 0 20px; }
  .page-heading h1 { font-size:43px; }
  .header-logo { flex-basis:300px; width:300px; }
  .home-hero { padding:28px 14px; margin:22px 0 27px; min-height:0; gap:0; }
  .preview-side>.preview-node { font-size:17px; }
  .preview-grandparents { gap:5px; }
  .preview-grandparents .preview-node { font-size:12px; padding:11px 2px; }
  .preview-parents { gap:10px; }
  .preview-root { width:79%; font-size:20px; }
  .branch-section h2 { font-size:32px; }
  .view-tabs { gap:9px; }
  .view-tabs a { padding:9px 10px; font-size:17px; }
  .directory-controls { flex-wrap:wrap; gap:12px; }
  .directory-controls label { flex:1 1 145px; flex-direction:column; gap:7px; align-items:stretch; }
  .directory-controls select { min-width:0; width:100%; }
  .directory-scroll { min-height:300px; max-height:480px; }
  .directory-person { padding:14px 13px; }
  .directory-person strong { font-size:21px; }
  .directory-person .directory-relation { justify-content:flex-start; }
  .generation-heading h2 { font-size:21px; }
  .person-inspector { padding:21px; }
  .person-inspector h2 { font-size:31px; }
  .canvas-toolbar { padding:11px; gap:12px; }
  .canvas-count { margin:0; }
  .canvas-zoom { width:100%; justify-content:space-between; }
  .tree-viewport { height:450px; min-height:450px; }
  .map-regions { gap:7px; }
  .map-regions button { padding:8px 10px; font-size:12px; }
  .places-map { height:330px; }
  .map-controls { left:9px; right:9px; top:9px; }
  .map-controls button { min-width:29px; padding:6px 8px; font-size:12px; }
  .map-legend { padding:8px; font-size:9px; gap:9px!important; }
  .map-controls>div { gap:4px; }
  .places-browser { grid-template-columns:1fr; }
  .place-directory { position:static; }
  .place-directory .record-index { max-height:285px; }
  .place-reader { padding:19px; }
  .place-reader h2 { font-size:29px; }
  .place-events li { font-size:17px; }
  .dialog-actions { flex-wrap:wrap; }
  .photo-counter { font-size:11px; }
}
@media print {
  body::before,.canvas-toolbar,.map-controls { display:none; }
  .person-inspector,.place-directory { position:static; max-height:none; overflow:visible; }
  .directory-scroll { max-height:none; }
}
.record-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin:20px 0; font:500 13px var(--sans); }
.reference-page { display:block; width:100%; height:620px; margin-top:26px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.record-index button>span { min-width:0; }
.record-index strong { overflow-wrap:anywhere; }
@media(max-width:640px) { .reference-page { height:500px; } .record-actions { gap:12px; } }
body[data-page=home] .branch-section { border-bottom:0; }
.directory-controls [data-generation] { min-width:220px; }
@media(max-width:640px) {
  .directory-controls label:first-child { flex:1 1 205px; }
  .directory-controls label:last-child { flex:1 1 110px; }
  .directory-controls [data-generation] { min-width:0; }
}
.profile-artifact { margin:20px 0; }
.profile-artifact .record-image { margin-bottom:8px; }
.profile-artifact img { max-height:240px; }
.profile-artifact figcaption { font:500 14px/1.5 var(--sans); }
.profile-artifact .related-links { margin-top:8px; }

.year-control { display:grid; grid-template-columns:1fr 1fr; gap:3px 0; padding-top:4px; }
.year-control input { grid-column:1/-1; width:100%; min-width:0; margin:0; }
.year-control>span:last-child { text-align:right; }
.timeline-item { padding-block:18px; scroll-margin-top:var(--timeline-scroll-offset, 190px); }
.timeline-item .event-type { margin-bottom:5px; }
.timeline-item p { margin-top:6px; }
.timeline-item .sources { margin-top:9px; padding-top:7px; }
.timeline-item .sources summary { font-size:13px; }
.timeline-item>div:last-child { min-width:0; }
.timeline-context { align-items:center; gap:8px 12px; margin-top:8px; }
.timeline-context .timeline-person { display:inline-flex; flex-direction:column; gap:3px; max-width:100%; padding:5px 9px; border:1px solid var(--line); border-radius:4px; background:#eaf0e7; color:var(--ink); text-decoration:none; }
.timeline-context .timeline-person:hover { border-color:var(--ink); background:#e0e9dd; }
.timeline-person-name { font-size:13px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.timeline-person-connection { display:flex; flex-wrap:wrap; gap:1px 7px; align-items:baseline; font:400 12px/1.45 var(--sans); }
.timeline-person-connection strong { font-weight:600; }
.timeline-person-line { color:#625d4e; }
.timeline-person--single .timeline-person-connection { font-size:13px; }
@media(max-width:640px) {
  .timeline-item { padding-block:16px; }
  .timeline-item .timeline-context { margin-top:8px; }
}