/* hatchetts.com — shared stylesheet */
:root{--bg:#f6f1e7;--paper:#fffdf8;--ink:#2a2622;--muted:#74695c;--accent:#7a2e22;--accent2:#a8764a;--line:#ddd2bf;--serif:Georgia,"Iowan Old Style","Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,Consolas,"Courier New",monospace}
@media(prefers-color-scheme:dark){:root{--bg:#1d1a17;--paper:#26221e;--ink:#eee6d8;--muted:#a79b8a;--accent:#e0907e;--accent2:#c89a6c;--line:#3c352d}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 var(--serif);-webkit-text-size-adjust:100%}
a{color:var(--accent)}img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--paper);padding:8px;z-index:99}
/* header */
.site-header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50}
.bar{max-width:1100px;margin:auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font:italic 700 1.7rem var(--serif);text-decoration:none;color:var(--ink);letter-spacing:.01em}.logo span{color:var(--accent)}
.nav a{font:600 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);margin-left:20px;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{color:var(--accent);border-color:var(--accent)}
#navt{position:absolute;opacity:0;pointer-events:none}.burger{display:none;font:600 .8rem var(--sans);letter-spacing:.1em;cursor:pointer;border:1px solid var(--line);padding:7px 12px;border-radius:4px}
#navt:focus-visible~.burger{outline:2px solid var(--accent)}
@media(max-width:820px){.burger{display:block}.nav{display:none;width:100%;order:3}#navt:checked~.nav{display:block}.bar{flex-wrap:wrap}.nav a{display:block;margin:0;padding:13px 0;border-top:1px solid var(--line);border-bottom:0}}
/* section sub-nav */
.subnav{background:var(--bg);border-bottom:1px solid var(--line)}
.subnav .in{max-width:1100px;margin:auto;padding:0 20px;display:flex;gap:4px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.subnav .who{font:700 .8rem var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:12px 14px 12px 0}
.subnav a{font:500 .9rem var(--sans);text-decoration:none;color:var(--ink);padding:12px 12px;border-bottom:3px solid transparent}
.subnav a:hover{background:var(--paper)}.subnav a.on{border-color:var(--accent);color:var(--accent);font-weight:700}
/* layout */
main{max-width:1100px;margin:auto;padding:32px 20px 56px}
main.wide{max-width:none;padding-left:0;padding-right:0}
main.wide>.prose,main.wide>.mapkey{padding-left:20px;padding-right:20px;box-sizing:border-box}
.wrap{max-width:1100px;margin:auto;padding:0 20px}
h1{font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.15;margin:0 0 .6em}
h2{font-size:1.6rem;margin:1.6em 0 .4em;line-height:1.25}h3{font-size:1.25rem;margin:1.4em 0 .3em}
.kicker{font:600 .75rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.prose{max-width:46em}.prose.full{max-width:none}
.prose p{margin:.9em 0}
.prose img.leftFloater{float:left;margin:.2em 1.2em .6em 0;border:1px solid var(--line);padding:3px;background:var(--paper)}
.prose img.rightFloater{float:right;margin:.2em 0 .6em 1.2em;border:1px solid var(--line);padding:3px;background:var(--paper)}
.prose:after{content:"";display:table;clear:both}
@media(max-width:560px){.prose img.leftFloater,.prose img.rightFloater{float:none;display:block;margin:0 auto 1em}}
.note{background:var(--paper);border-left:4px solid var(--accent2);padding:12px 16px;font-size:.95rem;color:var(--muted)}
.vertLinkList{list-style:none;padding:0;margin:.5em 0 1.2em}.vertLinkList li{padding:10px 0;border-bottom:1px solid var(--line)}
.prose pre{font:.82rem/1.45 var(--mono);background:var(--paper);border:1px solid var(--line);padding:14px;overflow:auto;max-width:100%;white-space:pre}
.table-wrap{overflow-x:auto;max-width:100%}
.prose table{border-collapse:collapse}.prose td,.prose th{padding:4px 10px 4px 0;vertical-align:top}
.crumbs{font:.85rem var(--sans);color:var(--muted);margin:0 0 14px}.crumbs a{color:var(--muted)}
/* hero (home) */
.hero{position:relative;color:#fff;background:#222 center 30%/cover}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,8,.35),rgba(20,12,8,.82))}
.hero .in{position:relative;max-width:1100px;margin:auto;padding:90px 20px 60px}
.hero h1{font-size:clamp(2rem,6vw,3.6rem);line-height:1.1;margin:0 0 12px;max-width:14em}
.hero p{max-width:34em;font-size:1.1rem;margin:0;opacity:.94}.hero small{display:block;margin-top:24px;font:.75rem var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.hero .kicker{color:#f1c9bd}
.families{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0 40px}
.fam{background:var(--paper);border:1px solid var(--line);padding:22px;text-decoration:none;color:var(--ink);display:block;transition:.2s}
.fam:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.fam img{width:72px;height:72px;border-radius:50%;object-fit:cover;filter:sepia(.3);border:3px solid var(--line)}
.fam h3{margin:12px 0 4px;font-size:1.3rem}.fam p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:20px 0}
@media(min-width:700px){.gallery{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.gallery a{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);transition:.2s}
.gallery a:hover{box-shadow:0 8px 20px rgba(0,0,0,.18);transform:translateY(-2px)}
.gallery .ph{aspect-ratio:1/1;overflow:hidden;background:var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.15)}
.gallery a:hover img{filter:none}
.gallery .cap{font:.82rem/1.35 var(--sans);padding:8px 10px}
/* photo page */
.photo-page{max-width:980px}
.photo-page figure{margin:0;text-align:center}
.photo-page figure img{border:1px solid var(--line);background:var(--paper);padding:6px;max-height:88vh;width:auto}
.photo-page figcaption{margin:14px auto 0;max-width:40em;text-align:left;color:var(--ink)}
.pager{display:flex;justify-content:space-between;gap:12px;margin:0 0 18px;font:600 .9rem var(--sans)}
.pager a{text-decoration:none;border:1px solid var(--line);padding:8px 14px;border-radius:4px;background:var(--paper)}.pager a:hover{border-color:var(--accent)}
.pager .mid{border:0;background:none}
/* reports */
.report-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px;font:.85rem var(--sans)}
.report-top a.btn,.btn{background:var(--accent);color:#fff;text-decoration:none;padding:8px 14px;border-radius:4px;font:600 .85rem var(--sans);display:inline-block}
.btn.alt{background:none;color:var(--accent);border:1px solid var(--accent)}
.gen-head{font:700 .8rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:2.6em 0 1em;padding-bottom:6px;border-bottom:2px solid var(--accent);position:sticky;top:56px;background:var(--bg);z-index:5;padding-top:6px}
.person{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);padding:16px 20px;margin:0 0 16px;display:grid;grid-template-columns:3.2rem 1fr auto;gap:0 14px;scroll-margin-top:110px}
.person.f{border-left-color:var(--accent2)}
.person:target{box-shadow:0 0 0 3px var(--accent)}
.person .num{font:700 1.05rem var(--sans);color:var(--muted);text-align:right}
.person .num a{color:var(--muted);text-decoration:none}
.person h3{margin:0 0 4px;font-size:1.25rem}.person h3 a{text-decoration:none}
.person .pics{display:flex;gap:6px}.person .pics img{height:90px;width:auto;border:1px solid var(--line);filter:sepia(.2)}
.person .facts{grid-column:2/3;font-size:.97rem;line-height:1.55}
.person .facts p{margin:.25em 0}
.person .facts .lbl{color:var(--muted);font:600 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-right:.4em}
.person .pnote{font-size:.9rem;color:var(--muted);border-left:3px solid var(--line);padding-left:10px;margin:.6em 0}
.person .spouse{margin-top:.7em;padding-top:.6em;border-top:1px dashed var(--line)}
.person .kids{font:.88rem var(--sans);border-collapse:collapse;margin:.4em 0}.person .kids td{padding:2px 12px 2px 0;color:var(--muted)}.person .kids td.n{color:var(--ink)}
.person sup a{text-decoration:none;font:.7rem var(--sans)}
@media(max-width:640px){.person{grid-template-columns:2.2rem 1fr;padding:14px}.person .pics{grid-column:2;margin-top:8px}.person .facts{grid-column:1/-1}}
.srclist{list-style:none;padding:0;font-size:.9rem}.srclist li{display:grid;grid-template-columns:2.4rem 1fr;padding:8px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}.srclist li:target{background:var(--paper)}
.srclist .n{font:700 .8rem var(--sans);color:var(--muted)}
.namelist{columns:2 280px;column-gap:30px;font:.95rem/1.7 var(--sans)}.namelist a{text-decoration:none}.namelist b{font-weight:700}
.namelist .ltr{break-after:avoid;font:700 1.1rem var(--serif);color:var(--accent);margin-top:.8em}
/* chart */
.chart-tools{position:sticky;top:57px;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 20px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font:.85rem var(--sans)}
.chart-tools input[type=search]{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);min-width:200px}
.chart-tools button{font:600 .8rem var(--sans);padding:7px 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:4px;cursor:pointer}
.chart-tools button:hover{border-color:var(--accent);color:var(--accent)}
.chart-tools .hint{color:var(--muted);flex:1;min-width:200px}
.chart-view{overflow:auto;height:calc(100vh - 230px);height:calc(100dvh - 230px);min-height:380px;background:var(--bg);cursor:grab;position:relative;border-bottom:1px solid var(--line);touch-action:pan-x pan-y}
.chart-view.drag{cursor:grabbing;user-select:none}
.chart-canvas{position:relative;transform-origin:0 0}
.chart-canvas svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.chart-canvas path{fill:none;stroke:var(--line);stroke-width:1.5}
.chart-canvas path.hl{stroke:var(--accent);stroke-width:2.2}
.cbox{position:absolute;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:3px;padding:2px 8px;font:.78rem/1.25 var(--sans);cursor:pointer;overflow:hidden;transition:width .2s,height .2s,left .2s,top .2s,opacity .2s}
.cbox.f{border-left-color:var(--accent2)}
.cbox.rep{border-style:dashed;border-left-style:solid}
.cbox .tt{display:block;color:var(--accent);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-canvas.focused .cbox:not(.keep) .tt{display:none}
.person .ptitle{font:italic .9rem var(--serif);color:var(--accent);margin:-.1rem 0 .2rem}
.cbox.rep .y{font-style:italic}
.cbox b{display:block;font:700 .85rem var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbox .y{color:var(--muted);white-space:nowrap}
.cbox .more{display:none;color:var(--muted);margin-top:3px;font-size:.74rem;white-space:normal}
.cbox .more a{white-space:nowrap}
.chart-canvas.focused .cbox{opacity:.55}
.chart-canvas.focused .cbox.keep{opacity:1}
.chart-canvas.focused .cbox.keep .more{display:block}
.chart-canvas.focused .cbox.sel{background:var(--bg);box-shadow:0 0 0 2px var(--accent)}
.chart-canvas.focused .cbox:not(.keep) b{font-size:.7rem}
.chart-canvas.focused .cbox:not(.keep) .y{display:none}
.nojs-note{padding:20px}
/* map */
#map{height:min(70vh,640px);border:1px solid var(--line);margin:14px 0}
.leaflet-popup-content{font:.9rem/1.45 var(--sans)}
/* contact */
.reveal{font:600 1rem var(--sans)}
/* footer */
.site-footer{border-top:1px solid var(--line);padding:30px 20px;text-align:center;font:.8rem var(--sans);color:var(--muted)}
.site-footer a{color:var(--muted)}
/* search */
.sbox{display:flex;gap:8px;margin:12px 0 20px}.sbox input{flex:1;font:1rem var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}
.sres{list-style:none;padding:0}.sres li{padding:12px 0;border-bottom:1px solid var(--line)}.sres .u{font:.78rem var(--sans);color:var(--muted)}.sres .s{font:.9rem var(--sans);color:var(--muted)}.sres mark{background:rgba(224,160,40,.35);color:inherit}
.site-search{display:inline-block;margin-left:20px}
@media(max-width:820px){.site-search{margin:0}}
@media print{.site-header,.subnav,.chart-tools,.site-footer,.pager{display:none}body{background:#fff;color:#000}}
/* chart search results & report extras */
.findwrap{position:relative}.hits{position:absolute;left:0;top:100%;z-index:30;list-style:none;margin:2px 0 0;padding:0;background:var(--paper);border:1px solid var(--line);min-width:260px;max-height:50vh;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.hits li{padding:8px 12px;cursor:pointer;font:.88rem var(--sans)}.hits li:hover,.hits li:focus{background:var(--bg)}
.kids caption{caption-side:top;text-align:left;color:var(--muted);font:600 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:4px 0}
.person h3 small{font:400 .8rem var(--sans);color:var(--muted)}
.person .mar{margin-top:.6em}
.report h1{margin-bottom:.4em}

.chart-title{font-size:1.25rem;margin:0 0 6px}
@media(max-width:700px){.chart-tools{top:0;padding:6px 10px;gap:6px}.chart-tools input[type=search]{min-width:0;width:100%}.chart-view{height:calc(100dvh - 200px)}.chart-title{font-size:1.05rem}}
.mapwrap{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start}
.mapwrap #map{margin:0}
.places{margin:0;padding:0 0 0 1.4em;font:.95rem/1.5 var(--sans)}.places li{padding:6px 0;border-bottom:1px solid var(--line)}
@media(max-width:800px){.mapwrap{grid-template-columns:1fr}}
.person .pics{grid-column:3;grid-row:1/span 2}.person .num{grid-column:1;grid-row:1}.person .facts{grid-column:2;grid-row:2}
.person>div:nth-child(2){grid-column:2;grid-row:1}
@media(max-width:640px){.person .pics{grid-column:2;grid-row:2;margin:6px 0}.person .facts{grid-column:1/-1;grid-row:3}}
.photo-page .doc-text{margin:18px auto;max-width:46em;text-align:left}
.photo-page .doc-text pre{font:.9rem/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;background:var(--paper);border:1px solid var(--line);padding:14px}
.photo-page figure+figure{margin-top:22px}
/* sticky header + section menu (wraps instead of scrolling) */
.chrome{position:sticky;top:0;z-index:60}
.site-header{position:static}
.subnav input{position:absolute;opacity:0;pointer-events:none}
.subnav .in{display:flex;flex-wrap:wrap;align-items:center;overflow:visible;white-space:normal;gap:0 2px}
.subnav .links{display:flex;flex-wrap:wrap}
.subnav .who{cursor:default}.subnav .cur,.subnav .car{display:none}
.subnav input:focus-visible+.in .who{outline:2px solid var(--accent)}
@media(max-width:820px){
 .subnav .who{width:100%;cursor:pointer;padding:10px 0;display:block}
 .subnav .cur,.subnav .car{display:inline}.subnav .cur{text-transform:none;letter-spacing:0;color:var(--ink)}
 .subnav .links{display:none;width:100%;flex-direction:column;padding-bottom:6px}
 .subnav input:checked+.in .links{display:flex}
 .subnav a{padding:11px 6px;border-top:1px solid var(--line);border-bottom:0}.subnav a.on{border-left:3px solid var(--accent);padding-left:9px}
}
html{scroll-padding-top:calc(var(--chrome-h,100px) + 12px)}
.gen-head{top:var(--chrome-h,100px)}
.person,.srclist li{scroll-margin-top:calc(var(--chrome-h,100px) + 56px)}
.chart-tools,.chart-tools{top:var(--chrome-h,100px)}
@media(max-width:700px){.chart-tools{top:var(--chrome-h,100px)}}
.chart-view{min-height:320px}
/* Leaflet map: contain its internal z-indexes (so it never overlaps the fixed menu) and undo the global img rule */
#map{position:relative;z-index:0;isolation:isolate;contain:paint}
.leaflet-container img,.leaflet-container .leaflet-tile,.leaflet-container .leaflet-marker-icon,.leaflet-container .leaflet-marker-shadow{max-width:none!important;max-height:none!important}
/* document photos shown side by side; wrap on narrow screens */
.docfigs{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:flex-start;margin:1.4em 0}
.docfigs figure{margin:0;flex:0 1 auto;max-width:100%}
.docfigs img{display:block;max-width:100%;height:auto;border:1px solid var(--line);padding:4px;background:var(--paper)}
.docfigs figcaption{font:.85rem var(--sans);color:var(--muted);margin-top:6px}
/* citation dialog */
.cite-bar{margin:0 0 1.2em;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.cite-hint{font:.85rem var(--sans);color:var(--muted)}
.cite-dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:0;border-radius:8px;width:min(680px,calc(100vw - 24px));box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cite-dialog::backdrop{background:rgba(20,12,8,.55)}
.cite-form{padding:20px 22px}.cite-form h2{margin:0 0 12px;font-size:1.3rem}
.cite-tabs{display:flex;gap:6px;margin-bottom:10px}
.cite-tabs button{font:600 .85rem var(--sans);padding:8px 14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:4px;cursor:pointer}
.cite-tabs button[aria-selected=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.cite-text{font:1rem/1.55 var(--serif);background:var(--bg);border:1px solid var(--line);padding:14px;border-radius:4px;max-height:40vh;overflow:auto;user-select:all}
.cite-note{font:.8rem/1.45 var(--sans);color:var(--muted);margin:10px 0}
.cite-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cite-actions .btn{border:1px solid var(--accent);cursor:pointer}.cite-actions .btn.alt{background:none;color:var(--accent)}
#cite-status{font:.85rem var(--sans);color:var(--accent2)}

/* interactive patent map */
.plist{max-height:min(70vh,640px);overflow:auto}
.plabel{display:block;font:600 .8rem var(--sans);margin:0 0 4px}
#pfilter{width:100%;box-sizing:border-box;padding:6px 8px;margin-bottom:8px;border:1px solid var(--line);font:1rem var(--sans)}
.plabel-map{position:absolute;transform:translate(-50%,-50%);font-family:"Helvetica Neue",Arial,sans-serif;font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;color:#3b2a14;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff,0 0 2px #fff;pointer-events:none}
.plabel-map.place{text-align:left;font-weight:500;font-style:italic}
.ptip{font:.9rem/1.3 var(--sans);max-width:240px;white-space:normal}
.pe{padding:4px 0}.pe+.pe{border-top:1px solid var(--line);margin-top:4px}.pe-rec{font-size:.85em;color:#5a4a36}.pe-ref{font-size:.8em;color:#6b5a44}
.mapkey{font:.85rem/1.5 var(--sans);margin:6px 0 0}.mapkey .sw{display:inline-block;width:26px;height:0;vertical-align:middle;margin:0 4px 0 12px}.mapkey .sw:first-child{margin-left:0}
.mapkey .sw-water{border-top:2px solid #1f63d6}.mapkey .sw-dash{border-top:2px dashed #5b3a1e}
.legend12{columns:2;column-gap:2rem;font:.95rem/1.5 var(--sans)}
@media(max-width:600px){.legend12{columns:1}}
/* collapsible charts: the + / - button beside a box, and the "back to" controls */
.xb{position:absolute;width:32px;height:32px;border-radius:50%;border:2px solid var(--accent);background:var(--accent);color:#fff;font:700 22px/26px var(--sans);padding:0;cursor:pointer;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:3}
.xb:hover,.xb:focus-visible{transform:scale(1.12);outline:3px solid rgba(0,0,0,.18)}
.xb.open{background:var(--paper);color:var(--accent)}
.rootlabel{font:.85rem var(--sans);color:var(--muted);margin-left:.4rem}
.xl{position:absolute;font:600 .78rem/20px var(--sans);color:var(--accent);white-space:nowrap;cursor:pointer;z-index:3}
.chart-canvas.focused .xl{display:none!important}
.person .pwiki{font:.9rem var(--sans);margin:0 0 .25rem}
/* compact chart pages: less space above the title, a one-row toolbar, instructions in a Help panel */
main.wide:has(.chart-tools){padding-top:6px}
.chart-tools{padding:6px 14px;gap:6px 10px}
.chart-tools input[type=search]{min-width:150px;flex:0 1 200px;padding:5px 9px}
.chart-tools button{padding:5px 10px}
.helpbox{position:absolute;top:100%;right:14px;max-width:32rem;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.22);padding:12px 16px;font:.9rem/1.5 var(--sans);color:var(--ink);z-index:40;border-radius:0 0 6px 6px}
.helpbox[hidden]{display:none}
@media(max-width:700px){.chart-tools input[type=search]{flex:1 1 120px;width:auto}.chart-tools{padding:5px 8px;gap:5px 6px;font-size:.8rem}.chart-tools button{padding:4px 8px;font-size:.76rem}.helpbox{left:8px;right:8px;max-width:none}.chart-title{margin:0 0 4px}}