/* The privacy, terms and credits pages: one plain column on the map's colours, light or dark
   to match the device, the way index.html does it. */
:root{
  color-scheme: light;
  --ground:#EEF1EC; --surface:#FAFBF8; --line:#DCE3DA; --line-soft:#E6EBE4;
  --ink:#1E2A22; --ink-2:#465249; --ink-3:#68746B;
  --accent:#2F5E46; --accent-ink:#F4F7F2; --focus:#2F5E46; --sign:#2F5E46; --parch:#F1E8CF; --parch-2:#EDE4CB;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme: dark;
  --ground:#111411; --surface:#1A1E1A; --line:#343A33; --line-soft:#2A302A;
  --ink:#ECE7D8; --ink-2:#B4B3A4; --ink-3:#98998B;
  --accent:#9FD3B4; --accent-ink:#10231A; --focus:#9FD3B4; --sign:#1A4D36; --parch:#F1E8CF; --parch-2:#D5CCB3;
}}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px; border-radius:4px}
a{color:var(--accent); text-underline-offset:3px}
.page{max-width:720px; margin:0 auto; padding:24px 16px 64px}
.back{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:500; text-decoration:none}
.back svg{width:18px; height:18px}
/* The page's name on the park sign, as on the map. */
.sign{margin:12px 0 28px; padding:22px 24px; border-radius:18px; background:var(--sign); color:var(--parch); box-shadow:inset 0 0 0 4px var(--sign),inset 0 0 0 5px rgba(241,232,207,.38)}
.sign h1{margin:0; font-size:clamp(28px,6vw,36px); font-weight:700; line-height:1.1}
.sign p{margin:6px 0 0; color:var(--parch-2); font-size:15px}
.doc{padding:8px 24px 20px; border-radius:18px; background:var(--surface); box-shadow:0 0 0 1px var(--line)}
.doc h2{margin:28px 0 8px; font-size:19px; font-weight:700; line-height:1.25}
.doc h3{margin:20px 0 4px; font-size:16px; font-weight:600}
.doc p,.doc ul{margin:0 0 12px}
.doc ul{padding-left:22px}
.doc li{margin:0 0 6px}
.doc .lead{margin-top:20px; font-size:18px; color:var(--ink)}
.doc small,.note{color:var(--ink-3); font-size:14px}
/* Who keeps what, for how long: a two-column list that stacks on a phone. */
.keep{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,12em); margin:0 0 12px; border-top:1px solid var(--line-soft)}
.keep dt,.keep dd{margin:0; padding:9px 0; border-bottom:1px solid var(--line-soft)}
.keep dt{padding-right:16px}
.keep dd{color:var(--ink-2)}
@media (max-width:560px){
  .doc{padding:4px 18px 16px}
  .keep{grid-template-columns:minmax(0,1fr)}
  .keep dt{padding-bottom:0; border-bottom:0; font-weight:500}
  .keep dd{padding-top:2px}
}
.foot{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:22px; font-size:15px; color:var(--ink-3)}