/* ══════════════════════════════════════════════════════════════════════════════
   FORECAST PARKS — the design system.

   The Forecast Network's bones (static pages, paper ground, Overpass for the
   instruments, EB Garamond Italic as the atlas voice on maps) dressed in the
   material culture of the American national parks, as a visitor remembers it:

     • the ROUTED WOOD SIGN — cream letters cut into stained timber, set in a
       Clarendon. Besley (OFL) is the open Clarendon revival that carries it.
     • the 1970s UNIGRID brochure — the black title band across the top of
       every park folder. Our masthead is that band.
     • the 1930s WPA POSTER — flat screen-printed layers, a sky that fades in
       three inks, a sun disc. Park heroes are printed in that manner.
     • the PASSPORT CANCELLATION — the round ink stamp with the park name and
       a date. Each park page carries one (our own design).
     • the ENAMEL PATCH / felt pennant — rounded shield badges for sections.

   All emblems here are original. The NPS arrowhead is a protected insignia and
   is not used; this site is independent of the National Park Service.

   Palette — timber and pigment, not plastic:
     --timber  #4a3526  stained sign wood        white-cream on it 10.9:1
     --pine    #2f4f3a  forest green             cream on it 8.4:1
     --rust    #9b3d23  sequoia bark / poster red  cream on it 6.1:1
     --ochre   #c98a2b  poster sun (art + large type only)
     --sky     #5d8aa8  poster sky  (art only)
     --paper   #f2ead8  guidebook stock
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Besley";src:url(/assets/fonts/Besley-var.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Besley";src:url(/assets/fonts/Besley-Italic-var.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Overpass";src:url(/assets/fonts/Overpass-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url(/assets/fonts/OverpassMono-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/EBGaramond-Italic-var.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

:root{
  color-scheme: light;
  --paper:#f2ead8; --paper2:#e8dcc2; --card:#fbf6ea; --field:#fffdf7;
  --ink:#231c15; --ink2:#51463a; --mut:#857765;
  --line:#d5c7aa; --hair:rgba(35,28,21,.14);

  --timber:#4a3526; --timber-dk:#33241a; --timber-hi:#6b4d37;
  --pine:#2f4f3a; --pine-dk:#203829;
  --rust:#9b3d23; --ochre:#c98a2b; --sky:#5d8aa8; --sky-lt:#a9c4d3;
  --cream:#f6ecd2;              /* the routed letter */
  --band:#141210; --band-tx:#f3ede1;

  /* poster inks for the hero prints, far → near */
  --p-sky1:#e9c98f; --p-sky2:#d99a5b; --p-sky3:#b8674a;
  --p-far:#7c6a86; --p-mid:#4f5d6e; --p-near:#2f4f3a; --p-fore:#1f2a22;

  /* weather — the network's reserved scales, never rethemed */
  --hot:#c2410c; --cold:#1d5fa8; --wet:#1f7a6a;
  --st-good:#0ca30c; --st-warn:#fab219; --st-serious:#ec835a; --st-crit:#d03b3b;

  --shadow:0 8px 26px rgba(35,28,21,.12);
  --shadow-sign:0 2px 0 var(--timber-dk), 0 10px 22px rgba(35,28,21,.22);
  --radius:6px;
  --wrap:1180px;

  --f-sign:"Besley", "Clarendon", "Rockwell", Georgia, serif;
  --f-ui:"Overpass", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"Overpass Mono", ui-monospace, Menlo, monospace;
  --f-atlas:"EB Garamond", "Garamond", Georgia, serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#11100d; --paper2:#1a1813; --card:#1c1a15; --field:#23201a;
    --ink:#efe6d2; --ink2:#bcae95; --mut:#8a7e6b;
    --line:#35302600; --line:#353026; --hair:rgba(239,230,210,.13);
    --timber:#5b4230; --timber-dk:#3a2a1e; --timber-hi:#7a5a41;
    --pine:#4f7a5c; --pine-dk:#2c4535; --rust:#c9603f; --ochre:#dba24a; --sky:#7ea7c2;
    --band:#070605; --band-tx:#efe6d2;
    --p-sky1:#2b3350; --p-sky2:#3d3f63; --p-sky3:#5b4668;
    --p-far:#3a3a57; --p-mid:#2b3344; --p-near:#1d3026; --p-fore:#0e1511;
    --hot:#f07a45; --cold:#6aa2e8; --wet:#4fb39f;
    --shadow:0 8px 28px rgba(0,0,0,.5);
    --shadow-sign:0 2px 0 #000, 0 10px 24px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#11100d; --paper2:#1a1813; --card:#1c1a15; --field:#23201a;
  --ink:#efe6d2; --ink2:#bcae95; --mut:#8a7e6b;
  --line:#353026; --hair:rgba(239,230,210,.13);
  --timber:#5b4230; --timber-dk:#3a2a1e; --timber-hi:#7a5a41;
  --pine:#4f7a5c; --pine-dk:#2c4535; --rust:#c9603f; --ochre:#dba24a; --sky:#7ea7c2;
  --band:#070605; --band-tx:#efe6d2;
  --p-sky1:#2b3350; --p-sky2:#3d3f63; --p-sky3:#5b4668;
  --p-far:#3a3a57; --p-mid:#2b3344; --p-near:#1d3026; --p-fore:#0e1511;
  --hot:#f07a45; --cold:#6aa2e8; --wet:#4fb39f;
  --shadow:0 8px 28px rgba(0,0,0,.5);
  --shadow-sign:0 2px 0 #000, 0 10px 24px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--f-ui);
  font-feature-settings:"kern","liga";text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--pine);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--rust)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}

