:root{
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The type ramp. Every font-size on the site is one of these ten; build-all fails on
     a literal. Body is 16px; the steps below it are the app's small-text sizes, the
     steps above are fluid so headings breathe on wide screens without a media query.
     Exempt by name: the brand lockup (.brand-title/.brand-subtitle) and the nav glyph. */
  --fs-xs:.6875rem; --fs-sm:.8125rem; --fs-base-s:.875rem; --fs-base:1rem;
  --fs-lead:clamp(1.0625rem,1.4vw,1.2rem); --fs-h4:1.125rem; --fs-h3:1.375rem;
  --fs-h2:clamp(1.75rem,3vw,2.5rem); --fs-h1:clamp(2.25rem,5.5vw,3.25rem);
  --fs-display:clamp(2.75rem,6.5vw,4.5rem);
  --forest-950:#0a2418; --forest-900:#123d28; --forest-800:#1a5c3a; --forest-700:#227848;
  --sage-100:#e8f4ea; --sage-80:#d9efe0; --sage-50:#eef8f1;
  --cream:#fdfcf8; --cream-warm:#fbf9f4;
  --text:#102016; --muted:#5a6f62;
  --line:rgba(10,36,24,.12); --line-strong:rgba(10,36,24,.18);
  --accent-gold:#c9a227; --water:#6a92a8;
  --radius-lg:16px; --radius-md:12px; --radius-btn:12px;
  /* The sticky header's height, needed by scroll-margin-top below so anchor links do not
     land under it. It was defined only in the home page's own block, so the calc that
     depends on it would have silently produced nothing on the other 128 pages — an
     invalid value, no offset, and no error anywhere to say so. */
  --header-h:96px;
  /* The shell grows on large screens instead of leaving a 1200px column adrift in the
     middle of a 2000px window — on the home page that stranded the hero copy in the left
     half with the render running out empty to the right. It only widens ABOVE the old
     width: below a 1333px viewport max() holds it at exactly 1200, because a plain vw
     would have quietly NARROWED every laptop. Line length is not at risk — prose carries
     its own 72ch cap, which is the thing the old number was really protecting. */
  --max:min(1600px, max(1200px, 90vw));
  --shadow-soft:0 18px 48px rgba(10,36,24,.1);

  /*
   * The app's own token names, read from web/src/index.css, so a rule written here can
   * name the same colour the app names rather than a near-miss of it. Nothing is repointed
   * yet: --cream and the greens above still drive the page, and the full re-skin is a
   * separate decision because it changes every one of these pages at once.
   *
   * --ink-600 and --ink-800 are the exception, and they are a bug fix. Two generators
   * colour text with them and neither this block nor any other ever declared them, so every
   * one of those declarations was invalid at computed-value time and inherited body ink
   * instead: the campsite row's fact line, the finder's labels, the species' scientific
   * name and its look text all rendered at full strength with no hierarchy under the title.
   */
  --color-bg:#eef6ef; --color-surface:#ffffff; --color-surface-alt:#f7f7f5;
  --color-text:#1a2f1a; --color-muted:#5a6e5c;
  --color-primary:#2d6a3e; --color-primary-soft:#dff0e2; --color-primary-dark:#245432;
  --color-border:#cad8cb; --color-border-accent:#c8d8b0;
  --radius-control:10px; --radius-xl:18px;
  --dur-1:90ms; --dur-2:180ms; --dur-3:320ms; --ease-out:cubic-bezier(.22,1,.36,1);
  --ink-600:var(--muted); --ink-800:var(--text);
}

/*
 * ── The re-skin ───────────────────────────────────────────────────────────────────────
 *
 * The site's own names, repointed at the app's values. Every rule in this stylesheet and in
 * the four per-page blocks still says --forest-800 or --sage-50 or --cream; they now resolve
 * to what the app means by them. 102 rules move through 13 variables without one of them
 * being edited.
 *
 * This is the aliasing stage on purpose. Renaming 102 rules and changing their values in the
 * same commit would make it impossible to tell a colour change from a typo, and the literals
 * that do NOT flow through a variable are a separate problem: roughly 150 of them, and they
 * are what makes a night phase unreadable rather than merely wrong. The other agent turned
 * the equivalent remap on for the home page and screenshotted it after dark: the sections
 * went black because --cream moved, and their headings stayed dark because those are
 * literals, so the page below the hero was black on black. Literals first, remap last.
 *
 * Three greens became one. The site used --forest-700/-800/-900 for link, heading and fill;
 * the app has a single --color-primary with a soft and a dark. Three sages became one soft.
 */
