/* Camp House (light) and Bone & Timber (dark), the app's two themes. */
:root {
  --ground:#F6F3EA; --raised:#FFFFFF; --ink:#1B1F1A; --soft:#5C6459; --rule:#D6D8CE;
  --green:#3E5C38; --on-green:#F6F3EA; --tint:#E9ECE0;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0F170E; --raised:#1C261A; --ink:#EEE7D3; --soft:#B4AC94; --rule:#333D2F;
    --green:#EEE7D3; --on-green:#0F170E; --tint:#172216;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink);
       font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       -webkit-text-size-adjust:100%; }
a { color:inherit; text-underline-offset:3px; }
.wrap { max-width:960px; margin:0 auto; padding:0 16px; }

.top { border-bottom:1px solid var(--rule); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none;
         font:700 20px/1 Georgia,"Times New Roman",serif; }
.brand img { width:32px; height:32px; border-radius:8px; }
.top nav { display:flex; gap:18px; font-size:15px; }
.top nav a { text-decoration:none; color:var(--soft); }
.top nav a:hover, .top nav a[aria-current] { color:var(--ink); }

h1, h2, h3 { font-family:Georgia,"Times New Roman",serif; line-height:1.15; }
h1 { font-size:clamp(34px,6vw,54px); margin:0 0 16px; letter-spacing:-.01em; }
h2 { font-size:28px; margin:48px 0 12px; }
h3 { font-size:20px; margin:28px 0 8px; }

.hero { padding-top:48px; padding-bottom:40px; display:grid; gap:32px; align-items:center;
        grid-template-columns:1fr; }
.hero .icon { width:96px; height:96px; border-radius:22px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.hero p.lede { font-size:20px; color:var(--soft); margin:0 0 24px; max-width:34em; }
@media (min-width:760px) {
  .hero { grid-template-columns:1fr 200px; padding-top:88px; padding-bottom:56px; }
  .hero .icon { width:200px; height:200px; border-radius:44px; order:2; }
}
.badge { display:inline-block; padding:12px 18px; border-radius:12px; background:var(--green);
         color:var(--on-green); font-weight:600; text-decoration:none; }
.badge.muted { background:transparent; color:var(--ink); border:1px solid var(--rule); }
.cta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cta small { color:var(--soft); font-size:14px; }

.features { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
            padding-top:8px; padding-bottom:64px; }
.feature { background:var(--raised); border:1px solid var(--rule); border-radius:16px; padding:20px; }
.feature h3 { margin:0 0 6px; font-size:19px; }
.feature p { margin:0; color:var(--soft); font-size:16px; }

.band { background:var(--tint); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
        padding:40px 0; }
.band h2 { margin-top:0; }
.band p { max-width:40em; color:var(--soft); margin:0; }

.doc { padding-top:48px; padding-bottom:72px; max-width:752px; }
.doc .meta { color:var(--soft); font-size:15px; margin:0 0 28px; }
.doc p, .doc li { max-width:40em; }
.doc ul { padding-left:22px; }
.doc li { margin:4px 0; }
.doc table { border-collapse:collapse; width:100%; font-size:15px; margin:12px 0; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--rule); }
.doc th { font-weight:600; }
.tablewrap { overflow-x:auto; }
.callout { background:var(--raised); border:1px solid var(--rule); border-radius:14px; padding:16px 18px; margin:20px 0; }
details { background:var(--raised); border:1px solid var(--rule); border-radius:14px; padding:14px 18px; margin:10px 0; }
details summary { cursor:pointer; font-weight:600; }
details p { margin:10px 0 2px; color:var(--soft); }

.foot { border-top:1px solid var(--rule); color:var(--soft); font-size:14px; }
.foot .wrap { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; padding-top:24px; padding-bottom:40px; }
.foot nav { display:flex; gap:18px; }