:root{--bg:#f8f6f0;--fg:#233029;--muted:#506058;--accent:#2f6b52;--sage:#6f9a82;--sage-dk:#2f5444;--sage-lt:#e3ece4;--warm:#e0a458;--warm-lt:#fbf1de;--card:#ffffff;--line:#d9d9cc;--head:#eef2ea}
@media (prefers-color-scheme:dark){:root{--bg:#161c19;--fg:#e6ebe7;--muted:#a9b8b0;--accent:#95d3b4;--sage:#5f8a74;--sage-dk:#c9e6d6;--sage-lt:#22302a;--warm:#e0a458;--warm-lt:#2b2519;--card:#1d2621;--line:#33423a;--head:#1b241f}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.1rem}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--bg);padding:.5rem 1rem;z-index:10}
.skip:focus{left:0}
.site-header{background:var(--head);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;padding-top:.6rem;padding-bottom:.6rem}
.brand,.foot-brand{display:inline-flex;align-items:center;gap:.5rem;font-size:1.35rem;font-weight:600;color:var(--fg);text-decoration:none;letter-spacing:.01em}
.brand b{font-weight:700;color:var(--accent)}
.logo{flex:none}
nav a{display:inline-block;padding:.5rem .7rem;color:var(--fg);text-decoration:none;border-radius:6px;font-size:.95rem}
nav a:hover{background:var(--sage-lt)}
nav a[aria-current]{font-weight:700;color:var(--accent);box-shadow:inset 0 -2px 0 var(--warm);border-radius:0}
a{color:var(--accent);text-underline-offset:.18em}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
main{padding-top:1.5rem;padding-bottom:3rem}
main>*:not(.hero):not(.guide-list):not(.more):not(.table-wrap){max-width:65ch}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;color:var(--sage-dk);letter-spacing:-.005em}
h1{font-size:2rem;line-height:1.2;margin:.6rem 0 1rem}
h2{font-size:1.5rem;line-height:1.3;margin:2.2rem 0 .6rem;padding-top:.3rem}
h2::after{content:"";display:block;width:2.2rem;height:3px;background:var(--warm);border-radius:2px;margin-top:.35rem}
h3{font-size:1.2rem;margin:1.6rem 0 .4rem}
p,ul,ol{margin:0 0 1.1rem}
li{margin-bottom:.45rem;padding-left:.2rem}
ul li::marker{color:var(--warm);font-size:1.1em}
ol li::marker{color:var(--accent);font-weight:700}
strong{color:var(--fg)}
.lead{font-size:1.2rem;color:var(--muted)}
.hero{display:grid;gap:1rem;align-items:center;background:linear-gradient(135deg,var(--sage-lt),var(--warm-lt));border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.25rem;margin:0 0 2rem}
.hero h1{margin:0 0 .5rem;font-size:2.1rem}
.hero p{margin:0 0 .5rem}
.hero-art{width:min(210px,60%);height:auto;justify-self:center}
.btn{display:inline-block;background:var(--accent);color:var(--bg);padding:.6rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:600;margin-top:.5rem}
.btn:hover{filter:brightness(1.1)}
@media (min-width:600px){.hero{grid-template-columns:1.4fr 1fr;padding:2rem}.hero-art{width:100%}}
.guide-list{list-style:none;padding:0;display:grid;gap:.9rem}
.guide-list li{margin:0;padding:0}
.card{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;height:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;color:var(--fg);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover,.card:focus-visible{border-color:var(--sage);box-shadow:0 6px 18px rgba(47,84,68,.15);transform:translateY(-2px)}
.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gicon{grid-row:span 3;color:var(--accent);background:var(--sage-lt);padding:8px;border-radius:12px;width:44px;height:44px}
.card .t{font-weight:700;font-size:1.08rem;line-height:1.35;color:var(--sage-dk)}
.card .s{color:var(--muted);font-size:.95rem;line-height:1.55}
.card .m{font-size:.85rem;color:var(--accent);font-weight:600}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover,.card:focus-visible{transform:none}html{scroll-behavior:auto}}
.crumb{display:inline-block;margin:0 0 .5rem;font-size:.95rem;text-decoration:none;font-weight:600}
.crumb:hover{text-decoration:underline}
.meta{color:var(--muted);font-size:.9rem;margin:-.4rem 0 1rem}
.table-wrap{overflow-x:auto;margin:0 0 1.2rem;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;background:var(--card);font-size:.97rem}
th,td{border-bottom:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
th{background:var(--sage-lt);color:var(--sage-dk)}
.callout{background:var(--warm-lt);border:1px solid var(--line);border-left:5px solid var(--warm);border-radius:10px;padding:.8rem 1rem;margin:1.8rem 0 1rem;color:var(--fg)}
.sources{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.2rem 1.1rem 0;margin:2rem 0 1rem;font-size:.93rem;color:var(--muted)}
.sources h2{font-size:1.15rem;margin-top:.8rem}
.sources li{overflow-wrap:anywhere}
.more{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1rem}
.more h2{margin-top:.5rem}
.more ul{list-style:none;padding:0}
.more li{margin:0;padding:0}
.more li a{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .2rem;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
.more li a:hover{background:var(--sage-lt)}
.more li a span{color:var(--muted);font-weight:400;font-size:.88rem;white-space:nowrap}
.site-footer{border-top:1px solid var(--line);background:var(--head);color:var(--muted);font-size:.95rem}
.site-footer .wrap{padding-top:1.8rem;padding-bottom:1.8rem}
.foot-grid{display:grid;gap:1rem;margin-bottom:1rem}
@media (min-width:600px){.foot-grid{grid-template-columns:1.4fr 1fr}}
.foot-brand{font-size:1.15rem;margin:0 0 .3rem}
.site-footer nav{display:flex;flex-wrap:wrap}
.site-footer nav a{color:var(--accent);padding:.4rem .8rem .4rem 0}
.site-footer p{margin:0 0 .4rem}
.foot-note{color:var(--fg)}
.related{margin-top:2rem}
.tool{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin:0 0 1.5rem}
.tool label{display:block;font-weight:600;margin:.6rem 0 .25rem}
.tool input{width:100%;max-width:18rem;font:inherit;padding:.55rem .7rem;border:1px solid var(--muted);border-radius:8px;background:var(--bg);color:var(--fg)}
.tool input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tool .hint{color:var(--muted);font-size:.9rem;margin:.25rem 0 0}
.tool .result{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.tool .result p{margin:0 0 .3rem}
.tool .err{color:var(--fg);font-weight:600}
.example{background:var(--warm-lt);border:1px solid var(--line);border-left:5px solid var(--warm);border-radius:10px;padding:.2rem 1rem;margin:0 0 1.2rem}