/* The resort directory (resorts/, pl/resorty/), after site.css: the same dark iOS palette,
   type and store buttons, and these parts of its own. The signs and the drawn maps use the
   app's grade colours brightened a step for a black page; the live maps (js/resortmap.js)
   use the app's own over the photographs, as the app does. */

:root {
  --grade-green: #30d158;
  --grade-blue: #0a84ff;
  --grade-red: #ff453a;
  --grade-black: #0b0b0c;
  --grade-casing: rgba(245, 245, 247, 0.9);
  --grade-ungraded: #8b93a8;
  --food: #fc8a0a;
  --lift: rgba(245, 245, 247, 0.85);
  --plate: rgba(28, 28, 30, 0.94);
  --radius-panel: 22px;
  --stage: 1440px;
  --section: clamp(64px, 8vw, 112px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dir {
  padding: calc(var(--nav) + clamp(20px, 4vw, 48px)) 0 0;
  overflow-x: clip;
}

.dir-section {
  margin-top: var(--section);
}

/* ------------------------------------------------------------------ heads */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--ink-2);
}

.crumbs li + li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 2px 8px;
  border-top: 1.5px solid var(--ink-3);
  border-right: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
}

.crumbs a:hover {
  color: var(--ink);
}

.dir-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.dir-where {
  margin: 12px 0 0;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 500;
  color: var(--ink-2);
}

.dir-sub,
.dir-lead {
  margin: 14px 0 0;
  max-width: 760px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--ink-2);
}

.dir-sub {
  font-size: 15px;
  color: var(--ink-3);
}

.dir-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}

.dir-links a {
  padding: 8px 15px;
  border-radius: 980px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: var(--ink);
  transition: box-shadow 0.2s var(--ease);
}

