/* Snowcall (snowcall.app). Palette "High Pressure": see the Snowcall Handbook, chapter 2. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/fonts/archivo-wdth.woff2") format("woff2-variations"), url("/fonts/archivo-wdth.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-serif-display-400.woff2") format("woff2"); }

:root {
  --ground: #F4F7FB;
  --ink: #0E1B2C;
  --muted: #4F5B69;
  --line: #DCE2EA;
  --bluebird: #1F5FD6;
  --bluebird-light: #7AA4F5;
  --sun: #F6B82E;
  --storm: #34465B;
  --quiet: #5E6A78;
  --groomer-sky: #DCE8FB;
  --powder: #A9BEE6;
  --lift: #9AA9BC; /* lift season bar, most winters (v0.33.0): lighter than ink, it matters but isn't the headline */
  --lift-some: #CDD6E1; /* lift season bar, some winters */
  --gold: #7D600E;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: #E7EDF5; color-scheme: light; }
/* Jump links land just under the sticky top bar (v0.68.0; app.js keeps --hdr-h equal to the bar's height). */
html { scroll-padding-top: var(--hdr-h, 60px); }
h2[id], h3[id] { scroll-margin-top: 12px; }
body { margin: 0; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--bluebird); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--ground); display: flex; flex-direction: column; }
@media (min-width: 560px) { .app { box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(14, 27, 44, 0.12); } body { padding: 0 0 40px; } }

