/* Kin & Ledger — a family record ledger: cool blue-ruled paper with a double rose margin line, a pedigree fan chart that opens ring by ring from the subject outwards, and a faded rose ribbon bookmark; Cormorant Garamond for headings and dates, like a hand-lettered register. */
:root,[data-theme="genealogy-tools"]{
--color-primary:#aa6666;--color-accent:#2b2622;--color-bg:#eceff1;--color-bg-alt:#e1e5e8;
--color-text:#2b2622;--color-text-muted:#5b5652;--color-border:#cdd3d8;
--card:#fbfcfc;--rose:#aa6666;--rose-deep:#8a4848;--rose-pale:#ecd4d2;--ink:#2b2622;--rule:#c9d6e3;--paper:#f8f9fa;
--radius-sm:2px;--radius-md:6px;
--font-display:"Cormorant Garamond",Garamond,"EB Garamond",Georgia,"Times New Roman",serif;
--font-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--margin:linear-gradient(90deg,transparent 30px,var(--rose-pale) 30px 31px,transparent 31px 34px,var(--rose-pale) 34px 35px,transparent 35px);
--ledger:var(--margin),repeating-linear-gradient(transparent 0 27px,var(--rule) 27px 28px)}
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-base);-webkit-font-smoothing:antialiased}
a{color:var(--rose-deep)}
:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px}
/* nav */
.site-nav{background:var(--card);border-bottom:1px solid var(--color-border)}
.nav-container{position:relative;height:60px;max-width:1160px;margin:auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo{height:34px}
.nav-site-name{font:600 24px/1 var(--font-display);color:var(--ink)}
.nav-links,.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.nav-links a,.footer-links a{text-decoration:none;color:var(--color-text-muted);font:600 15px var(--font-base)}
.nav-links a:hover,.footer-links a:hover{color:var(--rose-deep);text-decoration:underline;text-decoration-thickness:2px}
/* home */
.kl-home{max-width:1160px;margin:auto;padding:0 20px 90px}
.kl-hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:center;margin:40px 0 44px;padding-bottom:40px;border-bottom:1px solid var(--color-border)}
.kl-copy small{font:600 italic 18px var(--font-display);letter-spacing:.04em;color:var(--rose-deep)}
.kl-copy h1{font:600 clamp(42px,5.6vw,74px)/.98 var(--font-display);margin:10px 0 18px;color:var(--ink);letter-spacing:-.01em}
.kl-copy h1 em{color:var(--rose-deep)}
.kl-copy p{font-size:17px;line-height:1.7;color:var(--color-text-muted);max-width:54ch;margin:0}
.kl-leaf{position:relative;padding:28px 26px 20px 52px;background:var(--paper);background-image:var(--ledger);border:1px solid var(--color-border);box-shadow:0 18px 34px #2b26221f}
.kl-ribbon{position:absolute;top:-10px;right:44px;width:22px;height:120px;background:linear-gradient(90deg,var(--rose-deep),var(--rose) 45%,var(--rose-deep));clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);transform-origin:top;animation:kl-ribbon 1s ease-out 2.4s both}
@keyframes kl-ribbon{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.kl-leaf svg{display:block;width:100%;height:auto}
.kl-ring path{stroke:var(--ink);stroke-width:1}
.kl-ring .is-f{fill:#fff}.kl-ring .is-m{fill:var(--rose-pale)}
.kl-ring{opacity:0;transform-origin:200px 200px;animation:kl-open .6s cubic-bezier(.2,.7,.3,1) forwards}
.kl-g1{animation-delay:.3s}.kl-g2{animation-delay:.8s}.kl-g3{animation-delay:1.3s}.kl-g4{animation-delay:1.8s}
@keyframes kl-open{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.kl-core{fill:var(--rose);stroke:var(--ink);stroke-width:1}
.kl-num{font:600 18px var(--font-display);fill:#fff;text-anchor:middle}
.kl-lbl{font:600 italic 13px var(--font-display);fill:var(--color-text-muted);text-anchor:middle}
.kl-cap{margin:6px 0 0;font:600 italic 15px var(--font-display);color:var(--color-text-muted);text-align:center}
.kl-rail{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:10px;font:600 24px var(--font-display);color:var(--color-text-muted)}
.kl-rail b{color:var(--ink)}
.kl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
.kl-card{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px 50px;background:var(--paper);background-image:var(--margin);border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.kl-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px #2b26221f}
.kl-sym{align-self:flex-start;font:600 italic 21px var(--font-display);color:var(--rose-deep)}
.kl-card h2{font:700 25px/1.08 var(--font-display);margin:8px 0 8px;color:var(--ink)}
.kl-card p{margin:0 0 16px;font-size:14px;line-height:1.65;color:var(--color-text-muted);flex:1}
.kl-open{font:700 14px var(--font-base);color:var(--rose-deep)}
.kl-note{margin-top:34px;padding:16px 18px;border-left:6px solid var(--rose);border-radius:var(--radius-sm);background:var(--card);font-size:14px;line-height:1.7;color:var(--color-text-muted)}
/* detail */
.kld-page{max-width:1080px;margin:auto;padding:24px 20px 90px}
.kld-crumb{font-size:13px;color:var(--color-text-muted)}
.kld-crumb a{text-decoration:none;font-weight:700}
.kld-head{max-width:800px;padding:30px 0 24px}
.kld-kicker{display:inline-block;font:600 italic 17px var(--font-display);color:var(--rose-deep)}
.kld-head h1{font:700 clamp(36px,5vw,60px)/1.02 var(--font-display);margin:8px 0 14px;color:var(--ink)}
.kld-head p{font-size:18px;line-height:1.7;color:var(--color-text-muted);margin:0}
.kld-tool{background:var(--card);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin:14px 0 50px;box-shadow:0 16px 34px #2b26221a}
.kld-tool-label{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;background:var(--ink);color:var(--paper);font:600 22px var(--font-display)}
.kld-tool-label i{flex:0 0 12px;height:30px;background:var(--rose);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.kld-tool-body{padding:28px}
.kld-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px}
.kld-reading{font-size:17px;line-height:1.8}
.kld-reading h2{font:700 31px/1.1 var(--font-display);margin:36px 0 12px;color:var(--ink)}
.kld-reading p{margin:0 0 14px}
.kld-reading ol,.kld-reading ul{margin:0 0 16px;padding-left:22px}
.kld-reading ol{list-style:decimal}.kld-reading ul{list-style:disc}
.kld-reading li{margin-bottom:7px}
.kld-side{position:relative;align-self:start;background:var(--paper);background-image:var(--ledger);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px 20px 20px 48px;color:var(--color-text-muted);font-size:14px;line-height:28px}
.kld-side strong{display:block;color:var(--ink);font:700 21px/28px var(--font-display)}
.kld-side a{display:inline-block;margin-top:0;font-weight:700;text-decoration:none;color:var(--rose-deep)}
.kld-side a:hover{text-decoration:underline}
.kld-index{margin-top:28px}
.kld-index ul{list-style:none;margin:0;padding:0}
.kld-index li{font-size:13px;line-height:28px}
.kld-index a{display:block;margin:0;font-weight:400;color:var(--color-text)}
.kld-index span[aria-current]{font-weight:700;color:var(--rose-deep)}
.kld-faq,.kld-related{margin-top:56px}
.kld-faq h2,.kld-related h2{font:700 31px var(--font-display);margin:0 0 16px;color:var(--ink)}
.kld-faq details{border-bottom:1px solid var(--color-border);padding:15px 0}
.kld-faq summary{cursor:pointer;font-weight:700}
.kld-faq p{color:var(--color-text-muted);line-height:1.75}
.kld-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kld-related-card{display:block;background:var(--card);padding:18px 20px 20px;border:1px solid var(--color-border);border-top:5px solid var(--rose);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:transform .16s}
.kld-related-card:hover{transform:translateY(-3px)}
.kld-related-card h3{font:700 22px/1.15 var(--font-display);margin:0 0 8px;color:var(--ink)}
.kld-related-card p{font-size:14px;line-height:1.6;color:var(--color-text-muted);margin:0 0 12px}
.kld-related-card span{font:700 14px var(--font-base);color:var(--rose-deep)}
.kld-disclaimer{margin:44px 0 0;padding:16px 18px;border-left:6px solid var(--rose);border-radius:var(--radius-sm);background:var(--card);font-size:14px;line-height:1.7;color:var(--color-text-muted)}
.site-footer{background:var(--card);border-top:1px solid var(--color-border);padding:32px 20px;text-align:center}
.footer-copyright{margin-top:14px;font-size:12px;color:var(--color-text-muted)}
/* tool surface */
[data-theme="genealogy-tools"] .tool-row{gap:16px;margin-bottom:18px}
[data-theme="genealogy-tools"] .tool-field{font-size:13px;font-weight:700;color:var(--color-text-muted);gap:7px}
[data-theme="genealogy-tools"] .tool-input,[data-theme="genealogy-tools"] .tool-textarea{border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;padding:10px 12px;font:16px/1.4 var(--font-base);color:var(--color-text)}
[data-theme="genealogy-tools"] input[type="text"].tool-input{font:600 20px/1.3 var(--font-display)}
[data-theme="genealogy-tools"] .tool-input:focus{outline:0;border-color:var(--rose-deep);box-shadow:0 0 0 3px #aa666633}
[data-theme="genealogy-tools"] .tool-btn{border-radius:var(--radius-sm);font:700 14px var(--font-base)}
[data-theme="genealogy-tools"] .tool-btn-primary{background:var(--rose-deep);color:#fff;border:0}
[data-theme="genealogy-tools"] .tool-result-box{margin-top:22px;padding:22px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--color-border);border-top:5px solid var(--rose);font-size:15px;word-break:normal}
[data-theme="genealogy-tools"] .tool-stat-hero{margin:0 0 8px;font:700 clamp(34px,6vw,54px)/1.05 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
[data-theme="genealogy-tools"] .tool-unit{display:inline-block;margin-left:12px;font:600 15px var(--font-base);color:var(--rose-deep);vertical-align:middle}
[data-theme="genealogy-tools"] .tool-hint{font-size:14px;line-height:1.7;color:var(--color-text-muted);margin:8px 0 0}
[data-theme="genealogy-tools"] .tool-hint strong{color:var(--ink)}
[data-theme="genealogy-tools"] .tool-scroll{overflow-x:auto;margin-top:14px}
[data-theme="genealogy-tools"] .tool-table td,[data-theme="genealogy-tools"] .tool-table th{font-size:14px;background:#fff}
[data-theme="genealogy-tools"] .tool-table th{background:var(--ink);color:var(--paper)}
@media(max-width:960px){
.kl-grid,.kld-related-grid{grid-template-columns:repeat(2,1fr)}
.kl-hero{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
}
@media(max-width:768px){
.kl-hero{display:none}
.kl-home{padding:24px 16px 60px}
.kl-grid,.kld-related-grid{grid-template-columns:1fr}
.kld-head{padding-top:22px}
.kld-layout{grid-template-columns:1fr;gap:28px}
.kld-tool-body{padding:20px 16px}
.kld-tool-label{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){
.kl-ring{animation:none;opacity:1}
.kl-ribbon{animation:none}
.kl-card:hover,.kld-related-card:hover{transform:none}
}
[data-theme="genealogy-tools"] .static-page-container a{color:var(--rose-deep)}
[data-theme="genealogy-tools"] .guide-breadcrumb a,[data-theme="genealogy-tools"] .guide-index-link{color:var(--rose-deep)}