/* Into the Little Belts. A road-trip guide: the Little Belts map is the front door, numbered by every
   road in; section heads are routed Forest Service signs; everything else stays quiet and readable on
   a phone. One light look for now. */
:root{
  color-scheme: light;
  --ground:#eef0ea; --panel:#fbfbf8; --ink:#1e2620; --muted:#56605a; --line:#d3d9d0;
  --sign:#5a3b27; --sign-ink:#f2e2b3; --pine:#2b5a3d; --water:#2d6a96; --live:#c8352a;
  --note:#fff3bf; --note-ink:#5a4710; --shield:#ffffff; --shield-ink:#111111;
  --display:"Overpass","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Overpass Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-padding-top:12px}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--pine);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--water);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:20}
.skip:focus{left:8px}

.testbar{background:var(--note);color:var(--note-ink);border-bottom:1px solid #e6d690;font-size:14px}
.testbar .wrap{padding-block:8px}

/* routed sign */
.sign{display:inline-flex;align-items:center;gap:.6em;background:var(--sign);color:var(--sign-ink);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:7px;padding:.42em .9em .3em;box-shadow:inset 0 0 0 2px var(--sign),inset 0 0 0 3.5px var(--sign-ink);text-decoration:none}

/* header */
.top .wrap{padding-block:14px 8px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.brand{font-size:clamp(19px,4.4vw,28px);padding:.5em 1em .38em;color:var(--sign-ink)}
.brand span{display:block;font-size:.42em;letter-spacing:.14em;font-weight:700;opacity:.9;margin-top:.15em}
.navrow{display:flex;gap:8px;align-items:center;min-width:0;flex:1 1 420px;justify-content:flex-end}
.nav{overflow-x:auto;scrollbar-width:none;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav ul{list-style:none;margin:0;padding:2px;display:flex;gap:6px;white-space:nowrap}
.nav a,.searchbtn{display:block;font-family:var(--display);font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);padding:7px 11px 5px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.nav a:hover,.searchbtn:hover{border-color:var(--pine);color:var(--pine)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.searchbtn{cursor:pointer;flex:none}
@media (max-width:640px){.navrow{flex-basis:100%}}

/* search */
dialog.search{border:0;border-radius:12px;padding:0;width:min(640px,calc(100vw - 32px));max-height:80vh;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.search::backdrop{background:rgba(20,26,22,.55)}
.search form{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.search input{flex:1;min-width:0;font:17px var(--body);padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.search button{font:700 14px var(--display);border:1px solid var(--line);background:var(--ground);border-radius:8px;padding:0 12px;cursor:pointer;color:var(--ink)}
.search ol{list-style:none;margin:0;padding:6px;overflow-y:auto;max-height:calc(80vh - 70px)}
.search li a{display:block;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.search li a:hover,.search li a:focus{background:var(--ground)}
.search li b{font:700 15.5px var(--display);display:block}
.search li small{color:var(--muted);font-size:13px}
.search .none{padding:14px;color:var(--muted)}

section{padding-block:28px}
.head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:14px}
.head h2{font-size:clamp(22px,4vw,30px);font-weight:900}
.sub{color:var(--muted);max-width:62ch}
.lede{font-size:17px;color:var(--muted);max-width:60ch}

/* home hero */
.hero .wrap{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.hero h1{font-size:clamp(28px,5.4vw,46px);font-weight:900;letter-spacing:-.01em}
.layers{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chip{font:600 13px var(--display);border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:6px 10px 4px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.map{position:relative;width:100%;max-width:100%;aspect-ratio:2400/2474;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 10px 30px rgba(30,38,32,.14);background:#e9e3cf}
.map img{width:100%;height:100%;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;cursor:pointer}
.pin.way{width:30px;height:30px;border-radius:50%;background:var(--sign);color:var(--sign-ink);font:900 15px/30px var(--display);box-shadow:0 0 0 2px var(--sign-ink),0 2px 6px rgba(0,0,0,.35);text-align:center}
.pin.way:hover,.pin.way.on{background:var(--live)}
.pin.dot{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.4)}
.pin.home{width:auto;height:auto;background:var(--ink);color:#fff;font:800 11px var(--display);letter-spacing:.08em;padding:4px 7px 2px;border-radius:4px;transform:translate(-50%,-150%);pointer-events:none}
.k-camp{background:#2f7d4a}.k-cabin{background:#b0642a}.k-office{background:#5a3b27}.k-trailhead{background:#2d6a96}.k-cam{background:var(--live)}
.caption{min-height:3.2em;font-size:14px;color:var(--muted);margin-top:8px}
.caption strong{color:var(--ink)}
.today{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0;text-decoration:none;color:var(--ink);display:block}
a.tile:hover{border-color:var(--pine)}
.tile .lbl{font:700 11.5px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile .val{font:800 19px/1.25 var(--display);margin-top:2px}
.tile .val.mono{font:600 18px/1.3 var(--mono)}
.tile .ft{font-size:12.5px;color:var(--muted);margin-top:3px}
.keylist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.keylist a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 4px;border-radius:6px;text-decoration:none;color:var(--ink)}
.keylist a:hover{background:var(--panel)}
.keylist .n{width:26px;height:26px;border-radius:50%;background:var(--sign);color:var(--sign-ink);font:900 13px/26px var(--display);text-align:center}
.keylist .t{font:700 15px/1.25 var(--display)}
.keylist .m{font:600 13px var(--mono);color:var(--muted)}

/* cams */
.camrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
@media (max-width:640px){.camrow.strip{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.camrow.strip>*{scroll-snap-align:start}}
.cam{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
a.cam:hover{border-color:var(--pine)}
.cam .view{position:relative;display:block;aspect-ratio:16/9;background:#222}
.cam .view img{width:100%;height:100%;object-fit:cover;display:block}
.live{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.62);color:#fff;font:800 11px var(--display);letter-spacing:.1em;padding:4px 7px 2px;border-radius:4px;display:flex;gap:6px;align-items:center}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live)}
.cam .body{padding:10px 12px 12px;display:grid;gap:2px}
.cam h3{font-size:17px;font-weight:800}
.cam p{font-size:13.5px;color:var(--muted)}
.player{position:relative;aspect-ratio:16/9;background:#111;border-radius:10px;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.player button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.player button span{position:relative;background:var(--live);color:#fff;font:800 15px var(--display);letter-spacing:.06em;padding:12px 18px 10px;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.offline{background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:18px;display:grid;gap:6px}

/* ways */
.ways{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.way{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--ink)}
a.way:hover{border-color:var(--pine)}
.way .ph{position:relative;display:block;aspect-ratio:2/1}
.way .ph img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;left:10px;top:10px;width:34px;height:34px;border-radius:50%;background:var(--sign);color:var(--sign-ink);font:900 17px/34px var(--display);text-align:center;box-shadow:0 0 0 2px var(--sign-ink)}
.way .body{padding:12px 14px 14px;display:grid;gap:8px}
.roads{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.us{width:38px;height:40px}
.fs{display:inline-flex;flex-direction:column;align-items:center;background:var(--sign);color:var(--sign-ink);border-radius:4px;padding:3px 6px 1px;font:900 14px/1 var(--display);box-shadow:inset 0 0 0 1.5px var(--sign-ink)}
.fs small{font-size:8px;letter-spacing:.12em}
.way h3{font-size:20px;font-weight:900}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:14.5px;margin:0}
.facts dt{font:700 11.5px/1.9 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0}

/* tables */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px 0;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 11.5px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;white-space:nowrap}
.src{font-size:12.5px;color:var(--muted);margin-top:8px}

/* 100 miles */
.two{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:880px){.two{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.circle{width:100%;max-width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 10px 30px rgba(30,38,32,.16)}
.circle img{width:100%;height:100%;display:block}
.ranges{display:flex;flex-wrap:wrap;gap:6px}
.ranges span{font:700 13px var(--display);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 10px 3px}
.ranges span.main{background:var(--sign);color:var(--sign-ink);border-color:var(--sign)}

/* video cards */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vid{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;min-width:0}
.vid:hover{border-color:var(--pine)}
.vid .th{position:relative;display:block;aspect-ratio:16/9;background:#222}
.vid .th img{width:100%;height:100%;object-fit:cover;display:block}
.vid.short .th{aspect-ratio:9/12}
.vid .th::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;transform:translate(-35%,-50%);filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.vid .body{padding:9px 11px 11px;display:grid;gap:3px}
.vid b{font:700 14.5px/1.3 var(--display)}
.vid small{color:var(--muted);font-size:12.5px}
.kind{font:800 11.5px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--pine)}

/* old pages */
.pagehero{position:relative;background:#2a2f2b;color:#fff}
.pagehero img{width:100%;height:clamp(180px,38vw,420px);object-fit:cover;display:block;opacity:.92}
.pagehero .wrap{position:absolute;inset:auto 0 0 0;padding-block:18px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.pagehero h1{font-size:clamp(26px,5vw,44px);font-weight:900;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.plainhead{padding-block:22px 0}
.plainhead h1{font-size:clamp(26px,5vw,44px);font-weight:900}
.crumbs{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;padding-block:12px 0}
.crumbs a{color:var(--muted)}
.layout{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);padding-block:14px 30px}
@media (min-width:960px){.layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.prose{max-width:72ch;min-width:0;display:grid;gap:14px}
.prose h2{font-size:26px;font-weight:900;margin-top:8px}
.prose h3{font-size:21px;font-weight:800;margin-top:8px}
.prose h4{font-size:17px;font-weight:800}
.prose ul,.prose ol{margin:0;padding-left:22px}
.prose li{margin:3px 0}
.prose img{border-radius:8px;height:auto}
.prose hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.prose blockquote{margin:0;padding-left:14px;border-left:3px solid var(--line);color:var(--muted)}
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.table-wrap table td,.table-wrap table th{padding:8px 12px}
.embed{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#ddd}
.embed.map{aspect-ratio:4/3}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.side{display:grid;gap:12px;min-width:0}
.box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:8px;font-size:14.5px}
.box h2{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.btn{font:800 15px var(--display);letter-spacing:.03em;background:var(--pine);color:#fff;border:0;border-radius:8px;padding:10px 14px 8px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn.light{background:transparent;color:var(--pine);border:1px solid var(--pine)}
.stale{background:var(--note);color:var(--note-ink);border-radius:8px;padding:10px 12px;font-size:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;min-width:0}
.card:hover{border-color:var(--pine)}
.card img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.card .body{padding:10px 12px 12px;display:grid;gap:3px}
.card b{font:800 17px/1.25 var(--display)}
.card small{color:var(--muted);font-size:13.5px;line-height:1.45}

footer{background:var(--sign);color:var(--sign-ink);margin-top:20px}
footer .wrap{padding-block:26px 34px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:800px){footer .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}}
footer a{color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
footer .credit{font-size:13px;opacity:.88;display:grid;gap:6px}
footer .name{font:900 20px var(--display);letter-spacing:.06em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ======================= second pass (2026-10-23): visitor guide ======================= */
:root{ --dusk:#14201a; --snow:#f7f8f4; --sun:#e8a33d; --glass:rgba(16,24,19,.62) }
.band{background:var(--panel);border-block:1px solid var(--line)}
.band.dark{background:var(--dusk);color:var(--snow);border-color:var(--dusk)}
.band.dark .sub,.band.dark .lede{color:#c9d2c8}
.band.dark a{color:#bfe3c8}
.eyebrow{font:800 12px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.linkbtn{all:unset;cursor:pointer;color:var(--pine);text-decoration:underline;text-underline-offset:2px}
.linkbtn[aria-pressed="true"]{font-weight:700;text-decoration:none}
.nowtag{font:800 10px var(--display);letter-spacing:.08em;text-transform:uppercase;background:var(--sun);color:#2a1a05;border-radius:4px;padding:2px 5px 0;margin-left:2px}
svg.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
svg.wxi{width:34px;height:34px;flex:none}

/* the cover */
.cover{position:relative;color:#fff;background:#1c2620;overflow:hidden}
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,12,.35) 0%,rgba(10,16,12,.1) 35%,rgba(10,16,12,.72) 100%)}
.cover .wrap{position:relative;z-index:1;min-height:clamp(520px,78vh,780px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding-block:40px 28px}
.cover .eyebrow{color:#f2e2b3}
.cover h1{font-size:clamp(40px,8.4vw,92px);font-weight:900;line-height:.95;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.45);max-width:12ch}
.cover .lede{color:#eef2ea;font-size:clamp(17px,2.2vw,21px);max-width:46ch;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.coversearch{display:flex;gap:0;max-width:560px;background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:hidden}
.coversearch input{flex:1;min-width:0;border:0;font:17px var(--body);padding:15px 16px;color:var(--ink);background:#fff}
.coversearch input:focus{outline:none}
.coversearch:focus-within{box-shadow:0 0 0 3px var(--sun),0 10px 40px rgba(0,0,0,.35)}
.coversearch button{border:0;background:var(--sign);color:var(--sign-ink);font:800 15px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:0 18px;cursor:pointer}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick a,.quick button{font:700 14px var(--display);color:#fff;text-decoration:none;background:var(--glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 14px 7px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.quick a:hover,.quick button:hover{background:rgba(16,24,19,.85);border-color:#fff}
.nowline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;background:var(--glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:10px;padding:6px 12px;align-self:flex-start;color:#fff}
.nowline b{font:800 20px var(--display)}
.nowline span{color:#d9e0d6}
.nowline svg.wxi{width:28px;height:28px}
.alerts{display:grid;gap:6px}
.alert{display:grid;gap:2px;background:#fff4d6;color:#4d3300;border:1px solid #e8c36a;border-left:6px solid var(--sun);border-radius:8px;padding:9px 12px;text-decoration:none;font-size:14px}
.alert b{font:800 15px var(--display);letter-spacing:.02em}
.alert.severe{background:#fde6e3;color:#5a1610;border-color:#e8a59d;border-left-color:var(--live)}
.cover .alerts{max-width:640px}

/* right now: weather and sky */
.nowgrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.nowgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr)}}
.wxcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px;min-width:0}
.wxcard h3{font-size:18px;font-weight:900;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.wxcard h3 small{font:600 12.5px var(--body);color:var(--muted)}
.wx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:120px}
.wx:not(.ready)::before{content:"Loading the forecast…";color:var(--muted);font-size:14px;grid-column:1/-1}
.wxp{display:grid;gap:3px;align-content:start;background:var(--ground);border-radius:8px;padding:9px;min-width:0}
.wxn{font:700 12px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wxt{font:900 30px/1 var(--display);color:#b4471f}
.wxt.night{color:var(--water)}
.wxs{font-size:13px;line-height:1.3}
.wxw{font-size:11.5px;color:var(--muted)}
.skygrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.moon{width:34px;height:34px;border-radius:50%;background:#2a3330;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #59645d}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:#f3ecd2;clip-path:inset(0 0 0 calc((1 - var(--lit,0)) * 100%))}

/* what do you want to do */
.dogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.do{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;color:#fff;text-decoration:none;background:#2a2f2b;isolation:isolate}
.do img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .5s ease}
.do:hover img{transform:scale(1.05)}
.do::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78));z-index:-1}
.do span{position:absolute;left:12px;right:12px;bottom:10px;display:grid;gap:1px}
.do b{font:900 21px/1.1 var(--display)}
.do small{font-size:13px;color:#e4e9e1}
@media (prefers-reduced-motion:reduce){.do img{transition:none}}

/* seasons */
.seasonpanel{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.seasonpanel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.seasonpanel img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.seasonpanel ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.seasonpanel li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:15.5px}
.seasonpanel li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--sun);margin-top:7px;transform:rotate(45deg)}

/* trips */
.trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tripcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:10px;align-content:start;min-width:0}
.tripcard h3{font-size:21px;font-weight:900}
.tripmeta{display:flex;gap:6px;flex-wrap:wrap}
.tripmeta span{font:700 12.5px var(--display);background:var(--ground);border-radius:999px;padding:4px 9px 2px}
.stops{list-style:none;margin:0;padding:0 0 0 4px;display:grid;gap:0}
.stops li{position:relative;padding:0 0 10px 22px;font-size:14.5px;line-height:1.35}
.stops li::before{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;background:var(--panel);border:2.5px solid var(--sign)}
.stops li::after{content:"";position:absolute;left:5.5px;top:16px;bottom:-2px;width:2px;background:repeating-linear-gradient(var(--sign) 0 5px,transparent 5px 9px)}
.stops li:last-child::after{display:none}
.stops small{display:block;color:var(--muted);font-size:12.5px}

/* towns */
.towngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.town{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px;text-decoration:none;color:var(--ink);display:grid;gap:5px;min-width:0}
.town:hover{border-color:var(--pine)}
.town b{font:800 17px var(--display)}
.town .svc{display:flex;gap:6px;color:var(--pine)}
.town small{color:var(--muted);font-size:12.5px}

/* by the numbers */
.numbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
.numbers div{display:grid;gap:2px}
.numbers b{font:900 clamp(30px,4.4vw,44px)/1 var(--display);color:var(--sign-ink)}
.numbers span{font-size:13.5px;color:#c9d2c8}

/* trip tools */
.tools{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:10px;align-content:start;min-width:0}
.tool h3{font-size:20px;font-weight:900}
.tool .chiprow{display:flex;gap:6px;flex-wrap:wrap}
.nearlist,.peaklist,.triplist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.nearlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.nearlist .kindtag{grid-column:1/-1;font:700 10.5px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nearlist .nm{font-weight:600}
.nearlist .dist{color:var(--muted);text-align:right}
.nearlist .acts{grid-column:1/-1;font-size:13px;color:var(--muted)}
.dial{max-width:320px;margin:0 auto;width:100%}
.dial svg{width:100%;height:auto;display:block}
.dial .ring{fill:none;stroke:var(--line);stroke-width:1.2}
.dial .fwd{stroke:var(--live);stroke-width:2;stroke-dasharray:4 4}
.dial .cardinal{font:800 12px var(--display);fill:var(--muted);text-anchor:middle}
.dial .pk circle{fill:#6b7a6f}
.dial .pk.top circle{fill:var(--sign)}
.dial .pk text{font:700 9.5px var(--display);fill:var(--ink)}
.dial .you{fill:var(--live);stroke:#fff;stroke-width:2}
.facing{font-size:14.5px;min-height:1.5em;text-align:center}
.peaklist li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:baseline}
.dirtag{font:800 11px var(--display);color:var(--sign)}
.peaklist .num{color:var(--muted);font-size:12.5px}
.triplist li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.triplist .n{width:24px;height:24px;border-radius:50%;background:var(--sign);color:var(--sign-ink);font:900 12px/24px var(--display);text-align:center}
.triplist small{display:block;color:var(--muted);font-size:12.5px}
.tripbtns{display:flex;gap:4px}
.tripbtns button{border:1px solid var(--line);background:var(--ground);border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--ink)}
.tripbtns button:disabled{opacity:.35;cursor:default}
.savebtn{font:800 14px var(--display);border:1px solid var(--pine);color:var(--pine);background:transparent;border-radius:8px;padding:9px 12px 7px;cursor:pointer;width:100%}
.savebtn[aria-pressed="true"]{background:var(--pine);color:#fff}
.offlinepill{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;font:700 13px var(--display);padding:8px 14px 6px;border-radius:999px;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.tripchip{position:relative}
.tripchip [data-tripcount]{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--live);color:#fff;font:800 11px/18px var(--display);text-align:center;padding:0 4px}
.nearby{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.nearby small{color:var(--muted)}
.know{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.know div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:4px;font-size:14.5px}
.know b{font:800 14px var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--sign)}
.idea{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:8px}
.idea h3{font-size:19px;font-weight:900}
.idea .tag{font:800 11px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--pine)}

/* phone fixes (second pass) */
.alertband{background:#fff4d6;border-bottom:1px solid #e8c36a}
.alertband .wrap{padding-block:8px}
.alertband .alert{border:0;border-left:6px solid var(--sun);background:transparent;padding:4px 10px}
@media (max-width:640px){
  .head h2.sign{font-size:17px}
  .cover .wrap{min-height:0;padding-top:max(150px,36vh);gap:14px}
  .cover h1{font-size:44px}
  .cover .lede{font-size:16px}
  .quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:2px 4px}
  .quick::-webkit-scrollbar{display:none}
  .quick a,.quick button{flex:none}
  .wx{grid-template-columns:minmax(0,1fr);min-height:0}
  .wxp{grid-template-columns:76px 34px 46px minmax(0,1fr);align-items:center;column-gap:8px}
  .wxp .wxw{grid-column:4}
  .wxp .wxs{grid-column:4;grid-row:1}
  .wxp .wxn{grid-row:1 / span 2}.wxp .wxi{grid-row:1 / span 2}.wxp .wxt{grid-row:1 / span 2;font-size:26px}
}
@media (max-width:640px){
  .dogrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .do{aspect-ratio:1/1}
  .do b{font-size:17px}
  .do small{font-size:11.5px;line-height:1.3}
  .do span{left:10px;right:10px;bottom:8px}
}
.dial .pkd{fill:#7d8a80}
.dial .pkd.top{fill:var(--sign)}
.dial .pkl{font:700 9.5px var(--display);fill:var(--ink);paint-order:stroke;stroke:var(--panel);stroke-width:3px}
/* forecasts in a sidebar: one period per row */
.side .wx{grid-template-columns:minmax(0,1fr);min-height:0}
.side .wxp{grid-template-columns:62px 30px 40px minmax(0,1fr);align-items:center;column-gap:6px}
.side .wxp .wxs{grid-column:4;grid-row:1}.side .wxp .wxw{grid-column:4}
.side .wxp .wxn,.side .wxp .wxi,.side .wxp .wxt{grid-row:1 / span 2}
.side .wxp .wxt{font-size:24px}.side .wxcard h3{flex-wrap:wrap}

/* ======================= third pass (2026-10-23): new colors and the 89 shield =======================
   Charley: "more vibrant but not obnoxious ... obviously not the forest service colors".
   Dusk blue and alpenglow coral from the cover photo, gold and teal as accents. Coral and gold are
   for marks only (pins, underlines, numbers); links and buttons are teal so text stays readable. */
:root{
  --ground:#f3f5f8; --panel:#ffffff; --ink:#14212e; --muted:#566476; --line:#d9e0e8;
  --sign:#16304d; --sign-ink:#ffffff; --accent:#ef5a3c; --gold:#f3a712;
  --pine:#0b7285; --water:#1d63b0; --live:#e5382a;
  --dusk:#0f2238; --snow:#f6f8fb; --sun:#f3a712; --glass:rgba(10,22,38,.58);
}
.sign{background:var(--sign);color:#fff;box-shadow:inset 0 -4px 0 var(--accent);border-radius:8px}
.top{background:var(--sign)}
.top .wrap{padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;padding:0;box-shadow:none;background:none;border-radius:0}
.brand .logo{width:54px;height:54px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));overflow:visible}
.brand .wordmark{display:grid;line-height:1;gap:2px}
.brand .wordmark small{font:800 12px var(--display);letter-spacing:.22em;text-transform:uppercase;color:#ffcf86}
.brand .wordmark b{font:900 clamp(24px,4.2vw,32px)/1 var(--display);letter-spacing:-.01em;color:#fff}
.brand .wordmark em{font:600 11.5px var(--body);font-style:normal;color:#b9c6d6;letter-spacing:.03em;margin-top:2px}
.nav a,.searchbtn{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.24)}
.nav a:hover,.searchbtn:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.16)}
.nav a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pin.way{background:var(--accent);color:#fff;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.35)}
.pin.way:hover,.pin.way.on{background:var(--sign)}
.pin.home{background:var(--sign)}
.k-camp{background:#12a072}.k-cabin{background:var(--gold)}.k-office{background:var(--sign)}.k-trailhead{background:var(--water)}
.keylist .n,.triplist .n{background:var(--accent);color:#fff}
.badge{background:var(--accent);color:#fff;box-shadow:0 0 0 2px #fff}
.fs{background:#5a3b27;color:#f2e2b3;box-shadow:inset 0 0 0 1.5px #f2e2b3} /* real Forest Service road markers stay brown */
.stops li::before{border-color:var(--accent)}
.stops li::after{background:repeating-linear-gradient(var(--accent) 0 5px,transparent 5px 9px)}
.wxt{color:#d9480f}
.numbers b{color:var(--gold)}
.band.dark{background:var(--dusk);border-color:var(--dusk)}
.band.dark .sub,.band.dark .lede,.numbers span{color:#b9c6d6}
.band.dark a{color:#8fd3e0}
footer{background:var(--dusk);color:#dbe4ee}
footer a{color:#fff}
footer .name{color:#fff}
.cover .eyebrow{color:#ffcf86}
.cover::after{background:linear-gradient(180deg,rgba(10,22,38,.32) 0%,rgba(10,22,38,.06) 35%,rgba(10,22,38,.76) 100%)}
.coversearch button{background:var(--accent);color:#fff}
.coversearch:focus-within{box-shadow:0 0 0 3px var(--gold),0 10px 40px rgba(0,0,0,.35)}
.quick a:hover,.quick button:hover{background:rgba(10,22,38,.85)}
.nowtag{background:var(--gold);color:#3a2400}
.do::after{background:linear-gradient(180deg,transparent 35%,rgba(10,22,38,.84))}
.chip[aria-pressed="true"]{background:var(--sign);border-color:var(--sign);color:#fff}
.btn{background:var(--pine)}
.btn.light{background:transparent;color:var(--pine);border:1px solid var(--pine)}
.savebtn{border-color:var(--pine);color:var(--pine)}
.savebtn[aria-pressed="true"]{background:var(--pine);color:#fff}
.dirtag,.kind,.know b{color:var(--accent)}
.dial .pkd.top,.dial .you{fill:var(--accent)}
.dial .fwd{stroke:var(--accent)}
.testbar a{color:#5a4710}
.tripchip [data-tripcount]{background:var(--accent)}
dialog.search::backdrop{background:rgba(10,22,38,.62)}
.pagehero{background:var(--dusk)}
.pagehero .wrap{background:linear-gradient(transparent,rgba(10,22,38,.72))}
.moon{background:#1b2a3a}
.seasonpanel li::before{background:var(--accent)}
@media (max-width:640px){.brand .logo{width:46px;height:46px}.brand .wordmark em{display:none}}

/* ======================= Fly the Little Belts (3D) ======================= */
.fly{position:relative;height:calc(100svh - 150px);min-height:520px;max-height:920px;background:linear-gradient(180deg,#9cc2e6 0%,#dfe9f3 62%);overflow:hidden}
.flystage{position:absolute;inset:0}
.flystage canvas{width:100%;height:100%;display:block;cursor:grab}
.flystage canvas:active{cursor:grabbing}
.flylabels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fl{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;font:700 12px/1.2 var(--display);color:#fff;background:rgba(10,22,38,.76);padding:4px 8px 3px;border-radius:6px;text-decoration:none;will-change:transform}
.fl::after{content:"";position:absolute;left:50%;bottom:-6px;width:2px;height:6px;background:inherit;transform:translateX(-50%)}
.fl small{display:block;font:600 10px var(--mono);opacity:.85}
.fl-town{background:#fff;color:var(--ink);font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fl-cam i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:5px;box-shadow:0 0 0 2px rgba(229,56,42,.35)}
.fl-way{background:var(--accent);border-radius:50%;width:28px;height:28px;padding:0;display:grid;place-items:center;font:900 14px var(--display);box-shadow:0 0 0 2px #fff}
.fl-cabin{background:var(--gold);color:#2a1a00}
.fl-camp{background:#12a072}
.flystatus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(10,22,38,.84);color:#fff;padding:12px 18px;border-radius:12px;font:700 15px var(--display);max-width:min(90%,420px);text-align:center}
.flystatus:empty{display:none}
.flystatus a{color:#ffcf86}
.flyui{position:absolute;left:12px;top:12px;right:12px;display:grid;gap:8px;pointer-events:none;justify-items:start}
.flyui>*{pointer-events:auto}
.flyhead{background:rgba(255,255,255,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:10px 14px;max-width:460px;box-shadow:0 4px 18px rgba(10,22,38,.12)}
.flyhead h1{font-size:clamp(22px,3.4vw,32px);font-weight:900}
.flyhead p{font-size:13.5px;color:var(--muted)}
.flyways{display:flex;flex-wrap:wrap;gap:6px;max-width:760px}
.flyways button{font:700 13px var(--display);border:0;background:rgba(10,22,38,.8);color:#fff;border-radius:999px;padding:6px 12px 5px 6px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.flyways button b{background:var(--accent);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12px}
.flyways button[aria-pressed="true"]{background:var(--accent)}
.flyways button[aria-pressed="true"] b{background:#fff;color:var(--accent)}
.flylayers{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.flylayers button{font:700 12px var(--display);border:1px solid rgba(10,22,38,.25);background:rgba(255,255,255,.88);color:var(--ink);border-radius:999px;padding:5px 10px 3px;cursor:pointer}
.flylayers button[aria-pressed="true"]{background:var(--sign);color:#fff;border-color:var(--sign)}
.flybar{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;background:rgba(10,22,38,.88);color:#fff;border-radius:12px;padding:10px 12px;flex-wrap:wrap}
.flynow{font:800 14px var(--display);flex:1 1 220px}
.flybar input[type=range]{flex:2 1 200px;accent-color:#ef5a3c;min-width:0}
.flybar button{font:800 13px var(--display);border:0;border-radius:8px;padding:8px 12px 6px;cursor:pointer;background:#fff;color:var(--ink)}
.flybar button[data-play]{background:var(--accent);color:#fff}
@media (max-width:640px){.fly{height:calc(100svh - 120px);min-height:470px}.flyhead p{display:none}.flyways button span{display:none}.flyways button{padding:5px}}
.flyteaser{position:relative;display:block;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#9cc2e6,#dfe9f3);aspect-ratio:16/7;min-height:280px;text-decoration:none;color:var(--ink);isolation:isolate}
.flyteaser img{position:absolute;left:50%;top:62%;width:96%;max-width:none;transform:translate(-50%,-50%) perspective(1000px) rotateX(55deg) rotateZ(-8deg);box-shadow:0 30px 60px rgba(10,22,38,.35);z-index:-1;transition:transform .8s ease}
.flyteaser:hover img{transform:translate(-50%,-50%) perspective(1000px) rotateX(50deg) rotateZ(-4deg)}
.flyteaser .tx{position:absolute;left:16px;top:16px;display:grid;gap:6px;max-width:420px;background:rgba(255,255,255,.9);border-radius:12px;padding:12px 14px}
.flyteaser .tx b{font:900 clamp(22px,3.4vw,32px)/1.05 var(--display)}
.flyteaser .tx span{font-size:14px;color:var(--muted)}
.flyteaser .go{position:absolute;right:16px;bottom:16px;background:var(--accent);color:#fff;font:800 15px var(--display);border-radius:999px;padding:11px 18px 9px;box-shadow:0 8px 20px rgba(239,90,60,.35)}
@media (max-width:640px){.flyteaser{aspect-ratio:3/4}.flyteaser img{width:150%;top:66%}}
@media (prefers-reduced-motion:reduce){.flyteaser img{transition:none}}