:root {
  --font-display: "Archivo";
  --font-body: "Space Grotesk";
  --ink: #172a44;
  --muted: #5f7789;
  --paper: #f7fcfe;
  --sand: rgba(230, 208, 174, 0.62);
  --cream: rgba(246, 230, 205, 0.68);
  --blue: #2e9bff;
  --pink: #ff6388;
  --green: #24b47e;
  --glass: rgba(255, 255, 255, 0.64);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.84);
  --shadow: 0 24px 70px rgba(23, 54, 77, 0.15);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body), sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(46, 155, 255, 0.55);
  outline-offset: 4px;
}

::selection {
  color: white;
  background: var(--blue);
}

.real-app {
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.glass-panel {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 3vw, 44px);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(135deg, var(--pink), #7d63e9 52%, var(--blue));
  box-shadow: 0 14px 34px rgba(67, 112, 168, 0.24);
}

.brand-mark i {
  position: absolute;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

/*
 * REAL is four letters, so the monogram is a four-step diagonal cascade from
 * the top-left to the bottom-right of the 46px tile. Every letter needs its
 * own rule: an unpositioned `i` falls back to static placement and clips
 * against `overflow: hidden`, which is exactly what happened when this was a
 * three-letter mark and a fourth letter was added.
 */
.brand-mark i:nth-child(1) {
  top: 5px;
  left: 5px;
}

.brand-mark i:nth-child(2) {
  top: 13px;
  left: 14px;
  opacity: 0.85;
}

.brand-mark i:nth-child(3) {
  top: 21px;
  left: 23px;
  opacity: 0.85;
}

.brand-mark i:nth-child(4) {
  top: 29px;
  left: 32px;
}

.brand-words {
  display: flex;
  flex-direction: column;
}

.brand-words strong {
  font-family: var(--font-display), sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.brand-words small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.menu-button,
.back-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 20px;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}

.menu-button span,
.back-button span {
  font-size: 17px;
  font-weight: 400;
}

.menu-button:hover,
.back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 70px rgba(23, 54, 77, 0.2);
}

/* Home */

/* Near-white watercolour paper: warm sand in the bottom-left, latte cream in
   the bottom-right, cool ice-blue where the water sits. */
.home-view {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(105% 78% at 2% 100%, var(--sand), transparent 48%),
    radial-gradient(85% 75% at 102% 104%, var(--cream), transparent 52%),
    radial-gradient(75% 65% at 104% -6%, rgba(202, 230, 245, 0.62), transparent 58%),
    linear-gradient(180deg, #fdffff 0%, #f5fbfe 56%, #edf7fc 100%);
}

.home-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Paper grain — the thing that keeps all this white from going digital-flat. */
.home-atmosphere::after {
  position: absolute;
  inset: 0;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  content: "";
}

.orb {
  position: absolute;
  width: 38vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
}

.orb-blue {
  top: -22vw;
  left: -12vw;
  background: #75c7ff;
}

.orb-pink {
  right: -18vw;
  bottom: -25vw;
  background: #ff9eb8;
}

.contour {
  position: absolute;
  width: 38vw;
  height: 23vw;
  border: 1px solid rgba(82, 132, 160, 0.12);
  border-radius: 50%;
  transform: rotate(-17deg);
}

.contour::before,
.contour::after {
  position: absolute;
  content: "";
  inset: 7%;
  border: inherit;
  border-radius: inherit;
}

.contour::after {
  inset: 15%;
}

/* Ocean rings, kept out over open water so they read as contours rather than
   stray circles printed across the land. */
.contour-one {
  top: 20vh;
  right: -9vw;
}

.contour-two {
  bottom: 4vh;
  left: -11vw;
}

.home-map-wrap {
  position: absolute;
  inset: 2vh -1vw 3vh 21vw;
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity 850ms ease 120ms, transform 1200ms cubic-bezier(0.2, 0.75, 0.15, 1) 120ms;
}

.is-loaded .home-map-wrap {
  opacity: 1;
  transform: none;
}

.national-map {
  position: relative;
  width: 100%;
  height: 100%;
}

.national-map svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.map-grid line {
  stroke: rgba(70, 117, 145, 0.07);
  stroke-width: 1;
  stroke-dasharray: 3 10;
}

.land {
  stroke: rgba(122, 160, 183, 0.5);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

/* No `filter` here: the group carries filter="url(#relief)" as a presentation
   attribute, and any CSS filter declaration wins over it — which silently
   replaced the relief with a plain shadow. The shadow is the last primitive of
   that filter chain instead. */
.land-us {
  fill: #fff;
}

.land-mx {
  fill: rgba(255, 255, 255, 0.9);
}

.map-contours path {
  fill: none;
  stroke: #7fb2cf;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.contour-far {
  stroke-width: 26;
  opacity: 0.06;
}

.contour-near {
  stroke-width: 10;
  opacity: 0.1;
}

.range-body {
  fill: #fff;
  stroke: rgba(102, 142, 170, 0.62);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.range-shade {
  fill: rgba(108, 148, 180, 0.32);
  stroke: none;
}

.map-terrain {
  opacity: 0.86;
}

.pines {
  fill: #4d8065;
  opacity: 0.58;
}

/* The trip itself: one line through real stops, west coast to the northeast. */
.map-route {
  stroke-width: 5.4;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 7px rgba(45, 90, 122, 0.18));
}

.destination-dot {
  cursor: pointer;
  outline: none;
}

.dot-core {
  fill: white;
  stroke: var(--dot);
  stroke-width: 4px;
  filter: drop-shadow(0 5px 8px rgba(24, 53, 73, 0.25));
  transition: r 180ms ease;
}

.dot-pulse {
  fill: none;
  stroke: rgba(46, 155, 255, 0.22);
  stroke-width: 1px;
  opacity: 0.55;
  transform-origin: center;
}

.destination-dot:nth-of-type(3n + 1) .dot-pulse {
  animation: dot-pulse 3s ease-in-out infinite;
}

.destination-dot:nth-of-type(3n + 2) .dot-pulse {
  animation: dot-pulse 3s ease-in-out 700ms infinite;
}

.destination-dot:nth-of-type(3n) .dot-pulse {
  animation: dot-pulse 3s ease-in-out 1.4s infinite;
}

.dot-label {
  fill: var(--ink);
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 5px;
  paint-order: stroke;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0.76;
  transition: opacity 180ms ease, transform 180ms ease;
}

.destination-dot.is-active .dot-label {
  opacity: 1;
  transform: translateX(3px);
}

.map-tooltip {
  position: absolute;
  z-index: 8;
  right: 5%;
  bottom: 15%;
  display: flex;
  width: 220px;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: 18px;
  pointer-events: none;
}

.map-tooltip small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.map-tooltip strong {
  margin-top: 5px;
  font-family: var(--font-display), sans-serif;
  font-size: 18px;
  font-weight: 850;
}

.map-tooltip span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.home-hero {
  position: absolute;
  z-index: 10;
  bottom: clamp(32px, 7vh, 76px);
  left: clamp(20px, 4vw, 58px);
  max-width: 620px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(28px);
  transition: opacity 700ms ease 240ms, transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 240ms;
}

.is-loaded .home-hero {
  opacity: 1;
  transform: none;
}

.hero-kicker,
.destination-kicker,
.section-number {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* The wordmark lockup: condensed navy caps, a gradient rule, then the tagline
   spaced out under it — the hero art, set in type. */
.home-hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(52px, min(8vw, 16vh), 126px);
  font-stretch: 64%;
  font-variation-settings: "wdth" 64;
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.hero-rule {
  position: relative;
  display: block;
  width: min(100%, 575px);
  height: 3px;
  margin: clamp(14px, 1.8vh, 22px) 0 clamp(11px, 1.5vh, 16px);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), #7965e7 52%, var(--blue));
}

.hero-rule::after {
  position: absolute;
  top: 50%;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateY(-50%);
  content: "";
}

.hero-tagline {
  display: block;
  width: fit-content;
  color: transparent;
  background: linear-gradient(90deg, var(--pink), #7965e7 55%, var(--blue));
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.home-hero > p {
  max-width: 460px;
  margin: clamp(18px, 2.4vh, 26px) 0 0;
  color: #4a6376;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.6;
}

.primary-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 24px;
  margin-top: 25px;
  padding: 0 22px;
  color: white;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 16px 34px rgba(19, 35, 49, 0.2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 180ms ease, background 180ms ease;
}

.primary-cta:hover {
  transform: translateY(-2px);
  background: #203848;
}

.primary-cta span {
  font-size: 16px;
}

.home-legend {
  position: absolute;
  z-index: 11;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(22px, 4vh, 42px);
  display: grid;
  min-width: 220px;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 15px 17px;
  border-radius: 18px;
}

.home-legend > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-legend small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
}

.home-legend p {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  padding-top: 9px;
  color: var(--muted);
  border-top: 1px solid rgba(92, 113, 128, 0.12);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legend-a,
.legend-l,
.who {
  display: inline-flex;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: white;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}

.legend-a,
.who-a {
  background: var(--blue);
}

.legend-l,
.who-l {
  background: var(--pink);
}

.scroll-cue {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: -35px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  transform: rotate(90deg);
}

.scroll-cue span {
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.scroll-cue i {
  width: 52px;
  height: 1px;
  overflow: hidden;
  background: rgba(92, 113, 128, 0.26);
}

.scroll-cue i::after {
  display: block;
  width: 24px;
  height: 100%;
  background: var(--blue);
  content: "";
  animation: cue 2.2s ease-in-out infinite;
}

/* Destination */

/* Same near-white paper as the home view, tinted only slightly by the
   destination's own accent, so a guide page feels like the hero art too. */
.destination-view {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 75% 10%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 30%),
    radial-gradient(95% 70% at 0% 104%, var(--sand), transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, #fdffff), #f2fafd 62%, #e9f5fa 100%);
}

.destination-header .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.destination-world {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
}

.world-sun {
  position: absolute;
  top: 16%;
  right: 12%;
  width: min(17vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-2) 44%, white);
  box-shadow: 0 0 100px color-mix(in srgb, var(--accent-2) 55%, transparent);
  opacity: 0.52;
}

.world-ridge {
  position: absolute;
  right: -8%;
  bottom: 13%;
  left: -8%;
  height: 34%;
  transform: skewY(-5deg);
  transform-origin: bottom left;
  clip-path: polygon(0 70%, 13% 38%, 27% 68%, 43% 25%, 57% 61%, 72% 30%, 86% 58%, 100% 20%, 100% 100%, 0 100%);
}

.world-ridge-back {
  background: color-mix(in srgb, var(--accent) 14%, white);
  opacity: 0.34;
}

.world-ridge-front {
  bottom: -1%;
  height: 30%;
  background: color-mix(in srgb, var(--accent) 34%, #e6f1f2);
  opacity: 0.2;
  filter: blur(1px);
}

.world-water {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 23%;
  background:
    repeating-linear-gradient(175deg, rgba(255, 255, 255, 0.34) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 11%, #e6f2f8));
}

.destination-title {
  position: absolute;
  z-index: 8;
  top: 12%;
  left: clamp(20px, 4vw, 56px);
  display: flex;
  /* Stay inside the left column so the title and its status pill never run
     under the map, which starts at 40%. */
  max-width: min(calc(100% - 112px), 640px);
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px;
  /* The heading is wider than the left column at large sizes, so its box (and
     the "O" of SAN DIEGO) overlapped the map and swallowed clicks on the map
     style buttons. Nothing in this block is interactive, so it opts out of the
     pointer entirely rather than restoring it on children the way
     .site-header does for its buttons. */
  pointer-events: none;
}

.destination-title h1 {
  max-width: 820px;
  margin: 9px 0 5px;
  font-family: var(--font-display), sans-serif;
  /* Three limits at once, and every breakpoint keeps all three — only
     --title-space and the clamp change below. Width, viewport height (a short
     wide window pushed the mood line into the mode switcher), and the name's own
     length: condensed caps run about 0.5em each, so a long name stays on one
     line instead of wrapping onto the panels beneath it. The floor is the
     deliberate exception — "Rocky Mountain National Park" wraps to two lines at
     the floor rather than shrinking to an unreadable single line. */
  --title-space: min(40vw - 76px, 584px);
  --title-floor: 58px;
  --title-fluid: clamp(48px, min(8vw, 12vh), 116px);
  font-size: max(
    var(--title-floor),
    min(var(--title-fluid), calc(var(--title-space) / (var(--chars, 12) * 0.5)))
  );
  font-stretch: 72%;
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.destination-title p {
  max-width: 550px;
  margin: 0;
  color: #466071;
  font-size: clamp(12px, 1.15vw, 16px);
}

/* Its own row above the title: a condensed heading fills the left column, so a
   pill beside it would sit on top of the map panel. */
.destination-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}

/* Part of the kicker line rather than a pill of its own, so it costs the
   heading no vertical room and never reaches the map panel. */
.guide-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4d6675;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.guide-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.mode-switcher {
  position: absolute;
  z-index: 15;
  top: 29%;
  left: clamp(20px, 4vw, 56px);
  display: flex;
  padding: 5px;
  border-radius: 18px;
}

.mode-switcher button {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  align-items: flex-start;
  padding: 11px 17px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.mode-switcher button.active {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 22px rgba(34, 67, 86, 0.1);
}

.mode-switcher small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mode-switcher span {
  margin-top: 3px;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.category-bar {
  position: absolute;
  z-index: 16;
  top: 40%;
  left: clamp(20px, 4vw, 56px);
  display: flex;
  gap: 6px;
}

.category-bar button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  color: #4f6877;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  font-weight: 720;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.category-bar button:hover {
  transform: translateY(-1px);
}

.category-bar button.active {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
}

.category-bar i {
  display: inline-flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  background: var(--category, var(--ink));
  font-size: 7px;
  font-style: normal;
}

/* ------------------------------------------------------------ real map */

.local-map {
  position: absolute;
  z-index: 5;
  top: 22%;
  right: 2%;
  bottom: 16%;
  left: 40%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  background: #eef4f8;
  box-shadow:
    0 26px 64px rgba(23, 54, 77, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.map-slot,
.real-map {
  position: absolute;
  inset: 0;
}

.real-map {
  background: #eef4f8;
}

/* Leaflet chrome, restyled to match the field-guide look. */
.real-map .leaflet-control-zoom {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(23, 54, 77, 0.18);
}

.real-map .leaflet-control-zoom a {
  width: 30px;
  height: 30px;
  color: var(--ink);
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  font-size: 17px;
  line-height: 30px;
}

.real-map .leaflet-control-zoom a:first-child {
  border-radius: 12px 12px 0 0;
}

.real-map .leaflet-control-zoom a:last-child {
  border-radius: 0 0 12px 12px;
}

.real-map .leaflet-control-attribution {
  padding: 2px 8px;
  border-radius: 9px 0 0 0;
  background: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body), sans-serif;
  font-size: 9px;
}

.real-map .leaflet-control-attribution a {
  color: var(--muted);
}

/* Map pin — a teardrop in the category colour with its label beside it. */
.real-pin {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  color: white;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 50% 50% 50% 15%;
  background: var(--pin);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pin) 42%, transparent);
  font-size: 11px;
  font-weight: 850;
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}

.real-pin i {
  font-style: normal;
  transform: rotate(45deg);
}

.real-pin:hover,
.real-pin.is-active {
  transform: rotate(-45deg) scale(1.18);
}

.real-pin-label {
  position: absolute;
  top: 6px;
  left: 40px;
  max-width: 124px;
  padding: 4px 8px;
  color: var(--ink);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 15px rgba(33, 67, 88, 0.14);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

.real-pin-label.is-active {
  color: white;
  background: var(--ink);
}

.map-style-switch {
  position: absolute;
  z-index: 500;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
}

.map-style-switch button {
  padding: 5px 10px;
  color: var(--muted);
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.map-style-switch button.active {
  color: white;
  background: var(--ink);
}

/* Lives in the left column's empty space, not over the map. */
.unmapped-note {
  position: absolute;
  z-index: 6;
  top: 47%;
  left: clamp(20px, 4vw, 56px);
  width: min(31%, 330px);
  margin: 0;
  padding: 10px 12px;
  color: var(--muted);
  border-left: 2px solid rgba(46, 155, 255, 0.35);
  font-size: 10px;
  line-height: 1.5;
}

.place-unmapped {
  margin: 0 0 10px;
  padding: 8px 10px;
  color: var(--muted);
  border-radius: 9px;
  background: rgba(46, 155, 255, 0.09);
  font-size: 10px;
  line-height: 1.45;
}

.route-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(19, 35, 49, 0.28);
  padding-bottom: 2px;
}

.route-link:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.real-toast {
  position: fixed;
  z-index: 9000;
  bottom: 26px;
  left: 50%;
  padding: 10px 16px;
  color: white;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 14px 40px rgba(19, 35, 49, 0.34);
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.real-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.empty-filter {
  position: absolute;
  z-index: 600;
  top: 50%;
  left: 50%;
  padding: 14px 18px;
  border-radius: 14px;
  color: var(--muted);
  font-size: 11px;
  transform: translate(-50%, -50%);
}

.place-card {
  position: absolute;
  z-index: 24;
  top: 39%;
  right: clamp(18px, 3vw, 42px);
  width: min(330px, calc(100vw - 36px));
  padding: 22px;
  border-radius: 24px;
  animation: card-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.icon-button {
  display: inline-grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.66);
  cursor: pointer;
}

.close-card {
  position: absolute;
  top: 13px;
  right: 13px;
  color: var(--muted);
  font-size: 18px;
}

.place-card-topline {
  display: flex;
  align-items: center;
  gap: 9px;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.category-chip i {
  display: inline-flex;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  background: var(--chip);
  font-size: 7px;
  font-style: normal;
}

.day-part {
  padding-left: 9px;
  color: var(--muted);
  border-left: 1px solid rgba(92, 113, 128, 0.18);
  font-size: 8px;
}

.place-kind {
  margin: 18px 0 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.place-card h3 {
  margin: 0;
  padding-right: 20px;
  font-family: var(--font-display), sans-serif;
  font-size: 27px;
  font-weight: 880;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.place-area {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.place-note {
  margin: 16px 0;
  color: #3f5969;
  font-size: 12px;
  line-height: 1.55;
}

.place-facts,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.place-facts > span,
.tag-row > span {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
}

.place-facts b {
  margin-right: 4px;
  color: var(--ink);
}

.tag-row {
  margin-top: 8px;
}

.directions-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  color: var(--ink);
  border-top: 1px solid rgba(92, 113, 128, 0.14);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.directions-link span {
  font-size: 15px;
}

.day-timeline {
  position: absolute;
  z-index: 20;
  right: clamp(18px, 3vw, 42px);
  bottom: 18px;
  left: clamp(18px, 3vw, 42px);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 12px;
  border-radius: 21px;
}

.timeline-intro {
  min-width: 105px;
  padding: 4px 12px;
  border-right: 1px solid rgba(92, 113, 128, 0.16);
}

.timeline-intro small {
  display: block;
  color: var(--muted);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.timeline-intro strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.timeline-steps {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.timeline-steps button {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease;
}

.timeline-steps button.active {
  background: rgba(255, 255, 255, 0.76);
}

.timeline-steps i {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  color: white;
  border-radius: 50%;
  /* Matches the map pin for the same place, so the list and the map read as
     one thing. Falls back to the REAL gradient if a category has no colour. */
  background: var(--pin, linear-gradient(135deg, var(--pink), var(--blue)));
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.timeline-steps span {
  min-width: 0;
  text-align: left;
}

.timeline-steps small,
.timeline-steps b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-steps small {
  color: var(--muted);
  font-size: 6px;
  text-transform: uppercase;
}

.timeline-steps b {
  margin-top: 2px;
  font-size: 8px;
}

.destination-intro {
  position: absolute;
  z-index: 6;
  bottom: 17%;
  left: clamp(20px, 4vw, 56px);
  width: min(320px, 32vw);
  margin: 0;
  color: #415c6b;
  font-size: 11px;
  line-height: 1.55;
}

.growing-guide {
  position: absolute;
  z-index: 12;
  top: 33%;
  right: clamp(20px, 5vw, 70px);
  width: min(630px, 52vw);
}

.growing-guide h2 {
  margin: 12px 0 15px;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(35px, 5vw, 70px);
  font-stretch: 74%;
  font-variation-settings: "wdth" 74;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.growing-guide > p {
  max-width: 500px;
  color: #425d6d;
  font-size: 13px;
  line-height: 1.55;
}

.growing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.growing-grid > div {
  min-height: 130px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.37);
}

.growing-grid span {
  color: var(--accent);
  font-size: 8px;
  font-weight: 800;
}

.growing-grid strong {
  display: block;
  margin-top: 15px;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}

.growing-grid p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.growing-city {
  margin-top: 18px !important;
  font-size: 10px !important;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Menu */

.explore-menu {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  grid-template-columns: 36% 64%;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 90%, rgba(255, 182, 137, 0.42), transparent 32%),
    linear-gradient(135deg, rgba(245, 252, 255, 0.97), rgba(218, 238, 248, 0.95));
  backdrop-filter: blur(28px) saturate(1.2);
  animation: menu-in 520ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.explore-menu > header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 3vw, 44px);
}

.menu-close {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: transparent;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-close span {
  font-size: 22px;
  font-weight: 300;
}

.menu-copy {
  padding: 7vh 4vw 4vh;
}

.menu-copy > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.menu-copy h2 {
  margin: 16px 0 30px;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(46px, 6.4vw, 96px);
  font-stretch: 72%;
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.destination-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(58, 89, 108, 0.25);
}

.destination-search > span {
  color: var(--muted);
  font-size: 24px;
}

.destination-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.destination-search input::placeholder {
  color: #728795;
}

.menu-destinations {
  z-index: 2;
  height: calc(100svh - 94px);
  overflow-y: auto;
  padding: 5vh 5vw 8vh 0;
  scrollbar-width: thin;
}

.menu-destinations button {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 34px 1fr auto 24px;
  align-items: center;
  gap: 12px;
  padding: 15px 8px;
  border: 0;
  border-bottom: 1px solid rgba(65, 98, 117, 0.12);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: padding 180ms ease, background 180ms ease;
}

.menu-destinations button:hover,
.menu-destinations button.active {
  padding-left: 16px;
  background: rgba(255, 255, 255, 0.38);
}

.menu-destinations span {
  color: var(--muted);
  font-size: 8px;
}

.menu-destinations strong {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(15px, 1.8vw, 25px);
  font-weight: 850;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.menu-destinations small {
  color: var(--muted);
  font-size: 8px;
}

.menu-destinations i {
  color: var(--muted);
  font-size: 15px;
  font-style: normal;
}

.menu-map {
  position: absolute;
  z-index: 0;
  right: -10%;
  bottom: -15%;
  width: 60vw;
  height: 68vh;
  opacity: 0.17;
  pointer-events: none;
}

.national-map-compact .dot-label {
  display: none;
}

/* Animations */

@keyframes dot-pulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(0.78);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.1);
  }
}

@keyframes cue {
  0% {
    transform: translateX(-24px);
  }
  50%, 100% {
    transform: translateX(56px);
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
}

@keyframes menu-in {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* Responsive */

@media (max-width: 980px) {
  .home-map-wrap {
    inset: 7vh -8vw 25vh 8vw;
  }

  .home-hero {
    max-width: 520px;
  }

  .home-hero h1 {
    font-size: clamp(48px, 9.5vw, 96px);
  }

  .hero-rule {
    width: min(100%, 430px);
  }

  .home-legend,
  .scroll-cue {
    display: none;
  }

  .destination-title {
    top: 11%;
  }

  /* The map moves to 30% here, so the title has the wider column — but it keeps
     the name-length and height caps rather than dropping back to pure vw. */
  .destination-title h1 {
    --title-space: min(100vw - 168px, 620px);
    --title-floor: 42px;
    --title-fluid: clamp(42px, min(9vw, 11vh), 78px);
  }

  .mode-switcher {
    top: 26%;
  }

  .mode-switcher button {
    min-width: 125px;
  }

  .category-bar {
    top: 36%;
  }

  .local-map {
    top: 30%;
    bottom: 17%;
    left: 30%;
  }

  .place-card {
    top: 43%;
  }

  .destination-intro {
    display: none;
  }

  .growing-guide {
    top: 33%;
    width: min(670px, 70vw);
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: 14px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .brand-words small {
    display: none;
  }

  .menu-button,
  .back-button {
    min-height: 40px;
    gap: 8px;
    padding: 0 13px;
    font-size: 8px;
  }

  .home-map-wrap {
    inset: 65px -52% 38% -18%;
  }

  .national-map svg {
    min-width: 790px;
    transform: translateX(-7%);
  }

  .home-hero {
    right: 18px;
    bottom: 23px;
    left: 18px;
  }

  .home-hero h1 {
    margin-top: 9px;
    font-size: clamp(46px, 15vw, 76px);
    line-height: 0.86;
  }

  .hero-rule {
    width: min(100%, 320px);
    margin: 12px 0 10px;
  }

  .hero-tagline {
    font-size: 10px;
    letter-spacing: 0.3em;
  }

  .home-hero > p {
    max-width: 100%;
    margin-top: 15px;
    font-size: 12.5px;
  }

  .primary-cta {
    min-height: 47px;
    margin-top: 17px;
  }

  .destination-header .brand {
    display: none;
  }

  .destination-title {
    top: 75px;
    right: 18px;
    left: 18px;
    max-width: none;
    align-items: flex-start;
    justify-content: space-between;
  }

  .destination-title h1 {
    max-width: 85vw;
    --title-space: 85vw;
    --title-floor: 34px;
    --title-fluid: clamp(34px, min(13vw, 9vh), 64px);
    line-height: 0.88;
  }

  .destination-title p {
    max-width: 80vw;
    font-size: 11px;
  }

  .guide-status {
    display: none;
  }

  .mode-switcher {
    top: 25%;
    right: 12px;
    left: 12px;
    overflow-x: auto;
  }

  .mode-switcher button {
    min-width: 33.333%;
    padding: 10px 9px;
  }

  .mode-switcher small {
    font-size: 6px;
  }

  .mode-switcher span {
    font-size: 11px;
  }

  .category-bar {
    top: 35%;
    right: 0;
    left: 0;
    overflow-x: auto;
    padding: 0 12px 8px;
    scrollbar-width: none;
  }

  .category-bar::-webkit-scrollbar {
    display: none;
  }

  .category-bar button {
    flex: 0 0 auto;
  }

  /* No place card is open by default on a phone, so the map takes the room
     down to the fixed timeline instead of stopping a third of the way up. */
  .local-map {
    top: 41%;
    right: 8px;
    bottom: 16%;
    left: 8px;
    border-radius: 20px;
  }

  /* Labels beside every pin are unreadable at phone width; the pin colour and
     number carry the meaning, and the timeline below names each stop. */
  .real-pin-label {
    display: none;
  }

  .map-style-switch button {
    padding: 5px 8px;
    font-size: 9px;
  }

  /* No room for this beside a phone-width map, and the place card already
     tells you when a specific spot is unconfirmed. */
  .unmapped-note {
    display: none;
  }

  /* Sits above the timeline rather than on top of it, so the whole-day
     directions link stays reachable while a place is open. */
  .place-card {
    position: fixed;
    top: auto;
    right: 9px;
    bottom: 78px;
    left: 9px;
    width: auto;
    max-height: 40vh;
    overflow-y: auto;
    padding: 18px;
    border-radius: 22px;
  }

  .place-card h3 {
    font-size: 23px;
  }

  .place-note {
    margin: 11px 0;
  }

  .day-timeline {
    position: fixed;
    z-index: 26;
    right: 8px;
    bottom: 9px;
    left: 8px;
    display: block;
    overflow-x: auto;
    padding: 8px;
    white-space: nowrap;
  }

  /* Keep the whole-day directions link on phones — it is the most useful
     control on the page when you are actually standing in the city. */
  .timeline-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-right: 4px;
  }

  .timeline-intro small,
  .timeline-intro strong {
    display: none;
  }

  .timeline-intro .route-link {
    margin-top: 0;
  }

  .timeline-steps {
    display: flex;
    width: max-content;
  }

  .timeline-steps button {
    width: 132px;
  }

  .growing-guide {
    top: 32%;
    right: 18px;
    left: 18px;
    width: auto;
  }

  .growing-guide h2 {
    font-size: clamp(34px, 10vw, 47px);
  }

  .growing-guide > p {
    font-size: 11px;
  }

  .growing-grid {
    grid-template-columns: 1fr;
  }

  .growing-grid > div {
    min-height: auto;
    padding: 12px;
  }

  .growing-grid strong {
    display: inline;
    margin: 0 8px;
  }

  .growing-grid p {
    display: inline;
  }

  .explore-menu {
    display: block;
    overflow-y: auto;
  }

  .explore-menu > header {
    position: sticky;
    z-index: 3;
    top: 0;
    padding: 14px;
    background: rgba(238, 248, 252, 0.78);
    backdrop-filter: blur(16px);
  }

  .menu-copy {
    padding: 40px 18px 10px;
  }

  .menu-copy h2 {
    margin: 12px 0 24px;
    font-size: 16vw;
  }

  .menu-destinations {
    height: auto;
    padding: 18px;
  }

  .menu-destinations button {
    grid-template-columns: 28px 1fr 18px;
  }

  .menu-destinations small {
    display: none;
  }

  .menu-map {
    display: none;
  }
}

/* A name long enough to wrap plus a mood line does not fit above the mode
   switcher on a short window — "Rocky Mountain National Park" is the only one.
   The mood sentence gives way there; the title and the controls both stay. */
@media (min-width: 981px) and (max-height: 880px) {
  .destination-title.title-wraps p {
    display: none;
  }
}

@media (max-height: 720px) and (min-width: 721px) {
  .destination-title {
    top: 10%;
  }

  .destination-title h1 {
    --title-floor: 40px;
    --title-fluid: 9vh;
  }

  .mode-switcher {
    top: 26%;
  }

  .category-bar {
    top: 39%;
  }

  .place-card {
    top: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.static-loading{min-height:100svh;display:grid;place-items:center;align-content:center;gap:14px;background:linear-gradient(180deg,#f7fcff,#e5f3fa);color:var(--ink)}
.static-loading .brand-mark{position:relative}.static-loading p,.noscript{font:700 10px var(--font-body),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menu-is-open{overflow:hidden}