/* Layout: white page, giant type, one full-bleed color band per city; ranked list of ten below. */
:root {
  --gut: 20px;   /* side margin; a little wider on phones */
  --bg: #ffffff;
  --fg: #0d0f13;
  --muted: #676b75;
  --line: #e6e8ed;
  --soft: #f4f5f8;
  --city: #ff5b22;
  --on-city: #14110f;
  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;   /* geometric, Gilroy-like: numbers and small labels */
}
/* Dark is the default theme; the header switch sets data-theme="light" */
:root:not([data-theme="light"]) {
  --bg: #0b0c0f; --fg: #f1f2f5; --muted: #9a9ea8; --line: #22252c; --soft: #15171c;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

@media (max-width: 760px) { :root { --gut: 26px; } }
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.03em; }
.ask-sub b { font-weight: 600; font-size: clamp(17px, 1.9vw, 23px); color: var(--sp-fg, var(--fg)); }   /* the promise stands out, the rest stays quiet */
/* never leave a single word alone on the last line of a paragraph (plus a script fallback, see noOrphans) */
p, li, figcaption, small, .ask-sub, .hook, .sc-meta, .spot-d { text-wrap-style: pretty; }   /* style only: never turns wrapping back on where it is off */
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: 1600px; margin: 0 auto;   /* wider content area (the home search banner keeps its own width) */
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.mono { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* Header */
.top { padding-block: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* dark theme: a pure black header, edge to edge (matches the black banner) */
.top { position: relative; z-index: 40; }
:root:not([data-theme="light"]) .top::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #000; box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); pointer-events: none; }   /* a shadow paints edge to edge without widening the page */
/* On wide screens the light/dark switch sits at the far right edge of the window */
@media (min-width: 1240px) {
  .top { position: relative; }
  .top .theme-sw { position: absolute; top: 50%; right: calc(28px - (100vw - 100%) / 2); transform: translateY(-50%); }
}
.logo { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.04em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.nav { display: flex; gap: 22px; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav { align-items: center; }
/* Light / dark switch */
.theme-sw {
  position: relative; width: 56px; height: 30px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 99px; background: var(--soft);
  display: inline-flex; align-items: center; justify-content: space-between; padding-inline: 8px; color: var(--muted);
  transition: background .3s, border-color .3s;
}
.theme-sw:hover { border-color: var(--muted); }
.theme-sw svg { width: 14px; height: 14px; position: relative; z-index: 1; transition: color .3s; }
.theme-sw::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--fg); transition: transform .3s cubic-bezier(.3, .7, .2, 1), background .3s;
}
.theme-sw[aria-checked="true"]::before { transform: translateX(26px); }
.theme-sw[aria-checked="false"] .sw-sun, .theme-sw[aria-checked="true"] .sw-moon { color: var(--bg); }
.count { font-family: var(--mono); font-size: 11px; background: var(--fg); color: var(--bg); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }

/* Home hero */
.hero { padding-block: clamp(32px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.hero h1 { font-size: clamp(52px, 11vw, 140px); line-height: 0.88; font-weight: 700; letter-spacing: -0.055em; }
.hero h1 .swap { color: var(--muted); display: inline-block; }
.hero h1 .swap span { color: var(--fg); box-shadow: inset 0 -0.12em 0 var(--city); transition: box-shadow .4s; }
.hero .lede { margin-top: 32px; max-width: 34ch; font-size: clamp(18px, 2.2vw, 22px); color: var(--muted); line-height: 1.45; }
.hero .lede b { color: var(--fg); font-weight: 600; }

/* Smart search */
.search { margin-top: clamp(28px, 4vw, 44px); max-width: 780px; }
.sbox {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 99px; background: var(--bg);
  padding: 6px 6px 6px 20px; transition: border-color .2s, box-shadow .25s;
}
.sbox:hover { border-color: var(--muted); }
.sbox:focus-within { border-color: var(--fg); box-shadow: 0 14px 40px -18px rgba(13, 15, 19, .35); }
.sbox .lens { width: 20px; height: 20px; flex: none; color: var(--muted); }
.sbox input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg);
  font-family: var(--body); font-weight: 500; font-size: 18px; padding-block: 14px;
}
.sbox input::placeholder { color: var(--muted); }
.sbox input::-webkit-search-cancel-button { display: none; }
.kbd { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--muted); flex: none; }
.sbtn {
  flex: none; border: 0; border-radius: 99px; padding: 14px 24px; cursor: pointer;
  background: var(--city-band, var(--city)); color: #fff; font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .4s, color .4s, transform .15s;
}
.sbtn:active { transform: scale(.96); }
.sbtn svg { width: 18px; height: 18px; }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ideas .chip { font-size: 14px; }
.chip.surprise { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; }
.chip.surprise svg { width: 15px; height: 15px; }
.hint { margin-top: 18px; color: var(--muted); font-size: 15px; max-width: 52ch; }
.hint b { color: var(--fg); font-weight: 600; }

.results { margin-top: 22px; }
.answer { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.answer h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; }
.answer .mono { color: var(--muted); flex: none; }
.hit {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 12px 12px; margin-inline: -12px; border-radius: 14px; text-decoration: none;
}
.hit:hover, .hit.active { background: var(--soft); }
.hit-n { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.hit-t { display: block; font-weight: 600; font-size: 18px; line-height: 1.3; }
.hit-s { display: block; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit-c { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.hit-c i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.no-hits { padding-block: 18px; color: var(--muted); }

.item.flash { animation: flash 1.8s ease; }
@keyframes flash { 0%, 35% { background: var(--soft); } 100% { background: transparent; } }

/* Location-first search: the headline is the search field */
.ask { max-width: 980px; }
.ask-label { display: block; color: var(--muted); margin-bottom: 10px; cursor: text; }
.where {
  display: flex; align-items: center; gap: 0.2em;
  font-family: var(--display); font-weight: 700; font-size: clamp(40px, 7vw, 88px); line-height: 1.05; letter-spacing: -0.05em;
  border-bottom: 3px solid var(--line); padding-bottom: 0.08em; transition: border-color .3s;
}
.where input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 0 0.04em;
  font: inherit; letter-spacing: inherit; color: var(--city); caret-color: var(--city); transition: color .4s;
}
.where input::placeholder { color: var(--city); opacity: 0.4; transition: color .4s; }
.where:focus-within { border-color: var(--city); }
.go {
  flex: none; width: clamp(44px, 5vw, 64px); height: clamp(44px, 5vw, 64px);
  border: 0; border-radius: 50%; background: var(--city-band, var(--city)); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .4s, color .4s, transform .15s;
}
.go:hover { transform: translateX(3px); }
.go:active { transform: scale(.94); }
.go svg { width: 46%; height: 46%; }

.suggest { margin-top: 18px; max-width: 760px; }
.sug-head { color: var(--muted); padding-block: 14px 6px; }
.sug {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 12px; margin-inline: -12px; border-radius: 14px; text-decoration: none;
}
.sug:hover, .sug.active { background: var(--soft); }
.sug-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.sug-dot.hollow { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.sug-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.sug-city { font-size: 20px; font-weight: 500; color: var(--muted); }
.sug-city b { color: var(--fg); font-weight: 600; }
.sug.active .sug-city, .sug:hover .sug-city { color: var(--fg); }
.sug-country { color: var(--muted); font-size: 15px; }
/* found places: they should feel like a destination you just discovered, not a gray leftover */
.sug.place { grid-template-columns: 44px minmax(0, 1fr) auto; }
.sug-pin { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--fg); transition: background .25s, color .25s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.sug-pin svg { width: 22px; height: 22px; }
.sug.place:hover .sug-pin, .sug.place.active .sug-pin { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
.sug.place .sug-city, .spanel .sug.place .sug-city { color: var(--fg); font-weight: 600; }
.spanel .sug.place .sug-city { color: var(--sp-fg); }
.sug-tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--fg); transition: background .25s, color .25s, border-color .25s; }
.sug-tag svg { width: 14px; height: 14px; }
.sug.place:hover .sug-tag, .sug.place.active .sug-tag { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sug-looking { display: flex; align-items: center; gap: 10px; padding: 14px 4px 6px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .sug.place { grid-template-columns: 40px minmax(0, 1fr) auto; } .sug-pin { width: 40px; height: 40px; border-radius: 12px; } .sug-tag { padding: 8px; font-size: 0; gap: 0; } .sug-tag svg { width: 16px; height: 16px; } }
.badge { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; }
.sug-go { display: inline-grid; place-items: center; color: var(--muted); }
.sug-go svg { width: 18px; height: 18px; }
.sug:hover .sug-go, .sug.active .sug-go { color: var(--fg); }
.badge.live { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* "Near me": the first row when the empty search box is tapped */
.sug.near { grid-template-columns: 44px minmax(0, 1fr) auto; }
.sug.near .sug-name { flex-direction: column; align-items: flex-start; gap: 2px; }
.near-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--fg); transition: background .25s, color .25s; }
.sug.near:hover .near-ic, .sug.near.active .near-ic { background: var(--fg); color: var(--bg); }
.near-ic svg { width: 22px; height: 22px; }

.sug.near.busy .near-ic svg { animation: nearpulse 1s ease-in-out infinite; }
@keyframes nearpulse { 50% { opacity: .35; transform: scale(.88); } }
/* "Closest to me" on city pages */
.near-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--body); color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 9px 16px 9px 13px; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; white-space: nowrap; }
.near-btn svg { width: 17px; height: 17px; }
.near-btn:hover { border-color: var(--fg); }
.near-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.near-btn.busy svg { animation: nearpulse 1s ease-in-out infinite; }
.near-note { color: var(--muted); font-size: 12px; margin-top: 10px; }
.dist { text-transform: none; display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; margin-right: 12px; padding: 3px 9px 3px 7px; border-radius: 99px; background: var(--fg); color: var(--bg); font-size: 11px; letter-spacing: .04em; }
.cat .dist svg { width: 11px; height: 11px; margin: 0; }

.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.popular > .mono { color: var(--muted); margin-right: 6px; }

/* Map fills the whole city banner, same shape and height */
.band { position: relative; overflow: hidden; isolation: isolate; }
/* the quiet dot map of the country, on the right of the city banner (drawn by bandDots) */
.band-dots { position: absolute; z-index: -1; pointer-events: none; animation: fadein 1.2s ease both;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 4%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 4%, #000 82%, transparent 100%); mask-composite: intersect; }
@media (max-width: 760px) { .band-dots { opacity: .55; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%); mask-image: linear-gradient(to right, transparent 0, #000 55%); } }
/* the little plane that flies in and lands on the city dot */
.band-fly { position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
.band-low { display: grid; }
.band-low > * { min-width: 0; }
.band-map { position: absolute; inset: 0; z-index: 3; animation: mapIn .5s cubic-bezier(.4, 0, .2, 1) both; background: var(--city); }
/* opening the map: the banner fades to its color, then the map softly fades in (settling from a slight zoom) once it has loaded, then the pin drops */
@keyframes mapIn { from { opacity: 0; } to { opacity: 1; } }
.band-map .map-frame iframe { opacity: 0; transform: scale(1.035); transition: opacity .7s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.band-map.ready .map-frame iframe { opacity: 1; transform: none; }
.band-map:not(.ready) .pin svg { animation: none; opacity: 0; }
.band-map .map-bar, .band-map .zoom { opacity: 0; transition: opacity .5s ease .25s; }
.band-map.ready .map-bar, .band-map.ready .zoom { opacity: 1; }
.map-frame { width: 100%; height: 100%; }
.map-frame { position: relative; overflow: hidden; }
/* The map is drawn larger than the banner and centered, so Google's own buttons and info card fall outside the visible area */
.map-frame iframe { position: absolute; left: -340px; top: -160px; width: calc(100% + 680px); height: calc(100% + 320px); border: 0; display: block; filter: grayscale(1) contrast(1.05) brightness(1.04); pointer-events: none; }
/* Custom pin, locked to the map center where the place sits */
.pin { position: absolute; left: 50%; top: calc(50% + 12px); width: 0; height: 0; pointer-events: none; }
.pin-halo { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: var(--city); opacity: .25; animation: halo 2.4s ease-out infinite; }
.pin-dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--city); }
.pin-shadow { position: absolute; left: -10px; top: -3px; width: 20px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .22); filter: blur(2px); }
.pin svg { position: absolute; left: -21px; top: -55px; width: 42px; height: 55.5px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22)); animation: drop .6s cubic-bezier(.2, 1.3, .4, 1) .15s both; transform-origin: 50% 100%; }
.pin svg .pin-body { fill: var(--city); }
/* Leaflet core styles (v1.9.4, inlined) */
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } .leaflet-tile::selection { background: transparent; } .leaflet-safari .leaflet-tile { image-rendering: -webkit-optimize-contrast; } .leaflet-safari .leaflet-tile-container { width: 1600px; height: 1600px; -webkit-transform-origin: 0 0; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } .leaflet-container .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; width: auto; padding: 0; } .leaflet-container img.leaflet-tile { mix-blend-mode: plus-lighter; } .leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; } .leaflet-container.leaflet-touch-drag { -ms-touch-action: pinch-zoom; touch-action: none; touch-action: pinch-zoom; } .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { -ms-touch-action: none; touch-action: none; } .leaflet-container { -webkit-tap-highlight-color: transparent; } .leaflet-container a { -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 800; } .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-pane { z-index: 400; } .leaflet-tile-pane { z-index: 200; } .leaflet-overlay-pane { z-index: 400; } .leaflet-shadow-pane { z-index: 500; } .leaflet-marker-pane { z-index: 600; } .leaflet-tooltip-pane { z-index: 650; } .leaflet-popup-pane { z-index: 700; } .leaflet-map-pane canvas { z-index: 100; } .leaflet-map-pane svg { z-index: 200; } .leaflet-vml-shape { width: 1px; height: 1px; } .lvml { behavior: url(#default#VML); display: inline-block; position: absolute; } .leaflet-control { position: relative; z-index: 800; pointer-events: visiblePainted; pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-animated { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } svg.leaflet-zoom-animated { will-change: transform; } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile { -webkit-transition: none; -moz-transition: none; transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } .leaflet-interactive { cursor: pointer; } .leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; } .leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path { pointer-events: visiblePainted; pointer-events: auto; } .leaflet-container { background: #ddd; outline-offset: 1px; } .leaflet-container a { color: #0078A8; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); } .leaflet-container { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.5; } .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } .leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a:hover, .leaflet-bar a:focus { background-color: #f4f4f4; } .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; } .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 18px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 22px; } .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0,0,0,0.4); background: #fff; border-radius: 5px; } .leaflet-control-layers-toggle { background-image: url(images/layers.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(images/layers-2x.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; } .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; } .leaflet-control-layers-expanded .leaflet-control-layers-list { display: block; position: relative; } .leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: #fff; } .leaflet-control-layers-scrollbar { overflow-y: scroll; overflow-x: hidden; padding-right: 5px; } .leaflet-control-layers-selector { margin-top: 2px; position: relative; top: 1px; } .leaflet-control-layers label { display: block; font-size: 13px; font-size: 1.08333em; } .leaflet-control-layers-separator { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; } .leaflet-default-icon-path { background-image: url(images/marker-icon.png); } .leaflet-container .leaflet-control-attribution { background: #fff; background: rgba(255, 255, 255, 0.8); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; line-height: 1.4; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus { text-decoration: underline; } .leaflet-attribution-flag { display: inline !important; vertical-align: baseline !important; width: 1em; height: 0.6669em; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; white-space: nowrap; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px #fff; } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; } .leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; } .leaflet-popup-content p { margin: 17px 0; margin: 1.3em 0; } .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; pointer-events: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; border: none; text-align: center; width: 24px; height: 24px; font: 16px/24px Tahoma, Verdana, sans-serif; color: #757575; text-decoration: none; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus { color: #585858; } .leaflet-popup-scrolled { overflow: auto; } .leaflet-oldie .leaflet-popup-content-wrapper { -ms-zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } .leaflet-div-icon { background: #fff; border: 1px solid #666; } .leaflet-tooltip { position: absolute; padding: 6px; background-color: #fff; border: 1px solid #fff; border-radius: 3px; color: #222; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .leaflet-tooltip.leaflet-interactive { cursor: pointer; pointer-events: auto; } .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { position: absolute; pointer-events: none; border: 6px solid transparent; background: transparent; content: ""; } .leaflet-tooltip-bottom { margin-top: 6px; } .leaflet-tooltip-top { margin-top: -6px; } .leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before { left: 50%; margin-left: -6px; } .leaflet-tooltip-top:before { bottom: 0; margin-bottom: -12px; border-top-color: #fff; } .leaflet-tooltip-bottom:before { top: 0; margin-top: -12px; margin-left: -6px; border-bottom-color: #fff; } .leaflet-tooltip-left { margin-left: -6px; } .leaflet-tooltip-right { margin-left: 6px; } .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { top: 50%; margin-top: -6px; } .leaflet-tooltip-left:before { right: 0; margin-right: -12px; border-left-color: #fff; } .leaflet-tooltip-right:before { left: 0; margin-left: -12px; border-right-color: #fff; } @media print { .leaflet-control { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Leaflet map inside the banner */
.map-fail { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; color: var(--on-city); }
.map-fail .btn { border-color: currentColor; color: inherit; }
.zoom[hidden] { display: none; }
.map-note { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 1001; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: auto; max-width: 460px; background: rgba(255, 255, 255, .95); color: #14110f; border-radius: 99px; padding: 8px 8px 8px 16px; font-size: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
.map-note a { flex: none; white-space: nowrap; background: #14110f; color: #fff; text-decoration: none; border-radius: 99px; padding: 7px 12px; font-weight: 600; font-size: 13px; }
.tiles-gray { filter: grayscale(1) contrast(1.05); }
.tiles-dim { filter: grayscale(1) invert(1) brightness(.9) contrast(.9); }
.lmap { position: absolute; inset: 0; background: var(--soft); }
.lmap.leaflet-container { font-family: var(--body); }
.lpin { background: none; border: 0; }
.lpin .pin.static { position: absolute; left: 0; top: 0; }
.band-map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .75); color: #333; }
:root:not([data-theme="light"]) .band-map .leaflet-control-attribution { background: rgba(0, 0, 0, .55); color: #ccc; }
.band-map .leaflet-control-attribution a { color: inherit; }
@keyframes halo { 0% { transform: scale(.35); opacity: .45; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes drop { 0% { transform: translateY(-28px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.zoom { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); bottom: 16px; display: grid; gap: 6px; z-index: 1001; }
.zoom button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); color: #14110f; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, .18); }
.zoom button:active { transform: scale(.94); }
.map-bar {
  position: absolute; z-index: 1001; display: flex; align-items: center; gap: 12px;
  top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  max-width: calc(100% - 28px);
  background: rgba(255, 255, 255, .95); color: #14110f; border-radius: 99px; padding: 5px 5px 5px 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.map-bar .place { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.map-bar a { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.map-close { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #14110f; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }

/* When to visit */
.when { padding-block: 72px 8px; }
.when-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.when-head h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; }
.when-head p { color: var(--muted); margin-top: 8px; }
.when-tools { display: flex; align-items: center; gap: 10px; }
.when-tools .seg button { padding: 8px 14px; font-size: 14px; }
.nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; cursor: pointer; transition: border-color .2s; }
.nav-btn:hover { border-color: var(--fg); }
.nav-btn svg { width: 18px; height: 18px; }
.nav-btn.prev svg { transform: rotate(180deg); }
.months-wrap { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)); scroll-padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)); }
.months-wrap::-webkit-scrollbar { display: none; }
.months { display: flex; gap: 20px; width: max-content; padding-bottom: 4px; }
.month {
  scroll-snap-align: start; flex: none; width: 214px; border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 18px 16px; display: grid; gap: 14px; align-content: start; background: var(--bg); position: relative;
}
.month.now { border-color: var(--fg); }
.month-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; }
.month-name { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.tag-now { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--fg); color: var(--bg); border-radius: 99px; padding: 3px 8px; }
.temp { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.temp small { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 2px; vertical-align: top; }
.m-rows { display: grid; gap: 9px; }
.m-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; }
.m-row svg { width: 18px; height: 18px; color: var(--muted); }
.meter { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 1px; }
.meter i { width: 4px; height: 11px; border-radius: 2px; background: var(--line); display: inline-block; }
.meter i.on { background: var(--fg); }
.m-notes { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.m-note { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 3px 8px; }
.m-note.best { color: var(--fg); border-color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }
.when-foot { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* Home: inspiration list */
.inspire-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 20px; padding-block: clamp(64px, 9vw, 104px) 22px; }
.inspire-head h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; line-height: 1; }
.inspire-head p { color: var(--muted); margin-top: 8px; }

.world { list-style: none; margin: 0; padding: 0; }
/* Two columns: a 4:5 rounded photo on the left, the list on the right.
   The photo drifts inside its frame as you scroll (parallax, set by script). */
.world-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); align-items: start;   /* desktop: photo left, list right, 50/50 */   /* same as the space above */ padding-top: clamp(64px, 9vw, 104px); }
.world-grid .inspire-head { padding-top: 0; }
.world-grid .row-name { font-size: clamp(36px, 3.9vw, 64px); }
/* desktop: all ten cities in two columns inside the right half (1–5 left, 6–10 right) */
@media (min-width: 901px) {
  .world-grid .index.world { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; margin-inline: -26px 0; }
  /* thin lines only between cities (none above the first or below the last), and the color strip
     fills exactly the row, with soft corners, so nothing runs past the lines */
  .world-grid .index.world > li { background: linear-gradient(var(--line), var(--line)) no-repeat 0 0 / 100% 1px; transition: background-size .5s cubic-bezier(.65, 0, .35, 1); }   /* the line lines up with the text */
  /* desktop: a slower, softer glide in and out (ease in-out) */
  .wl-anim .world-grid .index.world > li, .world-grid .wl-anim > li { transition: --edge .8s cubic-bezier(.76, 0, .24, 1), background-size .5s cubic-bezier(.65, 0, .35, 1); }
  .world-grid .index.world > li:nth-child(5n + 1), .world-grid .index.world > li.on, .world-grid .index.world > li.on + li { background-size: 100% 0; }
  .world-grid .index.world .row { border-bottom: 0; padding-inline: 26px; }   /* the same breathing room around the number and the plane as on phones */
  .world-grid .index.world .row::before { inset: 0; border-radius: 0; }   /* crisp, square strips like on phones */
  .world-grid .index.world .row-dots { border-radius: 0; }
  .world-grid .index.world .row-name { font-size: clamp(24px, 2.1vw, 36px); }
  .world-grid .index.world .row { padding-block: clamp(18px, 1.9vw, 30px); gap: 12px; }   /* slimmer strips: clean, airy rows */
  .world-grid .index.world .row-meta { font-size: 11px; }
  .world-grid .index.world .w-rank { width: 2em; font-size: 0.3em; }
  .world-grid .world-foot { display: none; }
  /* the photo matches the height of the heading and the list, so both halves end on the same line */
  .world-grid { align-items: stretch; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(48px, 5vw, 80px); }   /* a bit more room for the list, so long names breathe */
  .world-grid .world-photo { aspect-ratio: auto; align-self: stretch; min-height: 420px; position: relative; top: auto; }
}
.world-grid .row { padding-block: clamp(19px, calc(3.2vw - 27px), 22px); }
.world-grid .inspire-head h2 { font-size: clamp(30px, 3.6vw, 52px); }
.world-photo { position: sticky; top: 110px; margin: 0; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: var(--line); isolation: isolate; transform: translateZ(0); }
/* Reveal on scroll (Elementis-style): the photo unveils from the bottom up while it settles from a slow zoom */
.wp-zoom { position: absolute; inset: 0; }
.world-photo.wp-anim { clip-path: inset(100% 0 0 0 round 22px); transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1); }
/* light gray placeholder box: shows the layout while there is no photo (or it hasn't loaded) */
.world-photo { background: #e9eaed; }
:root[data-theme="dark"] .world-photo { background: #1d1e22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .world-photo { background: #1d1e22; } }
.world-photo.wp-anim .wp-zoom { transform: scale(1.3); transition: transform 2s cubic-bezier(.2, .7, .1, 1); }
.world-photo.wp-anim .wp-cap { opacity: 0; transform: translateY(14px); transition: opacity .8s ease .9s, transform 1s cubic-bezier(.2, .7, .1, 1) .9s; }
.world-photo.wp-anim.in { clip-path: inset(0 0 0 0 round 22px); }
.world-photo.wp-anim.in .wp-zoom { transform: none; }
.world-photo.wp-anim.in .wp-cap { opacity: 1; transform: none; }
.world-photo.wp-open { will-change: clip-path; }
.world-photo.wp-open .wp-zoom { will-change: transform; transform-origin: 50% 50%; }
.wp-par { position: absolute; left: 0; right: 0; top: -13%; bottom: -13%; will-change: transform; }
.wp-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.wp-shot.on { opacity: 1; }
.wp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.wp-shot.on img { transform: scale(1); }
.wp-cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; color: #fff; pointer-events: none; }
.wp-cap figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 10px; font: 700 clamp(22px, 2.2vw, 30px)/1 var(--display); letter-spacing: -0.03em; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.wp-cap figcaption.on { opacity: 1; transform: none; transition-delay: .25s; }
.wp-rank, .wp-country { font: 700 12px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; opacity: .85; font-variant-numeric: tabular-nums; }
.wp-country { margin-left: auto; font-weight: 600; }
@media (max-width: 900px) {
  .world-grid { grid-template-columns: 1fr; gap: 36px; }
  .world-photo { position: relative; top: 0; border-radius: 18px; aspect-ratio: 4 / 3; }
  .world-photo.wp-anim { clip-path: inset(100% 0 0 0 round 18px); }
  .world-photo.wp-anim.in { clip-path: inset(0 0 0 0 round 18px); }
  .world-grid .row-name { font-size: clamp(40px, 8vw, 72px); }
  /* no line above the first city or below the last one shown (5, or 10 after "Show all") */
  .world-grid .index.world { border-top: 0; }
  .world-grid .index.world > li:last-child .row,
  .world-grid .index.world:not(:has(.w-extra:not([hidden]))) > li:nth-child(5) .row { border-bottom-color: transparent; }
}
.w-rank { font-family: var(--mono); font-size: 0.22em; letter-spacing: 0.02em; color: var(--muted); width: 2.4em; flex: none; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.row:hover .w-rank, .row:focus-visible .w-rank { color: var(--oc); }
.world-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 20px; }
.world-foot .btn svg { transform: rotate(90deg); transition: transform .2s; }
.world-foot .btn[aria-expanded="true"] svg { transform: rotate(-90deg); }
.world-foot .mono { color: var(--muted); }

/* Mobile: the city in the middle of the screen fills with its color, sliding out
   from the left; when the next city takes over, the old fill slides back left. */
.w-name { display: block; min-width: 0; transform: translateY(-0.055em); }   /* centre the capitals in the row, not the whole letter box */
/* --edge is where the color strip ends (from the screen's left edge). The strip and the text read
   the same value, so the letters turn white exactly where the strip passes over them. */
@property --edge { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* Same look on phones and desktop. --x0 is where the row's strip starts on screen, --rw the row's width,
   --g the strip's overhang on each side (all set by initWorldAnim). On phones --x0 is 0 and the row is full width. */
@media (prefers-reduced-motion: no-preference) {
  .wl-anim li { --edge: var(--x0, 0px); transition: --edge .4s cubic-bezier(.65, 0, .35, 1); }   /* quick, eased in and out */
  .wl-anim li.on { --edge: calc(var(--x0, 0px) + var(--g, 20px) + var(--tab, 26px)); }   /* covers the rank number only */
  .wl-anim li.on.full { --edge: calc(var(--x0, 0px) + var(--rw, 100vw) + 2 * var(--g, 20px)); }   /* then stretches across the whole row */
  .wl-anim .row::before { background: var(--cs, var(--c)); right: auto; width: calc(var(--edge) - var(--x0, 0px)); transform: none; transition: none; }
  .wl-anim .row:hover::before { transform: none; }
  /* the country's dot map on the right of the row, only where the strip has passed (fades in from the left) */
  .wl-anim .row-dots { position: absolute; z-index: -1; top: 0; right: calc(-1 * var(--g, 20px)); pointer-events: none;
    clip-path: inset(0 max(0px, calc(var(--x0, 0px) + var(--rw, 100vw) + 2 * var(--g, 20px) - var(--edge))) 0 0);
    -webkit-mask-image: linear-gradient(to right, transparent 20%, #000 55%); mask-image: linear-gradient(to right, transparent 20%, #000 55%); }
  /* the text is painted with a two-color fill that splits at the strip's edge (a moving mask) */
  .wl-anim .w-rank, .wl-anim .w-name > span, .wl-anim .row-meta .mono {
    --ink: var(--fg);
    background: linear-gradient(to right, var(--oc) 0 var(--edge), var(--ink) var(--edge)) no-repeat;
    background-size: 100vw 100%; background-position: calc(-1 * var(--L, 0px)) 0;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
  /* room for letters that lean past their box (tight letter spacing), so none get cut off */
  .wl-anim .w-name > span, .wl-anim .row-meta .mono { padding-inline: 0.12em; margin-inline: -0.12em; }
  .wl-anim .w-rank, .wl-anim .row-meta .mono { --ink: var(--muted); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .wl-anim .w-rank { width: auto; margin-right: calc(max(var(--gut), env(safe-area-inset-left, 0px)) + 14px); font-size: 0.3em; }
}

/* Home: the search sits in its own soft, city-tinted panel */
.hero:has(.spanel) { padding-top: clamp(16px, 3vw, 32px); }
.ask:has(.spanel) { max-width: none; }
html { overflow-x: clip; }
body { margin: 0; }
.spanel {
  /* Full-width strip on the page background, framed by hairlines top and bottom.
     Only the city text and button take the city color. */
  --sp-bg: var(--bg); --sp-fg: var(--fg); --sp-muted: var(--muted); --sp-line: var(--line); --sp-accent: var(--city); --sp-on: var(--on-city);
  position: relative; border-radius: 0;
  margin-inline: calc(50% - 50vw);
  background: var(--sp-bg); color: var(--sp-fg);
  padding-block: clamp(72px, 11vw, 150px) clamp(72px, 10vw, 140px);
  padding-inline: max(20px, env(safe-area-inset-left, 0px), calc(50vw - 540px));
}
:root:not([data-theme="light"]) .spanel { --sp-accent: var(--city-lit); --sp-on: var(--on-city-lit); --sp-btn: var(--city-btn-lit); }
/* light mode: keep the colored outline, drop the glow */
:root[data-theme="light"] .spanel .where, :root[data-theme="light"] .spanel .where:focus-within { box-shadow: none; }
.spanel .ask-label {
  /* same headline style as "What are you into?" */
  font-family: var(--display); font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; letter-spacing: -0.04em;
  text-transform: none; line-height: 1.1; color: var(--sp-fg); margin-bottom: clamp(22px, 3vw, 32px);
}
/* The search bar: a big rounded box with a city-colored edge and a soft glow of the same color behind it */
.spanel .where {
  position: relative;
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1.1; gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(12px, 1.4vw, 16px) clamp(12px, 1.4vw, 16px) clamp(12px, 1.4vw, 16px) clamp(20px, 2.4vw, 32px);
  border: 2px solid var(--sp-accent); border-radius: 999px;
  background: var(--sp-bg);
  box-shadow: none;   /* no glow: just a solid outline in the city's color */
  transition: none;
}
.spanel .where:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 22%, transparent);   /* focus: a thin ring, no glow */
}
.spanel .where .lens { width: .62em; height: .62em; flex: none; color: var(--sp-accent); transition: color .4s; }
.spanel .where:focus-within .lens { color: var(--sp-fg); }
.spanel .where .lens svg { width: 100%; height: 100%; display: block; }
.qwrap { position: relative; flex: 1; min-width: 0; display: flex; }
/* type-ahead: the rest of the place you're typing appears softly after your text ("Destin" → "Destin, FL"); Tab or → takes it */
.qfill { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; white-space: pre; pointer-events: none; overflow: hidden; max-width: 100%; }
.qfill .qf-t { color: transparent; }
.qfill .qf-r { color: var(--sp-fg, var(--fg)); opacity: .28; }
.qfill .qf-k { align-self: center; margin-left: .5em; font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border: 1px solid var(--sp-line, var(--line)); border-radius: 6px; color: var(--sp-muted, var(--muted)); opacity: .9; }
@media (hover: none) { .qfill .qf-k { display: none; } }
.spanel .where input { color: var(--sp-accent); caret-color: var(--sp-accent); }
.spanel .where input::placeholder { color: var(--sp-fg); opacity: 0; }
.spanel .where input:focus::placeholder { opacity: .9; }
/* keep the text optically centered in the bar */
.spanel .where input { padding: 0; height: 1.25em; line-height: 1.25; }
.spanel .qwrap { align-items: center; position: relative; top: -0.1em; }  /* Familjen Grotesk sits low in its line box; lift it to the optical middle */
.spanel .qghost { line-height: 1.25; }
.qghost {
  position: absolute; inset: 0 auto 0 0; pointer-events: none; white-space: nowrap; overflow: hidden;
  color: var(--sp-accent); transition: color .4s; display: flex; align-items: center;
}
.qghost i {
  display: inline-block; width: 0.06em; height: 0.82em; margin-left: 0.06em; background: var(--sp-accent);
  border-radius: 2px; animation: caret 1.05s steps(1) infinite; transition: background .4s;
}
.qghost.typing i { animation: none; opacity: 1; }
@keyframes caret { 50% { opacity: 0; } }
.qwrap:focus-within .qghost, .qwrap.has-text .qghost { display: none; }
/* the example search reads as a hint, not an answer: muted text, a soft "Try", only the city in color */
.spanel .qghost { color: #fff; font-weight: 500; }
.spanel .qghost .g-try { color: rgba(244, 245, 247, .3); font-weight: 400; margin-right: .3em; }
.spanel .qghost .g-city { color: var(--sp-accent); transition: color .4s; }
.spanel .qghost i { background: rgba(244, 245, 247, .85); }
.spanel .qghost { right: 0; }   /* stay inside the text box, never under the arrow */
/* phones: drop the "Try" to make room, and softly fade any example that's still too long */
@media (max-width: 480px) { .spanel .qghost .g-try { display: none; } }
@media (max-width: 360px) { .spanel .qghost { font-size: .8em; } }   /* the smallest phones: examples a touch smaller so they fit */
@media (max-width: 760px) {
  .spanel .qghost { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
}
.spanel .go { background: var(--sp-accent); color: #fff; transition: background-color .4s, color .4s, transform .2s;   /* one color per city: the button matches the border and the city name */ width: clamp(48px, 5.4vw, 68px); height: clamp(48px, 5.4vw, 68px); }
.spanel .suggest { max-width: none; margin-top: 26px; }
.spanel .sug-head, .spanel .sug-country, .spanel .sug-go, .spanel .sug-city { color: var(--sp-muted); }
.spanel .sug-city b, .spanel .sug:hover .sug-city, .spanel .sug.active .sug-city, .spanel .sug:hover .sug-go, .spanel .sug.active .sug-go { color: var(--sp-fg); }
.spanel .sug:hover, .spanel .sug.active { background: var(--soft); }
.spanel .badge { color: var(--sp-muted); border-color: var(--sp-line); }
.spanel .badge.live { background: var(--sp-accent); color: var(--sp-on); border-color: var(--sp-accent); }
.spanel :focus-visible { outline-color: var(--sp-fg); }

/* Home photo banner: same height as a city banner; the photo follows the city in the search */
.spanel.photo-band {
  /* always light-on-dark over the photo, in both themes */
  --sp-bg: #0f1115; --sp-fg: #f4f5f7; --sp-muted: rgba(244, 245, 247, .7); --sp-line: rgba(244, 245, 247, .22);
  --sp-accent: var(--city-lit); --sp-on: var(--on-city-lit); --soft: rgba(255, 255, 255, .08);
  isolation: isolate; overflow: visible; z-index: 5; color: var(--sp-fg); background: #0b0c0f;
  min-height: clamp(520px, 74vh, 720px); display: flex; align-items: center;
  padding-block: clamp(56px, 8vw, 96px);
}
.pb-inner { position: relative; z-index: 2; width: 100%; }
/* clean stage (when the photos are off): near-black with a soft graphite light from below */
.spanel.photo-band:not(:has(.pb-slide)) { background: radial-gradient(120% 80% at 50% 118%, #24262b 0%, #111215 38%, #050506 72%), #050506; }
.spanel.photo-band:not(:has(.pb-slide)) .pb-photos { display: none; }
/* dark theme: the black-and-white footage fades out at the bottom, so the banner melts into the page */
:root:not([data-theme="light"]) .spanel.photo-band .pb-photos { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); }
/* dark theme: the stage and the globe melt into the page instead of stopping at a hard edge */
:root:not([data-theme="light"]) .spanel.photo-band:not(:has(.pb-slide)) { background: linear-gradient(to bottom, transparent 70%, var(--bg)), radial-gradient(120% 80% at 50% 118%, #24262b 0%, #111215 38%, #000 72%), #000; }
/* light theme: a soft white stage, dark type, a pearl-white globe (Apple's white product pages) */
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) {
  --sp-bg: #ffffff; --sp-fg: #1d1d1f; --sp-muted: rgba(29, 29, 31, .62); --sp-line: rgba(29, 29, 31, .14); --soft: rgba(0, 0, 0, .04);
  --sp-accent: var(--city); --sp-on: var(--on-city);
  background: linear-gradient(to top, var(--bg) 0%, #eff0f2 12%, #ebecef 26%, #eff0f2 38%, #f5f6f7 50%, #fbfbfc 62%, #ffffff 76%);   /* light gray around the globe, fading up to white */
}
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .ask-label { text-shadow: none; }
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .qghost { color: #1d1d1f; }
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .qghost .g-try { color: rgba(29, 29, 31, .38); }
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .qghost i { background: rgba(29, 29, 31, .8); }
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .where { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .25); }
:root[data-theme="light"] .pb-globe .gl-sky { mix-blend-mode: normal; }
/* light theme: the suggestions dropdown under the search bar is white too */
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .suggest { background: rgba(255, 255, 255, .97); border-color: rgba(29, 29, 31, .1); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .22); }
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .sug:hover,
:root[data-theme="light"] .spanel.photo-band:not(:has(.pb-slide)) .sug.active { background: rgba(29, 29, 31, .05); }
:root[data-theme="light"] .gl-label { text-shadow: 0 1px 14px rgba(255, 255, 255, .9); }
:root[data-theme="light"] .gl-label b { color: #1d1d1f; }
:root[data-theme="light"] .gl-label small { color: rgba(29, 29, 31, .62); }
:root[data-theme="light"] .gl-pin:focus-visible .gl-label b { outline-color: #1d1d1f; }
:root[data-theme="light"] .gl-mark { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22)); }
:root[data-theme="light"] .gl-mark circle { fill: #fff; }
:root[data-theme="light"] .gl-dot { background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); }
:root[data-theme="light"] .gl-pulse { border-color: rgba(29, 29, 31, .45); }
:root:not([data-theme="light"]) .spanel.photo-band .pb-globe { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
/* A minimal dotted globe peeks over the bottom of the banner; it turns to each city in the search
   and drops a pin with the name and a short fact (drawn on a canvas, see initGlobe) */
.pb-globe { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; z-index: 1; pointer-events: none; overflow: hidden; }
.pb-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pb-globe .gl-sky { mix-blend-mode: screen; }   /* the sky glow adds light to the photo underneath */
.gl-pin { position: absolute; left: 0; top: 0; will-change: transform; color: inherit; text-decoration: none; }
/* the pin and the city name are a link to the city's page (the rest of the globe lets clicks through) */
.gl-pin .gl-mark, .gl-pin .gl-label { pointer-events: none; cursor: pointer; }
.gl-pin.show .gl-mark, .gl-pin.show .gl-label { pointer-events: auto; }
/* hiding: the pin shrinks quickly back to a dot at its tip, then fades; the name fades out with it */
.gl-pin .gl-mark { transition: transform .38s cubic-bezier(.55, 0, .75, .2), opacity .14s ease .26s, filter .3s; }
.gl-pin .gl-label { transition: opacity .28s ease, transform .4s ease; }
/* showing: it grows up from the dot */
.gl-pin.show .gl-mark { transition: opacity .3s ease, transform 1s cubic-bezier(.16, 1, .3, 1), filter .3s; }
.gl-pin.show:hover .gl-mark { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)) brightness(1.12); }
.gl-pin, .gl-pin:hover .gl-label b, .gl-pin:active .gl-label b { text-decoration: none; -webkit-tap-highlight-color: transparent; }   /* no underline on the city name above the pin */
.gl-pin:focus-visible { outline: none; }
.gl-pin:focus-visible .gl-label b { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
/* the spot on the globe: a small shadow the pin lands on */
.gl-dot { position: absolute; left: -7px; top: -3px; width: 14px; height: 6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); transform: scale(0); transition: transform .5s ease .35s; }
/* the map pin, in the city's color; its tip sits exactly on the city */
.gl-mark { position: absolute; left: -15px; top: -39px; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); opacity: 0; transform: scale(.08); transform-origin: 50% 100%; transition: opacity .3s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.gl-mark path { fill: var(--sp-accent, #fff); }
.gl-mark circle { fill: #000; }
.gl-pulse { position: absolute; left: -18px; top: -9px; width: 36px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); opacity: 0; }
.gl-label { position: absolute; left: 0; bottom: 50px; white-space: nowrap; display: grid; justify-items: center; gap: 5px; text-align: center; opacity: 0; transform: translate(calc(-50% + var(--lx, 0px)), 8px); transition: opacity .5s ease, transform .8s cubic-bezier(.16, 1, .3, 1); text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.gl-label b { font: 700 clamp(20px, 2vw, 28px)/1 var(--display); letter-spacing: -0.03em; color: #fff; }
.gl-label small { font: 600 11px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.gl-pin.show .gl-dot { transform: scale(1); }
.gl-pin.show .gl-mark { opacity: 1; transform: none; }
.gl-pin.show .gl-label { opacity: 1; transform: translate(calc(-50% + var(--lx, 0px)), 0); transition: opacity .5s ease .35s, transform .8s cubic-bezier(.16, 1, .3, 1) .35s; }
.gl-pin.show .gl-pulse { animation: glPulse 2.6s ease-out .7s infinite; }
@keyframes glPulse { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 760px) {
  .pb-globe { height: 62%; }
  .gl-label b { font-size: 18px; }
  .gl-label small { font-size: 10px; }
}
/* Phones: a shorter photo banner and a slimmer search bar */
@media (max-width: 760px) {
  .spanel.photo-band { min-height: clamp(380px, 52vh, 460px); padding-block: 48px; }
  .photo-band .ask-label { font-size: 30px; margin-bottom: 14px; }
  .spanel .where { font-size: 22px; gap: 10px; padding: 6px 6px 6px 16px; border-width: 1.5px; }
  .spanel .go { width: 40px; height: 40px; }
  .spanel .go svg { width: 44%; height: 44%; }
}
.photo-band .where { will-change: transform; transform: translateZ(0); }  /* own layer: the glowing bar never repaints while photos move */
.pb-photos { position: absolute; inset: 0; z-index: 0; contain: strict; overflow: hidden; filter: grayscale(1) contrast(1.05) brightness(.62); }   /* black and white, quietly in the back */
/* Each slide = photo + its own city-color wash, so the whole look crossfades on the GPU in one piece */
.pb-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0; overflow: hidden;
  transition: opacity 2.4s cubic-bezier(.45, 0, .25, 1); will-change: opacity; backface-visibility: hidden;
}
.pb-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 55%); }
.pb-slide.on { opacity: 1; z-index: 2; }
.pb-slide.out { opacity: 0; z-index: 1; transition-duration: 2.8s; }
.pb-slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: var(--ox, 50%) var(--oy, 50%); will-change: transform; backface-visibility: hidden;
  animation: driftA 30s linear infinite alternate; animation-play-state: paused;
}
/* the photo keeps drifting the whole time it's visible, including while it fades out: no stop, no jump */
.pb-slide.on img, .pb-slide.out img { animation-play-state: running; }
.pb-slide.b img { animation-name: driftB; }
.pb-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.pb-slide.vid-on video { opacity: 1; }
/* iPhone fallback: the same MP4 shown as an image (Safari plays it like a silent GIF, no autoplay rules) */
.pb-slide img.pb-vimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; animation: none !important; transform: none !important; pointer-events: none; }
.pb-slide.vimg-on img.pb-vimg { opacity: 1; }
@keyframes driftA { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.17) translate3d(var(--dx, -2%), var(--dy, -1%), 0); } }
@keyframes driftB { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.17) translate3d(var(--dx, -2%), var(--dy, -1%), 0); } }
.pb-photos::after {
  /* darken for legible text (static layer; the city color wash lives on each slide) */
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(5, 5, 6, .74) 0%, rgba(5, 5, 6, .6) 40%, rgba(5, 5, 6, .88) 100%);
}
/* the search bar sits exactly in the vertical middle of the banner; the headline floats above it */
.photo-band .ask-label { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 clamp(30px, 3.8vw, 48px); }   /* breathing room above the search bar */
.photo-band .ask-label { text-align: center; }   /* headline and promise centered over the search bar */
/* the one-line promise under the headline */
.ask-part { display: inline-block; }   /* if the line has to wrap, it wraps after "city," */
.ask-sub { display: block; margin-top: clamp(10px, 1.2vw, 14px); font: 400 clamp(15px, 1.5vw, 19px)/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--sp-muted, var(--muted)); }
.photo-band .suggest { position: absolute; left: 0; right: 0; top: calc(100% + 14px); z-index: 10; margin: 0; max-height: min(56vh, 460px); overflow: auto; background: rgba(10, 11, 14, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; padding: 6px 18px 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.photo-band .sug:hover, .photo-band .sug.active { background: rgba(255, 255, 255, .08); }

.hero:has(.photo-band) { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .pb-slide { transition: opacity .6s; } .pb-slide img { animation: none !important; transform: none; } }

/* Wishlist (team page) */
.wish-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wish { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) 120px; gap: 16px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--line); }
.wish-n { color: var(--muted); }
.wish-name { display: flex; align-items: center; gap: 10px; font: 700 clamp(20px, 2.4vw, 26px) var(--display); letter-spacing: -0.03em; min-width: 0; flex-wrap: wrap; }
.wish-name i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.wish-name small { font: 400 14px var(--body); color: var(--muted); letter-spacing: 0; }
.wish-bar { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.wish-bar b { display: block; height: 100%; border-radius: 99px; }
.wish-count { text-align: right; }
.wish-count b { font: 700 22px var(--display); }
.wish-count small { display: block; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .wish { grid-template-columns: 32px minmax(0, 1fr) auto; } .wish-bar { display: none; } }

/* "What are you into?" lives inside the photo banner, right under the search: one question, two parts */
.photo-band .into { margin-top: clamp(26px, 3.4vw, 40px); }
.photo-band .into-head { margin-bottom: 14px; align-items: baseline; }
.photo-band .into-head h2 { font-size: clamp(20px, 2.2vw, 24px); color: var(--sp-fg); }
.photo-band .into-opt { color: var(--sp-muted); font-size: 14px; }
.photo-band .home-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.photo-band .home-tiles .chip.ic {
  min-height: 104px; padding: 16px 14px 14px; gap: 14px; border-radius: 20px; font-size: 15px;
  background: rgba(15, 17, 21, .58); color: var(--sp-fg); border: 1px solid rgba(255, 255, 255, .14);
}
.photo-band .home-tiles .chip.ic svg { width: 24px; height: 24px; }
.photo-band .home-tiles .chip.ic:hover { border-color: rgba(255, 255, 255, .5); background: rgba(15, 17, 21, .72); }
.photo-band .home-tiles .chip.ic[aria-pressed="true"] { background: var(--sp-accent); color: var(--sp-on); border-color: var(--sp-accent); }
.photo-band .into-nudge { color: var(--sp-fg); }
.go { position: relative; }
.go-n {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  background: var(--sp-fg, #fff); color: #0b0c0f; font: 700 12px/22px var(--body); text-align: center;
  box-shadow: 0 0 0 2px var(--sp-bg, #0f1115);
}
.go-n[hidden] { display: none; }
@media (max-width: 1100px) { .photo-band .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .photo-band .home-tiles {
    display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut);
  }
  .photo-band .home-tiles::-webkit-scrollbar { display: none; }
  .photo-band .home-tiles .chip.ic { flex: 0 0 116px; min-height: 96px; scroll-snap-align: start; }
}

/* Home sections: calm and neutral; the only color is a small city dot */
.home-sec { padding-top: clamp(64px, 9vw, 104px); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 14px 20px; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; line-height: 1; }
.sec-head p { color: var(--muted); margin-top: 8px; }
.season { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.season-card { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; text-decoration: none; transition: border-color .2s, transform .2s; }
.season-card:hover { border-color: var(--fg); }
.sc-top { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.sc-top i, .spot-where i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.sc-name { font: 700 clamp(28px, 3.2vw, 38px)/1.05 var(--display); letter-spacing: -0.04em; margin-top: 10px; }
.sc-temp { font: 700 clamp(40px, 5vw, 60px)/1 var(--display); letter-spacing: -0.05em; margin-top: 6px; }
.sc-temp small { font-size: .4em; color: var(--muted); margin-left: 2px; vertical-align: top; }
.sc-meta { color: var(--muted); font-size: 15px; }
.spot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 28px; }
.spot-where { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.spot h3 { font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: .95; letter-spacing: -0.05em; margin: 14px 0 12px; }
.spot-hook { font-size: clamp(18px, 2vw, 22px); font-weight: 500; }
.spot-d { color: var(--muted); margin: 8px 0 14px; max-width: 60ch; }
.spot-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.region h3 { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 12px; font-weight: 400; }
.region ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.region a { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 clamp(18px, 1.8vw, 21px)/1.3 var(--display); letter-spacing: -0.02em; padding: 5px 0; color: var(--fg); }
.region a i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; transition: transform .2s; }
.region a:hover i { transform: scale(1.6); }
.region a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 760px) {
  .season { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-block: 4px; margin-block: -4px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .season::-webkit-scrollbar { display: none; }
  .season-card { flex: 0 0 74%; scroll-snap-align: start; }
  .spot { grid-template-columns: 1fr; }
  .region ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .region a { font-size: 17px; }
  .spot-actions { justify-content: flex-start; flex-wrap: nowrap; }
  .spot-actions .btn.save { width: 46px; height: 46px; padding: 0; justify-content: center; font-size: 0; gap: 0; flex: none; }
  .spot-actions .btn.primary { white-space: nowrap; }
}

/* Introduction: editorial statement, label on the left, big light text on the right */
.intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: clamp(24px, 3.5vw, 48px) 0; }   /* left-aligned, label above */
.intro-label { color: var(--muted); font-size: 15px; padding-top: .5em; }
.intro-text { font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.5vw, 34px); line-height: 1.22; letter-spacing: -0.02em; color: var(--fg); max-width: 32em; text-wrap: pretty; }
.intro-text b { font-weight: 400; color: var(--fg); }
.intro-text .intro-brand { font-weight: 700; }
.intro-text .iw { transition: opacity .25s linear; }   /* words fill in as you scroll */   /* the name stands out in bold */
@media (max-width: 760px) { .intro { gap: 14px; } }

/* Ready-made trips + book before you go */
/* Ready-made trips on phones: a regular photo on top, then the headline, subhead and the sliding cards */
.item-ph.trip-ph { display: none; }
@media (max-width: 760px) {
  .item-ph.trip-ph { display: block; flex: 0 0 74%; aspect-ratio: auto; align-self: stretch; border-radius: 22px; margin: 0; scroll-snap-align: start; }   /* first in the sliding row, same size as the trip cards */
}

.trip-card { display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: 22px; text-decoration: none; transition: border-color .2s, transform .2s; }
.trip-card:hover { border-color: var(--fg); }
@media (hover: none) { .trip-card:hover, .season-card:hover { transform: none; } }   /* phones: no lift on tap, so nothing gets clipped */
.trip-title { font: 700 clamp(26px, 2.8vw, 34px)/1.05 var(--display); letter-spacing: -0.04em; margin-top: 10px; }
.trip-stops { color: var(--muted); font-size: 15px; }
.trip-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 10px; }
.trip-go svg { width: 16px; height: 16px; transition: transform .2s; }
.trip-card:hover .trip-go svg { transform: translateX(3px); }
.tc-body { display: grid; gap: 8px; align-content: start; }
.item-ph.tc-ph { display: none; }
.item-ph.bk-ph { display: none; }
/* only the first photo in the trips and tickets rows opens up on scroll; on phones the second card slides in instead */
.trips .trip-card:nth-of-type(n+3) .tc-ph, .book-grid .book-card:nth-of-type(n+3) .bk-ph { --ph-clip: none !important; --ph-z: 1 !important; }
@media (min-width: 761px) { .trips .trip-card:nth-of-type(2) .tc-ph, .book-grid .book-card:nth-of-type(2) .bk-ph { --ph-clip: none !important; --ph-z: 1 !important; } }   /* desktop: still only the first opens */
@media (max-width: 760px) { .trips .trip-card, .book-grid .book-card { transform: translateX(var(--sl-x, 0px)); transition: none; } }
.row-nav, .row-prog { display: none; }
@keyframes tripNudge { 0%, 100% { transform: none; } 45% { transform: translateX(-56px); } }
@media (prefers-reduced-motion: reduce) { .trips.nudge > .trip-card, .book-grid.nudge > .book-card { animation: none !important; } }
/* desktop: magazine-style cards: photo on top, tag pill, title, stops, outline button */
@media (min-width: 761px) {
  .trips { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    margin-right: calc(-1 * var(--bleed, 0px)); padding: 4px var(--bleed, 0px) 4px 0; margin-block: -4px; }
  .trips::-webkit-scrollbar { display: none; }
  .trips .trip-card { flex: 0 0 calc((100% - 96px) / 4); scroll-snap-align: start; }
  /* clean: no box, no lines; a crisp rounded photo with the text under it */
  section:has(> .trips) { padding-top: clamp(96px, 11vw, 150px); padding-bottom: clamp(24px, 3vw, 40px); }
  section:has(> .trips) .sec-head { margin-bottom: clamp(36px, 3.6vw, 52px); }
  section:has(> .trips) .sec-head p { margin-top: 14px; }
  .trips.nudge > .trip-card { animation: tripNudge 1.1s cubic-bezier(.65, 0, .35, 1) .2s; }
  .row-nav { display: flex; gap: 10px; flex: none; }
  .rn-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, opacity .2s, transform .15s; }
  .rn-btn:hover:not(:disabled) { border-color: var(--fg); }
  .rn-btn:active:not(:disabled) { transform: scale(.94); }
  .rn-btn:disabled { opacity: .3; cursor: default; }
  .rn-btn svg { width: 18px; height: 18px; }
  .rn-btn[data-dir="-1"] svg { transform: rotate(180deg); }
  .row-prog { display: none !important; position: relative; height: 2px; margin-top: 28px; background: var(--line); border-radius: 2px; overflow: hidden; }
  .row-prog i { position: absolute; inset: 0 auto 0 0; width: var(--pw, 66%); transform: translateX(var(--px, 0%)); background: var(--fg); border-radius: 2px; transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
  .trips .trip-card { padding: 0; gap: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; }
  .item-ph.tc-ph { display: block; margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; }   /* same shape as the inside-page photos */
  .trips .tc-body { padding: 26px 4px 0; gap: 10px; flex: 1; grid-template-rows: auto auto auto 1fr; }
  .trips .tc-body .sc-top .mono { border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; color: var(--muted); }
  .trips .trip-title { margin-top: 8px; font-size: clamp(24px, 2.2vw, 30px); }
  .trips .trip-stops { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .trips .trip-go { justify-self: start; align-self: end; margin-top: 12px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 99px; font-size: 15px; transition: border-color .2s; }
  .trips .trip-card:hover { transform: none; }
  .trips .trip-card:hover .trip-go { border-color: var(--fg); }
  .trips .trip-card:hover .tc-ph img { transform: scale(1.04); }
  .trips .tc-ph img { transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
}
.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* the only line here is the one over the stats below */
.book-card { display: grid; gap: 8px; align-content: start; padding: 24px 24px 28px 0; }   /* no line under the cards: the next section's line is the only one */
.book-card:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.book-card h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-top: 6px; }
.book-card h3 a { text-decoration: none; }
.book-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.book-card p { color: var(--muted); }
.book-card .btn { justify-self: start; margin-top: 10px; }
/* desktop: the same clean photo cards as on phones (photo, pill, title, line, button), three in a row, no lines */
@media (min-width: 761px) {
  /* one row of 4 like Ready-made trips: the photos run off the right edge, arrows show there is more */
  .book-grid { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    margin-right: calc(-1 * var(--bleed, 0px)); padding: 4px var(--bleed, 0px) 4px 0; margin-block: -4px; }
  .book-grid::-webkit-scrollbar { display: none; }
  .book-grid .book-card { flex: 0 0 calc((100% - 96px) / 4); scroll-snap-align: start; }
  .book-grid.nudge > .book-card { animation: tripNudge 1.1s cubic-bezier(.65, 0, .35, 1) .2s; }
  .book-card, .book-card:not(:nth-child(3n + 1)) { padding: 0; border-left: 0; gap: 10px; }
  .book-card h3 { font-size: clamp(24px, 2.2vw, 30px); }
  .book-grid .book-card { display: flex; flex-direction: column; }
  .book-grid .book-card .btn { margin-top: auto; align-self: flex-start; }
  .book-grid .book-card p { margin-bottom: 8px; }
  .item-ph.bk-ph { display: block; margin: 0 0 10px; aspect-ratio: 4 / 3; border-radius: 16px; }
  .book-card .sc-top .mono { border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; color: var(--muted); }
  .book-card .btn { margin-top: 6px; }
  .book-card .bk-ph img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .book-card:hover .bk-ph img { transform: scale(1.04); }
}

/* Trust strip */
.trust { padding-block: clamp(72px, 10vw, 120px) clamp(48px, 7vw, 80px); }
.trust-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.trust-stats div { display: grid; gap: 6px; padding: 24px 20px 0 0; }
.trust-stats b { font: 700 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -0.05em; }
.trust-stats span { color: var(--muted); }
.trust-line { margin-top: clamp(28px, 4vw, 44px); font-size: clamp(18px, 2vw, 22px); color: var(--muted); }
@media (max-width: 760px) {
  .trips .trip-card { flex: 0 0 85%; scroll-snap-align: start; }
  /* phones: same clean cards as desktop: crisp photo on top, text under it, no box; the next card peeks in */
  .trips { gap: 16px; -webkit-mask-image: linear-gradient(to right, transparent var(--gut), #000 var(--gut)); mask-image: linear-gradient(to right, transparent var(--gut), #000 var(--gut)); }   /* nothing of the previous card shows on the left; the next one peeks on the right */
  .trips .item-ph.trip-ph { display: none; }
  .trips .trip-card { padding: 0; gap: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; }
  .item-ph.tc-ph { display: block; margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; }
  .trips .tc-body { padding: 20px 2px 0; gap: 10px; }
  .trips .tc-body .sc-top .mono { border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; color: var(--muted); }
  .trips .trip-title { margin-top: 6px; font-size: 26px; }
  .trips .trip-go { justify-self: start; margin-top: 8px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 99px; font-size: 15px; }
  .trips .trip-card:hover { border-color: transparent; }
  section:has(> .trips) .sec-head { margin-bottom: 28px; }
  .book-grid { grid-template-columns: 1fr; }
  /* phones: clean stacked photo cards, same look as Ready-made trips (no box, no lines) */
  .book-grid { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut);
    -webkit-mask-image: linear-gradient(to right, transparent var(--gut), #000 var(--gut)); mask-image: linear-gradient(to right, transparent var(--gut), #000 var(--gut)); }   /* swipe row like Ready-made trips: next card peeks on the right, nothing on the left */
  .book-grid::-webkit-scrollbar { display: none; }
  .book-grid .book-card { flex: 0 0 85%; scroll-snap-align: start; }
  .book-card, .book-card:not(:nth-child(3n + 1)) { padding: 0; border-left: 0; gap: 10px; }
  .item-ph.bk-ph { display: block; margin: 0 0 10px; aspect-ratio: 4 / 3; border-radius: 16px; }
  .book-card .sc-top .mono { border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; color: var(--muted); }
  .book-card h3 { margin-top: 6px; }
  .book-card .btn { margin-top: 6px; }
  .trust-stats { grid-template-columns: 1fr 1fr; row-gap: 24px; }
}

/* Print or save a trip plan as PDF: a clean, black-on-white sheet built only for paper */
.ph-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; align-self: center; margin-top: 8px; }   /* a touch of air under the title */
@media (max-width: 760px) { .ph-right { width: 100%; justify-content: space-between; } }
/* a round icon; on hover it slides open to say "Print or PDF" */
.print-btn { display: inline-flex; align-items: center; height: 44px; min-width: 44px; padding: 0 13px; gap: 0; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--fg); font: 600 14px var(--body); cursor: pointer; transition: border-color .2s, transform .15s; }
.print-btn svg { width: 18px; height: 18px; flex: none; }
.print-btn span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .4s cubic-bezier(.65, 0, .35, 1), margin .4s cubic-bezier(.65, 0, .35, 1), opacity .25s; }
.print-btn:hover, .print-btn:focus-visible { border-color: var(--fg); }
.print-btn:hover span, .print-btn:focus-visible span { max-width: 120px; margin-left: 8px; opacity: 1; }
.print-btn:active { transform: scale(.95); }
#printSheet { display: none; }
@media print {
  @page { size: auto; margin: 16mm 16mm 18mm; }
  html, body { background: #fff !important; color: #111 !important; }
  body > *:not(#printSheet) { display: none !important; }
  #printSheet { display: block !important; font: 400 11pt/1.45 var(--body); color: #111; }
  .ps-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #111; padding-bottom: 8pt; margin-bottom: 22pt; }
  .ps-logo { font: 700 16pt var(--display); letter-spacing: -0.04em; }
  .ps-top span { font: 600 8pt var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #555; }
  .ps-kicker { font: 600 8.5pt var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #555; }
  .ps-title { font: 700 34pt/1 var(--display); letter-spacing: -0.045em; margin: 6pt 0 8pt; }
  .ps-sub { color: #555; margin-bottom: 18pt; }
  .ps-day { break-before: page; }
  .ps-day:first-of-type { break-before: auto; }
  .ps-day h2 { font: 700 18pt/1 var(--display); letter-spacing: -0.035em; padding: 0 0 8pt; margin: 6pt 0 4pt; border-bottom: 1px solid #111; }
  .ps-item { display: grid; grid-template-columns: 34pt 1fr; gap: 0 10pt; padding: 11pt 0; border-bottom: 1px solid #ddd; break-inside: avoid; }
  .ps-n { font: 300 20pt/1 var(--display); }
  .ps-slot { font: 600 8pt var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #555; }
  .ps-item h3 { font: 700 13pt/1.2 var(--display); letter-spacing: -0.02em; margin: 2pt 0 3pt; }
  .ps-item p { margin: 0; }
  .ps-hook { color: #333; }
  .ps-meta { margin-top: 4pt !important; font-size: 9pt; color: #555; }
  .ps-foot { display: flex; align-items: center; gap: 14pt; margin-top: 26pt; padding-top: 14pt; border-top: 1px solid #111; break-inside: avoid; }
  .ps-foot svg { width: 64pt; height: 64pt; flex: none; }
  .ps-foot b { display: block; font: 700 12pt var(--display); margin-bottom: 2pt; }
  .ps-foot span { color: #555; font-size: 9.5pt; }
}

/* Studio (#admin): calm, open, same type and lines as the site */
.studio { padding-block: clamp(40px, 7vw, 96px) clamp(64px, 8vw, 120px); display: grid; gap: clamp(40px, 5vw, 64px); }
.st-head .mono { color: var(--muted); }
.st-head h1 { font-size: clamp(56px, 9vw, 120px); line-height: .9; font-weight: 700; letter-spacing: -0.055em; margin-top: 14px; }
.st-mode { display: inline-block; margin-left: 6px; font: 600 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; vertical-align: 2px; }
.st-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.st-stats div { display: grid; gap: 8px; padding: 28px 20px 0 0; }
.st-stats b { font: 700 clamp(40px, 5vw, 68px)/1 var(--display); letter-spacing: -0.05em; }
.st-stats span { color: var(--muted); }
.st-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.st-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; min-width: 240px; transition: border-color .2s; }
.st-search:focus-within { border-color: var(--fg); }
.st-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.st-search input { border: 0; outline: 0; background: transparent; font: 500 15px var(--body); color: var(--fg); width: 100%; }
.st-body { display: grid; gap: 22px; }
.st-intro { color: var(--muted); max-width: 640px; }
.st-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.st-row { display: grid; grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1fr) 130px 116px; gap: 20px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--line); }
.st-row-pop { grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1fr) 130px; }
.st-n { font: 300 28px/1 "Plus Jakarta Sans", var(--display); color: var(--muted); }
.st-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -0.035em; text-decoration: none; min-width: 0; }
.st-name small { font: 400 14px var(--body); color: var(--muted); letter-spacing: 0; }
a.st-name:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.st-bar-w { height: 4px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.st-bar-w b { display: block; height: 100%; border-radius: 99px; background: var(--fg); }
.st-num { text-align: right; color: var(--muted); font-size: 14px; }
.st-num b { font: 700 24px var(--display); color: var(--fg); letter-spacing: -0.03em; margin-right: 2px; }
.st-num small { display: block; font-size: 12px; }
.st-next { justify-self: end; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--fg); font: 600 13px var(--body); cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.st-next:hover { border-color: var(--fg); }
.st-next[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.st-empty { padding: 56px 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.st-empty h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.04em; }
.st-empty p { color: var(--muted); max-width: 520px; }
.st-table { border-top: 1px solid var(--line); }
.st-tr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 140px 80px 40px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
a.st-tr { transition: background .2s; }
a.st-tr:hover { background: var(--soft); }
a.st-tr:hover .st-open svg { transform: translateX(3px); }
.st-th { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-block: 14px; }
.st-city { display: flex; align-items: center; gap: 14px; font: 600 17px var(--display); letter-spacing: -0.02em; min-width: 0; }
.st-city i { width: 4px; height: 22px; border-radius: 4px; flex: none; }
.st-muted { color: var(--muted); }
.st-pill { display: inline-flex; font: 600 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px; color: var(--muted); }
.st-pill.on { border-color: var(--fg); color: var(--fg); }
.st-open { justify-self: end; padding-right: 8px; }
.st-open svg { width: 16px; height: 16px; transition: transform .2s; }
@media (max-width: 760px) {
  .st-stats { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .st-bar, .st-tools { width: 100%; }
  .st-search { flex: 1 1 100%; min-width: 0; }
  .st-row, .st-row-pop { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px 14px; }
  .st-row .st-bar-w { display: none; }
  .st-row .st-next { grid-column: 2 / -1; justify-self: start; }
  .st-n { font-size: 22px; }
  .st-tr { grid-template-columns: minmax(0, 1fr) auto 24px; }
  .st-tr > :nth-child(2), .st-tr > :nth-child(4) { display: none; }
}

/* Scroll reveal: blocks fade in and drift up a little as they come into view */
.rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s cubic-bezier(.45, 0, .25, 1), transform 1s cubic-bezier(.45, 0, .25, 1);   /* soft ease in and out */ transition-delay: var(--rv-d, 0s); }
.rv.rv-in { opacity: 1; transform: none; }
/* the city rows have their own strip transition; keep the fade-up too (otherwise the rows just pop in) */
.wl-anim li.rv, .wl-anim .world-grid .index.world > li.rv, .world-grid .wl-anim > li.rv { transition: opacity 1s cubic-bezier(.45, 0, .25, 1) var(--rv-d, 0s), transform 1s cubic-bezier(.45, 0, .25, 1) var(--rv-d, 0s), --edge .4s cubic-bezier(.65, 0, .35, 1), background-size .5s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* "Where to go" cards: three small rows with living icons */
.sc-rows { display: grid; gap: 8px; margin-top: 6px; }
.sc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--muted); font-size: 15px; }
.sc-row svg { width: 20px; height: 20px; color: var(--fg); overflow: visible; }
.sc-row .ai { color: var(--fg); }
.ai * { transform-box: view-box; transform-origin: 12px 12px; }
.ai-spin { animation: aiSpin 16s linear infinite; }
.ai-spin.ai-slow { animation-duration: 28s; }
.ai-glow { animation: aiGlow 3.2s ease-in-out infinite; }
.ai-drift { animation: aiDrift 4.5s ease-in-out infinite; }
.ai-drift2 { animation: aiDrift 4.5s ease-in-out -2.2s infinite reverse; }
.ai-drop { animation: aiDrop 1.4s cubic-bezier(.45, 0, .55, 1) infinite; opacity: 0; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes aiDrift { 0%, 100% { transform: translateX(-0.8px); } 50% { transform: translateX(1.2px); } }
@keyframes aiDrop { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(3.5px); opacity: 0; } }
.sc-row .meter i { transform-origin: bottom; }
.season:not(.rv) .sc-row .meter i.on, .season.rv-in .sc-row .meter i.on { animation: aiBar .7s cubic-bezier(.45, 0, .25, 1) both; }
.sc-row .meter i.on:nth-child(2) { animation-delay: .12s; }
.sc-row .meter i.on:nth-child(3) { animation-delay: .24s; }
@keyframes aiBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ai *, .sc-row .meter i { animation: none !important; opacity: 1; } }

/* "What are you into?": when a box is picked, its icon does one small, fitting move */
.chip.ic svg { transform-origin: 50% 55%; }
.chip.ic[aria-pressed="true"] svg { animation: icPop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.chip.ic[data-interest="must"][aria-pressed="true"] svg { animation: icStar .8s cubic-bezier(.34, 1.4, .64, 1) both; }
.chip.ic[data-interest="gem"] svg { overflow: visible; }
.chip.ic[data-interest="gem"][aria-pressed="true"] svg { animation: none; }
.chip.ic .gem-body { transform-box: view-box; transform-origin: 12px 12px; }
.chip.ic[aria-pressed="true"] .gem-body { animation: gemSlide .75s cubic-bezier(.22, .9, .3, 1) both; }   /* glides in from the right with a turn, then settles */
.chip.ic .gem-spark { opacity: 0; transform-box: view-box; transform-origin: 21px 1.7px; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)); }
.chip.ic[aria-pressed="true"] .gem-spark { animation: gemShine 1.3s cubic-bezier(.45, 0, .25, 1) .55s both; }   /* then a little star twinkles on its top corner */
@keyframes gemSlide { 0% { transform: translateX(9px) rotate(28deg); opacity: 0; } 55% { opacity: 1; } 75% { transform: translateX(-1px) rotate(-5deg); } 100% { transform: none; opacity: 1; } }
@keyframes gemShine { 0% { opacity: 0; transform: scale(0) rotate(0); } 30% { opacity: 1; transform: scale(1.15) rotate(70deg); } 60% { opacity: 1; transform: scale(.85) rotate(120deg); } 100% { opacity: 0; transform: scale(0) rotate(170deg); } }
.chip.ic[data-interest="food"][aria-pressed="true"] svg { animation: none; }
.chip.ic[aria-pressed="true"] .fs-fork { animation: fsUp .7s cubic-bezier(.45, 0, .25, 1) both; }   /* the fork slides up into place, */
.chip.ic[aria-pressed="true"] .fs-knife { animation: fsUp .7s cubic-bezier(.45, 0, .25, 1) .14s both; }   /* the knife a split second after */
@keyframes fsUp { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.chip.ic[data-interest="outdoors"][aria-pressed="true"] svg { animation: none; }
.chip.ic[aria-pressed="true"] .sun-rise { animation: sunRise 1s cubic-bezier(.45, 0, .25, 1) both; }   /* the sun rises up from behind the wave line */
@keyframes sunRise { from { transform: translateY(12px); } to { transform: none; } }
.chip.ic[data-interest="culture"][aria-pressed="true"] svg { animation: icRise .7s cubic-bezier(.34, 1.4, .64, 1) both; }
.chip.ic[data-interest="nights"][aria-pressed="true"] svg { animation: icClink .75s cubic-bezier(.45, 0, .25, 1) .5s both; transform-origin: 50% 95%; }   /* the glass sways once the olive lands */
.chip.ic .olive { opacity: 0; transform: translateY(-11px); }
.chip.ic[data-interest="nights"] svg { overflow: visible; }   /* so the olive is seen dropping in from above */
.chip.ic[aria-pressed="true"] .olive { animation: oliveDrop .62s cubic-bezier(.5, 0, .75, .25) both, oliveSettle .45s cubic-bezier(.25, .75, .4, 1) .62s forwards; }   /* falls in, then a tiny bounce */
@keyframes oliveDrop { 0% { opacity: 0; transform: translateY(-11px); } 25% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes oliveSettle { 0%, 100% { opacity: 1; transform: translateY(0); } 40% { transform: translateY(-1.2px); } }
.chip.ic[data-interest="kids"][aria-pressed="true"] svg { animation: none; overflow: visible; }
.chip.ic[aria-pressed="true"] .kid-a { animation: kidHop .75s cubic-bezier(.45, 0, .25, 1) both; }   /* the one on the left hops first, */
.chip.ic[aria-pressed="true"] .kid-b { animation: kidHop .75s cubic-bezier(.45, 0, .25, 1) .16s both; }   /* the other a split second later */
@keyframes kidHop { 0%, 100% { transform: translateY(0); } 28% { transform: translateY(-3.5px); } 52% { transform: translateY(0); } 72% { transform: translateY(-1.6px); } }
@keyframes icPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes icStar { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.2) rotate(72deg); } 100% { transform: scale(1) rotate(72deg); } }
@keyframes icGem { 0% { transform: scale(1); filter: none; } 35% { transform: scale(1.16) translateY(-2px); filter: drop-shadow(0 0 6px rgba(255,255,255,.75)); } 100% { transform: scale(1); filter: none; } }
@keyframes icWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } }
@keyframes icBob { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-4px); } 65% { transform: translateY(1px); } }
@keyframes icRise { 0% { transform: translateY(4px) scale(.9); opacity: .4; } 60% { transform: translateY(-2px) scale(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes icClink { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(16deg); } 60% { transform: rotate(-6deg); } 85% { transform: rotate(2deg); } }
@keyframes icHop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-4px); } 50% { transform: translateY(0); } 70% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .chip.ic[aria-pressed="true"] svg, .chip.ic[aria-pressed="true"] .olive, .chip.ic[aria-pressed="true"] .gem-body, .chip.ic[aria-pressed="true"] .gem-spark, .chip.ic[aria-pressed="true"] .sun-rise, .chip.ic[aria-pressed="true"] .kid-a, .chip.ic[aria-pressed="true"] .kid-b, .chip.ic[aria-pressed="true"] .fs-fork, .chip.ic[aria-pressed="true"] .fs-knife { animation: none !important; } .chip.ic[aria-pressed="true"] .olive { opacity: 1; transform: none; } }

/* Accounts */
.acct-btn { white-space: nowrap; font: 600 14px var(--body); border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 99px; padding: 7px 14px; cursor: pointer; text-decoration: none; transition: border-color .2s; }
.acct-btn:hover { border-color: var(--fg); }
/* Spanish nav words are longer: on narrow phones drop "Ciudades" (the logo already goes home) so the header never overflows */
@media (max-width: 430px) { :lang(es) .nav a[href="#home"] { display: none; } }
/* language: a quiet globe in the header that opens a small menu */
.lang { position: relative; display: flex; }
.lang-btn { width: 36px; height: 36px; margin: 0 -6px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; transition: background-color .2s; }
.lang-btn svg { width: 19px; height: 19px; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--soft); }
.lang-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.lang-pop { position: absolute; right: -10px; top: calc(100% + 10px); z-index: 80; min-width: 190px; padding: 6px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .04);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.lang.open .lang-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.lang-pop button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); font: 500 14px var(--body); text-align: left; cursor: pointer; }
.lang-pop button:hover, .lang-pop button:focus-visible { background: var(--soft); outline: none; }
.lang-pop svg { width: 16px; height: 16px; opacity: 0; }
.lang-pop [aria-checked="true"] svg { opacity: 1; }
:root:not([data-theme="light"]) .lang-pop { background: #111318; border-color: #262a31; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8); }
:root:not([data-theme="light"]) .lang-pop button:hover, :root:not([data-theme="light"]) .lang-btn:hover, :root:not([data-theme="light"]) .lang-btn[aria-expanded="true"] { background: #1c1f25; }
/* the smallest phones: tighten the header so it fits without sideways scrolling */
@media (max-width: 360px) { .item-body .actions { flex-wrap: wrap; } .nav { gap: 10px; } .nav a { font-size: 13px; } .acct-btn { padding: 6px 10px; font-size: 13px; } }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; text-decoration: none; background: var(--fg); color: var(--bg); font: 700 15px/1 var(--display); letter-spacing: 0; padding-bottom: 0.12em; }  /* Familjen Grotesk sits low; lift the letter to the optical center */
.nav .avatar, .nav .avatar:hover, .nav .avatar[aria-current="page"] { color: var(--bg); }
.avatar[aria-current="page"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 8, .55); backdrop-filter: blur(6px); animation: fadein .2s ease; }
.sheet-wrap[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.sheet { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 36px); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); animation: rise .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.sheet h2 { font-size: clamp(28px, 4vw, 34px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.sheet .sub { color: var(--muted); margin-top: 10px; }
.sheet-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); color: var(--fg); cursor: pointer; display: grid; place-items: center; font-size: 20px; line-height: 1; }
.sheet-perks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.sheet-perks li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.sheet-perks svg { width: 16px; height: 16px; flex: none; }
.oauth { display: grid; gap: 10px; margin-top: 24px; }
.oauth button, .email-form button { width: 100%; justify-content: center; padding: 14px 20px; font-size: 16px; }
.oauth svg { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.email-form { display: grid; gap: 10px; }
.email-form input { width: 100%; font: 500 16px var(--body); color: var(--fg); background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; outline: 0; }
.email-form input:focus { border-color: var(--fg); }
.sheet-note { margin-top: 16px; color: var(--muted); font-size: 13px; }
.sheet-done { text-align: center; display: grid; gap: 10px; justify-items: center; padding-block: 12px; }
.sheet-done .big { font-size: 44px; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 14px; justify-content: space-between; background: var(--fg); color: var(--bg); border-radius: 18px; padding: 12px 12px 12px 18px; font-size: 15px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5); animation: rise .3s ease; }
.toast[hidden] { display: none; }
.toast .btn { background: var(--bg); color: var(--fg); border-color: var(--bg); padding: 9px 16px; flex: none; }
.toast .tx { background: transparent; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 18px; padding: 4px 6px; }
.acct { padding-block: clamp(32px, 6vw, 72px); display: grid; gap: clamp(28px, 4vw, 44px); }
.acct h1 { font-size: clamp(48px, 9vw, 112px); line-height: .9; font-weight: 700; letter-spacing: -0.055em; }
.acct-meta { color: var(--muted); margin-top: 14px; }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acct-stat { border: 1px solid var(--line); border-radius: 24px; padding: 22px; display: grid; gap: 6px; text-decoration: none; }
.acct-stat b { font: 700 clamp(36px, 5vw, 52px) var(--display); letter-spacing: -0.05em; line-height: 1; }
.acct-stat span { color: var(--muted); }
a.acct-stat:hover { border-color: var(--fg); }
.acct-rows { border-top: 1px solid var(--line); }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.acct-row small { display: block; color: var(--muted); font-size: 14px; }
.acct-row .danger { color: #e5484d; border-color: color-mix(in srgb, #e5484d 40%, transparent); }
.signin-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; margin-bottom: 24px; }
.signin-nudge p { color: var(--muted); }
.signin-nudge b { color: var(--fg); }
@media (max-width: 760px) { .acct-stats { grid-template-columns: 1fr 1fr; } .nav { gap: 14px; } }

/* Home: interests as part of the search */
.into { margin-top: clamp(44px, 6vw, 64px); }
.into-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 22px; }
.into-head h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.035em; }
.into-opt { color: var(--muted); font-size: 15px; }
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-tiles .chip.ic {
  display: grid; justify-items: start; align-content: space-between; gap: 24px; width: auto; min-width: 0;
  min-height: 150px; padding: 22px 22px 20px; border-radius: 24px; text-align: left;
  font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; white-space: normal;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.home-tiles .chip.ic svg { width: 32px; height: 32px; stroke-width: 1.5; }
.home-tiles .chip.ic:hover { border-color: var(--fg); }
.home-tiles .chip.ic[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.into-nudge { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--fg); }
.into-nudge svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.scroll-btns { display: inline-flex; gap: 8px; }
@media (max-width: 760px) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-tiles .chip.ic { min-height: 116px; padding: 18px; font-size: 17px; gap: 18px; }
  .home-tiles .chip.ic svg { width: 28px; height: 28px; }
  .scroll-btns { display: none; }
}