:root{
  --forest-700:var(--color-primary); --forest-800:var(--color-primary); --forest-900:var(--color-primary-dark);
  --sage-50:var(--color-primary-soft); --sage-80:var(--color-primary-soft); --sage-100:var(--color-primary-soft);
  --cream:var(--color-bg); --cream-warm:var(--color-surface-alt);
  --text:var(--color-text); --muted:var(--color-muted);
  --line:var(--color-border); --line-strong:var(--color-border-accent);
  --radius-lg:12px; --radius-md:10px; --radius-btn:var(--radius-control);
  --shadow-soft:0 1px 2px rgba(26,47,26,.05);
}

/* The app has had this since its first stylesheet; the marketing site had no transitions to
   guard, and now it does. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);line-height:1.45;font-weight:400;font-synthesis:none;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:var(--text);background:var(--cream)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--forest-700);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-120px;z-index:200;padding:12px 20px;border-radius:var(--radius-md);
  background:var(--forest-900);color:var(--color-bg);font-weight:700;font-size:var(--fs-base-s);text-decoration:underline;box-shadow:var(--shadow-soft)}
.skip-link:focus{top:16px}

.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 94%,transparent);border-bottom:1px solid var(--line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header{background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
}
/* The header is the home page's header, at the home page's scale, on all 128 other pages.
   It had drifted into a second design: 75px tall against 96, a 26px brand against 38, a
   44px mark against 52, and links packed into 4px-gap pills where the home page spaces
   them 32px apart as plain text. Same items in the same order is not the same nav if it is
   visibly a different bar, and the home page is the exemplar. What these pages keep is the
   static colour — they have no photograph behind the bar to be transparent over. */
.nav{max-width:var(--max);margin:0 auto;padding:18px clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.site-nav{display:flex;list-style:none;margin:0;padding:0;gap:32px;flex-wrap:wrap}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--dur-2) var(--ease-out);
  font-size:var(--fs-base-s);font-weight:650;color:var(--forest-800);text-decoration:none;white-space:nowrap}
.site-nav a:hover{color:var(--color-primary)}
/* The app marks a current thing by filling it, never by underlining it: the nature tabs,
   the filter chips and the bottom nav all do the same thing. The bar this replaces was a
   straight 2px inset inside a 999px pill, so it ran into the rounded corners and read as a
   rendering fault. */
.site-nav a[aria-current="page"]{color:var(--color-primary);
  box-shadow:inset 0 -2px 0 0 var(--color-primary)}
/* Under 900px the nav wraps to its own row beneath the brand rather than crushing the
   call to action; under 560px the brand subtitle is the thing that gives way first. */
/* The mobile nav is appended at the END of this stylesheet, not here — media queries add no
   specificity, so a small-screen rule written mid-file loses to any equal-specificity rule
   below it. That is precisely what happened: the brand subtitle stayed visible on a 390px
   screen because .brand-subtitle{display:block} is declared further down. */
@media (max-width:560px){ .site-nav{gap:16px} .site-nav a{font-size:var(--fs-base-s)} }
.brand-logo{width:52px;height:52px;object-fit:contain;border-radius:50%;box-shadow:0 6px 18px rgba(10,36,24,.12);display:block}
/* --color-text, not --forest-900: the home page sets the wordmark in the near-black the
   rest of its type uses, and --forest-900 is a mid green that read as a different brand
   sitting beside it. */
.brand-title{display:block;font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700;color:var(--color-text)}
.brand-subtitle{display:block;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest-700)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 20px;border-radius:var(--radius-control);
  background:var(--color-primary);color:var(--color-bg);font-weight:600;font-size:var(--fs-lead);letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,47,26,.14)}
