:root {
  --travel-ocean: #050711;
  --travel-land-stroke: #2b3040;
  --travel-land-dot: rgba(226, 234, 255, 0.9);
  --travel-graticule: rgba(120, 140, 190, 0.18);
  --travel-dot-active: var(--blue-bright);
  --travel-dot-idle: #39ff14;
  --travel-route-dot: #ffffff;
  --travel-route-line: rgba(255, 255, 255, 0.78);
}

.travels-page #sidebar-left.travels-sidebar {
  width: 300px;
  padding: 18px 18px 16px;
}

.travels-sidebar .travels-details-box {
  margin-top: 6px;
  margin-bottom: 0;
}

.travels-page #main.travels-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px 18px 1px;
}

.travels-map-box,
.travels-details-box {
  margin-bottom: 12px;
  border: 1px solid var(--blue-mid);
}

.travels-details-box {
  margin-bottom: 0;
}

.travels-map-wrap {
  padding: 0;
}

#travels-map {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--blue-mid);
  background: transparent;
}

.travels-map-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 0px;
}

.travels-map-select {
  width: 33%;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.travels-map-select-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.travels-place-select {
  width: 100%;
  border: 1px solid var(--blue-mid);
  background: var(--bg-panel-alt);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 10px 12px;
}

.travels-place-select:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
}

#travels-map .map-sphere {
  fill: var(--travel-ocean);
}

#travels-map .map-graticule {
  fill: none;
  stroke: var(--travel-graticule);
  stroke-width: 0.35;
  stroke-linecap: round;
}

#travels-map .map-land {
  fill: url(#travels-land-dots);
  stroke: none;
  stroke-width: 0;
}

#travels-map .travel-routes {
  pointer-events: none;
}

#travels-map .travel-route-line {
  fill: none;
  stroke: var(--travel-route-line);
  stroke-width: 2;
  stroke-linecap: round;
}

#travels-map .travel-route-marker {
  fill: var(--travel-route-dot);
  stroke-width: 0;
  pointer-events: none;
}

#travels-map .map-boundaries {
  fill: none;
  stroke: rgba(196, 207, 235, 0.22);
  stroke-width: 0.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

#travels-map .travel-hit-target {
  fill: transparent;
  cursor: var(--cursor-pointer);
}

#travels-map .travel-marker {
  fill: var(--travel-dot-idle);
  stroke: rgba(11, 25, 14, 0.85);
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.6));
  pointer-events: none;
}

#travels-map .travel-point.active .travel-marker {
  fill: var(--travel-dot-active);
  animation: travel-dot-pulse 1.6s ease-in-out infinite;
}
#travels-map .travel-hit-target:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
}

@keyframes travel-dot-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(96, 184, 255, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(96, 184, 255, 0.95));
  }
}

.travels-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  height: 320px;
}

.travels-photo-frame {
  position: relative;
  z-index: 0;
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  height: 130px;
  width: min(100%, 220px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

#travel-detail-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 130px;
  display: block;
  object-fit: cover;
  border: 2px solid var(--border);
  box-sizing: border-box;
}

.travels-photo-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 138px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-label);
  background: repeating-linear-gradient(
    -45deg,
    rgba(34, 136, 255, 0.08),
    rgba(34, 136, 255, 0.08) 8px,
    rgba(15, 22, 44, 0.8) 8px,
    rgba(15, 22, 44, 0.8) 16px
  );
}

.travels-details-copy {
  height: 160px;
  line-height: 14px;
}

.travels-details-copy h3 {
  margin-bottom: 10px;
}

.travels-details-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-body);
}

@media (max-width: 980px) {
  .travels-page #sidebar-left.travels-sidebar {
    width: 250px;
    padding-left: 16px;
    padding-right: 16px;
  }

}

@media (max-width: 980px) {
  .travels-page #sidebar-left.travels-sidebar {
    width: 100%;
    order: 2;
  }

  .travels-page #main.travels-main {
    order: 1;
    flex: 0 0 auto;
  }

  .travels-map-wrap {
    padding: 0;
  }

  .travels-map-select {
    width: 100%;
    min-width: 0;
  }

  .travels-photo-frame {
    width: min(100%, 280px);
  }
}