/* City page controls */
.controls { display: grid; gap: 14px; padding-block: 36px 4px; }
.top-list { margin-top: 12px; }
.ctrl-label { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.03em; }
.ctrl-label + .view-row, .ctrl-label + .chips { margin-bottom: 14px; }
.view-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.view-hint { color: var(--muted); font-size: 15px; }

/* Living rankings */
.rank-note { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); padding-top: 6px; }
.rank-note svg { width: 15px; height: 15px; color: var(--city); }
.move { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 99px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.move svg { width: 12px; height: 12px; }
.move.up { color: var(--fg); background: var(--soft); }
.move.down { color: var(--muted); }
.move.new { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.move.hot { background: var(--city-band, var(--city)); color: #fff; }

/* Planner */
.band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(24px, 4vw, 40px); }
.pill { border: 1px solid currentColor; border-radius: 99px; padding: 6px 12px; }
.band-link { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.plan { padding-block: 16px 0; }
.band + .plan { padding-top: 0; }
.q-block { display: grid; gap: 16px; padding-block: 32px; border-bottom: 1px solid var(--line); }
.q-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.q-head h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; }
.q-head .step { color: var(--muted); flex-basis: 100%; }
.q-note { color: var(--muted); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { padding: 10px 18px; font-size: 15px; }
/* Interest tiles: icon over label, fill with the city color when picked */
.chips:has(.chip.ic) {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  margin-inline: calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gut), env(safe-area-inset-left, 0px));
  scroll-padding-inline: max(var(--gut), env(safe-area-inset-left, 0px));
}
.chips:has(.chip.ic)::-webkit-scrollbar { display: none; }
.chips .chip.ic {
  display: grid; justify-items: start; align-content: space-between; gap: 18px; flex: 1 0 112px;
  min-width: 112px; min-height: 92px; padding: 14px 14px 12px; border-radius: 16px; text-align: left;
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: normal;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.chips .chip.ic svg { width: 22px; height: 22px; }
.chips .chip.ic:active { transform: scale(.97); }
.chips .chip.ic[aria-pressed="true"] { background: var(--city-band, var(--city)); color: #fff; border-color: var(--city-band, var(--city)); }   /* picked: white icon and text on the city color */
@media (max-width: 760px) {
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    margin-inline: calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gut), env(safe-area-inset-left, 0px));
  }
  .chips::-webkit-scrollbar { display: none; }
}
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 99px; background: var(--soft); justify-self: start; }
.seg button { border: 0; background: transparent; padding: 10px 20px; border-radius: 99px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--muted); transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgba(13, 15, 19, .12), 0 0 0 1px var(--line); }

.plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-block: 48px 8px; }
.plan-head h2 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.plan-head .mono { color: var(--muted); }
.quick-note { color: var(--muted); max-width: 60ch; padding-top: 8px; }
/* automatic town pages */
.auto-load { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 40px 0 80px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.auto-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--city); animation: autoPulse 1.1s ease-in-out infinite; }
@keyframes autoPulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.auto-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.auto-note svg { width: 15px; height: 15px; color: var(--city); }
.auto-note .auto-sub { flex-basis: 100%; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 15px; color: var(--muted); }
.auto-credit { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.auto-near { padding-top: clamp(56px, 7vw, 88px); }
.auto-out { padding-top: clamp(20px, 3vw, 32px); }
.auto-h { font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-bottom: 24px; }
.quick-note b { color: var(--fg); }
.day-label { display: flex; align-items: center; gap: 14px; padding-top: 36px; }
.day-label { --day: var(--city); }
:root:not([data-theme="light"]) .day-label { --day: var(--city-lit, var(--city)); }   /* dark theme: a shade that reads on black */
.day-label .mono { color: var(--day); font-weight: 500; }
.day-label .rule { flex: 1; height: 1px; background: var(--day); }   /* Day 1, Day 2... and their line in the city color */
/* no double line: the last pick before the next day's label drops its own divider */
.more-sep { list-style: none; display: flex; align-items: center; gap: 14px; padding-top: 36px; --day: var(--city); }
:root:not([data-theme="light"]) .more-sep { --day: var(--city-lit, var(--city)); }
.more-sep .mono { color: var(--day); font-weight: 500; }
.more-sep .rule { flex: 1; height: 1px; background: var(--day); }
.list > .item:has(+ .more-sep) { border-bottom: 0; }
.list:has(+ .day-label) > .item:last-child, .list:has(+ .day-label) > li:last-child .item { border-bottom: 0; }
#planOut > .list:last-child > .item:last-child, #planOut > .list:last-child > li:last-child .item { border-bottom: 0; }   /* no line between the last pick and "Where to stay" */
.plan-item { padding-block: clamp(28px, 4vw, 44px); }
.slot { color: var(--fg); background: var(--soft); border-radius: 99px; padding: 2px 10px; margin-right: 4px; }
.match { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.match svg, .req-done svg { width: 14px; height: 14px; }

.request { margin-top: 56px; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--soft); display: grid; gap: 14px; }
.request h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; }
.request p { color: var(--muted); max-width: 52ch; }
.req-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.req-form input { flex: 1 1 240px; min-width: 0; padding: 12px 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; }
.req-form input:focus { outline: none; border-color: var(--fg); }
.req-done { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }

@media (max-width: 760px) {
  .sug-city { font-size: 18px; }
  .sug { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; }
}

/* City index */
.index { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding-block: 22px; border-bottom: 1px solid var(--line);
  text-decoration: none; position: relative; isolation: isolate;
}
.row::before {
  content: ""; position: absolute; inset: 0 calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px)));
  background: var(--c); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.2,.7,.2,1); z-index: -1;
}
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row:hover, .row:focus-visible { color: var(--oc); outline: none; }
.row:hover .row-meta, .row:focus-visible .row-meta { color: var(--oc); }
.row-dots { display: none; }
.wl-anim .row-dots { display: none; }   /* the city strips stay clean: no dot map */
@media (max-width: 760px) { .wl-anim .row-dots { opacity: 0.45; } }   /* phones: a softer dot map so the country name reads easily */
.row-name { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.05em; display: flex; align-items: center; gap: 0.25em; min-width: 0; }
.row-name .dot { width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--c); flex: none; }
.row:hover .dot { background: var(--oc); }
.row-meta { text-align: right; color: var(--muted); display: grid; gap: 4px; }
/* a full strip swaps the country for the little plane from the city banner, nudging right like a "go" arrow */
.row-meta { position: relative; }
.w-plane { position: absolute; right: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; color: var(--oc); opacity: 0; pointer-events: none; }
.w-plane svg { display: block; width: 100%; height: 100%; rotate: 90deg; }
.w-country { transition: opacity .25s; }
.wl-anim li.full .w-country { opacity: 0; }
.wl-anim li.full .w-plane { opacity: 1; transition: opacity .3s .3s; animation: w-plane-nudge 1.1s .3s ease-in-out infinite; }
@keyframes w-plane-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }
@media (max-width: 760px) { .w-plane { width: 22px; height: 22px; margin-top: -11px; } @keyframes w-plane-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } } }
@media (prefers-reduced-motion: reduce) { .wl-anim li.full .w-plane { animation: none; } }
.row.soon .row-name { color: var(--muted); }
.row.soon .dot { background: transparent; box-shadow: inset 0 0 0 0.05em var(--muted); }