.btn-primary:active,.btn-secondary:active{transform:scale(.97)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 20px;border-radius:var(--radius-control);
  background:transparent;color:var(--color-primary);font-weight:600;font-size:var(--fs-lead);letter-spacing:.01em;
  border:1px solid var(--color-border);
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.btn-secondary:hover{background:var(--color-primary-soft);border-color:var(--color-primary);transform:translateY(-1px)}

/* One width across the site: the home page, /sites/ and the forest pages all sit on --max.
   The narrower 920 measure was right when these were prose-only, but the site now has a
   single content width and a page that disagrees with the one before it reads as a
   different site. Line length is handled where it belongs instead — on the text itself,
   below — rather than by squeezing the whole page. */
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
/* Anchor targets clear the sticky header. Without this a nav link to /#before scrolled the
   section flush to the top of the viewport and the header — 96px of it — sat on top of the
   heading, so the link looked like it had landed in the middle of the section. The nav was
   working; it just could not be seen to have worked. */
:target,[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
/* Prose runs the full width of the page, by decision (2026-09-05). It kept a 72ch measure
   until today, which is the conventional reading length; on a 1600px shell that left the
   right half of every page empty, and the owner chose the width. The rule below is kept as
   a record of what the measure was, with the cap removed.
   Was: Prose keeps a readable measure inside the wider page. Unbounded at 1200px a paragraph
   runs to about 150 characters, roughly twice comfortable; 72ch is the same line length the
   page had at 920 and is what actually mattered about that number. */
.wrap > p,.lead,.page-head p,.count-line,figcaption,.nat__look,.nat__go,.nat__sci{max-width:none;}
.lead{font-size:var(--fs-lead)}
.crumbs{font-size:var(--fs-base-s);color:var(--muted);padding:20px 0 0}
.crumbs a{text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--forest-800)}
.kicker{margin-bottom:12px;color:var(--forest-700);font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
h1{margin:0;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.035em;font-weight:700;color:var(--forest-900)}
h2{margin:0;color:var(--forest-900);font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;font-weight:700}
h3{margin:0 0 6px;color:var(--forest-900);font-size:var(--fs-base);letter-spacing:-.01em}
.headline{margin:14px 0 0;color:var(--forest-800);font-size:var(--fs-lead);font-weight:600}
.lead{max-width:none;margin:20px 0 0;color:var(--color-text);font-size:var(--fs-lead);line-height:1.62}
.body-copy{max-width:none;color:var(--color-text);font-size:var(--fs-lead);line-height:1.65}
.body-copy p{margin:0 0 14px}
.body-copy p:last-child{margin-bottom:0}

.hero{padding:clamp(20px,4vw,32px) 0 clamp(28px,5vw,44px);border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,color-mix(in srgb,var(--color-surface) 70%,transparent) 0%,var(--cream-warm) 55%,color-mix(in srgb,var(--color-primary-soft) 40%,transparent) 100%)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.howto{margin:26px 0 0;padding:0;border-top:1px solid var(--line-strong);display:grid}
.howto>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-strong)}
.howto dt{margin:0;font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);padding-top:3px}
.howto dd{margin:0;font-size:var(--fs-base);line-height:1.55;color:var(--color-text)}
@media(max-width:600px){.howto>div{grid-template-columns:1fr;gap:4px}}

.section{padding:clamp(34px,5vw,52px) 0;border-bottom:1px solid var(--line)}
.section:nth-of-type(even){background:color-mix(in srgb,var(--color-surface) 50%,transparent)}
.section-head{margin-bottom:18px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(24px,4vw,40px);align-items:start}
@media (max-width:760px){.split{grid-template-columns:1fr}}

