/* =====================================================================
   MontanaSnowReport.com  |  site.css
   Hand-authored. No framework. Sibling of MontanaReports.com: same fonts, same day/night
   token system (html[data-theme] set before first paint), same rules and buttons. The
   product owns one accent (snow: glacial blue) and a diverging scale for percent of median.
   Sections: 0 fonts  1 tokens  2 base  3 type  4 layout  5 nav  6 components (added as built)
   ===================================================================== */

/* 0. Fonts (self-hosted, latin subsets, variable) ---------------------- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/Fraunces-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url("fonts/Fraunces-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/Inter-normal-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/JetBrainsMono-normal-latin.woff2") format("woff2")}

/* 1. Tokens ------------------------------------------------------------ */
:root{
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-xs:clamp(.6875rem,.65rem + .15vw,.75rem);
  --t-sm:clamp(.8125rem,.78rem + .2vw,.875rem);
  --t-base:clamp(1rem,.95rem + .25vw,1.0625rem);
  --t-md:clamp(1.125rem,1.05rem + .4vw,1.3125rem);
  --t-lg:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);
  --t-xl:clamp(2.125rem,1.4rem + 2.8vw,3.5rem);
  --t-2xl:clamp(2.75rem,1.6rem + 4.6vw,5.5rem);
  --t-hero:clamp(3rem,1.2rem + 6.5vw,7rem);

  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;--s-10:8rem;
  --gutter:clamp(1.25rem,4vw,4rem);
  --container:1280px;
  --measure:64ch;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-fast:220ms;--d-base:600ms;--d-slow:1200ms;
  --radius:6px;
  --contour-tan:#B08D57;   /* cartographic line-work only, never UI */

  /* ---- DAY ---- */
  color-scheme:light;
  --bg:#F5F2EA;--bg-rgb:245,242,234;--bg-2:#ECE7DC;--bg-3:#E2DBCD;
  --fg:#14181C;--fg-2:#3A424A;--fg-3:#5F676F;--fg-4:#8F969D;
  --rule:rgba(20,24,28,.12);--rule-2:rgba(20,24,28,.24);
  --eyebrow:#5F676F;--hero-glow:#FDFBF6;
  --btn-border:#14181C;--btn-fg:#14181C;--btn-hover-bg:#14181C;--btn-hover-fg:#F5F2EA;
  --btn-solid-bg:#14181C;--btn-solid-fg:#F5F2EA;--btn-solid-hover:#2A3138;
  --focus:#14181C;--selection:rgba(36,88,122,.22);
  --panel:#FBF9F4;--panel-2:#F1EDE3;
  /* the product's accent: glacial blue, used for the wordmark mark, active controls, the SWE line */
  --acc:#24587A;--acc-soft:rgba(36,88,122,.14);--acc-ink:#183F59;
  /* diverging percent-of-median scale (below: warm earth, above: cold water) */
  --n-far-below:#A6412F;--n-below:#B4802A;--n-near:#6E7A82;--n-above:#2F7C96;--n-far-above:#1F4E6E;
  --n-unavail:#B5B0A6;
  /* signal palette shared across the family */
  --good:#1F7A5C;--review:#B4802A;--risk:#A6412F;--info:#2F5B87;
  /* travel impact */
  --ti-low:#1F7A5C;--ti-moderate:#B4802A;--ti-high:#C2552B;--ti-severe:#A6412F;
  /* map on paper */
  --map-line:rgba(20,24,28,.15);--map-line-2:rgba(20,24,28,.26);--map-edge:rgba(20,24,28,.72);
  --river:#2F7C96;--lake:rgba(47,124,150,.16);--label:rgba(20,24,28,.62);
  /* chart */
  --chart-median:rgba(20,24,28,.35);--chart-last:rgba(176,141,87,.9);--chart-now:#24587A;--chart-band:rgba(36,88,122,.10);
  --chart-grid:rgba(20,24,28,.08);
}
html[data-theme="night"]{
  color-scheme:dark;
  --bg:#0B1016;--bg-rgb:11,16,22;--bg-2:#111820;--bg-3:#1B2530;
  --fg:#F5F2EA;--fg-2:rgba(245,242,234,.8);--fg-3:rgba(245,242,234,.58);--fg-4:rgba(245,242,234,.4);
  --rule:rgba(245,242,234,.12);--rule-2:rgba(245,242,234,.24);
  --eyebrow:rgba(233,221,189,.72);--hero-glow:#131C25;
  --btn-border:rgba(245,242,234,.45);--btn-fg:#F5F2EA;--btn-hover-bg:#F5F2EA;--btn-hover-fg:#14181C;
  --btn-solid-bg:#F5F2EA;--btn-solid-fg:#14181C;--btn-solid-hover:#FFFFFF;
  --focus:#E9DDBD;--selection:rgba(166,212,232,.35);
  --panel:#0F161E;--panel-2:#151E28;
  --acc:#A6D4E8;--acc-soft:rgba(166,212,232,.14);--acc-ink:#CFE7F2;
  --n-far-below:#E8794F;--n-below:#D2A26A;--n-near:rgba(245,242,234,.55);--n-above:#8FC4D4;--n-far-above:#BFE3F0;
  --n-unavail:rgba(245,242,234,.3);
  --good:#7FC9A7;--review:#D2A26A;--risk:#E8794F;--info:#86AEDA;
  --ti-low:#7FC9A7;--ti-moderate:#D2A26A;--ti-high:#E8935F;--ti-severe:#E8794F;
  --map-line:rgba(214,226,232,.21);--map-line-2:rgba(214,226,232,.32);--map-edge:rgba(236,242,244,.62);
  --river:#8FC4D4;--lake:rgba(143,196,212,.22);--label:rgba(245,242,234,.6);
  --chart-median:rgba(245,242,234,.4);--chart-last:rgba(233,221,189,.75);--chart-now:#A6D4E8;--chart-band:rgba(166,212,232,.12);
  --chart-grid:rgba(245,242,234,.08);
}
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .7s var(--ease),color .7s var(--ease),border-color .7s var(--ease),fill .7s var(--ease),stroke .7s var(--ease),opacity .7s var(--ease)!important}

