:root{--bg:#f4f1e9;--ink:#2f2925;--navy:#173a56;--blue:#24577d;--h:#173a56;--mut:#536b79;--line:#a5b5bd;--row:#d2d9d9;--tint:#e3e9ea;--on-navy:#f4f1e9;--sky:#a9d0ee;--male:#7c302d;--female:#8b6348;--care:#28633e;--albino:#a65e67;
--serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121c24;--ink:#e6e2d9;--navy:#0f2335;--blue:#7fb4dc;--h:#a9d0ee;--mut:#9db3c0;--line:#3b5160;--row:#334857;--tint:#223240;--on-navy:#e6e2d9;--male:#e59a96;--female:#d4a98c;--care:#7cc596;--albino:#e0959f}}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* top bar */
.bar{position:sticky;top:0;z-index:5;background:var(--navy);color:var(--on-navy);padding-top:env(safe-area-inset-top,0px)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font:700 21px var(--serif);color:var(--on-navy);text-decoration:none}
.bar nav{display:flex;gap:22px;height:100%}
.bar nav a{display:flex;align-items:center;color:var(--on-navy);opacity:.8;text-decoration:none;font-size:15px;font-weight:600;border-bottom:3px solid transparent;padding-top:3px}
.bar nav a:hover{opacity:1}
.bar nav a[aria-current="page"]{opacity:1;border-bottom-color:var(--on-navy)}

/* hero */
.hero{background:var(--navy);color:var(--on-navy);padding:52px 0 40px;border-bottom:6px solid var(--male)}
.hero h1{font-size:clamp(40px,7vw,76px);margin:0 0 10px;font-weight:700}
.hero .sub{font-size:19px;opacity:.88;margin:0 0 22px;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips li,.jump a{font-size:14px;font-weight:600;padding:4px 14px;border-radius:999px;border:1px solid rgba(244,241,233,.4);color:var(--on-navy);text-decoration:none;margin:0;line-height:1.55}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.jump a:hover{background:rgba(255,255,255,.14)}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;padding-top:44px;padding-bottom:64px;align-items:start}
main section{display:flow-root;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--row)}
main section:last-child{border-bottom:0;margin-bottom:0}
h2{font-size:30px;color:var(--h);margin:0 0 14px}
h3{font-size:20px;color:var(--blue);margin:24px 0 4px}
p,li{margin:0 0 13px;max-width:68ch}
ul,ol{padding-left:22px;margin:0 0 13px}
li{margin-bottom:5px}
.lead{font-size:20px;line-height:1.6}
.male{color:var(--male);font-weight:700}.female{color:var(--female);font-weight:700}.care{color:var(--care);font-weight:700}
.callout{border-left:6px solid var(--albino);background:color-mix(in srgb,var(--albino) 9%,transparent);padding:22px 26px 12px;border-radius:0 16px 16px 0}
.callout h2{color:var(--albino)}
.btn{display:inline-block;background:var(--navy);color:var(--on-navy);text-decoration:none;font-weight:700;padding:12px 24px;border-radius:999px;margin-top:4px}
.btn:hover{background:var(--blue)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* photo */
.photo{float:right;width:280px;margin:6px 0 18px 36px}
.photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:2px solid var(--navy);border-radius:16px;box-shadow:9px 9px 0 var(--tint)}
.photo figcaption{font-size:13.5px;color:var(--mut);padding-top:14px;font-style:italic}
@media (max-width:620px){.photo{float:none;width:100%;max-width:340px;margin:6px 0 22px}}

/* sidebar */
aside{position:sticky;top:80px;display:grid;gap:22px}
.panel{background:var(--navy);color:var(--on-navy);border-radius:18px;padding:24px 26px}
.panel h2{font-size:23px;color:var(--on-navy);margin-bottom:8px}
.panel table{margin:0}
.panel td{border-bottom-color:rgba(244,241,233,.18)}
.panel td:first-child{color:var(--sky);width:44%}
.panel .care{color:#8fd4a4}.panel .male{color:#f0a9a5}
.panel p{font-size:13.5px;opacity:.75;font-style:italic;margin:12px 0 0}

/* tables */
.tw{overflow-x:auto;margin:14px 0 18px;border:1px solid var(--row);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
th{background:var(--tint);color:var(--blue);text-align:left;font-weight:700}
th,td{padding:11px 16px;border-bottom:1px solid var(--row);vertical-align:top}
.panel td{padding:10px 0}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;color:var(--blue);width:36%}

footer{background:var(--navy);color:var(--on-navy);text-align:center;font-size:14px;padding:26px 24px}

@media (max-width:900px){
.layout{grid-template-columns:1fr;gap:32px;padding-top:32px}
aside{position:static}
.bar nav{gap:14px}
.wrap{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}