figure{margin:0}
figcaption{margin-top:10px;font-size:var(--fs-base-s);line-height:1.45;color:var(--muted)}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--color-surface);padding:14px;box-shadow:var(--shadow-soft)}
.contour-map{display:block;width:100%;height:auto;aspect-ratio:1/1;background:var(--sage-50);border-radius:var(--radius-md)}
.contour path{fill:none;stroke:color-mix(in srgb,var(--color-primary) 45%,transparent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.contour--index path{stroke:var(--forest-800);stroke-width:5}
.water{pointer-events:none}
.water-area{fill:var(--water);opacity:.5}
.water-line{fill:none;stroke:var(--water);stroke-linecap:round;stroke-linejoin:round;stroke-width:4;opacity:.85}
.water-line--r2{stroke-width:6}
.water-line--r3{stroke-width:9}
.pin-halo{fill:color-mix(in srgb,var(--color-primary) 25%,transparent)}
.pin-dot{fill:var(--forest-700);stroke:var(--color-surface);stroke-width:5}

/* Full-bleed, and it earns it: a horizon that stops at the text margin is a chart, and this
   is meant to read as the land.

   It gets there by sitting OUTSIDE .wrap in the markup rather than by pulling itself out
   with width:100vw and negative viewport margins. 100vw is the width of the viewport
   INCLUDING the scrollbar, so that version overflowed the document by exactly the scrollbar
   and put a horizontal scrollbar under every campsite page. Measured: 1550px of band in a
   1535px viewport. */
.sky-band{margin:22px 0 26px;padding:0}
.sky-band figcaption{max-width:none;margin:12px auto 0;padding:0 clamp(20px,4vw,40px);
  font-size:var(--fs-base-s);line-height:1.6;color:var(--color-muted)}
.skyline{display:block;width:100%;height:auto;aspect-ratio:1440/190;background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-primary-soft) 100%)}
.sky-line{fill:none;stroke:var(--color-primary-dark);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sky-line{stroke-dasharray:var(--len);animation:sky-draw linear both;animation-timeline:view();animation-range:entry 15% cover 55%}
    @keyframes sky-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
  }
}
.sky-ground{fill:var(--forest-900);opacity:.88}
.sky-tick{stroke:var(--color-border);stroke-width:1}
.sky-label{fill:var(--muted);font-size:var(--fs-sm);font-weight:700;font-family:var(--font-sans)}
.sky-grid{stroke:var(--color-border);stroke-dasharray:4 4;stroke-width:1}
.sky-grid-label{fill:var(--muted);font-size:var(--fs-xs);font-family:var(--font-sans)}

table.facts{width:100%;border-collapse:collapse;margin-top:18px;font-size:var(--fs-base)}
table.facts caption{text-align:left;color:var(--muted);font-size:var(--fs-base-s);padding-bottom:8px}
table.facts th,table.facts td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line)}
table.facts thead th{color:var(--forest-800);font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase}
table.facts tbody th{font-weight:600;color:var(--forest-900)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.chips li{padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--sage-50);
  font-size:var(--fs-base-s);font-weight:600;color:var(--forest-800)}
.dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:var(--fs-base)}
.dl dt{color:var(--muted)}
.dl dd{margin:0;font-weight:600;color:var(--forest-900)}
.quote{margin:16px 0 0;padding:14px 18px;border-left:3px solid var(--forest-700);background:var(--sage-50);
  border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:var(--fs-base);line-height:1.6;color:var(--color-text)}
.quote p{margin:0}
.quote cite{display:block;margin-top:8px;font-size:var(--fs-base-s);font-style:normal;color:var(--muted)}

.provenance{font-size:var(--fs-base-s);line-height:1.6;color:var(--muted);max-width:none;}
.provenance ul{margin:12px 0 0;padding-left:20px}
.sun-bars{margin:8px 0 18px;padding:14px 12px 8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px}
/* The chart fills its card. It was capped at 760px, which on a 1,270px card left the bars
   in the left three-fifths and the caption running on past them. */