/* 2. Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f-ui);font-size:var(--t-base);line-height:1.55;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--selection)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* 3. Type --------------------------------------------------------------- */
.display{font-family:var(--f-display);font-weight:300;letter-spacing:-.025em;line-height:.98;font-variation-settings:"opsz" 144}
.display-md{font-family:var(--f-display);font-weight:350;letter-spacing:-.018em;line-height:1.06;font-variation-settings:"opsz" 72}
.display i,.display em,.display-md i,.display-md em{font-style:italic;font-weight:300}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.lede{font-size:var(--t-md);line-height:1.5;color:var(--fg-2);max-width:var(--measure);text-wrap:pretty}
.prose{max-width:var(--measure);text-wrap:pretty}
.prose p+p{margin-top:var(--s-4)}
.prose a{border-bottom:1px solid var(--rule-2)}
.prose a:hover{border-bottom-color:var(--fg)}

/* 4. Layout -------------------------------------------------------------- */
.wrap{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.wrap-wide{width:min(100% - 2*var(--gutter),1480px);margin-inline:auto}
.section{padding-block:clamp(3rem,7vw,6rem)}
.hairline{border:0;border-top:1px solid var(--rule);margin:0}
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:.85em 1.35em;border:1px solid var(--btn-border);border-radius:999px;color:var(--btn-fg);font-weight:500;font-size:var(--t-sm);letter-spacing:.01em;line-height:1;transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.btn:hover{background:var(--btn-hover-bg);color:var(--btn-hover-fg);border-color:var(--btn-hover-bg)}
.btn-solid{background:var(--btn-solid-bg);color:var(--btn-solid-fg);border-color:var(--btn-solid-bg)}
.btn-solid:hover{background:var(--btn-solid-hover)}

/* 5. Nav ----------------------------------------------------------------- */
.skip{position:absolute;left:var(--gutter);top:-3rem;z-index:50;background:var(--fg);color:var(--bg);padding:.5rem .8rem;border-radius:var(--radius)}
.skip:focus{top:1rem}
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);padding:1.1rem var(--gutter)}
.wordmark{font-weight:600;font-size:.8125rem;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.75em;color:var(--fg);white-space:nowrap}
.wordmark .mark{width:11px;height:11px;border:1.5px solid var(--acc);border-radius:50%;position:relative;flex:none}
.wordmark .mark::after{content:"";position:absolute;inset:2.5px;background:var(--acc);border-radius:50%}
.nav-links{display:flex;gap:clamp(1rem,2.6vw,2.5rem);font-size:var(--t-sm);color:var(--fg-3)}
.nav-links a{padding:.35rem 0;transition:color var(--d-fast) var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:var(--s-4)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;min-width:44px;padding:0 .5rem;color:var(--fg-3);border-radius:999px}
.theme-toggle:hover{color:var(--fg)}
.theme-toggle svg{width:18px;height:18px;flex:none}
.theme-toggle .ic{display:none}
.theme-toggle[data-mode="auto"] .ic-auto,.theme-toggle[data-mode="day"] .ic-day,.theme-toggle[data-mode="night"] .ic-night{display:block}
.theme-label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:860px){.nav-links{display:none}.theme-label{display:none}.nav{gap:var(--s-3)}.nav-right{gap:var(--s-2)}.wordmark{font-size:.75rem;letter-spacing:.16em}}

/* 6. Components: appended as the product is built ------------------------ */