.dir-links a:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.dir-h2 {
  margin: 0 0 22px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.dir-h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dir-note {
  margin: 14px 0 0;
  max-width: 820px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 22px;
}

.section-head .dir-h2,
.section-head .dir-h3 {
  margin: 0;
}

.dir-pending {
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  font-size: 17px;
  color: var(--ink-2);
  max-width: 820px;
}

/* ------------------------------------------------------------------ figures */

.dir-facts,
.dir-card-facts {
  display: grid;
  margin: 0;
}

/* The resort's figures as a row of large numbers under the map, hairlines between them. */
.dir-facts-wrap {
  margin-top: clamp(28px, 4vw, 48px);
}

.dir-facts {
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  border-top: 0.5px solid var(--hairline);
  border-bottom: 0.5px solid var(--hairline);
}

.dir-facts .fact-cell {
  padding: 20px 20px 22px 0;
}

.dir-facts .fact-cell + .fact-cell {
  padding-left: 20px;
  box-shadow: -0.5px 0 0 var(--hairline);
}

.fact-cell dt {
  font-size: 14px;
  color: var(--ink-3);
}

.fact-cell dd {
  margin: 6px 0 0;
}

.fact-cell b {
  display: block;
  font-family: var(--display);
  font-size: clamp(24px, 2.7vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.fact-cell small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.dir-facts.is-quiet {
  margin-top: 16px;
}

.dir-facts.is-quiet b {
  font-size: clamp(20px, 2vw, 26px);
}

/* ------------------------------------------------------------------ the live map */

.map-stage {
  width: min(100% - 2 * var(--gutter), var(--stage));
  margin: clamp(28px, 4vw, 44px) auto 0;
}

.live-map {
  position: relative;
  height: clamp(440px, 74vh, 900px);
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(120% 90% at 50% 35%, #141820 0%, #07080a 72%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 40px 80px -48px rgba(10, 132, 255, 0.35);
}

/* Two classes, to hold over MapLibre's own .maplibregl-map (position: relative), which loads later. */
.live-map .live-map-still,
.live-map .live-map-canvas {
  position: absolute;
  inset: 0;
}

.live-map-still {
  transition: opacity 0.6s var(--ease);
}

.live-map-still svg {
  display: block;
  width: 100%;
  height: 100%;
}

.live-map-canvas {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.live-map.is-live .live-map-canvas {
  opacity: 1;
}

.live-map.is-live .live-map-still {
  opacity: 0;
}

/* The drawn map: every line once in <defs>, drawn by two <use>s, its casing then its colour. */
.live-map-still use,
.live-map-still .area {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.live-map-still .run-casing {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 4.6px;
}

.live-map-still .run-casing.c-black,
.live-map-still .run-casing.c-doubleBlack,
.live-map-still .run-casing.c-ungraded {
  stroke: var(--grade-casing);
}

.live-map-still .run {
  stroke-width: 2.6px;
}

.live-map-still .area {
  fill: currentColor;
  fill-opacity: 0.16;
  stroke: currentColor;
  stroke-opacity: 0.5;
  stroke-width: 1px;
}

.live-map-still .lift-casing {
  stroke: #132135;
  stroke-width: 2.6px;
}

.live-map-still .lift {
  stroke: #fff;
  stroke-width: 1.1px;
  stroke-dasharray: 1.5 3.5;
}

.g-green {
  color: var(--grade-green);
  stroke: var(--grade-green);
}

.g-blue {
  color: var(--grade-blue);
  stroke: var(--grade-blue);
}

.g-red {
  color: var(--grade-red);
  stroke: var(--grade-red);
}

.g-black,
.g-doubleBlack {
  color: #d1d1d6;
  stroke: var(--grade-black);
}

.g-ungraded {
  color: var(--grade-ungraded);
  stroke: var(--grade-ungraded);
}

.scale {
  position: absolute;
  left: 18px;
  bottom: 16px;
  width: var(--w);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.scale i {
  display: block;
  height: 5px;
  margin-bottom: 3px;
  border: 1.5px solid var(--ink-2);
  border-top: 0;
}

/* The map's tools: circles of the app's plate material, top right, as on the phone. */
.map-tools {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-tools[hidden] {
  display: none;
}

.map-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--plate);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 8px 24px -8px rgba(0, 0, 0, 0.7);
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.map-button:hover {
  background: #2c2c2e;
}

.map-button:active {
  transform: scale(0.94);
}

.map-button:focus-visible,
.map-chip:focus-visible,
.chip:focus-visible,
.more-button:focus-visible,
.row-pick:focus-visible,
.map-card-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.map-button[aria-pressed='true'] {
  background: var(--accent);
}

.map-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-button-word {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* A run, lift or place picked: its card, top left on a wide map, a sheet at the foot on a phone. */
.map-card {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  width: min(360px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  padding: 16px 16px 14px;
  overflow-y: auto;
  border-radius: 22px;
  background: var(--plate);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 24px 60px -20px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  animation: card-in 0.3s var(--ease);
}

.map-card[hidden] {
  display: none;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.map-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.map-card-head .sign {
  margin-top: 6px;
}

.map-card-titles {
  flex: 1;
  min-width: 0;
}

.map-card-title {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.map-card-kind {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

.map-card-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin: -2px -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-2);
  cursor: pointer;
}

.map-card-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.map-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 16px 0 0;
}

.map-card-facts dt {
  font-size: 12px;
  color: var(--ink-3);
}

.map-card-facts dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.map-card-profile {
  margin: 16px 0 0;
}

.map-card-profile svg {
  display: block;
  width: 100%;
  height: 92px;
}

.map-card-profile-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.map-card-notes {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

.map-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.map-card-links a,
.map-card-go,
.place-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: var(--ink);
  transition: background 0.2s var(--ease);
}

.map-card-links a:hover,
.map-card-go:hover,
.place-links a:hover {
  background: rgba(10, 132, 255, 0.3);
}

.map-card-go {
  margin-top: 14px;
  /* Apple's link blue: the white 14px words on it pass 4.5:1, which #0a84ff does not. */
  background: #0071e3;
  font-weight: 600;
}

.map-card-go:hover {
  background: #0077ed;
}

.map-tip {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  max-width: 260px;
  padding: 5px 10px;
  border-radius: 9px;
  background: var(--plate);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.map-tip[hidden] {
  display: none;
}

/* MapLibre's own parts, in the site's material (its stylesheet loads with the map). */
.live-map .maplibregl-ctrl-attrib {
  background: rgba(0, 0, 0, 0.55);
  color: var(--ink-2);
  font-size: 11px;
}

.live-map .maplibregl-ctrl-attrib a {
  color: var(--ink-2);
}

.live-map .maplibregl-ctrl-attrib.maplibregl-compact {
  background: rgba(0, 0, 0, 0.55);
}

.live-map .maplibregl-ctrl-attrib-button {
  filter: invert(1);
}

.live-map .maplibregl-cooperative-gesture-screen {
  background: rgba(0, 0, 0, 0.55);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
}

.live-map .maplibregl-ctrl-group {
  border-radius: 14px;
  background: var(--plate);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}

.live-map .maplibregl-ctrl-group button + button {
  border-top-color: var(--hairline);
}

.live-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1);
}

/* Full screen: the map is the page. Where the browser has no full screen for an element
   (an iPhone), the frame covers the window instead. */
.live-map.is-full {
  position: fixed;
  z-index: 200;
  inset: 0;
  height: 100svh;
  border-radius: 0;
}

html.map-full,
html.map-full body {
  overflow: hidden;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 16px;
  padding: 0;
}

.map-legend .dir-note {
  margin: 0;
}

.map-chips,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-chip,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 980px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

.map-chip[disabled],
.map-chip.is-static {
  cursor: default;
}

.map-chip[aria-pressed='false'] {
  opacity: 0.45;
}

.chip b {
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.chip[aria-pressed='true'] {
  background: var(--ink);
  color: #000;
}

.chip[aria-pressed='true'] b {
  color: rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ signs */

/* The app's signs (src/resorts/parts.mjs sign()): drawn here, so a long list carries none. */
.sign {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.sign-green {
  border-radius: 50%;
  background: var(--grade-green);
}

.sign-blue {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--grade-blue);
}

.sign-red,
.sign-black::before,
.sign-doubleBlack::before,
.sign-double::after {
  border-radius: 1.5px;
  transform: rotate(45deg) scale(0.78);
}

.sign-red {
  background: var(--grade-red);
}

.sign-black::before,
.sign-doubleBlack::before,
.sign-double::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grade-black);
  box-shadow: 0 0 0 1.2px var(--grade-casing);
}

.sign-double {
  width: 20px;
}

.sign-double::before {
  right: auto;
  width: 12px;
}

.sign-double::after {
  left: auto;
  width: 12px;
}

.sign-ungraded {
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--grade-ungraded);
}

.sign-food {
  border-radius: 50%;
  background: var(--food);
  box-shadow: 0 0 0 2px #fff;
  transform: scale(0.8);
}

.sign-lift {
  width: 20px;
  height: 2px;
  margin: 5px 0;
  border-radius: 1px;
  background: var(--lift);
  transform: rotate(-22deg);
}

.sign-lift::before,
.sign-lift::after {
  content: '';
  position: absolute;
  top: -2.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5f5f7;
}

.sign-lift::before {
  left: -2px;
}

.sign-lift::after {
  right: -2px;
}

/* ------------------------------------------------------------------ the runs at a glance */

.grade-split {
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  background: var(--surface);
}

.grade-bar {
  display: flex;
  gap: 3px;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
}

.grade-bar i {
  flex: 0 0 auto;
  width: var(--share);
  min-width: 4px;
  background: currentColor;
}

.grade-bar i.g-black,
.grade-bar i.g-doubleBlack {
  color: #f5f5f7;
}

.grade-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.grade-legend li {
  display: grid;
  gap: 4px;
}

.grade-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--ink-2);
}

.grade-legend b {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.grade-legend small {
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  margin-top: 12px;
}

.highlight {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.highlight h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}

.highlight-value {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.highlight-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.highlight-extra {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ tables */

/* position: relative makes the scroller the containing block of the .visually-hidden words
   inside it (the sparkline column's "Profile"): an absolute box escapes an overflow box that
   is not its containing block, so without it they sat past the table's right edge and
   widened the whole page on a phone. Same for .forecast-periods. */
.table-scroll {
  position: relative;
  overflow-x: auto;
  border-radius: var(--radius-panel);
  background: var(--surface);
  scrollbar-width: thin;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 0.5px solid var(--hairline);
}

.data-table tbody tr:last-child > * {
  border-bottom: 0;
}

.data-table tbody th,
.data-table thead th:first-child,
.lifts-table td:nth-child(2) {
  text-align: left;
}

.data-table tbody th {
  font-weight: 500;
  white-space: normal;
  min-width: 180px;
}

.data-table td {
  color: var(--ink-2);
}

.data-table td:empty::after {
  content: '·';
  color: var(--ink-3);
}

.data-table td.is-blank::after {
  content: none;
}

.compare-table tbody th {
  min-width: 210px;
}

.data-table thead th {
  padding-top: 14px;
  padding-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.data-table thead button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.data-table thead button:hover,
.data-table thead [aria-sort] button {
  color: var(--ink);
}

.data-table thead button i {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  opacity: 0;
}

.data-table thead [aria-sort] button i {
  opacity: 1;
}

.data-table thead [aria-sort='ascending'] button i {
  transform: rotate(180deg);
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

.data-table a:hover {
  color: var(--accent);
}

.run-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.run-name .ref {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: var(--ink-2);
}

.row-pick {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.row-pick:hover {
  color: var(--accent);
}

.lit {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd60a 0 3px, rgba(255, 214, 10, 0.25) 3.5px 100%);
}

.data-table .spark,
.data-table .spark-head {
  width: 88px;
  padding-left: 0;
}

.spark svg {
  display: block;
  margin-left: auto;
}

/* With script, a long list opens on its first rows; "Show all" opens the rest. */
.more-button {
  display: none;
}

html.js .more-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 20px;
  border: 0;
  border-radius: 980px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

html.js .more-button:hover {
  background: #2c2c2e;
}

html.js section:not(.is-open) [data-more] {
  display: none;
}

/* Beside the nearby ski areas: each figure's share of the column's largest, a bar under it. */
.compare-table td[style] {
  background: linear-gradient(to left, rgba(10, 132, 255, 0.45) var(--w), transparent var(--w)) no-repeat;
  background-size: calc(100% - 32px) 3px;
  background-position: 16px calc(100% - 6px);
}

.compare-table tr.is-here > * {
  color: var(--ink);
  background-color: rgba(10, 132, 255, 0.08);
}

.cmp-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cmp-name small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ lifts */

.lift-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.lift-tiles li {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.lift-tiles b {
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.lift-tiles span {
  font-size: 14px;
  color: var(--ink-2);
}

.dir-section .table-scroll {
  margin-top: 12px;
}

/* ------------------------------------------------------------------ places to eat */

.places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.place {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.place h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.place h3::before {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--food);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.place-kind {
  margin: 4px 0 0 19px;
  font-size: 14px;
  color: var(--ink-3);
}

.place-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding-top: 16px;
}

.place-links a {
  min-height: 32px;
  font-size: 13px;
}

/* ------------------------------------------------------------------ the weather */

.forecast {
  display: none;
}

html.js .forecast {
  display: block;
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 12px;
}

.forecast-place {
  min-width: 0;
  padding: 20px 22px 18px;
  border-radius: 28px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(10, 132, 255, 0.18), transparent 60%),
    var(--surface);
}

.forecast-place h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
}

/* Held at the loaded forecast's own height (the "now" block and the periods' strip, 234 px)
   while it loads, and when it fails, so nothing below it moves either way. The 14 px above
   it is the "now" block's top margin, which runs out through the holder once loaded. */
.forecast-days {
  min-height: 234px;
}

.forecast:not(.is-loaded) .forecast-days,
.forecast.is-failed .forecast-days {
  margin-top: 14px;
  border-radius: 16px;
}

.forecast.is-failed .forecast-days {
  display: grid;
  place-items: center;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px;
  text-align: center;
  color: var(--ink-3);
}

.forecast.is-failed .forecast-days p {
  margin: 0;
}

.forecast:not(.is-loaded) .forecast-days {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  background-size: 200% 100%;
  animation: loading 1.6s linear infinite;
}

@keyframes loading {
  to {
    background-position: -200% 0;
  }
}

.forecast-now {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'glyph temp' 'glyph sky' 'glyph wind';
  column-gap: 16px;
  align-items: center;
  margin-top: 14px;
}

.forecast-now .sky {
  grid-area: glyph;
  width: 64px;
  height: 64px;
}

.forecast-temp {
  grid-area: temp;
  margin: 0;
  font-family: var(--display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.forecast-sky,
.forecast-wind {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

.forecast-sky {
  grid-area: sky;
}

.forecast-wind {
  grid-area: wind;
}

.forecast-sky span,
.forecast-wind span {
  color: var(--ink-3);
}

.forecast-periods {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(52px, 1fr));
  gap: 4px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  overflow-x: auto;
  list-style: none;
  border-top: 0.5px solid var(--hairline);
  scrollbar-width: none;
}

.forecast-periods li {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.forecast-periods time {
  display: grid;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink-3);
  white-space: nowrap;
}

.forecast-periods time span:first-child {
  color: var(--ink-2);
}

.forecast-periods .sky {
  width: 28px;
  height: 28px;
}

.forecast-periods b {
  font-size: 16px;
  font-weight: 600;
}

.forecast-periods small {
  font-size: 12px;
  color: #64d2ff;
}

.forecast-periods small.is-dry {
  color: var(--ink-3);
}

.sky {
  fill: none;
  stroke: #d1d1d6;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sky-clear,
.sky-fair,
.sky .sky-sun {
  stroke: #ffd60a;
}

.sky-rain path:nth-child(n + 2),
.sky-sleet path:nth-child(2) {
  stroke: #64d2ff;
}

.sky-snow path:nth-child(n + 2),
.sky-sleet path:nth-child(3) {
  stroke: #fff;
  stroke-width: 2.6;
}

.sky-thunder path:nth-child(2) {
  stroke: #ffd60a;
}

/* ------------------------------------------------------------------ nearby */

.near-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.near-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
  background: radial-gradient(90% 90% at 50% 50%, #15181d 0%, #0a0b0d 75%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}

.near-grid .table-scroll {
  margin-top: 0;
}

.near-rings circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-dasharray: 3 4;
}

.near-rings text {
  fill: var(--ink-3);
  font-family: var(--font);
  font-size: 10px;
}

.near-dots {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 4.4;
  stroke-linecap: round;
}

.near-pin circle {
  fill: #2c2c2e;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1;
  transition: fill 0.2s var(--ease);
}

.near-pin:hover circle {
  fill: var(--accent);
}

/* The pin's tap area: drawn 20 units across, it is 17 px on a phone, where the map is 343 px
   for its 400 units; this unpainted circle of radius 26 makes it 44 px there. */
.near-pin .near-hit,
.near-pin:hover .near-hit {
  fill: transparent;
  stroke: none;
}

.near-pin text {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
}

/* The resort itself is drawn over the pins but is not a link: taps go through it to a pin
   beside it. */
.near-here {
  pointer-events: none;
}

.near-here circle {
  fill: var(--accent);
}

.near-here .halo {
  fill: rgba(10, 132, 255, 0.22);
}

.near-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2c2c2e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.near-num.is-here {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.25);
}

/* ------------------------------------------------------------------ the index and countries */

.dir-hero {
  text-align: center;
}

.dir-hero .kicker {
  margin-bottom: 10px;
}

.dir-hero .dir-lead {
  margin-left: auto;
  margin-right: auto;
}

.search {
  display: none;
}

html.js .search {
  display: block;
  position: relative;
  z-index: 10;
  max-width: 640px;
  margin: 32px auto 0;
  text-align: left;
}

.dir-head .search {
  margin-left: 0;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 14px 0 20px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 20px 50px -24px rgba(10, 132, 255, 0.45);
}

.search-field:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 20px 50px -24px rgba(10, 132, 255, 0.6);
}

.search-glyph {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
}

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  letter-spacing: -0.01em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.search input::placeholder {
  color: var(--ink-3);
}

.search-key {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-3);
}

.search-field:focus-within .search-key {
  visibility: hidden;
}

.search-results {
  position: absolute;
  z-index: 20;
  top: 66px;
  left: 0;
  right: 0;
  max-height: min(60svh, 520px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border-radius: 18px;
  background: rgba(28, 28, 30, 0.96);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 30px 60px -20px rgba(0, 0, 0, 0.9);
}

.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
}

.search-results [aria-selected='true'] a,
.search-results a:hover {
  background: rgba(10, 132, 255, 0.22);
}

.result-name {
  font-size: 17px;
  overflow-wrap: anywhere;
}

.result-where {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--ink-3);
}

.search-status {
  margin: 12px 0 0;
  min-height: 1.4em;
  font-size: 15px;
  color: var(--ink-3);
  text-align: center;
}

.dir-head .search-status {
  text-align: left;
}

/* While the list is open the count is still read out, and still holds its place. */
.search-status.quiet {
  color: transparent;
}

/* Every resort as a dot: the world, or a country with its neighbours faint round it. */
.atlas {
  height: clamp(380px, 64vh, 780px);
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(10, 132, 255, 0.12), transparent 70%),
    radial-gradient(120% 90% at 50% 35%, #0e131b 0%, #050607 72%);
}

.atlas-stage.is-country .atlas {
  height: clamp(340px, 58vh, 700px);
}

.atlas .atlas-earth {
  fill: #0b1220;
  stroke: rgba(120, 170, 255, 0.25);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.atlas svg path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.atlas .dots-big {
  stroke: #fff;
  stroke-width: 5.5px;
}

.atlas .dots-mid {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3.6px;
}

.atlas .dots-small {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2.2px;
}

.atlas-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

.atlas-key .dot {
  display: inline-block;
  border-radius: 50%;
  background: #fff;
}

.atlas-key .dot.big {
  width: 8px;
  height: 8px;
}

.atlas-key .dot.mid {
  width: 5px;
  height: 5px;
  opacity: 0.85;
}

.atlas-key .dot.small {
  width: 3px;
  height: 3px;
  margin-right: 6px;
  opacity: 0.6;
}

.dir-featured {
  margin-top: var(--section);
}

.dir-group {
  margin-top: 44px;
}

.dir-group .section-head {
  margin-bottom: 16px;
}

.dir-featured > .dir-note {
  margin-top: -8px;
}

.group-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  font-size: 14px;
}

.group-links a {
  color: var(--accent);
}

/* On a touch screen each link is a 44 px row to tap (padding in place of the row gap), not
   a 21 px line of text that a finger covers along with its neighbours. */
@media (pointer: coarse) {
  .group-links {
    row-gap: 0;
  }
  .group-links a {
    padding: 11.5px 0;
  }
}

.group-links b {
  margin-left: 5px;
  font-weight: 400;
  color: var(--ink-3);
}

/* Six cards to a group: three across, two on a tablet, a row to swipe through on a phone. */
.dir-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dir-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease);
}

.dir-card:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.dir-card-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 12px 16px;
  background: radial-gradient(90% 90% at 50% 40%, #151a22 0%, #0a0b0e 75%);
  overflow: hidden;
}

.dir-card-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}

.dir-card:hover .dir-card-art img {
  transform: scale(1.04);
}

.dir-card-mark {
  width: 64px;
  height: auto;
  fill: rgba(255, 255, 255, 0.12);
}

.dir-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 20px 18px;
}

.dir-card-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.dir-card-where {
  margin-top: 2px;
  font-size: 14px;
  color: var(--ink-3);
}

.dir-card-facts {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px 12px;
  margin-top: auto;
  padding-top: 14px;
}

.dir-card-facts dt {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dir-card-facts b {
  font-size: 18px;
}

.dir-countries {
  margin-top: var(--section);
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.country-grid a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--surface);
  font-size: 16px;
  transition: box-shadow 0.2s var(--ease);
}

.country-grid a:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.country-grid b {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ get the app, the data */

.dir-cta {
  margin: var(--section) var(--gutter) 0;
}

.dir-cta-inner {
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(44px, 7vw, 80px) 24px;
  border-radius: 32px;
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(10, 132, 255, 0.28), transparent 70%),
    var(--surface);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

.dir-cta-mark {
  height: 30px;
  width: auto;
  margin: 0 auto 22px;
  fill: #fff;
}

.dir-cta h2 {
  font-size: clamp(30px, 4.6vw, 56px);
}

.dir-cta-body {
  max-width: 620px;
  margin: 18px auto 30px;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-2);
}

.dir-cta .stores,
.dir-cta .store-note {
  justify-content: center;
}

.dir .dir-source {
  margin-top: 40px;
  margin-bottom: 56px;
}

.dir-source h2 {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
}

.dir-source p {
  margin: 0 0 6px;
  max-width: 820px;
  font-size: 13px;
  color: var(--ink-3);
}

.dir-source a {
  color: var(--accent);
}

/* ------------------------------------------------------------------ wide, tablets, phones */

@media (min-width: 1700px) {
  :root {
    --stage: 1560px;
  }
}

@media (max-width: 1000px) {
  .dir-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dir-facts .fact-cell:nth-child(3n + 1) {
    padding-left: 0;
    box-shadow: none;
  }
  .dir-facts .fact-cell:nth-child(n + 4) {
    border-top: 0.5px solid var(--hairline);
  }
  .near-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .near-map {
    max-width: 560px;
  }
}

@media (max-width: 900px) {
  .dir-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .live-map {
    height: min(128vw, 76svh);
    min-height: 380px;
    border-radius: 22px;
  }
  .map-tools {
    top: 10px;
    right: 10px;
  }
  .map-button {
    width: 44px;
    height: 44px;
  }
  /* A phone zooms with two fingers: the stack keeps what a finger cannot do. */
  .map-button[data-action='in'],
  .map-button[data-action='out'] {
    display: none;
  }
  .map-card {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 62%;
    border-radius: 20px;
  }
  .dir-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dir-facts .fact-cell,
  .dir-facts .fact-cell + .fact-cell {
    padding: 16px 12px 18px 0;
    box-shadow: none;
    border-top: 0;
  }
  .dir-facts .fact-cell:nth-child(even) {
    padding-left: 16px;
    box-shadow: -0.5px 0 0 var(--hairline);
  }
  .dir-facts .fact-cell:nth-child(n + 3) {
    border-top: 0.5px solid var(--hairline);
  }
  .dir-facts .fact-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    padding-left: 0;
    box-shadow: none;
  }
  /* Two lines kept for every label, so one that wraps leaves its figure level with the one beside it. */
  .dir-facts dt {
    display: flex;
    align-items: flex-end;
    min-height: 2.6em;
    line-height: 1.3;
  }
  .search-field {
    height: 54px;
  }
  .search-key {
    display: none;
  }
  /* The name column stays put while the figures scroll under it. */
  .data-table tbody th,
  .data-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 150px;
    max-width: 52vw;
    background: var(--surface);
  }
  .data-table th,
  .data-table td {
    padding: 11px 12px;
  }
  .data-table {
    font-size: 14px;
  }
  .grade-split {
    border-radius: 22px;
  }
  .forecast-place {
    padding: 18px 16px 16px;
    border-radius: 22px;
  }
  .forecast-periods {
    grid-template-columns: repeat(8, 56px);
  }
  .atlas {
    height: min(110vw, 64svh);
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .dir-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .dir-cards::-webkit-scrollbar {
    display: none;
  }
  .dir-cards > li {
    scroll-snap-align: start;
  }
  .map-legend {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-map-still,
  .live-map-canvas,
  .map-card,
  .dir-card-art img,
  .forecast:not(.is-loaded) .forecast-days {
    transition: none;
    animation: none;
  }
}