.sun-bars svg{display:block;width:100%;height:auto}
.sun-bars figcaption{margin:8px 4px 0;font-size:var(--fs-base-s);color:var(--color-muted)}
.section--fix{padding-top:0}
.fix{margin:18px 0 0}.fix__summary{cursor:pointer;font-size:var(--fs-base-s);color:#2d6a3e;text-decoration:underline;text-underline-offset:3px;list-style:none;display:inline}
.fix__summary::-webkit-details-marker{display:none}.fix__form{margin:12px 0 0;display:grid;gap:10px;max-width:none;}
.fix__field{display:grid;gap:4px;font-size:var(--fs-base-s);color:#5b6f62}.fix__field textarea,.fix__field input{font:inherit;font-size:var(--fs-base);padding:8px 10px;border:1px solid rgba(18,61,40,.25);border-radius:8px;background:#fff;color:#23392c}
.fix__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.fix__note{margin:0;font-size:var(--fs-base-s);color:#5b6f62}
.fix__row{display:flex;align-items:center;gap:12px}.fix__send{font:inherit;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid var(--color-primary);background:var(--color-primary);color:#fff;cursor:pointer}.fix__msg{font-size:var(--fs-base-s);color:#2d6a3e}
.section--verdict{padding-top:28px}
.verdict{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.verdict li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:var(--fs-base);line-height:1.5}
.prov{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;line-height:1;margin-top:4px;white-space:nowrap}
.prov--official{background:#123d28;color:#fff}.prov--modeled{background:#e4efe7;color:#123d28}.prov--community{background:#f4e6d2;color:#6b4a1c}
/* The legend names only the classes that actually label a fact. It used to open with
   "Official — Maryland DNR" and across all 99 pages not one line was ever labelled
   Official: _summaries.json holds 380 modeled and 50 community lines, and zero
   official. The single occurrence of the word on a page was the legend promising a
   tier the data never fills. Restore it when a real DNR-sourced line exists, not
   before. (Kept here rather than as an HTML comment, which would have shipped six
   lines of reasoning to every visitor of 99 pages.) */
.verdict-key{margin:16px 0 0;font-size:var(--fs-base-s);color:var(--color-muted)}
.nearby{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.nearby li{border:1px solid var(--color-border);border-radius:12px;padding:14px 16px;background:var(--color-surface)}
.nearby a{text-decoration:none;color:#123d28;display:flex;justify-content:space-between;gap:8px}
.nearby a span{color:var(--color-muted);font-size:var(--fs-base-s)}
.nearby p{margin:6px 0 0;font-size:var(--fs-base-s);color:var(--color-muted);line-height:1.4}
.nearby-all{margin:14px 0 0;font-size:var(--fs-base-s)}
.provenance li{margin:0 0 8px}
.provenance a{text-decoration:underline;text-underline-offset:2px}

/* One definition. It was copied into the nature and shortlist generators and missing from
   /sites/ entirely, which rendered the count on the page built to be where choosing happens
   as an unstyled paragraph. */
.count-line{margin:14px 0 0;color:var(--forest-800);font-size:var(--fs-lead);font-weight:600}
.note{margin:26px 0 0;color:var(--muted);font-size:var(--fs-base);line-height:1.6}

/* The footer is the header's mirror: the page colour with a hairline above it, the nav's
   own words, and the site's list vocabulary rather than a second one. Group titles are the
   contents panel's label; links are its rows. Tokens only, because the home page follows
   the sun and a literal here would be a pale slab on a black page at night. */
.footer{background:var(--color-bg);border-top:1px solid var(--color-border)}
.footer-inner{max-width:var(--max);margin:0 auto;padding:44px clamp(20px,4vw,40px) 28px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,48px);align-items:start}
.footer-brand p{margin:14px 0 0;max-width:34ch;color:var(--color-muted);font-size:var(--fs-base-s);line-height:1.6}
.brand-logo--footer{width:40px;height:40px}
.footer-nav h4{margin:0 0 8px;font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);font-weight:700}
.footer-link-list{list-style:none;margin:0;padding:0}
.footer-link-list a{display:inline-block;padding:5px 0;color:var(--color-text);font-weight:500;font-size:var(--fs-base-s);line-height:1.4;text-decoration:none}
.footer-link-list a:hover{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.footer-note{margin-top:36px;padding-top:18px;border-top:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:baseline;gap:10px 32px;flex-wrap:wrap;color:var(--color-muted);font-size:var(--fs-sm);line-height:1.55}
.footer-note__disclaimer{flex:1 1 30rem;max-width:66ch;margin:0}
.footer-note__copy{flex:0 0 auto;white-space:nowrap}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}.footer-brand{grid-column:1 / -1}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:26px}.footer-note__copy{white-space:normal}}

/* The ask, at the foot of a page somebody actually arrived on. See appCtaBand below for
   why it is here rather than on the home page alone. The class name is the home page's
   own, so assets/analytics.js reports these clicks as placement=cta_band and the two
   surfaces count as one thing. */
.cta-band{margin:0;padding:34px 0 44px;background:var(--sage-50);border-top:1px solid var(--line)}
.cta-band .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.cta-band h2{margin:0 0 8px}
.cta-band p{margin:0;max-width:none;color:var(--muted)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* ── the page follows the sun ───────────────────────────────────────────────────────────
   Emitted last so it wins on cascade order where specificity ties. The literals above were
   pointed at tokens first, which is the whole gate: turning this on before that was done
   made the home page black text on black. Semantic colours stay literal on purpose — the
   provenance chips, the drive badge, the warning panels. A source badge that changes hue
   with the hour has stopped telling you where the fact came from. */
html[data-phase='day']{--color-bg:#eef6ef;--color-surface:#ffffff;--color-text:#1a2f1a;--color-muted:#5a6e5c;--color-primary:#2d6a3e;--color-primary-soft:#dff0e2;--color-border:#cad8cb;--color-surface-alt:#ffffff}
html[data-phase='sunrise']{--color-bg:#f5f1e8;--color-surface:#fffaf2;--color-text:#2f2a1f;--color-muted:#786a58;--color-primary:#6a5a2d;--color-primary-soft:#f2e6cf;--color-border:#dfcfb0;--color-surface-alt:#fffaf2}
html[data-phase='sunset']{--color-bg:#f1ece3;--color-surface:#fbf4e9;--color-text:#2b251c;--color-muted:#766350;--color-primary:#7a4a2f;--color-primary-soft:#f0dcc8;--color-border:#dcc5ad;--color-surface-alt:#fbf4e9}
html[data-phase='night']{--color-bg:#000000;--color-surface:#0c0e0d;--color-text:#e9eeea;--color-muted:#97a29b;--color-primary:#86bd98;--color-primary-soft:#0e1712;--color-border:#232826;--color-surface-alt:#141816}
html[data-phase]{
  --text:var(--color-text);--muted:var(--color-muted);
  --cream:var(--color-bg);--cream-warm:var(--color-surface-alt);
  --sage-50:var(--color-primary-soft);--sage-80:var(--color-primary-soft);--sage-100:var(--color-primary-soft);
  --forest-950:var(--color-text);--forest-900:var(--color-primary);--forest-800:var(--color-primary);--forest-700:var(--color-primary);
  --line:var(--color-border);--line-strong:var(--color-border);
  --ink-600:var(--color-muted);--ink-800:var(--color-text);
}
html[data-phase] body,html[data-phase] .section,html[data-phase] .card,html[data-phase] .cta-band,html[data-phase] .site-footer{
  transition:background-color .8s ease,color .8s ease}
@media (prefers-reduced-motion:reduce){html[data-phase] *{transition:none !important}}
/* The two campsite pages that have a field photograph were the only images on the site with
   neither dimensions nor a wrapper reserving space — everything in the field guide is held
   by .nat__fig's aspect-ratio. 3:2 is the shape these are shot and served in. */
figure.card > img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* The sub-navigation. A quieter bar directly under the header: parent in bold at the left,
   siblings as plain links, the current one underlined the same way the main nav marks its
   current item. One row that scrolls sideways on a phone rather than wrapping into a block. */
.subnav{background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.subnav__in{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px);display:flex;align-items:center;gap:22px;min-height:46px}
.subnav__parent{font-weight:700;color:var(--color-text);text-decoration:none;white-space:nowrap;padding-right:18px;border-right:1px solid var(--color-border)}
.subnav__parent:hover{color:var(--color-primary)}
.subnav__list{list-style:none;margin:0;padding:0;display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav__list::-webkit-scrollbar{display:none}
.subnav__list a{display:inline-flex;align-items:center;min-height:46px;font-size:var(--fs-base-s);font-weight:600;color:var(--color-muted);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -2px 0 0 transparent}
.subnav__list a:hover{color:var(--color-primary)}
.subnav__list a[aria-current="page"]{color:var(--color-primary);box-shadow:inset 0 -2px 0 0 var(--color-primary)}
/* The split head with a contents panel: first built for /nature/, now shared with /faq/ so
   both hubs get one definition of it rather than two copies drifting. */
/* The head splits at 960px: copy on the left, the guide's contents on the right. Below
   that the contents stack under the lede rather than squeezing beside it. */
.hub-head--split{display:grid;gap:28px 48px;align-items:start}
@media (min-width:960px){.hub-head--split{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr)}}
.hub-contents{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px 18px 8px}
.hub-contents__title{font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);font-weight:700;margin:0 0 6px}
.hub-contents ol{list-style:none;margin:0;padding:0}
.hub-contents li{border-top:1px solid var(--color-border)}
.hub-contents li:first-child{border-top:0}
.hub-contents a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0;text-decoration:none;color:var(--color-text);font-weight:600}
.hub-contents a b{font-weight:500;font-size:var(--fs-base-s);color:var(--color-muted);white-space:nowrap}
.hub-contents a:hover span{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
/* On a 300–390px screen the campsite facts table was 334px wide and dragged the whole page
   sideways. It scrolls inside its own box instead; the page stays put. */
.facts-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

.nav-toggle{display:none;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 12px;border-radius:var(--radius-btn,12px);
  border:1px solid var(--color-border);background:transparent;color:inherit;
  font:inherit;font-size:var(--fs-base-s);font-weight:650;cursor:pointer;line-height:1}
.nav-toggle:hover{border-color:var(--color-primary)}
.nav-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* Drawn rather than a glyph, so it inherits the nav's ink on the transparent header and
   needs no icon font. The bars are the button's own borders. */
.nav-toggle__bars{display:block;position:relative;width:18px;height:2px;background:currentColor}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:currentColor}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .nav{flex-wrap:wrap;row-gap:6px}
  .site-nav, .nav-links{order:3;width:100%;justify-content:flex-start;gap:18px;row-gap:2px;flex-wrap:wrap}
  .site-nav a{min-height:34px}

  /* From here down: only when there is a script to open it again. */
  .has-js .nav-toggle{display:inline-flex}
  /* Both spellings of the list, each under the gate. Prefixing the LINKS list with .has-js
     scoped only its first item, which left the home page's div.nav-links unscoped — its own
     display:flex then won on phones and the items sat under the header beside the Menu
     button. (No backticks in this comment: it sits inside a template literal.) */
  .has-js .site-nav, .has-js .nav-links{display:none}
  .has-js .site-header.nav-open .site-nav,
  .has-js .site-header.nav-open .nav-links{display:flex;flex-direction:column;align-items:stretch;
    gap:0;row-gap:0;padding:6px 0 10px;border-top:1px solid var(--color-border);margin-top:6px}
  .has-js .site-header.nav-open .site-nav a,
  .has-js .site-header.nav-open .nav-links a{min-height:48px;align-items:center;width:100%}
  /* The home page keeps its call to action inside the links container, so in the open panel
     it must not stretch to the full width like a row of text. */
  .has-js .site-header.nav-open .nav-links .header-cta{align-self:flex-start;margin-top:8px}
}
/* The brand gives way before the bar does. At 390px a 52px mark, a 38px wordmark, a subtitle,
   the menu button and the call to action cannot share a row, and the generated pages were
   pushing the button onto a second one — a 145px bar against the home page's 83px. These are
   the home page's own small-screen numbers, now applied to all of them. */
@media (max-width:640px){
  .brand-subtitle{display:none}
  .nav .brand-logo{width:46px;height:46px}
  .brand-title{font-size:28px}
  .nav-toggle{padding:0 10px}
}
@media (min-width:901px){ .nav-toggle{display:none} }