:root {
  color-scheme: dark;
  --forest: #183d2e;
  --clay: #bd7355;
  --bone: #f2efe7;
  --ink: #172019;
  --sky-top: #08243b;
  --sky-mid: #17617a;
  --sky-bottom: #9bcfc9;
  --ease: cubic-bezier(.22,.82,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; color: white; background: var(--sky-top); user-select: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.skip-link { position: fixed; left: -9999px; top: .5rem; z-index: 100; padding: .7rem 1rem; color: var(--ink); background: var(--bone); border-radius: 999px; }
.skip-link:focus { left: .5rem; }

.travel-mode {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.17) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 26%, rgba(255,255,255,.14) 0 1.5px, transparent 2.5px),
    linear-gradient(165deg, var(--sky-top), var(--sky-mid) 55%, var(--sky-bottom));
}
.travel-mode::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: radial-gradient(rgba(255,255,255,.55) .7px, transparent .7px); background-size: 31px 31px; mask-image: linear-gradient(180deg, black, transparent 74%); }

.travel-topbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; background: linear-gradient(180deg, rgba(3,18,38,.72), transparent); pointer-events: none; }
.travel-brand { display: inline-flex; align-items: center; gap: .62rem; color: white; font-family: "Source Serif 4", Georgia, serif; font-size: 1.9rem; font-weight: 650; letter-spacing: -.045em; text-decoration: none; pointer-events: auto; }
.travel-brand span { width: 1.05rem; aspect-ratio: 1; border: 1px solid var(--clay); border-radius: 50%; position: relative; }
.travel-brand span::after { content: ""; position: absolute; width: .26rem; aspect-ratio: 1; border-radius: 50%; background: var(--clay); top: -.12rem; right: .02rem; }
.mode-exit { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.9); background: rgba(4,25,47,.24); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: .88rem; font-weight: 650; text-decoration: none; backdrop-filter: blur(16px); pointer-events: auto; transition: background .25s var(--ease), border-color .25s var(--ease); }
.mode-exit:hover, .mode-exit:focus-visible { background: rgba(4,25,47,.48); border-color: rgba(255,255,255,.34); outline: none; }

.map-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; outline: none; }
.map-viewport.dragging { cursor: grabbing; }
.map-viewport:focus-visible { box-shadow: inset 0 0 0 3px rgba(242,239,231,.75); }
.cloud-plane { position: absolute; left: 0; top: 0; width: 2200px; height: 1800px; transform-origin: 0 0; will-change: transform; }
.cluster-label { position: absolute; color: rgba(255,255,255,.58); font-size: .72rem; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 18px rgba(3,27,45,.48); }