/* Shared type */
.hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; }
.wm { font-family: var(--serif); font-size: 24px; line-height: 1; }
.wm-sm { font-size: 20px; }
.region { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; font-weight: 600; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.vword { font-weight: 800; font-stretch: 125%; letter-spacing: 0.01em; }
.blue { color: var(--bluebird); }
.grey { color: var(--quiet); }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.5; }
.h1 { margin: 26px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.05; }
.h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lead { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.wrap { padding: 8px 20px 0; display: flex; flex-direction: column; }

/* Hero bands */
.hero { display: block; position: relative; overflow: hidden; text-decoration: none; padding: 40px 20px 100px; margin-top: 8px; }
.hero-bluebird { background: var(--bluebird); color: #FFFFFF; }
.hero-bluebird:hover { color: #FFFFFF; }
.hero-groomer { background: var(--groomer-sky); color: var(--ink); padding-bottom: 104px; }
.hero-groomer:hover { color: var(--ink); }
.sun { position: absolute; right: -70px; top: -60px; }
.sun-sm { right: -24px; top: -26px; }
.ridge { position: absolute; left: 0; bottom: 0; width: 100%; height: 90px; }
.hero-copy { position: relative; display: flex; flex-direction: column; gap: 10px; }
.hero-word { font-size: 52px; line-height: 0.95; }
.hero-word-md { font-size: 36px; line-height: 1; }
.hero-at { font-family: var(--serif); font-size: 34px; line-height: 1.05; }
.hero-proof { font-size: 16px; color: #E4EDFF; margin-top: 6px; line-height: 1.4; }
.hero-bluebird .eyebrow { color: #E4EDFF; }

/* Glints on fresh snow (bluebird only) */
.glints { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; }
.glint { position: absolute; width: 12px; height: 12px; opacity: 0; animation: sc-glint 3.6s ease-in-out infinite; }
.glint::before, .glint::after { content: ""; position: absolute; left: 50%; top: 50%; background: #7AA4F5; border-radius: 1px; transform: translate(-50%, -50%); }
.glint::before { width: 2px; height: 12px; }
.glint::after { width: 12px; height: 2px; }
@keyframes sc-glint { 0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(20deg); } 90% { opacity: 0.5; transform: scale(0.6) rotate(40deg); } }

/* Corduroy draw (groomer) */
.cord { fill: none; stroke: #B9C9E3; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.drawing .cord { animation: sc-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.drawing .cord:nth-of-type(2) { animation-delay: 0.12s; }
.drawing .cord:nth-of-type(3) { animation-delay: 0.24s; }
.drawing .cord:nth-of-type(4) { animation-delay: 0.36s; }
.drawing .cord:nth-of-type(5) { animation-delay: 0.48s; }
@keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Snowfall (storm band and storm watch page) */
.flakes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.flk { position: absolute; top: -12px; border-radius: 50%; background: #FFFFFF; opacity: 0.5; animation: sc-fall linear infinite; }
@keyframes sc-fall { from { transform: translate(0, -10px); } to { transform: translate(-18px, 260px); } }

/* Storm band */
.stormband { position: relative; overflow: hidden; background: var(--storm); color: #FFFFFF; text-decoration: none; }
.stormband:hover { color: #FFFFFF; }
.stormband-copy { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 20px 22px; }
.stormband-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stormband-title { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.stormband-main { font-size: 18px; font-weight: 600; line-height: 1.35; }
.stormband-sub { font-size: 15px; color: #C9D5E4; }

/* Chips and pills */
.chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
.chip-white { background: #FFFFFF; color: var(--storm); }
.chip-white-outline { border: 1.5px solid #FFFFFF; color: #FFFFFF; }
.chip-slate { background: var(--storm); color: #FFFFFF; }
.chip-slate-outline { border: 1.5px solid var(--storm); color: var(--storm); }
.chip-blue { background: var(--bluebird); color: #FFFFFF; }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex: none; }
.pill-solid { background: var(--bluebird); color: #FFFFFF; }
.pill-outline { border: 1.5px solid var(--bluebird); color: var(--bluebird); }

/* Rows */
.alertrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.alertrow-label { flex: 1; font-size: 16px; font-weight: 700; }
.row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.row:hover { color: var(--ink); background: linear-gradient(90deg, transparent, rgba(31, 95, 214, 0.04), transparent); }
.row-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row-name { font-size: 19px; font-weight: 700; }
.row-proof { font-size: 14px; color: var(--muted); line-height: 1.4; }
.row-v { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; flex: none; }
.row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.rows .row { animation: sc-row 0.5s ease-out both; }
.rows .row:nth-child(2) { animation-delay: 0.06s; }
.rows .row:nth-child(3) { animation-delay: 0.12s; }
.rows .row:nth-child(4) { animation-delay: 0.18s; }
@keyframes sc-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.how { padding: 44px 0 8px; display: flex; flex-direction: column; gap: 14px; }
.how p { margin: 0; font-size: 15px; line-height: 1.55; }

/* Storm watch page */
.swhero { position: relative; overflow: hidden; background: var(--storm); color: #FFFFFF; margin-top: 8px; }
.swhero-copy { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 20px 30px; }
.lbl-light { color: #C9D5E4; }
.swh1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.08; }
.swsub { font-size: 16px; line-height: 1.5; color: #E1E8F1; }
.block { display: flex; flex-direction: column; gap: 10px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.block p { margin: 0; font-size: 15px; line-height: 1.55; }
.block .small { font-size: 13px; }
.days { display: flex; flex-direction: column; }
.day { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.day-d { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.day-d strong { font-size: 17px; color: var(--ink); }
.day-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.day-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.day-sky { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.day-det { font-size: 14px; line-height: 1.5; color: var(--muted); }
.legend { display: flex; gap: 10px; align-items: flex-start; }
.legend .chip { margin-top: 2px; }
.biglink { font-size: 17px; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; border: none; background: var(--bluebird); color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: #174CB0; color: #FFFFFF; }
.btn-ghost { background: transparent; color: var(--bluebird); border: 1.5px solid var(--bluebird); }
.btn-ghost:hover { background: rgba(31, 95, 214, 0.06); color: var(--bluebird); }

/* Tonight */
.night { display: block; position: relative; overflow: hidden; background: var(--ink); color: #FFFFFF; text-decoration: none; padding: 26px 0 34px; }
.night:hover { color: #FFFFFF; }
.nightsun { position: absolute; right: -56px; top: 0; animation: sc-spin 60s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.stars { position: absolute; inset: 0; pointer-events: none; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #C9D5E4; animation: sc-twinkle 4s ease-in-out infinite; }
@keyframes sc-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.seg button { font: inherit; border: none; background: none; cursor: pointer; color: #C9D5E4; font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; min-height: 36px; transition: background 0.25s, color 0.25s; }
.seg button[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); }
.night-copy { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.night-copy .eyebrow { color: #C9D5E4; }
.night-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.night-word .vword { font-size: 44px; line-height: 0.95; color: var(--bluebird-light); }
.possible { font-family: var(--serif); font-size: 26px; color: #FFFFFF; }
.night-copy .hero-proof { color: #C9D5E4; }
.needs { display: flex; flex-direction: column; gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.need { display: flex; gap: 12px; align-items: flex-start; }
.need svg { flex: none; margin-top: 2px; }
.need > span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; }
.needs p { margin: 0; }
.sec-h { padding: 30px 0 4px; }

/* Groomer */
.tomorrow { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tomorrow:hover { color: var(--ink); }
.tomorrow-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tomorrow-word { font-size: 22px; line-height: 1.1; }

/* Alerts */
.alertform { display: flex; flex-direction: column; gap: 22px; }
.alertform fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.alertform legend { padding: 0 0 10px; }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; cursor: pointer; }
.opt-t { display: flex; flex-direction: column; gap: 2px; }
.opt-t .vword { font-size: 16px; }
.opt input { width: 24px; height: 24px; accent-color: var(--bluebird); flex: none; }
.demo-msg { margin: -8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); min-height: 1em; }
.sample-alert { display: flex; flex-direction: column; gap: 10px; padding: 26px 0 18px; }
.notif { display: flex; gap: 12px; align-items: flex-start; background: #FFFFFF; border: 1px solid var(--line); border-radius: 22px; padding: 14px 16px; }
.notif svg { flex: none; }
.notif-t { display: flex; flex-direction: column; gap: 2px; font-size: 15px; flex: 1; min-width: 0; }
.notif-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.notif-title { font-size: 16px; }

/* Resort page */
.rhero { position: relative; overflow: hidden; padding: 34px 20px 30px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.rhero h1 { position: relative; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; }
.rhero .vword { position: relative; font-size: 30px; line-height: 1; }
.rhero .sun { right: -60px; top: -60px; }
.rhero-bluebird { background: var(--bluebird); color: #FFFFFF; }
.rhero-powder { background: #E4ECF8; color: var(--ink); }
.rhero-powder .vword { color: var(--bluebird); }
.rhero-groomer { background: var(--groomer-sky); color: var(--ink); }
.rhero-quiet { background: #E3E8EF; color: var(--ink); }
.rhero-quiet .vword { color: var(--quiet); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 26px 0; border-bottom: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-n { font-size: 36px; font-weight: 800; line-height: 1; }
.stat-l { font-size: 13px; color: var(--muted); }
.report { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.report strong { font-size: 16px; font-weight: 600; }
.report span { font-size: 13px; color: var(--muted); }
.sec { padding: 28px 0 24px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.sec > .tomorrow-row .vword { font-size: 22px; line-height: 1.1; }
.sec p { margin: 0; }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 130px; }
.bar { display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; height: 100%; font-size: 12px; color: var(--muted); }
.bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--powder); transform-origin: bottom; animation: sc-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bar i.zero { height: 2px; border-radius: 0; background: #C9D3E0; }
.bar i.recent { background: var(--bluebird); }
.bar b { color: var(--ink); }
@keyframes sc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.barlabels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; font-size: 12px; color: var(--muted); text-align: center; margin-top: -6px; }
.barlabels span:last-child { font-weight: 700; color: var(--ink); }
.next3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.next3 > div { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; border-left: 1px solid var(--line); font-size: 14px; }
.next3 > div:first-child { padding-left: 0; border-left: none; }
.next3 strong { font-size: 14px; }
.strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.strip span { aspect-ratio: 1; border-radius: 4px; animation: sc-pop 0.4s ease-out both; }
@keyframes sc-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.d-b { background: var(--bluebird); }
.d-p { background: #8DABE6; }
.d-s { background: var(--storm); }
.d-g { background: var(--groomer-sky); }
.d-q { border: 1px solid #C9D3E0; }
.key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.source { padding: 28px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.source p { margin: 0; font-size: 14px; line-height: 1.55; }

/* Footer */
.foot { margin-top: auto; padding: 36px 20px 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.heron { font-family: var(--serif); font-size: 15px; color: var(--ink); text-underline-offset: 3px; }
.amp { color: var(--gold); }
.fineprint { margin: 0; padding: 4px 20px 30px; font-size: 12px; line-height: 1.5; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .flk, .glint { display: none; }
  .star { opacity: 0.6; }
}

/* Home: one page you swipe between Today and Tomorrow */
[data-when="evening"] { display: none; }
body.is-evening [data-when="evening"] { display: block; }
body.is-evening .seg[data-when="evening"] { display: inline-flex; }
body.is-evening [data-when="day"] { display: none; }
.pagerbar { padding: 0 20px 8px; min-height: 36px; display: flex; align-items: center; }
.tease { display: flex; align-items: center; justify-content: space-between; width: 100%; }
body:not(.is-evening) .tease[data-when="day"] { display: flex; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #C9D3E0; transition: background 0.25s, width 0.25s; }
.dots i.on { width: 18px; border-radius: 4px; background: var(--bluebird); }
.tease-btn { font: inherit; border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0; font-size: 14px; font-weight: 700; color: var(--bluebird); }
.tease-btn svg { transition: transform 0.2s; }
.tease-btn:hover svg { transform: translateX(2px); }
.tease-back { display: none; }
.on-tomorrow .tease-btn[data-go="1"] { display: none; }
.on-tomorrow .tease-back { display: inline-flex; }
.tease-back:hover svg { transform: translateX(-2px); }
body.is-evening .home-hdr, body.is-evening .pagerbar { background: var(--ink); color: #FFFFFF; }
body.is-evening .home-hdr .region svg { color: var(--bluebird-light); }
.home-hdr .region svg { color: var(--bluebird); }
body.is-evening .pagerbar { padding-bottom: 4px; }
body.is-evening #p-today .hero { margin-top: 0; }
.pager { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; transition: height 0.3s ease; touch-action: pan-x pan-y; }
.pager::-webkit-scrollbar { display: none; }
.pager.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.pager a { -webkit-user-drag: none; }
.page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.pager.nudge .page { animation: sc-nudge 1.3s cubic-bezier(0.22, 1, 0.36, 1) 1; }
@keyframes sc-nudge { 0% { transform: none; } 35% { transform: translateX(-64px); } 55% { transform: translateX(-64px); } 100% { transform: none; } }
.fhero { display: block; position: relative; overflow: hidden; margin-top: 8px; padding: 34px 20px 32px; background: var(--groomer-sky); color: var(--ink); text-decoration: none; }
.fhero:hover { color: var(--ink); }
.fhero .eyebrow { color: #3E4A58; }
.fhero .night-word .vword { color: var(--bluebird); }
.fhero .possible { color: var(--ink); }
.fsun { position: absolute; right: -44px; top: -40px; animation: sc-spin 60s linear infinite; }
.fproof { font-size: 16px; line-height: 1.45; color: #3E4A58; margin-top: 4px; }

/* ---- Live app additions ---- */
.hero-powder { background: #E4ECF8; color: var(--ink); }
.hero-powder:hover { color: var(--ink); }
.hero-powder .hero-word, .hero-powder .eyebrow { color: var(--bluebird); }
.hero-powder .hero-proof, .hero-groomer .hero-proof, .hero-quiet .hero-proof, .hero-notyet .hero-proof { color: #3E4A58; }
.hero-storm { background: var(--storm); color: #FFFFFF; }
.hero-storm:hover { color: #FFFFFF; }
.hero-storm .eyebrow, .hero-storm .hero-proof { color: #C9D5E4; }
.hero-quiet { background: #E3E8EF; color: var(--ink); }
.hero-quiet:hover { color: var(--ink); }
.hero-quiet .hero-word { color: var(--quiet); }
.hero-notyet { background: var(--groomer-sky); color: var(--ink); padding-bottom: 104px; }
.hero-notyet .hero-word { color: var(--quiet); }
.hero-notyet .hero-at { font-size: 30px; }
.hero-groomer .eyebrow, .hero-quiet .eyebrow, .hero-notyet .eyebrow { color: #3E4A58; }
.hero-word-sm { font-size: 34px; line-height: 1; }
.hero-quiet, .hero-powder, .hero-storm { padding-bottom: 40px; }
.row-v.dim { color: var(--quiet); }
.row-none { font-size: 14px; color: var(--muted); }
.updated { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.preview-bar { background: var(--sun); color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 20px; }
.preview-bar a { color: var(--ink); }
.rhero-storm { background: var(--storm); color: #FFFFFF; }
.rhero-notyet { background: #E3E8EF; color: var(--ink); }
.rhero-notyet .vword, .rhero-missing .vword { color: var(--quiet); }
.rhero-missing { background: #E3E8EF; color: var(--ink); }
.rhero .sub { position: relative; font-size: 15px; line-height: 1.45; }
.d-x { border: 1px dashed #C9D3E0; }
.d-closed { border-radius: 50% !important; }
.strip span.d-closed.d-q { border-style: solid; }
a.report { color: var(--ink); text-decoration: none; }
a.report:hover strong { text-decoration: underline; }
.links { display: flex; flex-direction: column; padding: 18px 0 0; }
.links a { display: flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.doc { padding: 6px 20px 10px; }
.doc h1 { margin: 22px 0 14px; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.05; }
.doc h2 { margin: 28px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 24px; }
.doc p, .doc li { font-size: 16px; line-height: 1.6; }
.doc ul { padding-left: 20px; }
.doc .fine { font-size: 13px; color: var(--muted); }
.nodata { padding: 40px 20px; }
.foot-links { display: flex; gap: 18px; padding: 28px 20px 0; font-size: 13px; }
.foot-links a { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.note-box { background: var(--groomer-sky); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.note-box ol { margin: 8px 0 0; padding-left: 20px; }
.alertform .btn { width: 100%; }
[hidden] { display: none !important; }

/* ---------- 10 winters: home "While you wait", /winters, season history ---------- */
.guide { padding: 30px 0 8px; border-top: 1px solid var(--line); margin-top: 24px; }
.guide .lead { margin: 6px 0 4px; }
.guide-row { display: flex; flex-direction: column; gap: 3px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.guide-row:hover { color: var(--ink); background: linear-gradient(90deg, transparent, rgba(31, 95, 214, 0.04), transparent); }
.guide-open { font-size: 16px; }
.facts { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 6px; }
.fact { margin: 0; display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.fact-n { flex: none; min-width: 92px; font-family: var(--serif); font-size: 24px; line-height: 1.1; color: var(--bluebird); }
.biglink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; }
.biglink.light { color: #FFFFFF; }
.winter { padding: 26px 0 10px; border-bottom: 1px solid var(--line); }
.winter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.winter-head a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; }
.winter-facts { margin: 8px 0 0; }
.winter-facts div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 0; font-size: 15px; line-height: 1.45; }
.winter-facts dt { color: var(--muted); font-size: 13px; padding-top: 2px; }
.winter-facts dd { margin: 0; }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.ckey { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.ckey span { display: inline-flex; align-items: center; gap: 6px; }
.ckey i.c { width: 12px; height: 12px; }
.cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 18px; }
.mo { display: flex; flex-direction: column; gap: 4px; }
.mn { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mo .g { display: grid; grid-template-columns: repeat(7, 16px); gap: 3px; }
.c { display: inline-block; width: 16px; height: 16px; border-radius: 4px; box-sizing: border-box; }
.c-blank { visibility: hidden; }
.c-big { background: var(--bluebird); }
.c-fresh { background: var(--powder); }
.c-none { background: transparent; border: 1.5px solid #B9C4D2; }
.c-missing { background: repeating-linear-gradient(45deg, #DCE2EA 0 2px, transparent 2px 4px); }
.c-closed { border-radius: 50%; }
.c-future { width: 16px; height: 16px; background: radial-gradient(circle, #B9C4D2 2px, transparent 2.5px); }
.c-today { outline: 2px solid var(--ink); outline-offset: 1px; }
.guide-h { margin: 26px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.guide .facts { margin-top: 14px; }
.facts .fact { display: grid; grid-template-columns: 112px 1fr; gap: 12px; }
.facts .fact-n { min-width: 0; font-size: 23px; }
.guide-top { border-top: 0; margin-top: 0; padding: 22px 0 6px; }
.guide-top .biglink { margin-bottom: 6px; }

/* "Some snow" day type */
.c-some { background: linear-gradient(135deg, var(--powder) 50%, #FFFFFF 50%); border: 1.5px solid var(--powder); }

/* Past seasons carousel (resort page, before opening) */
.sc { gap: 10px; }
.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 2px 20px 6px; scroll-padding: 0 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sc-track::-webkit-scrollbar { display: none; }
.sc-track:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; }
.sc-card { flex: 0 0 84%; scroll-snap-align: start; box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 8px; }
.sc-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sc-card-h strong { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.sc-card-h span { font-size: 12px; color: var(--muted); text-align: right; }
.sc-card-sum { margin: 0; font-size: 14px; line-height: 1.4; }
.sc-card-sum b { font-size: 16px; }
.sc-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; }
.sc-card-end { justify-content: center; align-items: flex-start; gap: 12px; padding: 18px; background: var(--groomer-sky); border-color: transparent; }
.sc-card-end strong { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1; }
.sc-card-end p { margin: 0; font-size: 15px; line-height: 1.45; }
.sc-bar { display: flex; justify-content: space-between; min-height: 44px; }
.sc-bar .sc-next { margin-left: auto; }
.sc-key { margin: 0; }
.sc-key i.c { width: 10px; height: 10px; }
.cal-mini { grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.cal-mini .mn { font-size: 10px; letter-spacing: 0.06em; }
.cal-mini .g { grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini .c { width: 100%; height: auto; aspect-ratio: 1; border-radius: 2px; }
.cal-mini .c-none { border-width: 1px; }
.cal-mini .c-some { border-width: 1px; }
.cal-mini .c-closed { border-radius: 50%; }
.sc-track.nudge .sc-card { animation: sc-nudge 1.2s ease-in-out; }
@keyframes sc-nudge { 0%, 100% { transform: translateX(0); } 40%, 55% { transform: translateX(-56px); } }

/* ---------- Season stages: rows, rotating facts, motion (motion lab, Oct 30, 2026) ---------- */
.row .row-l .status, .row-l .status { margin-top: 1px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--quiet); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--quiet); box-sizing: border-box; }
.status.open { color: var(--bluebird); }
.status.open::before { background: var(--bluebird); border-color: var(--bluebird); }
.row-r { text-align: right; }
.open-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.open-day { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.1; margin-top: 2px; color: var(--ink); }
.open-day.firm { color: var(--bluebird); }
.golink { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--bluebird); }
.golink .ch, .hero-link .ch { display: inline-block; }
.hero-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--bluebird); }
.hero-bluebird .hero-link { color: #FFFFFF; }
.hero-storm .hero-link { color: #FFFFFF; }
.group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 0; }
.group-h .h2 { font-size: 22px; }

.tk { position: relative; display: block; margin-top: 16px; max-width: 300px; }
.tk-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bluebird); margin-bottom: 4px; }
/* Every fact sits in the same grid cell, so the box is always as tall as the longest one and the page never jumps. */
.tk-items { display: grid; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.tk-items li { grid-area: 1 / 1; visibility: hidden; opacity: 0; font-size: 15px; line-height: 1.45; color: var(--ink); min-height: 44px; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease, visibility 0s linear 0.5s; }
.tk-items li.on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.tk-items li.in { visibility: visible; transform: translateY(70%); opacity: 0; transition: none; }
.tk-items li.out { visibility: visible; transform: translateY(-70%); opacity: 0; transition-delay: 0s; }
.tk-n { font-weight: 700; color: var(--bluebird); }
.tk-page { max-width: none; margin: 24px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: no-preference) {
  .rv-wait { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .rv-wait.rv-seen { opacity: 1; transform: none; }
  .row.nudge .golink .ch { animation: sc-nudge-arrow 1s ease-in-out both; }
  .hero-notyet .sun-sm, .hero-groomer .sun-sm { animation: sc-sunrise 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, sc-sunglow 4s ease-in-out 1.6s infinite; border-radius: 50%; }
}
@keyframes sc-nudge-arrow { 0%, 100% { transform: none; } 25%, 65% { transform: translateX(5px); } 45% { transform: none; } }
@keyframes sc-sunrise { from { transform: translate(-30px, 90px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sc-sunglow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(246, 184, 46, 0)); } 50% { filter: drop-shadow(0 0 12px rgba(246, 184, 46, 0.55)); } }

/* Daily snow bars under the season calendars */
.sb { margin: 14px 0 4px; }
.sb-cap { font-size: 14px; margin-bottom: 6px; }
.sb-total { font-family: var(--serif); font-size: 20px; color: var(--bluebird); }
.sb-plot { position: relative; padding-bottom: 16px; }
.sb svg { display: block; width: 100%; height: 84px; }
/* Between the old short bars and two calendar rows: about 95px tall on a phone; scales with the card. */
.sb-mini svg { height: auto; aspect-ratio: 14 / 5; }
/* Mountain pages: scrolling down "catches" on Seasons, lined up under the sticky top bar. Proximity, not
   mandatory: it only settles there when you stop near it, and the next swipe carries on down the page. */
/* Switched on by app.js at the visitor's first scroll gesture, never while the page loads (v0.20.2). */
html.snap-seasons:has(#seasons) { scroll-snap-type: y proximity; }
#seasons { scroll-snap-align: start; scroll-margin-top: 0; }
.sb-grid { stroke: var(--line); stroke-width: 0.6; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.sb-base { stroke: #9AA6B4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-y { position: absolute; right: 0; transform: translateY(-120%); font-size: 10px; color: var(--muted); }
.sb-x { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.sb-x span { position: absolute; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sb-mini .sb-cap { font-size: 13px; }
.sb-mini .sb-total { font-size: 17px; }
.sb-mini { margin-top: 10px; }

/* Feedback round, Oct 30, 2026: blue text means "tap me", so facts and numbers are ink.
   Lift-closed days are small circles (clearly smaller than the squares), future days are dashed. */
.fact-n, .tk-n, .sb-total, .open-day.firm { color: var(--ink); }
.tk-lbl { color: var(--muted); }
.open-day { color: var(--quiet); }
.status.open { color: var(--ink); }
.c-closed { border-radius: 50%; scale: 0.58; }
.cal-mini .c-closed { border-radius: 50%; scale: 0.58; }
.c-future, .cal-mini .c-future { background: none; border: 1px dashed #C3CCD8; }
.ckey i.c-closed { scale: 0.7; }
.strip span.d-closed { scale: 0.6; }
.key i.d-closed { scale: 0.7; }

/* Navigation lab picks (Oct 30, 2026): sticky top bar with a home link on every page but home,
   and a grey band behind lift-closed stretches in the daily snow bars. */
.hdr:not(.home-hdr) { position: sticky; top: 0; z-index: 30; background: rgba(244, 247, 251, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.hdr.scrolled { border-bottom-color: var(--line); }
.home-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none; }
.home-link:hover { color: var(--ink); }
.home-link svg { flex: none; }
.home-link .app-icon { border-radius: 7px; } /* v0.50.0: the Home Screen app icon, 28px */
.home-link { gap: 8px; }
body.is-evening .home-hdr .home-link { color: #FFFFFF; }
.sb-closed { fill: #E3E8EF; }
.sb-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sb-note i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: #E3E8EF; border: 1px solid #D5DCE5; }


.cal-mini .c-future { border: 1px solid #E1E6ED; }
/* Resort page while NOT YET: rotating facts in the band, 10-winter summary below Past seasons */
.tk-rhero { margin-top: 10px; }
.winter-onpage { padding-top: 26px; }
.winter-onpage .biglink { margin-top: 4px; }
/* Waiting band: a small chairlift on the slope, bottom right (replaces the groomer lines) */
.hero-notyet .lift { position: absolute; right: 6px; bottom: -3px; width: 190px; height: 114px; }
.ridge-tall { height: 124px; }

/* Version history (snowcall.app/version) */
.ver-latest { padding: 4px 0 22px; border-bottom: 1px solid var(--line); }
.ver-meta { margin: 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.ver-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.ver-title { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.ver-notes { margin: 12px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.ver-notes li + li { margin-top: 6px; }
.ver-h { margin: 22px 0 6px; }
.ver-list { list-style: none; margin: 0 0 18px; padding: 0; }
.ver-list li { display: grid; grid-template-columns: 52px 54px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.ver-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.ver-d { color: var(--muted); }

/* "What these numbers mean": fine print folded into one tap-to-open line. */
.about { margin: 10px 0 4px; font-size: 14px; color: var(--muted); }
.about summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; color: var(--bluebird); }
.about summary::-webkit-details-marker { display: none; }
.about summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.about[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.about ul { margin: 0 0 6px; padding-left: 18px; line-height: 1.5; }
.about li { margin-bottom: 6px; }
.about-src { margin: 0; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .about summary::after { transition: none; } }

/* Typical winter card (v0.18.0; waves since v0.33.0, wave lab): twenty winters, week by week, plus the best weeks. */
.tw-strip { display: grid; gap: 6px; }
.tw-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; }
.tw-row > span { font-size: 11.5px; line-height: 1.15; color: var(--muted); }
.tw-row > span.tw-cur { color: var(--ink); font-weight: 700; }
.tw-plot { position: relative; min-width: 0; }
.tw-plot svg { display: block; width: 100%; overflow: visible; }
.wv { height: 42px; }
.wv-top { stroke: var(--line); stroke-width: 1; }
.wv-half { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.wv-bar { fill: var(--groomer-sky); }
.wv-cap { stroke: var(--bluebird); stroke-width: 2; }
.lb { height: 8px; }
.lb-most { fill: var(--lift); }
.lb-some { fill: var(--lift-some); }
.tw-lifts .tw-plot { display: flex; align-items: center; min-height: 18px; }
.tw-mark { position: absolute; transform: translate(-50%, -50%); width: 7px; height: 7px; pointer-events: none; }
.tw-mark::after { content: attr(data-n); position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-family: var(--serif); font-size: 11px; line-height: 1; color: var(--bluebird); }
.tw-cursor { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); border: 1.5px solid var(--ink); border-radius: 2px; pointer-events: none; }
.tw-x { position: relative; height: 20px; margin-left: 68px; }
.tw-x span { position: absolute; font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tw-x i { position: absolute; top: 14px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--muted); }
.tw-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.tw-k { display: inline-flex; align-items: center; gap: 5px; }
.tw-key i { display: inline-block; }
.wv-k { width: 8px; height: 12px; background: var(--groomer-sky); border-top: 2px solid var(--bluebird); }
.half-k { width: 14px; height: 0; border-top: 1.5px dashed #B9C4D2; }
.lb-k-most { width: 16px; height: 5px; border-radius: 2.5px; background: var(--lift); }
.lb-k-some { width: 16px; height: 2px; border-radius: 1px; background: var(--lift-some); }
.tw-read { margin: 0; min-height: 2.7em; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.tw-read b { color: var(--ink); }
.tw-read a { font-weight: 700; text-decoration: none; }
[data-tw] .tw-plot { cursor: crosshair; }
.tw-sub { margin: 4px 0 -4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tw-best { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tw-best li { display: grid; grid-template-columns: 11px 1fr; gap: 5px; font-size: 13.5px; line-height: 1.35; padding: 5px 0; }
.tw-best .tw-rk { font-family: var(--serif); font-size: 17px; line-height: 1.1; color: var(--bluebird); }
.tw-best small { font-size: 13.5px; color: var(--muted); }
/* Small phones: keep each best week on one line and the card no taller than the season cards. */
.sc-card.tw { container-type: inline-size; }
@container (max-width: 262px) {
  .tw-row { grid-template-columns: 52px 1fr; gap: 5px; }
  .tw-row > span { font-size: 10.5px; }
  .tw-x { margin-left: 57px; }
  .wv { height: 34px; }
  .tw-best li, .tw-best small { font-size: 12px; letter-spacing: -0.01em; }
}

/* ---------- Desktop (handbook chapter 2, Layout): the same app with more room, never more features ----------
   Under 700px: the phone layout, unchanged. 700px and up: content up to 1200px wide with side gutters, color
   bands edge to edge, mountains in two columns. 1100px and up: all four mountains side by side, every row lined
   up across the columns (CSS subgrid), so a missing item leaves its row empty instead of shifting the rest. */
.desk, .dk { display: none; }         /* desktop-only pieces */
.rows .row.row-best { display: none; } /* on phones the best bet is the band above, not repeated in the rows */

@media (min-width: 700px) {
  html { background: var(--ground); }
  body { padding: 0; }
  .ph { display: none; }
  .dk { display: inline; }
  .app { max-width: none; box-shadow: none; }
  /* One gutter rule for every full-width piece: content centered, at most 1200px, backgrounds edge to edge.
     --g is the gutter: at least 32px, or whatever centers a 1200px column. (The % resolves where it's used.) */
  :root { --g: max(32px, calc((100% - 1200px) / 2)); }
  .hdr, .tb-back, .pagerbar, .wrap, .hero, .fhero, .rhero, .foot-links, .foot, .fineprint, .doc, .nodata, .preview-bar,
  .night-copy, .stormband-copy, .swhero-copy {
    padding-left: var(--g);
    padding-right: var(--g);
  }
  /* Band art stays inside the 1200px column too: the visible edge of each sun (each drawing has some empty
     space around its circle) and the chairlift line up with the content's right edge. Bands still run edge
     to edge, and the suns stay tucked under the top of the band as on phones. */
  .sun { right: calc(var(--g) - 40px); }            /* big sun: circle 40px in from its drawing's edge */
  .sun-sm { right: calc(var(--g) - 22px); }
  .rhero .sun { right: calc(var(--g) - 34px); }
  .fsun { right: calc(var(--g) - 29px); }
  .nightsun { right: calc(var(--g) - 31px); }
  .hero-notyet .lift { right: var(--g); }
  .hdr { padding-top: 18px; padding-bottom: 14px; }

  /* Bands: bigger words, same treatment */
  .hero { padding-top: 56px; }
  .hero-word { font-size: 76px; }
  .hero-word-md { font-size: 52px; }
  .hero-word-sm { font-size: 46px; }
  .hero-at, .hero-notyet .hero-at { font-size: 44px; }
  .hero-proof, .fproof { font-size: 18px; }
  .tk { max-width: 460px; }
  .night-word .vword { font-size: 60px; }
  .rhero { padding-top: 44px; padding-bottom: 40px; }
  .rhero h1 { font-size: 56px; }
  .rhero .vword { font-size: 40px; }
  .rhero .sub { font-size: 17px; }

  /* Mountains as columns. Each row becomes a column; its pieces sit in shared grid rows (subgrid):
     name, status, verdict, proof, tomorrow, last 14 days, Mountain details. */
  .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .rows .row, .rows .row.row-best { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 6px; align-content: start; padding: 24px 0 26px; }
  .rows .row, .rows .row.row-best { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .rows .row-l { display: contents; }
  /* Each piece has a fixed row, so a missing piece (no status, no forecast) leaves its row empty. */
  .rows .row-name { grid-row: 1; font-size: 22px; }
  .rows .status { grid-row: 2; justify-self: start; }
  .rows .row-v, .rows .row-r, .rows .row-none { grid-row: 3; justify-self: start; }
  .rows .row-proof { grid-row: 4; font-size: 15px; }
  .rows .row-tm { grid-row: 5; }
  .rows .row-strip { grid-row: 6; }
  .rows .golink { grid-row: 7; justify-self: start; margin-top: 2px; }
  .rows .row > *, .rows .row-l > * { grid-column: 1; }
  .rows .row-v { font-size: 24px; }
  .rows .row-r { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .rows .row-r .open-lbl { width: 100%; }
  .rows .row-r .open-day { margin-top: 0; }
  .status.best { color: var(--bluebird); }
  .status.best::before { background: var(--sun); border-color: var(--sun); }
  .row-tm.desk { display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
  .row-tm .vword { font-size: 15px; }
  .row-strip.desk { display: flex; flex-direction: column; gap: 4px; }
  .row-strip .strip { gap: 2px; }
  .row-strip .strip span { border-radius: 3px; }
  .row-strip-l { font-size: 11px; color: var(--muted); }
  .alertrow { max-width: 520px; border-bottom: none; }

  /* 10 winters facts: number above its sentence, side by side */
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
  .facts .fact { grid-template-columns: 1fr; gap: 4px; align-content: start; }
  .facts .fact-n { font-size: 30px; }

  /* Reading width for prose */
  .how, .lead, .doc > *, .note, .updated { max-width: 720px; }
  #alerts > *, main.wrap:has(> .ver-latest) > * { max-width: 760px; }

  /* Alerts: a QR code to open them on the phone; browser alerts stay below as the secondary option. */
  .qr.desk { display: flex; gap: 26px; align-items: center; padding: 20px 22px; margin: 0 0 24px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; }
  .qr img { flex: none; width: 168px; height: 168px; image-rendering: pixelated; }
  .qr-t p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; }
  .qr-t .h2 { font-size: 24px; }

  /* Past seasons: two winters side by side */
  .sc-card { flex-basis: calc((100% - 12px) / 2); }
}

@media (min-width: 860px) {
  /* Mountain page (v0.45.0, sponsor placement lab B): stats, the resort's report and the timeline on the left,
     the sponsor's 300 × 250 spot on the right; everything after runs full width. */
  main.wrap:has(> .stats) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: start; }
  main.wrap:has(> .stats) > * { grid-column: 1 / -1; }
  main.wrap:has(> .stats) > .stats { grid-column: 1; grid-row: 1; }
  main.wrap:has(> .stats) > .report { grid-column: 1; grid-row: 2; }
  main.wrap:has(> .stats) > .sec.tl { grid-column: 1; grid-row: 3; }
  main.wrap:has(> .stats) > .spon-m { grid-column: 2; grid-row: 1 / span 3; margin: 26px 0 0; align-self: start; }
  .tl-bar { max-width: 28px; }
  .stats { grid-template-columns: repeat(3, max-content); column-gap: 72px; }
  .stat-n { font-size: 44px; }
  /* /winters: the four mountains two across */
  main.wrap:has(> .winter):not(:has(> .stats)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  main.wrap:has(> .winter):not(:has(> .stats)) > :not(.winter) { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .rows { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc-card { flex-basis: calc((100% - 24px) / 3); }
}

/* Sponsor slot (handbook chapter 2, Sponsors): one per page, labelled, below the verdicts. */
.spon { margin: 22px 0 6px; }
.spon-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.spon-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 64px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; }
.spon-card:hover { border-color: var(--bluebird); color: var(--ink); }
.spon-logo { width: 44px; height: 44px; object-fit: contain; flex: none; border-radius: 6px; }
.spon-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.spon-text strong { font-size: 16px; font-weight: 700; }
.spon-text span { font-size: 14px; color: var(--muted); }
.spon-go { color: var(--bluebird); font-weight: 700; }
.spon-banner .spon-card { padding: 0; overflow: hidden; display: block; }
.spon-img { display: block; width: 100%; height: auto; }
.spon-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.spon-note a { color: var(--muted); }
@media (min-width: 860px) { .spon { max-width: 720px; } }

/* Plan a trip (v0.24.0): the Planner's week pages. Same calendar shapes as Seasons; no new colors. */
.pl-eyebrow { margin: 22px 0 -14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; font-weight: 700; }
.pl-eyebrow a { text-decoration: none; }
.pl-hol { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--groomer-sky); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.pl-focus { padding-top: 10px; }
.pl-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pl-card-h h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.pl-card-h h3 a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.pl-card-h > a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; }
.pl-big { margin: 0; font-size: 16px; line-height: 1.35; }
.pl-n { display: block; font-family: var(--serif); font-size: 40px; line-height: 1.05; color: var(--ink); }
.pl-facts { margin: 0; }
.pl-facts div { display: grid; grid-template-columns: 116px 1fr; gap: 10px; padding: 7px 0; font-size: 15px; line-height: 1.45; }
.pl-facts dt { color: var(--muted); font-size: 13px; padding-top: 2px; }
.pl-facts dd { margin: 0; }
.pl-key { margin: 14px 0 0; }
.pl-share { align-self: flex-start; margin: 10px 0 0; min-height: 44px; font-size: 15px; }
.pl-nav { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.pl-nav a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; text-decoration: none; }
.pl-pick { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 4px 0 6px; }
.pl-pick-row { display: grid; grid-template-columns: 34px repeat(4, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.pl-pick-m { align-self: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pl-chip { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 48px; padding: 4px 2px 9px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 700; line-height: 1.1; overflow: hidden; }
.pl-chip small { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; }
.pl-chip i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.pl-chip:hover { border-color: var(--bluebird); }
.pl-chip.on { border: 2px solid var(--ink); color: var(--ink); }
.pl-pick-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.pl-pick-key i { display: inline-block; width: 12px; height: 6px; border-radius: 1px; }
.pl-sec .biglink, .pl-glance + .biglink { margin-top: 2px; }
.pl-waves { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pl-waves .tw-strip { gap: 10px; }
.pl-waves .tw-row { grid-template-columns: 74px 1fr; }
.pl-waves .tw-row > a { font-size: 12px; font-weight: 600; line-height: 1.15; text-decoration: none; min-height: 24px; display: flex; align-items: center; }
.pl-waves .wv { height: 38px; }
.pl-waves .lb { margin-top: 3px; }
.pl-waves .tw-x { margin-left: 80px; }
.pl-waves .tw-read { min-height: 5.4em; }
@media (min-width: 700px) { .pl-waves .tw-read { min-height: 2.7em; } }
@media (min-width: 700px) {
  .pl-focus { max-width: 640px; }
}
@media (min-width: 1100px) {
  .pl-glance { max-width: 900px; }
}

/* v0.28.0: Snow / Day type toggle (calendars and Plan a trip squares) and day types on Plan a trip. */
.vt { display: inline-flex; width: max-content; max-width: 100%; align-self: flex-start; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: #FFFFFF; margin: 4px 0 10px; }
.vt[hidden] { display: none; }
.vt button { border: 0; background: transparent; border-radius: 999px; padding: 0 16px; min-height: 38px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.vt button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.key-day { display: none; }
.dt-on .key-snow { display: none; }
.dt-on .key-day { display: flex; }
/* Day-type colours: always on the Plan a trip bar and dots; on calendar cells and squares only with Day type on. */
.pl-tbar .t-B, .td.t-B, .key-day .c.t-B, .dt-on .c.t-B { background: var(--bluebird); border: 0; }
.pl-tbar .t-P, .td.t-P, .key-day .c.t-P, .dt-on .c.t-P { background: var(--powder); border: 0; }
.pl-tbar .t-S, .td.t-S, .key-day .c.t-S, .dt-on .c.t-S { background: var(--storm); border: 0; }
.pl-tbar .t-G, .td.t-G, .key-day .c.t-G, .dt-on .c.t-G { background: var(--groomer-sky); border: 0; }
.pl-tbar .t-Q, .td.t-Q, .key-day .c.t-Q, .dt-on .c.t-Q { background: #C9D1DB; border: 0; }
.c.t-B, .c.t-G { position: relative; }
.dt-on .c.t-B::after, .dt-on .c.t-G::after, .key-day .c.t-B::after, .key-day .c.t-G::after, .td.t-B::after, .td.t-G::after { content: ""; position: absolute; width: 34%; height: 34%; max-width: 6px; max-height: 6px; border-radius: 50%; background: var(--sun); top: 10%; right: 10%; }
.td { position: relative; }
.sc-credit { display: none; font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 8px 0 0; }
.dt-on .sc-credit { display: block; }
.pl-credit { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 16px 0 0; }
.pl-bb { margin: 14px 0 2px; font-size: 15px; line-height: 1.45; }
.pl-tbar { display: flex; gap: 2px; height: 10px; max-width: 480px; border-radius: 4px; overflow: hidden; }
.pl-tbar i { display: block; min-width: 4px; }
.pl-tcount { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; margin: 6px 0 0; color: var(--muted); }
.pl-tcount b { color: var(--ink); }
.pl-tcount span { display: inline-flex; align-items: center; }
.td { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.pl-types-none { margin: 8px 0 12px; }
.sc-card-sum.key-day { display: none; }
.dt-on .sc-card-sum.key-day { display: block; }

/* ---------- Home page redesign (v0.29.0): countdowns and the region "when to go" section ---------- */
.open-in { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.how-short { padding-top: 30px; gap: 6px; }
.how-short p { font-size: 14px; color: var(--muted); }
.how-short strong { color: var(--ink); }
.rp { display: flex; flex-direction: column; gap: 12px; }
.rp-full { margin: 36px -20px 0; padding: 28px 20px; background: #FFFFFF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rp-full .h2 { margin: 0; font-size: 28px; }
.rp-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.rp-compact { margin: 30px 0 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); gap: 10px; }
.rp-compact:hover { color: var(--ink); }
.rp-compact .rp-lead { font-size: 14px; }
.rp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rp-title { font-family: var(--serif); font-size: 22px; }
.rp-go { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--bluebird); }
.rp-grid { display: flex; flex-direction: column; gap: 10px; }
.rp-compact .rp-grid { gap: 6px; }
.rp-x { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rp-row { display: flex; flex-direction: column; gap: 2px; }
.rp-name { font-size: 15px; font-weight: 700; }
.rp-compact .rp-name { font-size: 13px; }
.rp-hol { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 2px; align-items: center; margin-top: 3px; }
.rp-hol i { display: block; width: 4px; height: 4px; margin: 0 auto; border-radius: 50%; }
.rp-hol i.on, .rp-dot { background: var(--ink); }
/* Waves (v0.35.0): name over a fresh-snow wave and the lift season bar; past weeks fade, a today line splits them. */
.rp-grid { position: relative; }
.rp-plot { display: block; position: relative; }
.rp-plot svg { display: block; width: 100%; overflow: visible; }
.rp .wv { height: 30px; }
.rp-plot .lb { margin-top: 3px; }
.rp-axis { display: block; }
.rp-x { margin-top: 2px; }
.rp-today { position: relative; display: block; height: 13px; margin-bottom: -4px; }
.rp-today span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.wv-past.wv-bar { fill: #E9EDF2; }
.wv-past.wv-cap { stroke: #B3BECB; stroke-width: 1.6; }
.wv-today { stroke: #8593A4; stroke-width: 1.25; }
.lb-past { opacity: 0.4; }
.past-k { width: 14px; height: 10px; background: #EEF1F5; border-top: 2px solid #B3BECB; }
.rp-key .rp-dot { width: 5px; height: 5px; border-radius: 50%; }
.rp-compact .rp-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 6px; }
.rp-compact .rp-name { font-size: 12px; }
.rp-compact .wv { height: 16px; }
.rp-compact .rp-axis, .rp-compact .rp-today { margin-left: 76px; }
.rp-next { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.rp-next b { color: var(--bluebird); }
.rp-when { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rp-region { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-top: -1px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--bluebird); text-decoration: none; }
.rp-region-full { margin-top: 6px; }
.crumbs { gap: 6px 8px; }
.crumbs > span[aria-hidden] { color: var(--muted); font-weight: 400; }
.rp-passed { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.rp-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.rp-key .rp-dot { width: 5px; height: 5px; border-radius: 50%; }
.rp-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rp-sub { margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rp-best { align-items: center; padding: 12px 0; }
.rp-best .row-name { font-size: 16px; }
.rp-best-r { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.rp-btn { align-self: stretch; margin-top: 4px; }

/* ---------- Snowing now (v0.30.0): a waiting mountain where the station and the forecast agree ---------- */
.row-snow { position: relative; overflow: hidden; }
.row-snow > .row-l, .row-snow > .row-r { position: relative; }
.flakes-row .flk { background: #9DB8EA; opacity: 0.6; }
.snow-now { display: inline-block; margin-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bluebird);
  background: linear-gradient(90deg, #1F5FD6 0%, #1F5FD6 35%, #7FA5E8 50%, #1F5FD6 65%, #1F5FD6 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sc-shimmer 2.6s linear infinite; }
@keyframes sc-shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@media (prefers-reduced-motion: reduce) {
  .snow-now { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}

/* Region page (v0.31.0): topo map band from USGS elevation, short facts, compact mountain cards. */
.region-hero { position: relative; overflow: hidden; margin-top: -4px; background: #EAF0F8; }
/* The page's snowfield rises into the map, like the snow slope under the bluebird band. */
.region-hero::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: -34px; height: 60px; background: var(--ground); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.tmap svg { display: block; width: 100%; height: auto; }
.tp-bg { fill: #EAF0F8; }
.tp-lines { fill: none; stroke: #B9C9E3; stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-lines .tp-k { stroke: #9DB0C9; stroke-width: 1.2; }
.tp-lines .tp-h { stroke: #CCD8EA; stroke-width: 0.6; }
.tp-m circle { fill: var(--ink); stroke: #EAF0F8; stroke-width: 2.5; }
.tp-m text { font-family: var(--sans); font-size: 12.5px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #EAF0F8; stroke-width: 3px; stroke-linejoin: round; }
.tp-m:focus-visible circle { stroke: var(--bluebird); stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .tp { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tp-draw 2.4s ease-out forwards; }
  .tp-1 { animation-delay: .08s; } .tp-2 { animation-delay: .16s; } .tp-3 { animation-delay: .24s; } .tp-4 { animation-delay: .32s; }
  .tp-5 { animation-delay: .40s; } .tp-6 { animation-delay: .48s; } .tp-7 { animation-delay: .56s; }
}
@keyframes tp-draw { to { stroke-dashoffset: 0; } }
.region-page { padding-top: 0; }
.region-page .eyebrow { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.region-h1 { margin: 4px 0 4px; }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin: 18px 0 10px; }
.facts-grid .fact { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.facts-grid .fact-n { min-width: 0; font-size: 26px; line-height: 1; color: var(--ink); }
.sec-label { margin: 28px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 4px; margin: 0 0 12px; }
.mcard-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mcard-h a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mcard-h .h2 { margin: 0; }
.mcard-sub { margin: -8px 0 0; font-size: 13px; color: var(--muted); }
.mchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 6px; }
.mchip { display: flex; flex-direction: column; gap: 3px; background: var(--ground); border-radius: 10px; padding: 9px 10px; }
.mchip-n { font-size: 15px; font-weight: 800; white-space: nowrap; }
.mchip-n a { text-decoration: none; }
.mchip-t { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.mcard-more { border-top: 1px solid var(--line); margin-top: 8px; }
.mcard-more summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--bluebird); cursor: pointer; }
.mcard-more .winter-facts { margin: 0 0 8px; }
.map-src { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
@media (min-width: 700px) {
  /* Wide screens: the map keeps its phone size, centered, its sides fading into the band. */
  .tmap { max-width: 560px; margin: 0 auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
  .region-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .region-page > :not(.mcard) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* v0.38.0: desktop for the Planner's key pieces (desktop lab: When to go B, Plan a trip C, week page C). Phones unchanged. */
.rp-main, .rp-side { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 700px) {
  /* Best-weeks rows are plain rows, not the home page's mountain columns (that borrowed layout drew tall empty lines). */
  .rp .rows { display: flex; flex-direction: column; }
  .rp .rows .row { display: flex; flex-direction: row; justify-content: space-between; grid-row: auto; padding: 12px 0; align-items: center; row-gap: 0; }
  .rp .rows .row-l { display: block; }
  .rp .rows .row-name { font-size: 16px; }
}
@media (min-width: 1100px) {
  /* When to go: the chart on the left, best weeks and Find your week on the right. */
  .rp-full { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; align-items: start; }
  .rp-side { padding-top: 46px; }
  .rp-side .rp-sub { margin: 0; }
  .rp-side .rows .row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rp-side .rp-region-full { font-size: 15px; }
  .rp-full .rp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: end; gap: 12px; }
  .rp-full .rp-name { padding-bottom: 10px; font-size: 14px; }
  .rp-full .wv { height: 56px; }
  .rp-full .rp-axis, .rp-full .rp-today { margin-left: 108px; }

  /* Plan a trip: the chart full width, and the picker turned sideways so each month sits under its month on the chart. */
  .pl-glance { max-width: none; }
  .pl-waves .tw-row { grid-template-columns: 120px minmax(0, 1fr); }
  .pl-waves .tw-row > a { font-size: 14px; }
  .pl-waves .tw-x { margin-left: 126px; }
  .pl-waves .wv { height: 60px; }
  section.pl-pick-under { max-width: none; display: grid; grid-template-columns: 126px minmax(0, 1fr); align-items: start; border-top: 0; padding-top: 8px; }
  .pl-pick-under > .h2 { grid-column: 1; margin: 30px 0 0; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .pl-pick-under nav.pl-pick { grid-column: 2; max-width: none; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 0; }
  .pl-pick-under .pl-pick-row { display: contents; }
  .pl-pick-under .pl-pick-m { grid-row: 1; text-align: center; }
  .pl-pick-under .pl-chip { margin: 0 3px; min-height: 50px; }
  .pl-pick-under .pl-chip small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .pl-pick-under .pl-pick-row:nth-child(1) > * { grid-column: 1; }
  .pl-pick-under .pl-pick-row:nth-child(2) > * { grid-column: 2; }
  .pl-pick-under .pl-pick-row:nth-child(3) > * { grid-column: 3; }
  .pl-pick-under .pl-pick-row:nth-child(4) > * { grid-column: 4; }
  .pl-pick-under .pl-pick-row:nth-child(5) > * { grid-column: 5; }
  .pl-pick-under .pl-pick-row:nth-child(6) > * { grid-column: 6; }
  .pl-pick-under .pl-pick-row:nth-child(7) > * { grid-column: 7; }
  .pl-pick-under .pl-chip:nth-of-type(1) { grid-row: 2; }
  .pl-pick-under .pl-chip:nth-of-type(2) { grid-row: 3; }
  .pl-pick-under .pl-chip:nth-of-type(3) { grid-row: 4; }
  .pl-pick-under .pl-chip:nth-of-type(4) { grid-row: 5; }
  .pl-pick-under .pl-pick-key { grid-column: 1 / -1; grid-row: 6; margin-left: 3px; }

}

/* v0.39.0: Clear skies. A Fresh snow | Clear skies switch on Plan a trip (not remembered, hidden without JavaScript),
   and a Clear skies row on week pages with a small slate bar on the waves' scale. */
body:not(.sky-on) .wv-sky, body:not(.sky-on) .sky-only { display: none; }
.sky-on .wv-fresh, .sky-on .sky-off { display: none; }
.sky-on .pl-chip i[style*="--sc"] { background: var(--sc) !important; }
.pl-glance .vt { margin: 2px 0 4px; }

/* v0.41.0: opening progress while waiting. Today's station depth (blue) against the depths a mountain has opened with
   (pale band, the middle half of known openings); on mountain pages each opening day is a dot. No finish line. */
.ob { display: block; margin: 8px 0 4px; max-width: 300px; }
.ob-t { position: relative; display: block; height: 8px; border-radius: 4px; background: #E4E8EE; }
.ob-band { position: absolute; top: 0; bottom: 0; background: #C6D6F1; border-radius: 2px; }
.ob-f { position: absolute; left: 0; top: 0; bottom: 0; min-width: 4px; border-radius: 4px; background: var(--bluebird); }
.ob-cap { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ob-cap b { color: var(--ink); font-weight: 700; }
.ob-line { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ob-big { position: relative; max-width: 560px; margin: 12px 0 6px; }
.ob-big .ob-t { height: 10px; background: #FFFFFF; }
.ob-big .ob-band { background: #BFD0EE; }
.ob-dots { position: relative; display: block; height: 20px; }
.ob-dots i { position: absolute; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #9AA9BC; }
.ob-ax { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; color: var(--muted); }
.ob-line-hero { position: relative; margin-top: 8px; font-size: 14px; max-width: 560px; }

/* v0.43.0: week pages (week page cleanup lab, option B). The four-mountain week is one scoreboard: on phones each row
   is a label line over four values; from 700px the labels move into a left column. Twenty winters in one row each. */
.pl-order { margin: 22px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pl-board { margin: 10px 0 0; border-top: 1px solid var(--line); }
.pl-th, .pl-tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; }
.pl-th { position: sticky; top: var(--hdr-h, 0px); z-index: 2; background: var(--ground); padding: 10px 0 8px; border-bottom: 1px solid var(--line); }
.pl-th > span { display: none; }
.pl-th a { font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; min-height: 32px; display: flex; align-items: center; }
.pl-tr { padding: 9px 0; border-bottom: 1px solid var(--line); }
.pl-tl { grid-column: 1 / -1; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.pl-tl span { font-weight: 400; }
.pl-td { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.pl-td b { font-size: 17px; font-weight: 700; }
.pl-td b.pl-tn { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
.pl-td small { font-size: 11.5px; color: var(--muted); }
.pl-bar { display: block; position: relative; width: 100%; max-width: 160px; height: 6px; margin-top: 5px; border-radius: 3px; background: var(--groomer-sky); }
.pl-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 100%); border-radius: 3px; background: var(--powder); }
.pl-bar.top::after { background: var(--bluebird); }
.pl-bar.sky { background: #E4E8EE; }
.pl-bar.sky::after { background: var(--storm); }
.pl-board + .pl-bb { font-size: 14px; margin-top: 16px; }
.pl-part { margin: 28px 0 0; }
.pl-h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 6px; }
.pl-h2 .muted { font-family: var(--sans); font-size: 13px; }
.pl-sq { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 420px; margin: 12px 0 0; }
.pl-sq .c { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 3px; }
.pl-sq .c-closed { border-radius: 50%; transform: scale(0.7); }
.pl-sq.sm { gap: 2px; margin: 0; }
.pl-sq.sm .c { border-radius: 2px; }
.pl-sq.sm .c-closed { border-radius: 50%; }
.pl-ends { display: flex; justify-content: space-between; max-width: 420px; margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.pl-keybox { margin: 14px 0 4px; }
.pl-keybox .vt { margin: 0 0 8px; }
.pl-keybox .pl-key { margin: 0; font-size: 12px; }
.pl-wr, .pl-dr { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: center; margin: 8px 0; }
.pl-dr { align-items: start; margin: 10px 0; }
.pl-wr > a, .pl-dr > a { font-size: 14px; font-weight: 700; text-decoration: none; }
.pl-wr .pl-ends { margin: -4px 0 0; }
.pl-dr .pl-tbar { margin-top: 5px; }
.pl-dr .pl-tcount { font-size: 11.5px; gap: 1px 8px; }
.pl-focus { margin: 18px 0 0; }
.pl-focus .pl-big .muted { font-size: 14px; }
.pl-focus .pl-facts { margin: 6px 0 0; }
.pl-sub { margin: 16px 0 6px; font-size: 13px; font-weight: 700; }
.pl-sub .muted { font-weight: 400; }
.pl-mlink { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 12px 0 0; font-weight: 700; text-decoration: none; }
.pl-else { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pl-else:first-of-type { border-top: 1px solid var(--line); }
.pl-else-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.pl-else-h a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 16px; font-weight: 700; text-decoration: none; }
.pl-else-h span { font-size: 13.5px; color: var(--muted); }
.pl-else-h b { font-size: 16px; color: var(--ink); }
.pl-else .pl-sq { max-width: 420px; }
.pl-foot { display: grid; gap: 12px; margin: 22px 0 0; }
.pl-foot .pl-share { justify-self: start; margin: 0; }
.pl-fold { margin: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pl-fold > summary { display: flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 700; color: var(--bluebird); cursor: pointer; list-style: none; }
.pl-fold > summary::-webkit-details-marker { display: none; }
.pl-fold > summary::after { content: "⌄"; margin-left: 8px; position: relative; top: -3px; }
.pl-fold[open] > summary::after { content: "⌃"; top: 3px; }
.pl-fold .pl-pick { margin: 0 0 14px; }
@media (min-width: 700px) {
  .pl-th, .pl-tr { grid-template-columns: 190px repeat(4, minmax(0, 1fr)); column-gap: 20px; align-items: center; }
  .pl-th > span { display: block; }
  .pl-tl { grid-column: 1; margin: 0; font-size: 13px; }
  .pl-tl span { display: block; }
  .pl-tr { padding: 12px 0; }
  .pl-wr, .pl-dr { grid-template-columns: 190px minmax(0, 1fr); column-gap: 20px; }
  .pl-dr > div { max-width: 480px; }
  .pl-focus { max-width: 640px; }
}


/* v0.44.0: mountain page (mountain page lab, option A plus "this winter" bars). Dawn Patrol's half: one timeline
   (last 7 days, today, next 2). The Planner's half: a tinted section with the typical winter full width, this
   winter's weeks as bars, the week picker as the chart's month columns, four numbers and every winter. */
.tl-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin: 10px 0 0; align-items: end; }
.tl-d { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px; border-radius: 8px; font-size: 12px; min-width: 0; }
.tl-today { background: #FFFFFF; border: 1px solid var(--line); }
.tl-n { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tl-today .tl-n { color: var(--ink); font-weight: 700; }
@media (max-width: 699px) {
  /* v0.44.1: today's cell is wider on phones so its outline clears the word "Today". */
  .tl-row { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); }
}
.tl-bar { height: 46px; width: 60%; display: flex; align-items: flex-end; }
.tl-bar i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--powder); }
.tl-bar i.recent { background: var(--bluebird); }
.tl-d b { font-size: 12.5px; min-height: 1.2em; }
.tl-ahead b { color: var(--muted); font-weight: 500; }
.tl-ico { height: 46px; display: flex; align-items: center; }
.tl-ico svg { width: 22px; height: 22px; }
.tl-chip { width: 18px; height: 18px; border-radius: 4px; box-sizing: border-box; }
.tl-chip.d-closed { scale: 0.7; }
.tl-chip.tl-fc { border: 2px dashed #9AA9BC; background: transparent; }
.tl-chip.tl-fc.d-b, .tl-chip.tl-fc.d-p { border-color: var(--bluebird); }
.tl-chip.tl-fc.d-s { border-color: var(--storm); }
.tl-chip.tl-fc.d-g { border-color: #9DB7E3; }
.tl-chip.d-b, .tl-chip.d-g { position: relative; }
.tl-chip.d-b::after, .tl-chip.d-g::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); top: 2px; right: 2px; }
.tl-tomorrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: 14px; }
.tl-tomorrow .vword { font-size: 17px; }

.mw { margin: 34px -20px 0; padding: 18px 20px 24px; background: #EAF0F8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mw-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mw-head span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mw-lead { margin: 4px 0 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.mw-lead b { color: var(--ink); }
.mw .vt { margin: 0 0 10px; }
.mw-chart { margin-top: 18px; }
.mw-plot { position: relative; }
.mw-plot svg.wv { height: 96px; }
.mw-now { position: absolute; left: 0; top: 0; width: 100%; height: 96px; overflow: visible; pointer-events: none; }
.mw-now rect { fill: var(--bluebird); }
.mw-today { position: absolute; top: -16px; bottom: -14px; width: 0; border-left: 1px solid var(--muted); pointer-events: none; }
.mw-today span { position: absolute; top: -2px; left: 4px; font-size: 10px; font-weight: 700; font-style: normal; white-space: nowrap; }
.mw-lift { margin-top: 4px; }
.mw-lift svg { display: block; width: 100%; }
.mw-pick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
.mw-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mw-colh { padding: 2px 0; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mw-chip { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; font-size: 13px; font-weight: 700; text-decoration: none; overflow: hidden; }
.mw-chip:hover { border-color: var(--bluebird); }
.mw-chip i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.sky-on .mw-chip i { background: var(--sc) !important; }
.mw-chip.hol::before { content: ""; position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.mw-key { margin-top: 10px; }
.mw-k-now { display: inline-block; width: 5px; height: 12px; background: var(--bluebird); }
.mw-best { margin-top: 12px; }
.mw-h2 { margin-top: 28px; }
.mw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.mw-tiles div { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.mw-tiles b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.mw-tiles span { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.mw-wl { margin-top: 6px; border-top: 1px solid var(--line); }
.mw-w { border-bottom: 1px solid var(--line); }
.mw-w > summary { display: grid; grid-template-columns: 66px minmax(0, 1fr) 28px 112px; gap: 8px; align-items: center; min-height: 44px; font-size: 13.5px; cursor: pointer; list-style: none; }
.mw-w > summary::-webkit-details-marker, .mw-all > summary::-webkit-details-marker { display: none; }
.mw-ws { font-weight: 700; line-height: 1.15; }
.mw-wb { height: 8px; border-radius: 4px; background: #FFFFFF; overflow: hidden; }
.mw-wb i { display: block; height: 100%; border-radius: 4px; background: var(--powder); }
.mw-now-row .mw-wb i { background: var(--powder); box-shadow: inset 0 0 0 1px var(--bluebird); }
.mw-wn { text-align: right; }
.mw-wr { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-w[open] > .sc-card { margin: 0 0 12px; max-width: 520px; }
.mw-all > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--bluebird); cursor: pointer; list-style: none; border-bottom: 1px solid var(--line); }
.mw-all > summary::after { content: "⌄"; margin-left: 6px; position: relative; top: -3px; }
.mw-all[open] > summary { display: none; }
.mw .sc-key { margin-top: 8px; }
.mw .vt[data-dt-toggle] { margin-top: 16px; }
.mw-credit { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 12px 0 0; }
@media (min-width: 700px) {
  .mw { margin-left: 0; margin-right: 0; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 26px; }
  .mw-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mw-plot svg.wv, .mw-now { height: 130px; }
  .mw-wl { columns: 2; column-gap: 32px; }
  .mw-w { break-inside: avoid; }
}


/* v0.45.0: the sponsor spot in the standard ad sizes (sponsor placement lab, option B). Phones 320 × 100,
   computers 300 × 250. A banner is drawn at those sizes whatever its pixel size. */
.spon-banner .spon-card { width: max-content; max-width: 100%; }
.spon-img { width: auto; max-width: 100%; height: auto; }
.spon-m .spon-note { max-width: 320px; }
.spon-m.spon-template .spon-card { width: 320px; max-width: 100%; height: 100px; box-sizing: border-box; }
.spon-m.spon-template .spon-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Snowcall's own filler while a mountain page has no sponsor: our colours, the snow slope's corduroy, no sun. */
.sh { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 10px;
  width: 320px; max-width: 100%; height: 100px; box-sizing: border-box; padding: 12px 16px; }
.sh-ridge { position: absolute; right: 0; bottom: 0; width: 42%; height: 24px; pointer-events: none; }
.sh-k { position: relative; grid-column: 1; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sh-h { position: relative; grid-column: 1; margin-top: 3px; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.15; }
.sh-t, .sh-dk { display: none; }
.sh-go { position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 26px; font-weight: 700; color: var(--bluebird); }
.sh:hover .sh-go { text-decoration: underline; }
@media (min-width: 860px) {
  .spon-m.spon-template .spon-card { width: 300px; height: 250px; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 20px; }
  .spon-m.spon-template .spon-logo { width: 64px; height: 64px; }
  .spon-m.spon-template .spon-text { flex: none; }
  .spon-m.spon-template .spon-text strong { font-size: 20px; }
  .spon-m.spon-template .spon-text span { -webkit-line-clamp: 3; font-size: 15px; line-height: 1.4; margin-top: 4px; }
  .sh { display: flex; flex-direction: column; align-items: flex-start; width: 300px; height: 250px; padding: 22px 20px; }
  .sh-ridge { left: 0; width: 100%; height: 40px; }
  .sh-ph { display: none; }
  .sh-dk, .sh-t { display: inline; }
  .sh-h { font-size: 24px; margin-top: 8px; }
  .sh-t { position: relative; display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
  .sh-go { align-self: flex-start; margin: auto 0 30px; font-size: 15px; }
}
.sp-from { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }

/* v0.46.0: Planner pages place their sponsor spot differently on phones and computers (Plan a trip sponsor lab):
   one copy for each, only one ever shown. From 1100px the computer copy sits in a 300px column beside the
   content it belongs with (.spr), like the mountain page. */
.spon-dk { display: none; }
@media (min-width: 1100px) {
  .spon-ph { display: none; }
  .spon-dk { display: block; }
  .spr { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: start; }
  .spr > .spon-dk { margin: 6px 0 0; }
}

/* v0.52.0: Northern Utah live. The region menu (design lab round 1, the dropdown), canyon groups on the home page
   (option B on phones, G three across on computers), group labels on the region map, and ranked rows on the
   region week pages (design lab round 2, L on phones and N on computers). */
.rsel { position: relative; }
.rsel summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; cursor: pointer; color: inherit; }
.rsel summary::-webkit-details-marker { display: none; }
.rsel summary svg { color: var(--bluebird); transition: transform 0.2s; }
body.is-evening .home-hdr .rsel summary svg { color: var(--bluebird-light); }
.rsel[open] summary svg { transform: rotate(180deg); }
.rsel-menu { position: absolute; left: -8px; top: 46px; z-index: 40; margin: 0; padding: 6px; list-style: none; width: 300px; max-width: calc(100vw - 24px); background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(14, 27, 44, 0.12); color: var(--ink); }
.rsel-menu a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.rsel-menu a:hover { background: #F4F7FB; }
.rsel-menu a b { font-size: 16px; }
.rsel-menu a span { grid-column: 1; font-size: 13px; color: var(--muted); }
.rsel-menu a svg { grid-column: 2; grid-row: 1 / span 2; color: var(--bluebird); }
.rsel-menu a[aria-current] { background: #EAF0F8; }

.cgroups { margin: 0; }
.cband-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 0 2px; border-bottom: 1px solid var(--line); }
.cband-l { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); font-family: var(--sans); }
.cband-h a { font-size: 13px; font-weight: 700; }
.cband .rows .row { padding: 14px 0; }
.cband .rows .row.row-best { display: flex; } /* in canyon groups the best bet stays in its group, marked Best bet */
.mcard-group { margin: 26px 0 4px; }
@media (min-width: 700px) {
  .cgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .cband .rows { display: block; }
  .cband .rows .row, .cband .rows .row.row-best { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; grid-row: auto; padding: 12px 0; row-gap: 0; border-bottom: 0; }
  .cband .rows .row-l { display: flex; flex-direction: column; gap: 3px; }
  .cband .rows .row-name { font-size: 18px; }
  .cband .rows .row-v { font-size: 18px; }
  .cband .rows .row-proof { font-size: 14px; }
  .cband .rows .row-r { flex-direction: column; align-items: flex-end; text-align: right; flex-wrap: nowrap; gap: 0; }
  .cband .rows .row-r .open-lbl { width: auto; }
  .cband .rows .desk, .cband .rows .golink { display: none; }
}
@media (min-width: 1100px) { .cgroups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tp-g { font-family: var(--sans); font-size: 12px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #EAF0F8; stroke-width: 3px; stroke-linejoin: round; }

.rk-list { margin: 10px 0 0; border-top: 1px solid var(--line); }
.rk-hd { display: none; }
.rk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.rk-name { font-size: 17px; font-weight: 700; }
.rk-name small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.rk-fresh { text-align: right; }
.rk-fresh b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.rk-fresh small { display: block; font-size: 12px; color: var(--muted); }
.rk .pl-bar { grid-column: 1 / -1; max-width: none; margin: 6px 0 4px; }
.rk-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); }
.rk-facts span b { color: var(--ink); font-weight: 700; }
.rk-facts i { font-style: normal; }
@media (min-width: 1100px) {
  .rk-hd, .rk { display: grid; grid-template-columns: 240px 200px repeat(7, minmax(0, 1fr)); column-gap: 16px; align-items: center; }
  .rk-hd { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); }
  .rk-hd span small { display: block; font-weight: 400; }
  .rk { padding: 10px 0; }
  .rk-fresh { text-align: left; display: flex; align-items: baseline; gap: 8px; grid-column: 2; grid-row: 1; align-self: start; }
  .rk-fresh small { display: inline; }
  .rk .pl-bar { grid-column: 2; grid-row: 1; margin: 30px 0 0; }
  .rk-facts { display: contents; }
  .rk-facts span { font-size: 15px; }
  .rk-facts span i { display: none; }
  .rk-facts span b { font-size: 17px; }
}
.opt-region { margin: 14px 0 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.rp-side > .spon-dk { margin: 22px 0 0; }
.cband .golink { display: none; } /* tighter rows in canyon groups: the whole row is the link */
@media (min-width: 700px) { .region-hero-tall .tmap { max-width: 440px; } }

/* v0.54.0: percentages, the heat grid and Pick a week (regions with many mountains), and How the mountains compare.
   Ten-mountain lab (B, E, D) and percentages lab, decided by Anthony, Nov 1, 2026 (handbook chapter 2). */
.close-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; text-transform: none; vertical-align: 2px; }
.pl-trip { margin: 2px 0 12px; font-size: 14px; color: var(--muted); }
.pl-tcount small { color: var(--muted); font-weight: 400; font-size: 11px; }
.pl-td small { display: block; font-size: 12px; color: var(--muted); }
.pl-twins { margin: 4px 0 14px; padding-left: 10px; border-left: 3px solid var(--line); font-size: 14px; color: var(--muted); }
.hg-wrap { margin-top: 4px; }
.hg { display: grid; gap: 2px; }
.hg-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 6px; }
.hg-name { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-cells { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 1.5px; }
.hg-cells i, .hg-key i { display: block; height: 18px; border-radius: 2px; }
.hg-group { margin: 8px 0 1px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hg-group:first-child { margin-top: 0; }
.hg i.f0, .hg-key i.f0 { background: #EEF3FA; } .hg i.f1, .hg-key i.f1 { background: #D3E1F6; } .hg i.f2, .hg-key i.f2 { background: #AFC8EE; }
.hg i.f3, .hg-key i.f3 { background: #7FA5E3; } .hg i.f4, .hg-key i.f4 { background: #4A80DB; } .hg i.f5, .hg-key i.f5 { background: #1F5FD6; }
.sky-on .hg i.c0 { background: #EEF3FA; } .sky-on .hg i.c1 { background: #D3E1F6; } .sky-on .hg i.c2 { background: #AFC8EE; }
.sky-on .hg i.c3 { background: #7FA5E3; } .sky-on .hg i.c4 { background: #4A80DB; } .sky-on .hg i.c5 { background: #1F5FD6; }
.hg i.l-some, .sky-on .hg i.l-some, .hg-key i.l-some { background: var(--lift-some); }
.hg i.l-none, .sky-on .hg i.l-none, .hg-key i.l-none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hg-axis { margin-top: 2px; }
.hg-x .tw-x { margin-left: 0; }
.hg-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.hg-key > span { display: inline-flex; align-items: center; gap: 5px; }
.hg-key i { width: 12px; height: 12px; }
.hg-key i.hg-hol { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.pw-head { margin: 14px 0 2px; }
.pw-wk { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pw-lead { margin: 2px 0 4px; font-size: 15px; }
.pw-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pw-r.dim { opacity: 0.55; }
.pw-r p { margin: 0; }
.pw-name { font-size: 17px; font-weight: 700; }
.pw-name a { color: var(--ink); text-decoration: none; }
.pw-name small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.pw-n { text-align: right; }
.pw-n b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.pw-n small { display: block; font-size: 12px; color: var(--muted); }
.pw-bars { grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.pw-bars .pl-bar { max-width: none; margin: 0; }
.pw-bars b { color: var(--ink); text-align: right; white-space: nowrap; }
.pw-facts { grid-column: 1 / -1; margin-top: 6px !important; font-size: 13px; color: var(--muted); }
.pw .biglink { margin-top: 6px; }
.scd { margin: 10px 0 18px; }
.scd .vt { margin: 4px 0 6px; }
.scd-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.scd-r p { margin: 0; }
.scd-name { font-size: 17px; font-weight: 700; }
.scd-name a { color: var(--ink); text-decoration: none; }
.scd-name small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.scd-twin { font-size: 11px; font-weight: 700; color: var(--bluebird); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.scd-n { text-align: right; }
.scd-n b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.scd-n small { display: block; font-size: 12px; color: var(--muted); max-width: 150px; margin-left: auto; }
.scd-strip { grid-column: 1 / -1; position: relative; display: block; height: 20px; margin: 8px 4px 0; border-top: 0; }
.scd-strip::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1px; background: var(--line); }
.scd-strip i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--bluebird); opacity: 0.35; }
.scd-strip[hidden] { display: none; }
.scd-strip b { position: absolute; top: 1px; bottom: 1px; width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--ink); }
.scd-facts { grid-column: 1 / -1; margin-top: 6px !important; font-size: 13px; color: var(--muted); }
.scd-axis { display: flex; justify-content: space-between; margin: 4px 0 0; }
@media (min-width: 1100px) { .region-page .scd { grid-column: 1 / -1; } .scd-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.scd .vt button { padding: 0 11px; white-space: nowrap; }
@media (min-width: 1100px) {
  /* Pick a week with ranked rows (v0.54.0): the note and the week's mountains sit under the sideways picker, two across. */
  .pw > p.muted { grid-column: 2; margin: 0 0 8px 3px; }
  .pw > .pl-pick { grid-column: 2; }
  .pw > .pw-list { grid-column: 2; margin: 0 3px; }
  .pw-wkbox:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .pw-wkbox > .pw-head, .pw-wkbox > .biglink { grid-column: 1 / -1; }
  .hg-row { grid-template-columns: 120px minmax(0, 1fr); }
  .hg-name { font-size: 14px; }
}

/* v0.57.0: Clear skies by hour (mountain page, the Planner's half). A month-by-hour table, 9 AM to 4 PM. */
/* Clear skies by hour (v0.57.0; v0.59.0: the planner half's text styles, tiles beside the grid on computers) */
.cbh { margin: 8px 0 6px; }
.cbh-body { display: grid; gap: 14px; grid-template-areas: "pat" "main" "mon"; margin-top: 4px; }
.cbh-pat { grid-area: pat; } .cbh-main { grid-area: main; min-width: 0; } .cbh-mon { grid-area: mon; }
.cbh-tg { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.cbh-tg b { color: var(--bluebird); }
.cbh .cbh-tiles { margin-top: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cbh-tiles span { display: block; margin-top: 4px; }
.cbh-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cbh-grid { width: 100%; min-width: 300px; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cbh-grid thead th { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; text-align: center; padding: 0 0 4px; line-height: 1.2; }
.cbh-grid thead td { width: 34px; }
.cbh-grid tbody th { font-size: 13px; font-weight: 700; text-align: left; padding-right: 2px; }
.cbh-grid td.cb-c { height: 34px; border-radius: 4px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink); cursor: pointer; padding: 0; }
.cbh-grid td.cb-c:focus-visible { outline: 2px solid var(--bluebird); outline-offset: 1px; }
.cb-0 { background: #EEF3FA; } .cb-1 { background: #D6E3F6; } .cb-2 { background: #B5CBEF; } .cb-3 { background: #86A8E6; }
.cb-4 { background: #4F82DE; } .cb-5 { background: #1F5FD6; } .cbh-grid td.cb-4, .cbh-grid td.cb-5 { color: #FFFFFF; }
.cbh-grid td.cb-best { box-shadow: inset 0 0 0 2px var(--ink); }
.cbh-grid td.cb-on { outline: 2px solid var(--sun); outline-offset: -2px; }
.cbh-grid tr.cb-off th { color: var(--muted); font-weight: 400; }
.cbh-grid tr.cb-off td.cb-c { opacity: 0.35; }
.cbh-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cbh-key > span { display: inline-flex; align-items: center; gap: 6px; }
.cbh-ramp > span { display: inline-flex; gap: 2px; }
.cbh-key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.cbh-ramp i { width: 14px; }
.cbh-key i.cb-k-best { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.cbh-read { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cbh-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (min-width: 860px) {
  .cbh-body { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main pat" "main mon"; grid-template-rows: auto 1fr; column-gap: 28px; row-gap: 14px; }
  .cbh .cbh-tiles { grid-template-columns: 1fr; }
}

/* ---------- The home page for every region ("/", v0.58.0; landing page lab, "the pick") ---------- */
.lp { padding: 0 20px; }
.lp-hdr .home-link { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.lp-nav { display: flex; gap: 18px; }
.lp-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.lp-hero { padding: 20px 0 8px; }
.lp-h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.08; }
.lp-lead { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.lp-h2 { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.lp-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lp-proof { font-size: 14px; line-height: 20px; color: var(--muted); }
.lp-quiet { display: block; padding: 4px 0; }

/* The map: computers only (phones get a small outline per row). */
.lp-map { display: none; }
.usm { display: block; width: 100%; height: auto; }
.usm-ca { fill: none; stroke: var(--line); stroke-width: 1; }
.usm-states { fill: none; stroke: #B9C9E3; stroke-width: 0.8; }
.usm-nation { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.usm-halo { fill: var(--groomer-sky); }
.usm-halo.usm-soon { fill: none; stroke: var(--powder); stroke-width: 1.2; stroke-dasharray: 3 3; }
.usm-dot { stroke: var(--ground); stroke-width: 1; }
.usm-open { fill: var(--bluebird); }
.usm-wait { fill: var(--powder); }
.usm-dot-soon { fill: var(--ground); stroke: var(--bluebird); stroke-width: 1.2; }
.usm-name { font-family: var(--sans); font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: 0.5px; fill: var(--ink); }
.usm-sub { font-family: var(--sans); font-size: 12px; fill: var(--bluebird); }
.usm-sub-soon { fill: var(--muted); }
.usm a:hover .usm-name { text-decoration: underline; }
/* A small flare on open mountains: a ring that grows and fades, each on its own beat. Off with reduce motion. */
.usm-pulse { fill: none; stroke: var(--bluebird); stroke-width: 1.4; animation: sc-pulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(4.2); opacity: 0; } 100% { transform: scale(4.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .usm-pulse { animation: none; opacity: 0; } }
.lp-mapkey { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 6px; }
.lp-mapkey span { display: inline-flex; align-items: center; gap: 6px; }
.lp-mapkey i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lp-mapkey .k-open { background: var(--bluebird); }
.lp-mapkey .k-wait { background: var(--powder); }
.lp-mapkey .k-soon { border: 1.5px solid var(--bluebird); }
.usm-mini { flex: none; display: block; }
.usm-mini-st { fill: var(--groomer-sky); stroke: #B9C9E3; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.usm-mini-soon { fill: none; stroke: var(--powder); stroke-dasharray: 4 3; }
.usm-mini .usm-dot { stroke: none; }
.usm-mini .usm-dot-soon { stroke: var(--bluebird); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* Region rows */
.lp-regions { margin-top: 18px; }
.lp .pagerbar { padding-left: 0; padding-right: 0; }
.lp-rows { border-bottom: 1px solid var(--line); }
.lp-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.lp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-row-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-region { margin: 0; font-size: 16px; line-height: 20px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.01em; }
.lp-region a { color: var(--ink); text-decoration: none; }
.lp-region a:hover { text-decoration: underline; }
.lp-soon { color: var(--quiet); }
.lp-status { font-size: 13px; line-height: 18px; color: var(--muted); }
.lp-row-v { display: flex; flex-direction: column; gap: 2px; }
.lp-v { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-v .row-v { font-size: 16px; }
.lp-at { font-family: var(--serif); font-size: 19px; line-height: 24px; }
.lp-conf { font-size: 15px; }
.lp-links { display: flex; gap: 22px; flex-wrap: wrap; }
.lp-links a { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: none; }
.lp-row-soon { padding-bottom: 14px; }
.lp-tmrw { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--groomer-sky); font-size: 14px; line-height: 20px; }

/* The Planner: a tinted section, like a mountain page's Planner half */
.lp-plan { background: #EAF0F8; margin-top: 40px; padding: 28px 20px 32px; }
.lp-plan-in { display: flex; flex-direction: column; gap: 22px; }
.lp-plan-intro p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.lp-plan-intro .lp-proof { font-size: 14px; }
.lp-plan-r { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 2px; border-top: 1px solid #B9C9E3; }
.lp-plan-list { border-bottom: 1px solid #B9C9E3; }
.lp-plan-list .lp-plan-r:last-child { padding-bottom: 14px; }
.lp-week { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 10px 14px; background: #FFFFFF; border: 1px solid #B9C9E3; border-radius: 14px; color: var(--ink); text-decoration: none; }
.lp-week .lp-lbl { grid-column: 1 / -1; }
.lp-week-n { font-size: 17px; font-weight: 700; }
.lp-week-p { font-size: 15px; font-weight: 700; color: var(--bluebird); display: inline-flex; align-items: center; gap: 2px; }
.lp-week:hover .lp-week-n { text-decoration: underline; }

/* The five words */
.lp-key { padding: 36px 0 8px; }
.lp-key-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin: 16px 0; }
.lp-key-i { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.lp-key-i .row-v { font-size: 17px; }
.lp-key > .lp-proof { margin: 0; font-size: 15px; line-height: 22px; max-width: 720px; }
.lp-how { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 700; text-decoration: none; }

@media (min-width: 700px) {
  .lp { padding-left: var(--g); padding-right: var(--g); }
  .lp-hero { padding-top: 40px; }
  .lp-h1 { font-size: 50px; }
  .lp-lead { font-size: 18px; }
  .lp-map { display: block; margin-top: 22px; padding: 18px 0 6px; border-top: 1px solid var(--line); }
  .lp-map .usm { max-width: 960px; margin: 0 auto; }
  .lp-row .usm-mini { display: none; }
  .lp-row { padding: 18px 0 6px; }
  .lp-row-main { display: grid; grid-template-columns: 320px minmax(0, 1fr) auto; gap: 6px 32px; align-items: center; }
  .lp-row-name { flex-direction: column; align-items: flex-start; gap: 2px; }
  .lp-region { font-size: 20px; line-height: 24px; }
  .lp-status { font-size: 14px; }
  .lp-v .row-v { font-size: 19px; }
  .lp-at { font-size: 22px; }
  .lp-proof { font-size: 15px; line-height: 22px; }
  .lp-plan { padding: 44px var(--g); margin-top: 56px; }
  .lp-plan-in { flex-direction: row; gap: 64px; }
  .lp-plan-intro, .lp-plan-list { flex: 1 1 0; min-width: 0; }
  .lp-h2 { font-size: 34px; }
  .lp-key-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ---------- Region home, map-led (v0.60.0; region page lab, option C) ---------- */
.rh-map { background: #EAF0F8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rm > svg { display: block; width: 100%; height: auto; max-height: 62vh; }
.rm-bg { fill: #EAF0F8; }
.rm-c { fill: none; stroke: #C9D7EE; stroke-width: 0.8; }
.rm-c.rm-k { stroke: #AFC3E3; stroke-width: 1.1; }
.rm-dot { stroke: #FFFFFF; stroke-width: 1.5; }
.rm-open { fill: var(--bluebird); }
.rm-wait { fill: var(--powder); }
.rm-ring { fill: none; stroke: var(--sun); stroke-width: 3; }
.rm-ring-m { stroke-dasharray: 3 3; stroke-width: 2.5; }
.rm-name { font-family: var(--sans); font-size: 12px; font-weight: 700; fill: var(--ink); }
.rm-group { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; fill: var(--muted); }
.rm-v, .rm-x { font-family: var(--sans); font-size: 11.5px; font-weight: 800; font-stretch: 125%; }
.rm-x { font-weight: 600; font-stretch: 100%; fill: var(--muted); }
.rm-BLUEBIRD, .rm-POWDER { fill: var(--bluebird); }
.rm-STORM { fill: var(--storm); }
.rm-BLUEBIRD_GROOMER { fill: var(--ink); }
.rm-QUIET { fill: var(--quiet); }
.rm a:hover .rm-name { text-decoration: underline; }
/* Today's labels by default; the pager (app.js) marks #home "on-tomorrow" when Tomorrow is showing. */
.rm-m { display: none; }
.on-tomorrow .rm-t { display: none; }
.on-tomorrow .rm-m { display: inline; }
.on-tomorrow circle.rm-m { display: inline; }
.rm-key { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 20px 10px; font-size: 12.5px; color: var(--muted); }
.rm-key > span { display: inline-flex; align-items: center; gap: 6px; }
.rm-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rm-key .k-open { background: var(--bluebird); }
.rm-key .k-wait { background: var(--powder); }
.rm-key .k-best { background: var(--bluebird); box-shadow: 0 0 0 2px var(--sun); }
.rm-key span.rm-m { display: none; }
.on-tomorrow .rm-key span.rm-m { display: inline; }
.rm-roads { margin: 0; padding: 0 20px 12px; font-size: 13px; font-weight: 700; }
.rh-main { padding: 0 20px; }
.rh-best { display: flex; flex-direction: column; gap: 4px; padding: 16px 0 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; margin: 0; }
.rh-best .lbl { display: inline-flex; align-items: center; gap: 6px; }
.rh-bw { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-bw .row-v { font-size: 26px; }
.rh-at { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.rh-proof { font-size: 15px; color: var(--muted); line-height: 1.4; }
.rh-rows { display: flex; flex-direction: column; }
.rh-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.rh-row:hover .row-name { text-decoration: underline; }
.rh-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rh-row .row-name { font-size: 18px; }
.rh-tag { font-size: 12px; color: var(--muted); text-align: right; }
.rh-tag b { color: var(--bluebird); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.rh-row-v .row-v { font-size: 17px; }
.rh-r { flex-direction: row; align-items: center; gap: 8px; }
.rh-wait-h { margin-top: 22px; }
.rh-wait { padding: 14px 0; }
.rh-wait .row-name { font-size: 17px; }
@media (min-width: 860px) {
  .rh { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: 0 48px; padding: 8px var(--g) 0; align-items: start; }
  .rh-map { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: sticky; top: 16px; }
  .rm > svg { max-height: none; }
  .rh-main { padding: 0; min-width: 0; }
  .rh-best { padding-top: 6px; }
  .rh-bw .row-v, .rh-at { font-size: 32px; }
}

/* ---------- One region page (v0.61.0; "one region page or two?" lab, option B) ---------- */
/* Tap a canyon to zoom (Northern Utah's map): app.js animates the viewBox; strokes keep their width. */
.rm { position: relative; }
.rm-c, .rm-dot, .rm-ring, .usm-pulse { vector-effect: non-scaling-stroke; }
.rm-zoom { cursor: pointer; }
.rm-zoom:hover .rm-group, .rm-zoom:focus-visible .rm-group { text-decoration: underline; }
.rm-zg, .rm-zg-i { stroke: var(--bluebird); }
.rm-zl { display: none; }
.rm-zl.on { display: inline; }
.rm-zl text { paint-order: stroke; stroke: #EAF0F8; stroke-linejoin: round; }
.rm[data-z] .rm-glab { display: none; }
.rm-back { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--bluebird); cursor: pointer; }
.rm-back[hidden] { display: none; }
.rm-hint { margin: 0; padding: 0 20px 8px; font-size: 12.5px; color: var(--muted); }
.rm-zg-i { vertical-align: -2px; }

/* The Planner's half: tinted, under Dawn Patrol's half. When to go's chart shows on computers only. */
.rph { background: #EAF0F8; margin-top: 28px; padding: 6px 0 30px; border-top: 1px solid var(--line); }
.rph .rp-full { margin: 0 -20px; background: transparent; border: 0; }
.rp-planner .rp-grid, .rp-planner .rp-key { display: none; }
.rph .scd { margin-top: 26px; }
.rph-cards { margin-top: 26px; }
.rph-cards-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.rph-cards-g .mcard-group { grid-column: 1 / -1; }
.rph-facts .fact { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
@media (min-width: 700px) { .rph-cards-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) {
  .rp-planner .rp-grid { display: block; }
  .rp-planner .rp-key { display: flex; }
  .rph { padding: 18px 0 44px; margin-top: 40px; }
}
@media (min-width: 1100px) { .rph-cards-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Off-season (Anthony, Nov 2, 2026): the Planner is the page. Phones: the map, then the Planner, the sleeping
   mountains last. Computers (option 3): When to go leads, How the mountains compare sits beside the map, and each
   mountain's card says when it usually opens next, so the list is left out. */
.off-strip { margin: 0; background: var(--ink); color: #fff; font-size: 14px; line-height: 1.45; }
.off-strip-in { display: block; padding: 10px 20px; }
.off-strip b { font-weight: 800; font-stretch: 125%; letter-spacing: 0.02em; margin-right: 6px; }
.rph-off { margin-top: 0; padding-top: 0; border-top: 0; }
.off-grid { display: flex; flex-direction: column; padding: 0 20px; }
.og-map { margin: 0 -20px; background: #EAF0F8; border-bottom: 1px solid var(--line); }
.og-plan .rp-full { margin: 0 -20px; }
.og-plan > .spon-ph { margin: 6px 0 4px; }
.og-closed { margin-top: 18px; }
@media (min-width: 860px) {
  .off-strip-in { max-width: 1200px; margin: 0 auto; padding: 10px 32px; box-sizing: border-box; }
  .off-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); grid-template-areas: "plan plan" "facts facts" "cmp map" "cards cards"; gap: 0 48px; max-width: 1264px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; align-items: start; }
  .og-plan { grid-area: plan; }
  .og-plan .rp-full { margin: 0; padding-left: 0; padding-right: 0; }
  .og-facts { grid-area: facts; }
  .og-cmp { grid-area: cmp; }
  .og-map { grid-area: map; margin: 26px 0 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: sticky; top: 16px; }
  .og-cards { grid-area: cards; }
  .og-closed { display: none; }
}
.rph .fine { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.wrap > .fine { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (min-width: 860px) { .og-cmp .scd-list { display: block; } }

/* ---------- Plan a trip, every region (/plan, v0.62.0) ---------- */
.pa .lead { max-width: 640px; }
.pa-pick { margin-top: 18px; }
.pa-pick .vt { margin: 0 0 10px; }
.pa-cols { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.pa-wk { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.pa-h { margin: 14px 0 2px; font-size: 20px; }
.pa-regions { display: flex; flex-direction: column; margin-top: 8px; }
.pa-r { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.pa-r.dim { opacity: 0.6; }
.pa-r p { margin: 0; }
.pa-rn { display: flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 700; }
.pa-rn a { color: var(--ink); text-decoration: none; }
.pa-rn b { margin-left: auto; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; }
.pa-rank { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.pa-soon .pa-rank { background: transparent; border: 1.5px dashed var(--muted); }
.pa-soon .pa-rn { font-size: 16px; color: var(--muted); }
.pa-best { font-size: 15px; line-height: 1.45; }
.pa-best small { color: var(--muted); }
.pa-rf { font-size: 13px; line-height: 1.45; color: var(--muted); }
.pa-go { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: 14px; font-weight: 700; }
.pa-side .pa-h { margin-top: 18px; }
.pa-top { list-style: none; margin: 8px 0 0; padding: 0; }
.pa-t { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pa-tn { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 700; }
.pa-tn a { color: var(--ink); text-decoration: none; }
.pa-tn small { font-size: 12px; font-weight: 400; color: var(--muted); }
.pa-t b { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.pa-main > .spon-ph { margin: 18px 0 0; }
.pa-grid-sec { margin-top: 34px; }
.hg-soon .hg-name { color: var(--muted); font-weight: 600; }
.hg-soon .hg-name small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.hg-soon i { box-shadow: inset 0 0 0 1px var(--line); background: transparent !important; }
.lp-any { margin-top: 14px; align-self: flex-start; }
@media (min-width: 1100px) {
  .pa-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 56px; align-items: start; }
  .pa-side { position: sticky; top: 80px; }
  .pa-side > .spon-dk { margin: 0 0 6px; }
}
.pa-tn .close-tag { align-self: flex-start; }
.pa .hg-row { grid-template-columns: 104px minmax(0, 1fr); }
.pa .pl-pick-key { flex-wrap: wrap; }
.pa .pw-wkbox:not([hidden]) { display: block; }
@media (min-width: 1100px) {
  /* The side column (ad, then top mountains) starts level with the week picker. */
  .pw.pa-pick { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: start; }
  .pw.pa-pick > * { grid-column: 1; }
  .pw.pa-pick > .pa-cols { display: contents; }
  .pw.pa-pick .pa-main { grid-column: 1; margin-top: 18px; }
  .pw.pa-pick .pa-side { grid-column: 2; grid-row: 1 / span 3; }
  .pw.pa-pick .pa-main { max-width: 680px; }
  .pa .hg-row { grid-template-columns: 120px minmax(0, 1fr); }
}
.pa-tn small.pa-tl { color: var(--muted); }

/* One top bar on every page (v0.64.0): the app icon and "Snowcall" left, Alerts and the region menu right, sticky. */
.hdr.tb { position: sticky; top: 0; z-index: 30; background: rgba(244, 247, 251, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color 0.2s; gap: 12px; }
.hdr.tb.scrolled { border-bottom-color: var(--line); }
.tb .home-link { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tb-r { display: flex; align-items: center; gap: 4px; }
.tb-alerts { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 6px; color: var(--bluebird); font-size: 15px; font-weight: 600; text-decoration: none; }
.tb-alerts span { display: none; }
.tb .rsel summary { padding: 0 4px 0 8px; }
.tb .rsel-menu { left: auto; right: -8px; }
body.is-evening .hdr.tb.home-hdr { background: var(--ink); color: #FFFFFF; }
body.is-evening .hdr.tb.home-hdr .home-link, body.is-evening .hdr.tb.home-hdr .tb-alerts { color: #FFFFFF; }
@media (min-width: 700px) { .tb-alerts span { display: inline; } .tb-r { gap: 14px; } }
@media (min-width: 860px) { .rh-map { top: calc(var(--hdr-h, 0px) + 16px); } }
@media (min-width: 1100px) { .og-map { top: calc(var(--hdr-h, 0px) + 16px); } .pa-side { top: calc(var(--hdr-h, 0px) + 16px); } }
.tb .home-link span, .tb .rsel summary span { white-space: nowrap; }
@media (max-width: 419px) {
  .hdr.tb { gap: 8px; }
  .tb-r { gap: 0; }
  .tb-alerts { min-width: 38px; padding: 0; }
  .tb .rsel summary { padding: 0 0 0 4px; font-size: 14px; gap: 4px; }
}
@media (max-width: 359px) { .tb .home-link span { display: none; } }
/* Mountain pages: one tap back to the region, under the bar; scrolls away with the page (v0.64.0, Anthony). */
.tb-back { padding: 0 var(--g, 20px) 6px; }
.tb-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* Mountain page chart, three views (v0.65.0): New snow (default, no attribute), Fresh-snow days, Clear skies. */
body:not([data-mv="fresh"]) .mv-fresh { display: none; }
body[data-mv="fresh"] .mv-snow, body[data-mv="sky"] .mv-snow { display: none; }
/* This winter so far: a ticker of standouts above the chart, only when there is one. With reduce motion, a plain list. */
.tk-mw { max-width: none; margin: 4px 0 12px; padding: 10px 14px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; }
.tk-mw .tk-lbl { color: var(--bluebird); }
.tk-mw .tk-items li { min-height: 0; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .tk-mw .tk-items { display: flex; flex-direction: column; gap: 6px; }
  .tk-mw .tk-items li { visibility: visible; opacity: 1; transform: none; }
}

/* This winter so far on the home page (v0.65.0): a line in each region's row, and a list over the map. */
.lp-so { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.lp-so li { position: relative; padding-left: 14px; }
.lp-so li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--bluebird); }
.lp-so a { font-weight: 700; }
.lp-so span, .lp-note-l span { color: var(--muted); }
.lp-map { position: relative; }
.lp-note { position: absolute; right: 2%; top: 26%; width: 300px; padding: 12px 14px 12px; border-radius: 14px; background: rgba(244, 247, 251, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lp-note-h { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bluebird); }
.lp-note-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.4; }
.lp-note-l li { position: relative; padding-left: 16px; }
.lp-note-l li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--bluebird); box-shadow: 0 0 0 3px rgba(31, 95, 214, 0.18); }
.lp-note-l a { font-weight: 700; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes lpNoteIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  .lp-note-h { animation: lpNoteIn 0.45s ease-out 0.4s both; }
  .lp-note-l li { animation: lpNoteIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .lp-note-l li:nth-child(1) { animation-delay: 0.8s; }
  .lp-note-l li:nth-child(2) { animation-delay: 1.6s; }
  .lp-note-l li:nth-child(3) { animation-delay: 2.4s; }
  .lp-note-l li:nth-child(4) { animation-delay: 3.2s; }
}
/* v0.65.1: region rows share one column line, so each row's verdict and standout lines start in the same place. */
@media (min-width: 700px) and (max-width: 1099px) { .lp-row-main { grid-template-columns: 240px minmax(0, 1fr) auto; } }
/* v0.66.0: snow on the ground at the station, this winter against twenty. */
.dp { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 18px; }
.dp-h { margin: 0; font-size: 15px; font-weight: 700; }
.dp-plot { position: relative; }
.dp-plot svg { display: block; width: 100%; height: 80px; }
.dp-band { fill: #C9D8F2; opacity: 0.6; }
.dp-med { fill: none; stroke: var(--bluebird); stroke-width: 1.5; }
.dp-now { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.dp-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); }
.dp-base { stroke: var(--line); }
.dp-plot .mw-today { top: 0; bottom: 0; }
.dp-mon { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.dp-k-med { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--bluebird); vertical-align: middle; }
.dp-k-band { display: inline-block; width: 14px; height: 10px; background: #C9D8F2; }
.dp-k-now { display: inline-block; width: 14px; height: 0; border-top: 3px solid var(--ink); vertical-align: middle; }
@media (min-width: 700px) { .dp-plot svg { height: 100px; } }
.dp-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.dp .mw-lead { margin: 0; }

/* ---------- Mountain page (v0.67.0): Frost header, verdict badge, snow meter, field guide layout, topo map ---------- */
.topo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tc-m, .tc-i { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.tc-m { stroke: var(--tm, #C9D4E2); stroke-width: 1; }
.tc-i { stroke: var(--ti, #93A5BC); stroke-width: 1.6; }
.mh { position: relative; overflow: hidden; margin-top: 8px; background: #EDF1F6; color: var(--ink); --tm: #DCE3EC; --ti: #C2CDDC; }
.mh-topo { position: absolute; inset: 0; width: 100%; height: 100%; }
.mh-in { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px 20px 20px; }
.mh-facts { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.mh h1 { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.02; }
.mh-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mh-stage { font-size: 17px; line-height: 1.2; color: var(--quiet); }
.mh-line { font-size: 14px; line-height: 1.45; }
.mh-proof { margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.mh-rep, .mh-tom { font-size: 13px; line-height: 1.45; color: var(--muted); }
a.mh-rep { text-decoration: none; }
a.mh-rep:hover { text-decoration: underline; }
.mh-bluebird { background: var(--bluebird); color: #FFFFFF; --tm: rgba(255, 255, 255, 0.2); --ti: rgba(255, 255, 255, 0.42); }
.mh-bluebird .mh-facts, .mh-bluebird .mh-rep, .mh-bluebird .mh-tom { color: #E4ECFB; }
.mh-groomer { background: var(--groomer-sky); --tm: #C3D3EE; --ti: #97AED6; }
.mh-groomer .mh-facts, .mh-groomer .mh-rep, .mh-groomer .mh-tom { color: #3E4C5C; }
.mh-sun { position: absolute; right: -34px; top: -50px; }
.mh-sun-sm { right: 22px; top: 16px; }
.mh-cord { position: absolute; left: 0; bottom: 0; width: 100%; height: 16px; fill: none; stroke: #B9C9E3; stroke-width: 1.2; }
.vbadge { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 13px; border: 2px solid transparent; border-radius: 10px; }
.vbadge .vword { font-size: 19px; line-height: 1; }
.vb-bluebird { background: var(--bluebird); color: #FFFFFF; }
.mh-bluebird .vb-bluebird { background: #FFFFFF; border-color: #FFFFFF; color: var(--bluebird); }
.vb-powder { background: #FFFFFF; border-color: var(--bluebird); color: var(--bluebird); }
.vb-storm { background: var(--storm); color: #FFFFFF; }
.vb-groomer { background: var(--groomer-sky); border-color: #B9C9E3; color: var(--ink); }
.vb-groomer .vb-b { color: var(--bluebird); }
.mh-groomer .vb-groomer { background: #FFFFFF; border-color: #FFFFFF; }
.vb-quiet, .vb-none { background: #FFFFFF; border-color: #9AA9BC; color: var(--quiet); }
.meter { padding: 16px 20px 2px; }
.meter-n { margin: 0; font-size: 14px; line-height: 1.4; }
.ob-meter { max-width: 560px; margin: 10px 0 0; }
.ob-meter .ob-t { height: 10px; }
.meter-l { margin: 8px 0 0; max-width: 560px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mjump { display: flex; gap: 6px; flex-wrap: wrap; padding: 16px 0 4px; }
.mjump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.mjump a:hover { border-color: var(--ink); }
.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "today" "spon" "col" "plan"; }
.mp-today { grid-area: today; }
.mp-spon { grid-area: spon; }
.mp-col { grid-area: col; display: flex; flex-direction: column; gap: 14px; padding: 28px 0 8px; min-width: 0; }
.mp-plan { grid-area: plan; min-width: 0; }
.mp-upd { margin: 10px 0 0; }
.mp-col > .lbl { margin: 0; }
.mmap { margin: 0; }
.mm { position: relative; aspect-ratio: 1400 / 1000; overflow: hidden; border-radius: 12px; background: #F8FAFD; border: 1px solid var(--line); --tm: #DCE3EC; --ti: #A9B8CB; }
.mm svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-hi { fill: var(--ink); }
.mm-st { fill: var(--bluebird); }
.mm-st-ring { fill: none; stroke: var(--bluebird); stroke-width: 4; }
.mm-l { position: absolute; transform: translate(7px, -50%); font-size: 10.5px; font-weight: 700; line-height: 1.12; white-space: nowrap; color: var(--ink); text-shadow: 0 0 3px #F8FAFD, 0 0 3px #F8FAFD, 0 0 5px #F8FAFD; pointer-events: none; }
.mm-l small { display: block; font-size: 9.5px; font-weight: 500; color: var(--muted); }
/* Which side of its mark a label sits (scripts/build-mountain-labels.py works these out so labels don't overlap). */
.mm-l[data-p="l"] { transform: translate(calc(-100% - 7px), -50%); text-align: right; }
.mm-l[data-p="u"] { transform: translate(-50%, calc(-100% - 7px)); text-align: center; }
.mm-l[data-p="d"] { transform: translate(-50%, 7px); text-align: center; }
.mm-l[data-p="ur"] { transform: translate(4px, calc(-100% - 4px)); }
.mm-l[data-p="ul"] { transform: translate(calc(-100% - 4px), calc(-100% - 4px)); text-align: right; }
.mm-l[data-p="dr"] { transform: translate(4px, 4px); }
.mm-l[data-p="dl"] { transform: translate(calc(-100% - 4px), 4px); text-align: right; }
@media (min-width: 700px) { .mm-l { font-size: 11.5px; } .mm-l small { font-size: 10.5px; } }
.mm-lift { fill: none; stroke: #6B7787; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mm-rd-c { fill: none; stroke: #B4BFCD; stroke-width: 3.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mm-rd { fill: none; stroke: #FFFFFF; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mm-base { fill: var(--ink); stroke: #F8FAFD; stroke-width: 3; }
.mm-credit { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.mm-credit a { color: inherit; }
.mm-off { position: absolute; left: 10px; top: 10px; max-width: 70%; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 700; line-height: 1.3; }
.mm-off small { display: block; font-weight: 500; color: var(--muted); }
.mm-off-r { left: auto; right: 10px; }
.mm-scale { position: absolute; left: 10px; bottom: 8px; width: 60%; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.mm-scale i { display: block; height: 5px; margin-bottom: 2px; border: 1.5px solid var(--muted); border-top: 0; }
.mm-n { position: absolute; right: 10px; bottom: 8px; font-size: 11px; font-weight: 800; color: var(--muted); }
.mm-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.mm-key span { display: inline-flex; align-items: center; gap: 6px; }
.mspec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; margin: 0; }
.mspec div { padding: 8px 0; border-top: 1px solid var(--line); }
.mspec dt { font-size: 12px; color: var(--muted); }
.mspec dd { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.25; }
.msnow { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.msnow-h { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.msnow-h .stat-n { font-size: 28px; }
.msnow .note { margin-top: 6px; }
.mlinks { margin: 0; }
.mlink { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.mabout { padding: 32px 0 8px; border-top: 1px solid var(--line); margin-top: 34px; }
.mabout-g { display: grid; gap: 18px; margin-top: 14px; }
.mrows { margin: 0; }
.mrows div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.mrows dt { color: var(--muted); }
.mrows dd { margin: 0; font-weight: 600; }
.mfacts { margin: 0; padding: 0; list-style: none; }
.mfacts li { position: relative; padding: 9px 0 9px 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.mfacts li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--bluebird); }
@media (min-width: 700px) {
  .mh-in, .meter { padding-left: var(--g); padding-right: var(--g); }
  .mh-in { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 52px; padding-bottom: 24px; }
  .mh h1 { font-size: 52px; }
  .mh-slot { align-items: flex-end; text-align: right; }
  .mh-sun { right: calc(var(--g) + 230px); top: -60px; }
  .mh-sun-sm { right: calc(var(--g) + 340px); top: 22px; }
  .vbadge { height: 44px; padding: 0 16px; }
  .vbadge .vword { font-size: 22px; }
  .mspec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mabout-g { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 1100px) {
  .mp-grid { grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "today col" "plan col"; grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
  .mp-spon { display: none; }
  .mp-col { padding-top: 26px; }
  .mp-col > .spon-dk { margin: 6px 0 0; }
}

/* Region page chart, three views (v0.68.0): this winter's bars inside each mountain's weeks, like the mountain page. */
.rp-w { display: block; position: relative; }
.rp-now { position: absolute; left: 0; top: 0; width: 100%; height: 30px; overflow: visible; pointer-events: none; }
.rp-now rect { fill: var(--bluebird); }
.rp-planner [data-mv-toggle] { margin: 2px 0 4px; }
@media (max-width: 859px) { .rp-planner [data-mv-toggle], .rp-planner .rp-lead.mv-snow, .rp-planner .rp-lead.mv-fresh, .rp-planner .rp-lead.sky-only { display: none !important; } }
@media (min-width: 1100px) { .rp-full .rp-now { height: 56px; } }