/* Shared styles for the About, Privacy and any future text pages.
   Colours and fonts match the planner page (index.html). */
:root{--bg:#fbf6ea;--card:#fffdf6;--ink:#233229;--soft:#5b6a5f;--line:#ddd3bb;--herb:#4f7a4a;--sage:#e5ecd8;--amber:#b57a14;--gold:#f0d9a0;
--serif:Fraunces,Georgia,serif;--sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#16201a;--card:#1e2b23;--ink:#efe8d6;--soft:#b3beb4;--line:#38483d;--herb:#8fba87;--sage:#26362b;--amber:#e2a842;--gold:#4a3d1c;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.65 var(--sans);padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2{font-family:var(--serif);line-height:1.2;margin:0}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.1rem}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
a{color:var(--herb)}
header{padding:1rem 0;border-bottom:1px solid var(--line)}
.logo{font:700 1.3rem var(--serif);color:var(--herb);text-decoration:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.menu{position:relative;margin-right:-.6rem}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.6rem;color:var(--soft)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{background:var(--sage);color:var(--ink)}
.menu .mp{position:absolute;right:0;top:calc(100% + .35rem);z-index:30;min-width:13.5rem;background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:.4rem;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.menu .mp a{display:block;padding:.6rem .8rem;border-radius:.5rem;color:var(--ink);text-decoration:none;font-size:1rem}
.menu .mp a:hover{background:var(--sage)}
.menu .mp a.sub{padding:.4rem .8rem .4rem 1.7rem;font-size:.95rem;color:var(--soft)}
.menu .mp a[aria-current]{font-weight:600;color:var(--herb)}
.menu .mp hr{border:0;border-top:1px solid var(--line);margin:.35rem .4rem}
main{padding:1.4rem 0 2.2rem}
h1{font-size:clamp(1.9rem,6vw,2.5rem)}
.lede{font-size:1.15rem;color:var(--soft);margin:.6rem 0 0}
.updated{color:var(--soft);font-size:.9rem;margin:.5rem 0 0}
h2{font-size:1.4rem;margin:2rem 0 .4rem}
p{margin:.6rem 0}
ul,ol{padding-left:1.3rem;margin:.6rem 0}
li{margin:.4rem 0}
.btn{display:inline-block;background:var(--herb);color:#fff;border-radius:.6rem;padding:.8rem 1.4rem;font:600 1.05rem var(--sans);text-decoration:none;margin-top:.8rem}
@media (prefers-color-scheme:dark){.btn{color:#16201a}}
/* guides */
.callout{background:var(--sage);border-radius:.8rem;padding:.8rem 1.1rem;margin:1rem 0}
.callout p{margin:.3rem 0}
.src{color:var(--soft);font-size:.9rem}
.related{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line)}
.cards{display:grid;gap:.8rem;margin:1.2rem 0;padding:0;list-style:none}
.cards a{display:block;background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:1rem 1.1rem;text-decoration:none;color:var(--ink)}
.cards a:hover{border-color:var(--herb)}
.cards strong{display:block;font:700 1.15rem var(--serif);color:var(--herb)}
.cards span{color:var(--soft);font-size:.95rem}
footer{border-top:1px solid var(--line);padding:1rem 0 2rem;color:var(--soft);font-size:.9rem}
footer nav{margin:.4rem 0 0 -.2rem}
footer nav a{color:var(--soft);display:inline-block;padding:.4rem .2rem}
footer nav a[aria-current]{color:var(--ink);font-weight:600;text-decoration:none}