/* ── The Unigrid band ─────────────────────────────────────────────────────── */
.band{background:var(--band);color:var(--band-tx);padding-top:env(safe-area-inset-top,0px)}
.band .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.band a{color:inherit;text-decoration:none}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand svg{width:38px;height:44px;flex:none}
.brand b{font:700 21px/1 var(--f-sign);letter-spacing:.01em}
.brand small{display:block;font:600 10.5px/1.3 var(--f-ui);letter-spacing:.16em;
  text-transform:uppercase;opacity:.72;margin-top:4px}
.band nav{display:flex;gap:2px;flex-wrap:wrap}
.band nav a{font:600 13px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;
  padding:9px 11px;border-radius:4px;opacity:.86}
.band nav a:hover,.band nav a[aria-current]{opacity:1;background:rgba(255,255,255,.1)}
.band-rule{height:6px;background:linear-gradient(90deg,var(--rust) 0 33.3%,var(--ochre) 0 66.6%,var(--pine) 0)}

/* ── Routed wood sign ─────────────────────────────────────────────────────── */
.sign{position:relative;display:inline-block;background:var(--timber);color:var(--cream);
  border-radius:10px;padding:16px 28px 14px;box-shadow:var(--shadow-sign);
  background-image:
    repeating-linear-gradient(177deg,rgba(0,0,0,.06) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(183deg,rgba(255,255,255,.035) 0 1px,transparent 1px 13px);
}
.sign::after{content:"";position:absolute;inset:6px;border:1.5px solid rgba(246,236,210,.38);border-radius:6px;pointer-events:none}
.sign h1,.sign .sign-title{margin:0;font:700 clamp(28px,5vw,54px)/1.02 var(--f-sign);letter-spacing:.005em;
  text-shadow:0 1px 0 rgba(0,0,0,.35)}
.sign .sign-sub{display:block;margin-top:6px;font:600 clamp(11px,1.4vw,14px)/1.2 var(--f-ui);
  letter-spacing:.2em;text-transform:uppercase;opacity:.86}
.sign.small{padding:9px 16px 8px;border-radius:7px}
.sign.small::after{inset:4px;border-radius:4px}

/* ── WPA poster hero ──────────────────────────────────────────────────────── */
.poster{position:relative;overflow:hidden;background:var(--p-sky1);isolation:isolate}
.poster svg.print{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.poster .wrap{position:relative;padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px)}
.poster .kicker{font:700 12px/1 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream);text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.35);margin:0 0 14px}
.poster .lede{max-width:40em;margin:18px 0 0;color:var(--cream);font:400 clamp(16px,1.9vw,20px)/1.5 var(--f-sign);
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Section headers: the trail marker rule ───────────────────────────────── */
.section{padding-block:clamp(36px,5vw,64px)}
.section + .section{border-top:1px solid var(--line)}
.rule{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.rule h2{margin:0;font:700 clamp(24px,3vw,34px)/1.1 var(--f-sign);color:var(--ink)}
.rule::after{content:"";flex:1;height:0;border-top:2px dotted var(--line)}
.rule .blaze{flex:none;width:34px;height:40px}
.eyebrow{font:700 11.5px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--rust);margin:0 0 8px}

/* ── Prose ────────────────────────────────────────────────────────────────── */
.prose{max-width:44em}
.prose p{margin:0 0 1em;font-size:17px;line-height:1.7;color:var(--ink)}
.prose > p:not(.eyebrow):first-of-type::first-letter{font:700 3.3em/.8 var(--f-sign);float:left;margin:.08em .08em 0 0;color:var(--rust)}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

/* ── Cards & facts ────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .chead{padding:12px 16px;border-bottom:1px solid var(--line);font:700 12px/1 var(--f-ui);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.card .cbody{padding:16px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.facts div{background:var(--card);padding:14px 16px}
.facts dt{font:700 10.5px/1.2 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.facts dd{margin:6px 0 0;font:600 19px/1.25 var(--f-sign);color:var(--ink)}
dl.kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
dl.kv dt{font:700 11px/1.5 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
dl.kv dd{margin:0;font-size:15px}

/* ── Passport stamp ───────────────────────────────────────────────────────── */
.stamp{width:150px;height:150px;flex:none;color:var(--rust);transform:rotate(-8deg);opacity:.92}
.stamp text{font-family:var(--f-ui);font-weight:800;letter-spacing:.12em;fill:currentColor}

/* ── The map plate ────────────────────────────────────────────────────────── */
.plate{position:relative;margin:0;background:var(--paper2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.plate .frame{position:relative}
.plate img.relief{width:100%;height:auto}
.plate svg.overlay{position:absolute;inset:0;width:100%;height:100%}
.plate .bnd{fill:none;stroke:#8a3a1c;stroke-width:1.6;stroke-dasharray:7 2.5;vector-effect:non-scaling-stroke}
.plate .bnd-halo{fill:rgba(155,61,35,.07);stroke:rgba(255,248,230,.6);stroke-width:3.5;vector-effect:non-scaling-stroke}
.plate .lbl{font-family:var(--f-atlas);font-style:italic;fill:#2a2118;paint-order:stroke;
  stroke:rgba(250,244,230,.85);stroke-width:3px;stroke-linejoin:round}
.plate .lbl.peak{font-family:var(--f-ui);font-style:normal;font-weight:700;letter-spacing:.04em}
.plate .lbl.water{fill:#1f4d6e}
.plate .mk{fill:#2a2118;stroke:#faf4e6;stroke-width:1.5}
.plate .mk.peak{fill:#2a2118}
/* On the nocturne plate the labels invert: pale ink on a dark halo, the way
   the night relief pays out light — a cream halo there reads as embossing. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .plate .lbl{fill:#efe6d2;stroke:rgba(10,12,16,.82)}
  :root:not([data-theme="light"]) .plate .lbl.water{fill:#9cc3e0}
  :root:not([data-theme="light"]) .plate .mk{fill:#efe6d2;stroke:#0a0c10}
  :root:not([data-theme="light"]) .plate .bnd{stroke:#e0a07a}
  :root:not([data-theme="light"]) .plate .bnd-halo{fill:rgba(224,160,122,.06);stroke:rgba(10,12,16,.55)}
}
.plate figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;
  font:500 12px/1.4 var(--f-ui);color:var(--mut);border-top:1px solid var(--line);background:var(--card)}
.plate .cartouche{position:absolute;left:14px;bottom:14px;background:rgba(251,246,234,.92);border:1px solid #a58f6b;
  padding:8px 12px 7px;border-radius:3px;color:#2a2118;font:italic 600 15px/1.15 var(--f-atlas);
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.plate .cartouche small{display:block;font:700 9.5px/1.3 var(--f-ui);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#6b5b45}
.plate .scalebar{position:absolute;right:14px;bottom:14px;background:rgba(251,246,234,.92);border:1px solid #a58f6b;border-radius:3px;
  padding:6px 10px 4px;font:700 10px/1 var(--f-ui);color:#2a2118}
.plate .north{position:absolute;right:14px;top:14px;width:34px;height:44px}
.plate-toggle{display:flex;gap:6px}
.plate-toggle button{font:600 12px/1 var(--f-ui);padding:6px 10px;border:1px solid var(--line);background:var(--card);
  color:var(--ink2);border-radius:4px;cursor:pointer}
.plate-toggle button[aria-pressed="true"]{background:var(--timber);color:var(--cream);border-color:var(--timber)}

/* ── Field guide (species) ────────────────────────────────────────────────── */
.guide{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.guide li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pine);border-radius:4px;padding:12px 14px}
.guide.fauna li{border-left-color:var(--rust)}
.guide.birds li{border-left-color:var(--sky)}
.guide b{display:block;font:700 16px/1.25 var(--f-sign)}
.guide i{display:block;font:italic 13px/1.3 var(--f-atlas);color:var(--ink2);margin:2px 0 6px}
.guide span{display:block;font-size:14px;line-height:1.5;color:var(--ink2)}
.tally{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.tally li{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font:600 13px/1 var(--f-ui);background:var(--card)}
.tally b{font-family:var(--f-mono);color:var(--rust);margin-right:5px}
.subhead{font:700 20px/1.2 var(--f-sign);margin:30px 0 12px}

/* ── Geology: the strata column ───────────────────────────────────────────── */
.strata{list-style:none;margin:0;padding:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.strata li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:14px;padding:12px 16px;
  background:var(--card);border-top:1px solid var(--line)}
.strata li:first-child{border-top:0}
.strata li::before{content:none}
.strata b{font:700 15px/1.3 var(--f-sign)}
.strata em{display:block;font:600 11px/1.4 var(--f-ui);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.strata span{font-size:14.5px;color:var(--ink2)}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--ochre)}
.timeline li{position:relative;margin:0 0 14px;padding-left:10px}
.timeline li::before{content:"";position:absolute;left:-26px;top:5px;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:3px solid var(--rust)}
.timeline b{display:block;font:700 12px/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}

/* ── Forecast strip ───────────────────────────────────────────────────────── */
.wx{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));gap:8px;overflow-x:auto;padding-bottom:4px}
.wx .day{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 10px;text-align:center}
.wx .dow{font:700 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.wx .ico{width:44px;height:44px;margin:8px auto}
.wx .hi{font:700 22px/1 var(--f-sign);color:var(--hot)}
.wx .lo{font:600 15px/1 var(--f-sign);color:var(--cold);margin-left:4px}
.wx .pop{font:600 12px/1 var(--f-mono);color:var(--wet);margin-top:8px}
.wx-note{font-size:13px;color:var(--mut);margin-top:10px}
.wx-status{color:var(--mut);font-size:14px}

/* ── Park directory ───────────────────────────────────────────────────────── */
.parkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;list-style:none;margin:0;padding:0}
.parkcard{display:block;height:100%;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.parkcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(35,28,21,.18);color:inherit}
.parkcard .thumb{aspect-ratio:4/3;background:var(--paper2) center/cover no-repeat;border-bottom:4px solid var(--timber);max-width:100%}
.parkcard .body{padding:12px 14px 14px}
.parkcard b{display:block;font:700 19px/1.2 var(--f-sign)}
.parkcard small{display:block;font:600 11px/1.4 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.parkcard p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filters button,.filters input{font:600 13px/1 var(--f-ui);padding:9px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink2);cursor:pointer}
.filters input{cursor:text;min-width:min(240px,100%);border-radius:6px}
.filters button[aria-pressed="true"]{background:var(--pine);color:var(--cream);border-color:var(--pine)}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:700 17px/1.35 var(--f-sign);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:1.2em;color:var(--rust)}
.faq details[open] summary::before{content:"–"}
.faq p{margin:10px 0 0 1.2em;color:var(--ink2)}

/* ── Breadcrumb, footer ───────────────────────────────────────────────────── */
.crumbs{font:600 12px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cream);opacity:.9;margin:0 0 16px}
.crumbs a{color:inherit}
.site-footer{background:var(--timber-dk);color:#e7dcc4;padding-block:40px calc(28px + env(safe-area-inset-bottom,0px));margin-top:40px}
.site-footer a{color:#f6ecd2}
.site-footer .cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.site-footer h3{font:700 16px/1.2 var(--f-sign);margin:0 0 10px;color:#f6ecd2}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9}
.site-footer .fine{margin-top:28px;padding-top:16px;border-top:1px solid rgba(246,236,210,.18);font-size:12.5px;color:#bfb198}
.pill{display:inline-block;font:700 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;
  background:var(--pine);color:var(--cream)}
.muted{color:var(--mut)}
.nowrap{white-space:nowrap}