.cloud-node { --size: 128px; --drift-distance: 4px; position: absolute; width: var(--size); height: calc(var(--size) * .68); padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; filter: drop-shadow(0 18px 17px rgba(2,17,38,.18)); transition: transform .5s var(--ease), filter .5s var(--ease), opacity .35s var(--ease); }
.cloud-node:hover, .cloud-node:focus-visible, .cloud-node.selected { transform: translateY(-6px) scale(1.045); filter: drop-shadow(0 25px 24px rgba(2,17,38,.28)); outline: none; z-index: 8; }
.cloud-node:focus-visible .cloud-body, .cloud-node.selected .cloud-body { outline: 2px solid rgba(234,194,122,.88); outline-offset: 7px; }
.cloud-body { position: absolute; inset: 20% 7% 8%; border-radius: 999px 999px 740px 740px; background: radial-gradient(circle at 31% 30%, #fff 0 31%, transparent 32%), radial-gradient(circle at 58% 17%, #fff 0 38%, transparent 39%), radial-gradient(circle at 78% 41%, #fff 0 29%, transparent 30%), linear-gradient(180deg, #fff 0%, #edf6f3 72%, #c8dedb 100%); box-shadow: inset 0 -10px 18px rgba(37,103,105,.14), inset 10px 8px 18px rgba(255,255,255,.95); animation: cloud-breathe 8s ease-in-out var(--drift-delay, 0s) infinite alternate; }
.cloud-node:nth-of-type(3n) .cloud-body { background: radial-gradient(circle at 29% 34%, #fff9ef 0 31%, transparent 32%), radial-gradient(circle at 57% 18%, #fffaf2 0 38%, transparent 39%), radial-gradient(circle at 79% 41%, #fff 0 29%, transparent 30%), linear-gradient(180deg, #fff 0%, #eef6f3 78%, #c8ddd7 100%); }
.cloud-glint { position: absolute; top: 22%; left: 28%; width: 20%; height: 11%; border-radius: 999px; background: rgba(255,255,255,.9); transform: rotate(-20deg); filter: blur(2px); }
.cloud-pin { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); min-width: 32px; height: 24px; padding: 0 8px; display: grid; place-items: center; color: rgba(255,255,255,.92); background: rgba(9,47,65,.74); border: 1px solid rgba(255,255,255,.78); border-radius: 999px; font-size: .69rem; font-weight: 650; backdrop-filter: blur(8px); }

@keyframes cloud-breathe {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(var(--drift-distance) * -1), 0); }
}

.floating-card { position: fixed; z-index: 60; width: min(314px, calc(100vw - 28px)); color: var(--ink); background: rgba(248,245,237,.96); border: 1px solid rgba(255,255,255,.68); border-radius: 21px; overflow: hidden; box-shadow: 0 24px 64px rgba(1,15,35,.34); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.975); transform-origin: 50% 100%; transition: opacity .34s var(--ease), transform .46s var(--ease), visibility .34s; touch-action: auto; }
.floating-card.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.card-image-wrap { position: relative; height: 128px; overflow: hidden; background: #b6d6d0; }
.card-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: rgba(5,31,43,.74); font-size: 1.25rem; cursor: pointer; backdrop-filter: blur(9px); }
.card-copy { padding: 16px 17px 18px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #73766f; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-copy h1 { margin: 9px 0 15px; font-family: "Source Serif 4", Georgia, serif; font-size: 1.48rem; font-weight: 500; line-height: 1.06; letter-spacing: -.035em; }
.read-link { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; color: white; background: var(--forest); border-radius: 999px; font-size: .9rem; font-weight: 700; text-decoration: none; }

.map-controls { position: absolute; z-index: 40; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 7px; opacity: .72; transition: opacity .25s var(--ease), visibility .25s var(--ease); }
.map-controls:hover, .map-controls:focus-within { opacity: 1; }
.control-group { display: grid; overflow: hidden; background: rgba(5,35,53,.34); border: 1px solid rgba(255,255,255,.17); border-radius: 14px; box-shadow: 0 10px 26px rgba(3,18,37,.16); backdrop-filter: blur(18px); }
.map-control { width: 43px; height: 43px; border: 0; color: rgba(255,255,255,.9); background: transparent; cursor: pointer; font-size: 1.24rem; }
.map-control + .map-control { border-top: 1px solid rgba(255,255,255,.18); }
.map-control:hover, .map-control:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.zoom-readout { position: absolute; z-index: 40; left: 16px; bottom: calc(19px + env(safe-area-inset-bottom)); padding: 8px 11px; color: rgba(255,255,255,.82); background: rgba(5,35,53,.34); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: .71rem; font-weight: 650; letter-spacing: .06em; backdrop-filter: blur(15px); opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s; visibility: hidden; }
.zoom-readout.visible { opacity: 1; transform: translateY(0); visibility: visible; }

.onboarding { position: absolute; z-index: 70; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 88px); min-height: 42px; padding: 7px 7px 7px 15px; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); color: rgba(255,255,255,.84); background: rgba(5,35,53,.54); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; box-shadow: 0 14px 38px rgba(2,16,37,.2); backdrop-filter: blur(20px); transition: opacity .4s var(--ease), transform .4s var(--ease); touch-action: auto; }
.onboarding.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
.travel-help-seen .onboarding { display: none; }
.onboarding p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; line-height: 1; }
.onboarding button { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: rgba(255,255,255,.84); background: rgba(255,255,255,.1); font-size: 1rem; cursor: pointer; }

.empty-map { position: absolute; z-index: 10; inset: 0; width: min(34rem, calc(100% - 2rem)); height: max-content; margin: auto; padding: 2rem; color: var(--ink); background: rgba(242,239,231,.94); border-radius: 2rem; text-align: center; backdrop-filter: blur(18px); }
.empty-map > span { font-size: 3rem; }
.empty-map h1 { margin: .5rem 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(2rem, 8vw, 3.5rem); line-height: .95; }
.empty-map p { color: #5f6d64; }
.empty-map a { min-height: 44px; padding: 0 1rem; display: inline-flex; align-items: center; color: white; background: var(--forest); border-radius: 999px; text-decoration: none; font-weight: 700; }

@media (max-width: 759px) {
  .travel-mode.card-open .map-controls, .travel-mode.card-open .zoom-readout { opacity: 0; visibility: hidden; pointer-events: none; }
  .travel-brand { font-size: 1.72rem; }
}
@media (min-width: 760px) {
  .travel-topbar { padding-inline: 28px; }
  .map-controls { right: 24px; bottom: 24px; }
  .zoom-readout { left: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .cloud-body { animation: none; }
}