/* ============================================================================
   Forecast Slopes — ski and winter sports, United States.

   The network's Interstate sign system, cut for a mountain. Every other site
   leads with a coloured sign; this one leads with the one mark every skier in
   the country reads without being taught — the BLACK DIAMOND. The masthead is
   near-black with a white diamond, which also keeps it unmistakable against
   Forecast Flakes' blue in a row of network cards.

   Terrain uses the trail-marker scale, because it is already in the reader's
   head and it means the same thing here as on a trail map:

       GREEN   #1f7a44   under 15 deg      easier
       BLUE    #1552b0   15-25 deg         more difficult
       BLACK   #14181f   25-33 deg         most difficult
       DBLACK  #6d28d9   over 33 deg       expert  (violet, because a second
                                           black is not a distinguishable step)

   Elevation uses a hypsometric ramp — valley green through tan to summit white —
   so a band column reads as a mountain rather than as a bar chart. That is the
   same convention as the relief basemap the network already ships.

       ALP     #2e6fd9   the accent: links, controls, the selected band
   ========================================================================== */
:root{
  --paper:#eef1f4; --paper2:#f6f8fa; --card:#fff; --ink:#12161d; --ink2:#3b4652;
  --alp:#2e6fd9; --alp-dk:#1d4ea8; --alp-sub:#d3e3fb;
  --sign:#04663d; --blue:#0a5ca8; --red:#b0242e; --amber:#b45309;
  --g:#1f7a44; --b:#1552b0; --k:#14181f; --dk:#6d28d9;
  --e1:#2f6b3d; --e2:#6f8f47; --e3:#b09a5c; --e4:#cbb894; --e5:#e6e0d4; --e6:#f7f8fa;
  --line:#ccd3da; --line2:#e4e9ee; --mut:#78838f;
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper)}
body{color:var(--ink);font-family:'Overpass',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--alp);text-decoration:none}
a:hover{color:var(--alp-dk)}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.mono{font-family:'Overpass Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── utility strip ───────────────────────────────────────────────────────── */
.util{background:var(--ink);color:#c9d2dc;border-bottom:3px solid var(--alp);
  font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.util .wrap{display:flex;align-items:center;gap:15px;height:36px;overflow-x:auto}
.util a{color:#c9d2dc;white-space:nowrap}.util a:hover{color:#fff}
.util .sp{flex:1}
.util .live{display:inline-flex;align-items:center;gap:6px;color:#e9eef3;white-space:nowrap}
.util .dot{width:7px;height:7px;border-radius:50%;background:var(--alp);
  animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,111,217,.5)}
  70%{box-shadow:0 0 0 7px rgba(46,111,217,0)}100%{box-shadow:0 0 0 0 rgba(46,111,217,0)}}
@media(max-width:700px){.util .hidesm{display:none}}

/* ── masthead ────────────────────────────────────────────────────────────── */
.mast{background:var(--ink);border-radius:12px;color:#fff;padding:15px 22px;margin:16px 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 6px rgba(255,255,255,.9),
    0 12px 30px rgba(0,0,0,.2)}
.mast .brand{display:flex;align-items:center;gap:13px;min-width:0}
.mast .word{font-weight:900;font-size:clamp(20px,3.4vw,27px);color:#fff;line-height:1}
.mast .word .yl{color:#9dc0f5}
.mast .tag{font-family:'Overpass Mono',monospace;font-weight:700;font-size:11.5px;
  letter-spacing:.1em;color:#9dc0f5;text-transform:uppercase;margin-top:4px}
.mast nav{display:flex;gap:6px;flex-wrap:wrap}
.mast nav a{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#e8eff9;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);border-radius:7px;padding:7px 12px}
.mast nav a:hover,.mast nav a.on{background:#fff;color:var(--ink)}
.dia{flex:none;width:46px;height:46px;border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 9px rgba(0,0,0,.3)}
.dia svg{width:30px;height:30px;display:block}

/* ── structure ───────────────────────────────────────────────────────────── */
.rule{display:flex;align-items:center;gap:12px;margin:34px 0 14px}
.rule h2{margin:0;font-size:clamp(17px,2.6vw,21px);font-weight:900;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--ink)}
.rule .ln{flex:1;height:0;border-top:2px dashed var(--line)}
.rule .sub{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.lede{max-width:820px;color:var(--ink2);font-size:15.5px;line-height:1.65;margin:0 0 8px}
.lede b{color:var(--ink)}
.meta{font-family:'Overpass Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin:9px 0 0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);margin:16px 0}
.grid{display:grid;gap:16px}
@media(min-width:900px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,#12161d 0%,#1b2735 55%,#24405e 100%);
  border-radius:16px;color:#fff;padding:26px 24px;margin:18px 0;position:relative;overflow:hidden}
.hero h1{margin:0 0 10px;font-size:clamp(24px,4.4vw,38px);font-weight:900;letter-spacing:-.015em}
.hero p{margin:0;max-width:760px;color:#c8d6e6;font-size:15.5px;line-height:1.62}
.hero .kick{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8fb6ee;margin-bottom:9px}
.hero .ridge{position:absolute;right:-30px;bottom:-10px;width:340px;opacity:.16;pointer-events:none}
.stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.stat .v{font-family:'Overpass Mono',monospace;font-size:26px;font-weight:700;color:#fff;
  line-height:1}
.stat .l{font-family:'Overpass Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8fb6ee;margin-top:5px}

/* ── controls ────────────────────────────────────────────────────────────── */
.ctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.ctl input,.ctl select{font-family:'Overpass Mono',monospace;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:#fff;color:var(--ink)}
.ctl input{min-width:230px}
.ctl input:focus,.ctl select:focus{outline:2px solid var(--alp);outline-offset:1px}
.chip{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  background:#fff;color:var(--ink2);cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── table ───────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table.rs{border-collapse:collapse;width:100%;font-size:13.5px;min-width:820px}
table.rs th{position:sticky;top:0;background:var(--ink);color:#fff;text-align:right;
  font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:10px 11px;cursor:pointer;white-space:nowrap;z-index:2}
table.rs th:hover{background:#243044}
table.rs th.l,table.rs td.l{text-align:left}
table.rs th[aria-sort]:after{content:"";margin-left:5px;opacity:.5}
table.rs th[aria-sort="descending"]:after{content:"\25BC"}
table.rs th[aria-sort="ascending"]:after{content:"\25B2"}
table.rs td{padding:9px 11px;text-align:right;border-top:1px solid var(--line2);
  font-family:'Overpass Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
table.rs td.l{font-family:'Overpass',sans-serif;font-weight:600}
table.rs tbody tr{cursor:pointer}
table.rs tbody tr:hover{background:var(--alp-sub)}
table.rs tbody tr.on{background:var(--ink);color:#fff}
table.rs tbody tr.on a{color:#9dc0f5}
.st{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700;color:var(--mut)}
table.rs tbody tr.on .st{color:#8fa3bb}

/* ── the band column: the site's signature instrument ────────────────────── */
.col{display:flex;flex-direction:column-reverse;gap:2px}
.band{display:grid;grid-template-columns:86px 1fr 74px;align-items:center;gap:10px;
  font-family:'Overpass Mono',monospace;font-size:11.5px}
.band .ft{color:var(--ink2);text-align:right;font-weight:700}
.band .bar{height:26px;border-radius:4px;position:relative;display:flex;align-items:center;
  padding:0 8px;color:#12161d;font-weight:700;font-size:11px;overflow:hidden}
.band .bar .lab{position:relative;z-index:1;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.band .rt{color:var(--mut);text-align:right}
.band.hi .ft{color:var(--alp)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:'Overpass Mono',monospace;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:12px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;
  vertical-align:-1px}
.diff{display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px}

/* ── detail ──────────────────────────────────────────────────────────────── */
.dt{display:grid;gap:18px}
@media(min-width:860px){.dt{grid-template-columns:1fr 300px}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-family:'Overpass Mono',monospace;
  font-size:12.5px;align-items:baseline}
.kv dt{color:var(--mut);text-transform:uppercase;font-size:10.5px;letter-spacing:.07em;
  font-weight:700;white-space:nowrap}
.kv dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.compass{width:120px;height:120px;margin:0 auto}
.note{font-size:12.5px;color:var(--mut);line-height:1.6;margin:12px 0 0}
.note b{color:var(--ink2)}

/* ── provenance / footer ─────────────────────────────────────────────────── */
.prov{border-left:3px solid var(--alp);background:var(--paper2);padding:12px 15px;
  border-radius:0 9px 9px 0;font-size:13px;color:var(--ink2);line-height:1.6;margin:14px 0}
.prov b{color:var(--ink)}
.foot{background:var(--ink);color:#9aa6b4;margin-top:44px;padding:26px 0 32px;font-size:13px}
.foot a{color:#c9d8ec}
.foot .wrap{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between}
.foot .cols{display:flex;gap:38px;flex-wrap:wrap}
.foot h4{margin:0 0 8px;font-family:'Overpass Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#6f7d8d}
.foot ul{list-style:none;margin:0;padding:0;line-height:1.85}

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */
.crumb{margin:14px 0 4px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.crumb li+li:before{content:"/";margin-right:8px;color:var(--line)}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--alp)}
.crumb [aria-current]{color:var(--ink)}

/* A resort hero carries no ridge illustration — the band column below it is the
   picture of that mountain, and two mountains on one screen read as decoration. */
.hero.resort{background:linear-gradient(160deg,#12161d 0%,#1b2735 60%,#2a4767 100%)}
.hero.resort h1{margin-bottom:8px}

/* ── chips as links (state and nearby-resort rails) ──────────────────────── */
a.chip{display:inline-block;text-decoration:none;margin:0 0 6px}
a.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
a.chip .mono{color:var(--mut);font-size:10px;margin-left:4px}
a.chip:hover .mono{color:#9dc0f5}

/* Tables carry links now that every row is a page; the row is no longer a
   click target, so the cursor must not claim it is. */
table.rs tbody tr{cursor:auto}
table.rs tbody tr:hover{background:var(--paper2)}
table.rs td.l a{font-weight:700}

/* ── the mountain portrait ───────────────────────────────────────────────── */
.portrait{margin:18px 0}
.portrait img{width:100%;height:auto;border-radius:14px;display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.22)}
.portrait figcaption{font-size:12.5px;color:var(--mut);line-height:1.55;margin:9px 4px 0}