.section-label { display: flex; justify-content: space-between; align-items: baseline; padding-block: 56px 18px; color: var(--muted); gap: 16px; }

.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 72px; }
.why h3 { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.why p { color: var(--muted); max-width: 32ch; }

/* City band */
.band { --on-city: #fff; background: var(--city-band, var(--city)); color: #fff; }   /* white text only; light colors get a deeper shade */
.band .wrap { padding-block: clamp(40px, 6vw, 80px) clamp(36px, 5.5vw, 64px); }
.back { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; opacity: .8; }
/* top row of a city banner: the promise on the left, the way back on the right */
.band-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 0; }
.band-top + h1 { margin-top: -0.13em; }   /* the city name sits close under its promise */
.band-top .back { flex: none; white-space: nowrap; }
/* "All destinations" sits on a solid pill of the city color, so the dot map never runs through the text */
.band .back { opacity: 1; padding: 9px 16px; border-radius: 99px; background: var(--city-band, var(--city)); border: 1px solid rgba(255, 255, 255, .35); transition: background .2s, color .2s; }
.band .back:hover { background: #fff; color: var(--city-band, var(--city)); }
.band-rank { display: flex; align-items: center; gap: 6px; margin-top: clamp(16px, 2.2vw, 28px); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.4; color: rgba(255, 255, 255, .72); }
.rank-ic { flex: none; width: 1.45em; height: 1.45em; color: #fff; transform: translateY(0.1em); }   /* laurel wreath: the "travelers' favorite" mark */
.band-rank b { font-weight: 600; color: #fff; }
/* the laurel: every few seconds it swells a touch, a little star sparkles on its top right tip, and it settles back */
.rank-wrap { position: relative; display: inline-flex; flex: none; }
.rank-wrap .rank-ic { animation: rankPop 8s cubic-bezier(.45, 0, .25, 1) 1.2s infinite; transform-origin: 50% 60%; }
.rank-spark { position: absolute; width: .62em; height: .62em; right: -0.22em; top: -0.18em; color: #fff; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); animation: rankSpark 8s cubic-bezier(.45, 0, .25, 1) 1.2s infinite; }
@keyframes rankPop { 0% { scale: 1; } 5% { scale: 1.14; } 13% { scale: 1.14; } 20%, 100% { scale: 1; } }
@keyframes rankSpark { 0%, 4% { opacity: 0; transform: scale(0) rotate(0deg); } 8% { opacity: 1; transform: scale(1.15) rotate(55deg); } 12% { opacity: 1; transform: scale(.85) rotate(100deg); } 17%, 100% { opacity: 0; transform: scale(0) rotate(150deg); } }
@media (prefers-reduced-motion: reduce) { .rank-wrap .rank-ic, .rank-spark { animation: none; } }
.back:hover { opacity: 1; }
.band .kicker { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 3.4vw, 40px); letter-spacing: -0.03em; }
.band h1 { font-size: min(210px, calc((100vw - 48px) / (var(--len) * 0.72)), calc(1560px / (var(--len) * 0.72))); line-height: 0.82; font-weight: 700; letter-spacing: -0.035em; margin-left: -0.04em; }
.band h1.acc { padding-top: 0.14em; }
@media (min-width: 761px) { .band h1 { margin-top: 0.03em; } .band h1.h-dip { margin-bottom: 0.2em; } }   /* and letters that dip below (y, j, g) clear the line under it */   /* desktop: tall letters (B, S, t) stay clear of the "10 best things to do in" line */   /* room for accents (Jacó) so they never touch the line above */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 6vw, 64px); margin-bottom: 0; padding-top: 20px; border-top: 1px solid currentColor; }
.facts dt { opacity: .7; margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 500; }
/* Phones: a shorter, calmer city banner. Less padding, a small back link, and the facts as one sliding row of chips */
@media (max-width: 760px) {
  .band .wrap { padding-block: 26px 20px; }
  .band + .plan .controls { padding-top: 28px; }   /* less of a gap between the banner and "What are you into?" */
  .band-top { align-items: center; margin-bottom: -2px; }
  .band-top + h1 { margin-top: -0.08em; }
  /* phones: the way back becomes a small round arrow in the corner */
  .band-top .back { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); opacity: 1; margin: -6px -4px -6px 0; }
  .band-top .back span { display: none; }
  .back svg { width: 16px; height: 16px; }
  .band-rank { margin-top: 12px; font-size: 15px; gap: 5px; align-items: flex-start; }
  .rank-ic { margin-top: 0; transform: translateY(1px); }
  .band .kicker { font-size: 18px; margin-bottom: 2px; }
  .band h1 { line-height: .86; font-size: min(74px, calc((100vw - 2 * var(--gut)) / (var(--len) * 0.72))); }
  .facts {
    display: flex; gap: 8px; margin-top: 18px; padding-top: 0; border-top: 0;
    overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
  }
  .facts::-webkit-scrollbar { display: none; }
  .facts > div {
    flex: none; display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
    padding: 7px 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  }
  .facts dt { margin: 0; font-size: 10px; }
  .facts dd { font-size: 14px; }
  .facts > div:nth-child(4) { display: none; }   /* the long local tip stays on bigger screens only */
  .band:has(.band-map:not([hidden])) .wrap { min-height: 340px; }
}

/* Filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 28px 8px; }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 99px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Items */
.list { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: clamp(64px, 12vw, 148px) minmax(0, 1fr); gap: clamp(12px, 3vw, 40px); padding-block: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.num { font-family: "Plus Jakarta Sans", var(--display); font-weight: 200; font-size: clamp(44px, 9vw, 112px); line-height: 0.85; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.item-body { display: grid; gap: 12px; max-width: 64ch; min-width: 0; }
/* Photo for each pick: found automatically on Wikipedia by the place's name (or set by hand with "img").
   Phones and small screens: a wide photo under the category line. Big screens: beside the text, on the right. */
.item-ph { margin: 4px 0 2px; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #e9eaed; position: relative; display: block; }   /* a light gray box holds the place until (or if no) photo loads */
:root[data-theme="dark"] .item-ph { background: #1d1e22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .item-ph { background: #1d1e22; } }
.item-ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(var(--ph-z, 1)); transition: opacity .6s ease; }
.item-ph.has img { opacity: 1; }
.item .item-ph.has, .book-card .bk-ph { cursor: zoom-in; }
.book-card .bk-ph { cursor: pointer; }
.item .item-ph.has img { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .item .item-ph.has:hover img { transform: scale(var(--ph-z, 1)) scale(1.03); } }
/* the full-screen photo */
.lb { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(96px, 12vh, 140px); background: rgba(10, 10, 12, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .38s ease, backdrop-filter .38s ease, -webkit-backdrop-filter .38s ease; cursor: zoom-out; }
.lb.in { background: rgba(10, 10, 12, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lb-img { max-width: 100%; max-height: 100%; border-radius: 16px; object-fit: contain; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-radius .45s; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.lb-cap { position: fixed; left: 0; right: 0; bottom: clamp(24px, 4vh, 44px); text-align: center; color: #fff; display: grid; gap: 6px; justify-items: center; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); padding-inline: 20px; }
.lb.in .lb-cap { opacity: 1; transform: none; transition-delay: .15s; }
.lb-t { font: 700 clamp(22px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -0.03em; }
.lb-w { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.lb-c { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .65; text-underline-offset: 3px; cursor: pointer; }
.lb-c:hover { opacity: 1; }
.lb-x { position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .3s ease, background .2s; }
.lb.in .lb-x { opacity: 1; }
.lb-x:hover { background: rgba(255, 255, 255, .26); }
.lb.out { background: rgba(10, 10, 12, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.lb.out .lb-cap, .lb.out .lb-x { opacity: 0; transition-delay: 0s; }
html.lb-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lb-img { transition: none; } }
/* no photo we trust for this place: in the guide lists the box simply goes away (the cards on the home page keep their soft gray box) */
.item .item-ph.none { display: none; }
@media (max-width: 760px) { .item .item-ph:not(.has) { display: none; } }   /* phones: no placeholder box in the text flow, so nothing can open or close under your eyes */
.trip-card.ph-gone, .book-card.ph-gone { display: none !important; }
.season.trips > .trip-card, .book-grid > .book-card { transition: opacity .6s ease; }
.season.trips.ph-wait > .trip-card, .book-grid.ph-wait > .book-card { opacity: 0; }
/* a 5% black veil over every photo, so very bright photos still read as a box against the white page */
.item-ph.has::after, .world-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .05); pointer-events: none; z-index: 1; border-radius: inherit; }
.item-ph figcaption { z-index: 2; }
/* same open-up as the home page photo: the box starts inset and zoomed, and opens to full size as you scroll */
.item-ph.ph-open { clip-path: var(--ph-clip, none); will-change: clip-path; }
/* photo credit: a tiny "i" in the corner; the words only slide out on hover or tap */
.item-ph figcaption { position: absolute; right: 8px; bottom: 8px; }
.item-ph figcaption a { display: flex; align-items: center; gap: 0; height: 20px; min-width: 20px; padding: 0; box-sizing: border-box; border-radius: 99px;
  font: 600 10px/1 var(--mono); letter-spacing: .04em; color: #fff; text-decoration: none; background: rgba(0, 0, 0, .28); opacity: .7; transition: opacity .25s, background .25s; }
.item-ph figcaption a b { flex: none; width: 20px; height: 20px; display: grid; place-items: center; font-weight: 700; line-height: 1; }   /* the i sits dead center in its circle */
.item-ph figcaption a span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s cubic-bezier(.65, 0, .35, 1), margin .35s; }
.item-ph figcaption a:hover, .item-ph figcaption a:focus-visible { opacity: 1; background: rgba(0, 0, 0, .55); }
.item-ph figcaption a:hover span, .item-ph figcaption a:focus-visible span { max-width: 120px; margin-right: 8px; }
@media (min-width: 1100px) {
  .item { position: relative; }
  .item .item-ph { position: absolute; right: 0; top: clamp(32px, 5vw, 56px); width: clamp(260px, 26vw, 400px); aspect-ratio: 4 / 3; margin: 0; }
  .item { min-height: 0; transition: min-height .6s cubic-bezier(.4, 0, .2, 1); }   /* desktop: the space kept for a photo eases away if none comes */
  .item:has(.item-ph:not(.none)) { min-height: calc(clamp(260px, 26vw, 400px) * .75 + 2 * clamp(32px, 5vw, 56px)); }
}
.cat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); }
.cat svg { width: 16px; height: 16px; }
.cat-t { display: inline-flex; align-items: center; gap: 8px; }   /* the icon always stays with its category */
.item h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1; font-weight: 700; overflow-wrap: anywhere; hyphens: auto; }   /* long Swedish names ("Trädgårdsföreningen") break instead of widening the page */
.hook { font-size: clamp(18px, 2vw, 21px); font-weight: 500; line-height: 1.35; }
.desc { color: var(--muted); }
/* the facts under each pick: three quiet icon + value pairs that wrap naturally */
.meta { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 2px; font: 500 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--fg); }
.meta > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.meta svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
/* Phones: keep controls on one line and let them slide sideways instead of wrapping */
@media (max-width: 760px) {
  .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .seg::-webkit-scrollbar { display: none; }
  .controls { grid-template-columns: minmax(0, 1fr); }
  .view-row > .seg { min-width: 0; flex: 1 1 100%; }
  .seg { display: flex; justify-self: stretch; scroll-snap-type: x proximity; }
  .seg button { flex: none; white-space: nowrap; padding: 10px 16px; font-size: 14px; scroll-snap-align: start; }
  /* the trip-length switch: four equal buttons that always fit the screen */
  .view-row > .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .view-row > .seg button { padding: 10px 4px; text-align: center; }
  .actions { flex-wrap: nowrap; gap: 8px; }
  .item-body > * { min-width: 0; }
  /* phones: the big rank number sits beside the category line, so the title and text get the full width */
  .item { --ipad: 30px; grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; padding-block: var(--ipad); }
  .plan-item { --ipad: 26px; }
  .item > .num { position: absolute; left: 0; top: var(--ipad); font-size: 40px; line-height: .8; }
  .item-body { gap: 10px; }
  /* breathing room between the groups: number + category / title + promise / description / facts / buttons */
  .item-body > h2 { margin-top: 12px; }
  .item-body > .hook { margin-top: -2px; }
  .item-body > .desc { margin-top: 8px; }
  .item-body > .meta { margin-top: 8px; }
  .item-body > .match { margin-top: 2px; }
  .item-body > .actions { margin-top: 10px; }
  .item-body > .cat:first-child { min-height: 32px; padding-left: 62px; align-content: center; }
  .actions .btn { flex: none; white-space: nowrap; }
  /* Map and Save become round icon buttons so Book + Map + Save fit on one row */
  .actions .btn:not(.primary) { width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
  .actions .btn:not(.primary) svg { width: 18px; height: 18px; }
  .actions .btn.save[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}
@media (max-width: 360px) {
  .view-row > .seg button { font-size: 13px; padding: 10px 2px; letter-spacing: -0.01em; }
}
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 12px 20px; border-radius: 99px; font-weight: 600; font-size: 15px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: border-color .2s, transform .15s; }
.btn:hover { border-color: var(--fg); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn svg { width: 16px; height: 16px; }
.save[aria-pressed="true"] { border-color: var(--fg); }
.save[aria-pressed="true"] svg { fill: currentColor; }

/* Stay strip */
.stay { padding-block: 72px 24px; }
.stay.essentials { padding-top: 40px; }
@media (min-width: 761px) { .essentials .stay-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.stay h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.02; font-weight: 700; margin-bottom: 28px; }
.stay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* Where to stay: clean cards with a bed icon in a soft city-tinted tile, a quiet number, and a "See places to stay" link */
.stay-card { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 20px; text-decoration: none; display: grid; gap: 8px; align-content: start; transition: border-color .25s, transform .25s; }
.stay-card:hover { border-color: var(--fg); }   /* boxes stay still on hover: only the outline and icons change */
.stay-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.stay-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--fg); transition: background .3s, color .3s; }
.stay-ic svg { width: 27px; height: 27px; }
.stay-card:hover .stay-ic { background: var(--fg); color: var(--bg); }   /* black and white */
.stay-n { color: var(--muted); }
.stay-card h3 { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
@media (hover: none) { .stay-card:hover { transform: none; } }   /* phones: no lift on tap, so the top edge never gets clipped */
.stay-card p { color: var(--muted); }
.stay-go { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.stay-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: border-color .25s, background .25s, color .25s; }
.stay-arrow svg { width: 15px; height: 15px; transition: transform .25s; }
.stay-card:hover .stay-arrow { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.stay-arrow svg { display: block; }   /* the arrow sits dead center in its circle */

.next { display: block; text-decoration: none; padding-block: 64px; border-top: 1px solid var(--line); margin-top: 48px; }
.next .mono { color: var(--muted); }
.next strong { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(48px, 10vw, 128px); letter-spacing: -0.055em; line-height: .95; }
.next:hover strong { color: var(--muted); }

.empty { padding-block: 64px; display: grid; gap: 16px; max-width: 44ch; }
.empty h2 { font-size: clamp(32px, 5vw, 48px); }
.empty p { color: var(--muted); }

/* Footer: logo and one line on the left, three short link columns on the right, a quiet bottom bar */
.site-foot { border-top: 1px solid var(--line); margin-top: clamp(48px, 7vw, 96px); }
.site-foot .wrap { padding-block: clamp(48px, 6vw, 80px) 32px; display: grid; gap: clamp(48px, 6vw, 80px); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.ft-brand { display: grid; gap: 14px; max-width: 360px; }
.ft-logo { font: 700 clamp(32px, 3.4vw, 44px)/1 var(--display); letter-spacing: -0.05em; text-decoration: none; justify-self: start; }
.ft-brand p { color: var(--muted); }
.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(150px, auto)); gap: 48px; }
.ft-h { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ft-col a { text-decoration: none; font-size: 15px; font-weight: 500; transition: opacity .2s; }
.ft-col a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.ft-note { max-width: 56ch; flex: 1 1 320px; }
.ft-lang { display: flex; gap: 4px; }
.ft-cta, .ft-mark { display: none; }
.ft-lang button { border: 0; background: transparent; color: var(--muted); font: 500 13px var(--body); padding: 6px 10px; border-radius: 99px; cursor: pointer; transition: color .2s, background .2s; }
.ft-lang button:hover { color: var(--fg); }
.ft-lang button[aria-pressed="true"] { color: var(--fg); background: var(--soft); }
@media (max-width: 760px) {
  /* phones: an invitation, two quiet columns of links, a fine print line, and the Spot10 wordmark edge to edge */
  .site-foot .wrap { gap: 0; padding-block: 56px 36px; }
  .ft-cta { display: grid; gap: 18px; padding-bottom: 44px; }
  .ft-cta-h { font: 700 44px/0.95 var(--display); letter-spacing: -0.05em; }
  .ft-cta .btn { justify-self: start; }
  .ft-top { display: block; border-top: 1px solid var(--line); padding-top: 32px; }
  .ft-brand { display: none; }
  .ft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .ft-col, .ft-col ul { display: contents; }
  .ft-h, .ft-desk { display: none; }
  .ft-col a { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
  .ft-bottom { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin-top: 44px; padding-top: 18px; }
  .ft-note { grid-column: 1 / -1; grid-row: 2; flex: none; font-size: 12px; line-height: 1.5; }
  .ft-lang button { padding: 4px 8px; }
  .ft-mark { display: block; margin: 36px 0 0 -0.04em; font: 700 calc((100vw - 2 * var(--gut)) / 3.02)/0.78 var(--display); letter-spacing: -0.065em; text-decoration: none; color: var(--fg); padding-bottom: 0.06em; white-space: nowrap; }
}
.info-page { padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px); display: grid; gap: 24px; justify-items: start; }   /* sits in the same centered column as the header and footer; the text keeps a comfortable reading width */
.info-page > * { max-width: 820px; }
.info-page .back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.info-page h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: .92; font-weight: 700; letter-spacing: -0.055em; }
.info-body h2 { color: var(--fg); font-size: clamp(20px, 1.9vw, 24px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 28px 0 0; }
.info-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.info-body li::marker { color: var(--muted); }
.info-body a { color: inherit; text-underline-offset: 3px; }
.info-body .info-mail { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.info-body .info-mail a { color: var(--fg); }
.info-body .info-date { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.info-body { display: grid; gap: 16px; font-size: clamp(18px, 1.8vw, 21px); color: var(--muted); max-width: 60ch; }
.info-trust { margin-top: clamp(24px, 4vw, 48px); }   /* the stats live on the About page now */
.info-trust .trust-stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
.info-trust .trust-stats div { align-content: start; }
.info-trust .trust-line { margin-top: 36px; }

.fade { animation: fade .45s ease both; }
@keyframes fade { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .why { grid-template-columns: 1fr; gap: 28px; padding-block: 48px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* stay cards slide sideways on phones */
  .stay-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); gap: 16px; padding-block: 2px; margin-block: -2px; }   /* a little room so the swipe row never clips the cards' outlines */
  .stay-grid::-webkit-scrollbar { display: none; }
  .stay-card { flex: 0 0 78%; scroll-snap-align: start; padding: 18px 20px 16px; }
  .stay-top { margin-bottom: 10px; }
  .stay-ic { width: 42px; height: 42px; border-radius: 13px; }
  .row-meta .mono:last-child { display: none; }
  .kbd, .hit-c { display: none; }
  .hit { grid-template-columns: 36px minmax(0, 1fr); }
  .sbtn span { display: none; }
  .sbtn { padding: 14px; }
  .sbox input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}