/* A small weather readout on the existing snow surface. */
.mountain-weather{width:min(508px,100%);margin-top:-12px;margin-bottom:2px;color:var(--ink)}
.weather-link{display:flex;align-items:center;justify-content:center;gap:14px;min-height:50px;padding:5px 12px;border:1px solid rgba(81,101,112,.22);border-radius:12px;background:rgba(255,255,255,.15)}
.weather-link:hover{background:rgba(255,255,255,.35);color:var(--ink)}
.weather-place{font-size:13px;font-weight:700;white-space:nowrap}
.weather-summary{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;line-height:1.4;min-height:38px}
.weather-icon{display:block;flex-shrink:0;width:32px;height:32px}
.weather-temperature{font-size:23px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.weather-condition{max-width:110px;text-align:left}
.weather-wind{padding-left:11px;border-left:1px solid rgba(81,101,112,.25);white-space:nowrap;color:var(--muted)}
.weather-arrow{width:15px;height:15px;flex-shrink:0}
.weather-source{margin-top:5px;font-size:10px;line-height:1.5;color:var(--muted)}
.weather-source a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:620px){
 .mountain-weather{margin-top:-10px}
 .weather-link{gap:9px;padding-inline:10px;flex-wrap:wrap;column-gap:12px;row-gap:0}
 .weather-place{font-size:12px}
 .weather-summary{gap:7px;font-size:11px}
 .weather-temperature{font-size:21px}
 .weather-icon{width:28px;height:28px}
 .weather-wind{padding-left:8px}
 .weather-condition{max-width:83px}
 .weather-source{font-size:9px}
 .weather-arrow{display:none}
}
@media(max-width:440px){
 .weather-link{padding-block:8px}
 .weather-place{flex-basis:100%;line-height:1.3}
 .weather-summary{min-height:34px}
}

/* The weather symbol belongs to the sky between the brand and navigation. */
.site-header{position:relative}
.site-header .mountain-weather{width:100%;margin:0;text-align:center;color:white}
.site-header .weather-link{display:grid;grid-template-columns:100px 42px auto;grid-template-rows:22px minmax(29px,auto) 20px;column-gap:9px;row-gap:0;justify-content:center;width:max-content;max-width:100%;margin:0 auto;min-height:83px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;}
.site-header .weather-link:hover{background:none;color:var(--ink)}
.site-header .weather-summary{display:contents}
.site-header .weather-place{grid-column:2/4;grid-row:1;align-self:end;justify-self:start;font-size:12px;line-height:1.3;flex-basis:auto}
.site-header .weather-icon{grid-column:1;grid-row:1/4;width:100px;height:90px;align-self:center;filter:drop-shadow(0 3px 6px rgba(36,63,76,.12));animation:sky-weather-drift 8s ease-in-out infinite}
.site-header .weather-icon path[fill="#f5f8fa"]{stroke:rgba(255,255,255,.7);stroke-width:.5;fill:#f7fafb}
.site-header .weather-temperature{grid-column:2;grid-row:2;align-self:center;justify-self:start;font-size:26px}
.site-header .weather-condition{grid-column:3;grid-row:2;align-self:center;justify-self:start;font-size:13px;max-width:130px;text-align:left}
.site-header .weather-wind{grid-column:2/4;grid-row:3;align-self:start;justify-self:start;border:0;padding:0;font-size:11px;color:#294552}
.site-header .weather-arrow{display:none}
.site-header .weather-source{margin-top:2px;color:#294552;font-size:9px}
@keyframes sky-weather-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-2px)}}
/* Keep the header clear at desktop, tablet and mobile widths. */
@media(min-width:1181px){
 .header-inner{grid-template-columns:360px minmax(200px,1fr) auto;gap:18px}
 #navigation{column-gap:16px}
 .site-header .weather-link{grid-template-columns:80px 35px auto;column-gap:6px;grid-template-rows:21px minmax(27px,auto) 19px;min-height:76px}
 .site-header .weather-icon{width:80px;height:80px}
 .site-header .weather-temperature{font-size:24px}
 .site-header .weather-condition{font-size:12px;max-width:100px}
 .site-header .weather-source{position:absolute;top:6px;left:calc(50% + 38px);margin:0;white-space:nowrap;font-size:9px;color:rgba(255,255,255,.9)}
}
@media(min-width:761px) and (max-width:1180px){
 .header-inner{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:18px;position:relative}
 .menu-button{display:flex;align-items:center;gap:10px;white-space:nowrap}
 #navigation{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--sky);padding:12px 20px}
 #navigation.is-open{display:flex;flex-wrap:wrap;justify-content:center}
 .site-header .weather-link{grid-template-columns:76px 34px auto;column-gap:5px;min-height:76px}
 .site-header .weather-icon{width:76px;height:76px}
 .site-header .weather-temperature{font-size:23px}
 .site-header .weather-condition{font-size:11px;max-width:83px}
 .site-header .weather-source{position:absolute;top:3px;right:0;white-space:nowrap;margin:0;font-size:8px;color:rgba(255,255,255,.9)}
}
/* Compact mobile weather in the upper-right strip above the brand. */
.weather-mobile-credit{display:none}
@media(max-width:760px){
 .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;position:relative;padding-top:40px;padding-bottom:17px}
 .brand{grid-row:1;grid-column:1}
 .menu-button{grid-row:1;grid-column:2}
 .site-header .mountain-weather{position:absolute;top:0;right:0;grid-row:auto;grid-column:auto;width:auto;max-width:100%;padding:0;margin:0;min-height:0}
 .site-header .weather-link{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px;width:max-content;max-width:100%;min-height:32px;padding:0;white-space:nowrap}
 .site-header .weather-summary{display:contents}
 .site-header .weather-icon{order:1;width:25px;height:25px;flex-shrink:0;animation:none;filter:drop-shadow(0 1px 2px rgba(36,63,76,.12))}
 .site-header .weather-place{order:0;font-size:11px;line-height:1.3;flex:none;align-self:center}
 .site-header .weather-temperature{order:2;font-size:16px;line-height:1;flex:none;align-self:center}
 .site-header .weather-condition{order:3;font-size:11px;line-height:1.3;max-width:95px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;align-self:center}
 .site-header .weather-wind{order:4;font-size:10px;line-height:1.3;padding-left:7px;margin-left:2px;border-left:1px solid rgba(255,255,255,.35);flex:none;align-self:center}
 .site-header .weather-source{display:none}
 .weather-mobile-credit{display:block;padding-bottom:16px;font-size:10px;line-height:1.5;color:var(--muted)}
 .weather-mobile-credit a{display:inline;min-height:0;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
}

.site-header .weather-link:hover{color:#fff}
.site-header .weather-wind{color:rgba(255,255,255,.9)}
@media(prefers-reduced-motion:reduce){.site-header .weather-icon{animation:none}}



/* A useful link remains when the forecast cannot be loaded. */
.site-header .mountain-weather:not([data-state="ready"]) .weather-link{display:flex;flex-direction:column;gap:4px;min-height:76px}
.site-header .mountain-weather:not([data-state="ready"]) .weather-summary{display:block;font-size:11px;color:rgba(255,255,255,.9)}

@media(max-width:760px){
 .site-header .mountain-weather:not([data-state="ready"]) .weather-link{flex-direction:row;min-height:32px;gap:8px}
 .site-header .mountain-weather:not([data-state="ready"]) .weather-summary{font-size:11px}
}

/* Let the place name take only its own width before the weather icon. */
@media(max-width:760px){.site-header .weather-place{min-width:0}}