:root {
  --navy: #003b95; --blue: #006ce4; --blue-soft: #ebf3ff; --yellow: #febb02;
  --green: #008234; --green-soft: #e7f6ec; --red: #c00; --ink: #1a1a1a; --ink-2: #595959;
  --line: #e7e7e7; --bg: #f2f6fb; --card: #fff; --radius: 8px; --shadow: 0 2px 8px rgba(26,26,26,.12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
img { max-width: 100%; display: block; }
button, select, input { font: inherit; color: inherit; }
a { color: var(--blue); }
[hidden] { display: none !important; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; position: relative; }

.top { background: linear-gradient(180deg, #002a6e 0%, var(--navy) 60%, #1a56b8 100%); color: #fff; padding: 14px 0 0; position: relative; overflow: hidden; }
.snow { position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 90px 80px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 160px 20px, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 230px 110px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 300px 60px, #fff 50%, transparent 51%);
  background-size: 320px 160px; animation: fall 14s linear infinite; }
@keyframes fall { from { background-position: 0 0; } to { background-position: 60px 320px; } }
@media (prefers-reduced-motion: reduce) { .snow { animation: none; } }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -.2px; }
.brand small { display: block; font-weight: 400; font-size: 12px; opacity: .85; letter-spacing: 0; }
.top-note { font-size: 12px; opacity: .8; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 3px 8px; }
.hero { padding: 26px 16px 8px; }
.hero h1 { margin: 0; font-size: clamp(24px, 4.5vw, 40px); line-height: 1.15; font-weight: 800; }
.hero p { margin: 8px 0 0; font-size: 17px; opacity: .92; }
.searchbar { display: grid; grid-template-columns: 1fr; gap: 4px; background: var(--yellow); padding: 4px; border-radius: var(--radius); margin: 18px 0 8px; box-shadow: var(--shadow); position: relative; z-index: 2; }
.sb-field { background: #fff; color: var(--ink); border-radius: 4px; padding: 9px 12px; display: flex; flex-direction: column; }
.sb-field span { font-weight: 700; }
.sb-field small { color: var(--ink-2); font-size: 12px; }
@media (min-width: 760px) { .searchbar { grid-template-columns: repeat(3, 1fr); } }
.ridge { display: block; width: 100%; height: 44px; margin-top: -6px; }

.main { padding-top: 8px; padding-bottom: 32px; }
.dates { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 4px 0 12px; }
@media (min-width: 760px) { .dates { grid-template-columns: repeat(3, 1fr); } }
.date-tab { border: 2px solid var(--line); background: #fff; border-radius: var(--radius); padding: 10px 12px; cursor: pointer; text-align: left; }
.date-tab b { display: block; font-size: 15px; }
.date-tab small { color: var(--ink-2); font-size: 12.5px; display: block; }
.date-tab em { font-style: normal; color: var(--ink-2); font-size: 12px; }
.date-tab[aria-selected="true"] { border-color: var(--blue); background: var(--blue-soft); }

.tabs { display: flex; gap: 8px; margin: 4px 0 10px; overflow-x: auto; scrollbar-width: none; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; font-weight: 600; }
.tab[aria-selected="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.count { font-weight: 400; color: var(--ink-2); }
.toolbar { margin-bottom: 12px; }
.tab-note { margin: 0 0 8px; color: var(--ink-2); font-size: 13.5px; }
.toolbar-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sort select { margin-left: 6px; padding: 6px 8px; border: 1px solid #868686; border-radius: 4px; background: #fff; }
.chk { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.seg { margin-left: auto; display: flex; border: 1px solid var(--blue); border-radius: 4px; overflow: hidden; }
.seg-btn { border: 0; background: #fff; color: var(--blue); padding: 6px 14px; cursor: pointer; font-weight: 600; }
.seg-btn[aria-pressed="true"] { background: var(--blue); color: #fff; }

.map { height: 70vh; min-height: 360px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 12px; }
.list { display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1fr; box-shadow: var(--shadow); }
@media (min-width: 760px) { .card { grid-template-columns: 260px 1fr 190px; } }
.ph { position: relative; background: #dfe7f2; min-height: 200px; }
.ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.ph .noimg { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 200px; color: var(--ink-2); padding: 16px; text-align: center; }
.rank { position: absolute; top: 10px; left: 10px; background: var(--navy); color: #fff; font-weight: 700; border-radius: 4px; padding: 3px 9px; font-size: 13px; border: 2px solid #fff; }
.body { padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.body h2 { font-size: 18px; margin: 0; line-height: 1.25; color: var(--blue); overflow-wrap: anywhere; }
.loc { font-size: 13px; color: var(--blue); }
.loc a { text-decoration: underline; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact { border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; font-size: 12.5px; }
.fact.good { border-color: #b6e0c4; background: var(--green-soft); color: var(--green); font-weight: 600; }
.desc { font-size: 13px; color: var(--ink-2); margin: 0; }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.src { border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; text-decoration: none; color: var(--ink); font-size: 12.5px; background: #fff; }
.src b { color: var(--ink); }
.src.best { border-color: var(--green); background: var(--green-soft); }
.src.off { opacity: .55; }
details.why summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
details.why table { font-size: 12.5px; border-collapse: collapse; margin-top: 4px; }
details.why td { padding: 1px 10px 1px 0; }
.side { padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); text-align: right; }
@media (min-width: 760px) { .side { border-top: 0; border-left: 1px solid var(--line); } }
.rev { display: flex; gap: 8px; align-items: center; }
.rev span { font-size: 12px; color: var(--ink-2); line-height: 1.2; }
.rev b { background: var(--navy); color: #fff; border-radius: 6px 6px 6px 0; padding: 6px 7px; font-size: 15px; min-width: 34px; text-align: center; }
.score { font-size: 12px; color: var(--ink-2); }
.score b { color: var(--navy); }
.price small { display: block; color: var(--ink-2); font-size: 12px; }
.price .amt { font-size: 22px; font-weight: 800; line-height: 1.1; }
.price .over { color: var(--red); font-size: 12px; font-weight: 600; }
.cta { display: inline-block; background: var(--blue); color: #fff; border-radius: 4px; padding: 9px 14px; font-weight: 700; text-decoration: none; }
.cta:hover { background: var(--navy); }
.empty { background: #fff; border: 1px dashed #c6c6c6; border-radius: var(--radius); padding: 24px; text-align: center; color: var(--ink-2); }
.foot { border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; padding: 18px 0 40px; background: #fff; }
.leaflet-popup-content { font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.pin { background: var(--navy); color: #fff; border-radius: 4px; padding: 2px 6px; font-weight: 700; font-size: 12px; white-space: nowrap; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin.over { background: var(--red); }

/* Banner photos: snow-capped polaroids on the snowy header */
.hero { display: flex; align-items: center; gap: 28px; }
.hero-text { flex: 1; min-width: 0; text-align: center; }
.snowpic { position: relative; margin: 0; flex: none; width: 190px; background: #fff; padding: 8px 8px 24px; border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 20, 70, .45), 0 0 0 1px rgba(255,255,255,.6) inset; z-index: 1; }
.snowpic img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 3px; display: block; }
.snowpic.left { transform: rotate(-5deg); }
.snowpic.right { transform: rotate(4deg); }
.snowpic::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 10px; border-radius: 6px;
  background: radial-gradient(circle at 10% 60%, #e9f2ff 0 5px, transparent 6px), radial-gradient(circle at 35% 40%, #ffffff 0 6px, transparent 7px), radial-gradient(circle at 70% 55%, #e9f2ff 0 5px, transparent 6px), radial-gradient(circle at 92% 45%, #ffffff 0 4px, transparent 5px); }
.snowpic .cap { position: absolute; left: -10px; right: -10px; top: -16px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 34' preserveAspectRatio='none'><path d='M4 22 C6 10 18 6 30 9 C38 2 54 1 64 7 C74 0 92 0 102 6 C114 -1 132 1 140 8 C150 2 168 3 176 9 C188 4 206 8 214 18 C220 26 214 30 206 28 L196 28 C196 34 186 34 186 28 L150 28 C150 33 141 33 141 28 L98 28 C98 34 88 34 88 28 L46 28 C46 32 38 32 38 28 L14 28 C6 30 2 27 4 22 Z' fill='%23ffffff'/><path d='M14 16 C40 10 70 12 96 10 C130 8 170 10 204 16' stroke='%23dbe8fb' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  filter: drop-shadow(0 2px 2px rgba(0, 30, 90, .25)); }
@media (max-width: 899px) {
  .hero { flex-wrap: wrap; justify-content: center; gap: 18px 22px; padding-top: 30px; }
  .hero-text { order: 3; flex-basis: 100%; text-align: left; }
  .snowpic { width: 132px; padding: 6px 6px 18px; }
  .snowpic.left { order: 1; } .snowpic.right { order: 2; }
}