/* Travel destination atlas */
.travel-atlas {
  position: relative;
  margin: 0 2rem;
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 16% 0%, rgba(18, 138, 134, 0.08), transparent 30rem),
    #ffffff;
  color: var(--color-ink-600);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.travel-atlas::after {
  position: absolute;
  right: -5rem;
  bottom: -8rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgba(18, 138, 134, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgba(18, 138, 134, 0.025),
    0 0 0 6rem rgba(18, 138, 134, 0.018);
  content: "";
  pointer-events: none;
}

.travel-atlas__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.travel-atlas__eyebrow {
  color: var(--color-brand-600);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.travel-atlas__header h1 {
  margin: 0.3rem 0 0.4rem;
  color: var(--color-ink-900);
  font-size: 2rem;
  line-height: 1.15;
}

.travel-atlas__header p {
  margin: 0;
  color: var(--color-ink-500);
  font-size: 0.88rem;
  text-align: left;
}

.travel-atlas__summary {
  flex: 0 0 auto;
  padding-bottom: 0.25rem;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.travel-atlas__summary strong {
  color: var(--color-brand-700);
  font-size: 1.1rem;
}

.travel-atlas__summary span {
  margin: 0 0.35rem;
  color: var(--color-border);
}

.travel-atlas__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Fill the atlas card so the map is the section's dominant element; the fixed
     1200/624 ratio grows it taller in step. */
  max-width: 64rem;
  margin: 0 auto;
}

.travel-map {
  position: relative;
  min-width: 0;
  padding: 0.75rem 0.75rem 0.55rem;
  border: 1px solid #24464b;
  border-radius: var(--radius-compact);
  background: linear-gradient(145deg, #071315 0%, #0a1b1f 60%, #0e2427 100%);
}

.travel-map__viewport {
  position: relative;
  aspect-ratio: 1200 / 624;
  /* Popups may spill past the map edge at rest; clip only while zoomed,
     when the enlarged canvas must not bleed into the page. */
  overflow: visible;
  border-radius: calc(var(--radius-compact) - 0.25rem);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.travel-map__viewport.is-zoomed {
  overflow: hidden;
  cursor: grab;
}

.travel-map__viewport.is-zoomed:active {
  cursor: grabbing;
}

.travel-map__canvas {
  --map-scale: 1;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  aspect-ratio: 1200 / 624;
  transform-origin: 0 0;
}

/* Promote only while a gesture or fly-to animation is moving. Once input
   settles, JS expands the SVG's layout size so the browser rerenders it at
   the final zoom resolution instead of enlarging a cached texture. */
.travel-map__viewport.is-map-interacting .travel-map__canvas {
  will-change: transform;
}

.travel-map__canvas > img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.travel-map__route-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-standard) ease;
}

.travel-map__route-path {
  fill: none;
  stroke: #ffb869;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.62));
}

.travel-map__canvas.is-trip-selected .travel-map__route-layer {
  opacity: 0.88;
}

.travel-map__marker {
  position: absolute;
  z-index: 2;
  display: block;
  width: 1rem;
  height: 1rem;
  border: 0 !important;
  color: #fff !important;
  cursor: pointer;
  /* Counter-scale so pins and popups keep their screen size while the map zooms. */
  transform: translate(-50%, -50%) scale(calc(1 / var(--map-scale, 1)));
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.travel-map__detail-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.travel-map__detail {
  position: absolute;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border: 0 !important;
  color: #fff !important;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(1 / var(--map-scale, 1)));
  transition: opacity 0.2s ease, visibility 0.2s ease;
  visibility: hidden;
}

.travel-map__detail-dot {
  position: relative;
  z-index: 2;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border: 0.13rem solid #071315;
  border-radius: 50%;
  background: #ffb869;
  box-shadow: 0 0 0 0.1rem rgba(255, 184, 105, 0.42), 0 0.25rem 0.55rem rgba(0, 0, 0, 0.4);
}

.travel-map__detail--stop .travel-map__detail-dot {
  background: #28d7c5;
  box-shadow: 0 0 0 0.1rem rgba(40, 215, 197, 0.45), 0 0.25rem 0.55rem rgba(0, 0, 0, 0.4);
}

.travel-map__detail-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 0.6rem/1 var(--font-display, sans-serif);
  color: #071315;
  opacity: 0;
  pointer-events: none;
}

/* When its trip is active, a stop dot grows just enough to carry a legible
   sequence number that traces the drawn route; restrained, and the number stays
   hidden whenever no trip is selected. */
.travel-map__detail--stop.is-trip-active .travel-map__detail-dot {
  width: 1.2rem;
  height: 1.2rem;
}

.travel-map__detail--stop.is-trip-active .travel-map__detail-number {
  opacity: 1;
}

.travel-map__detail-leader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: var(--leader-length, 0.55rem);
  height: 1px;
  background: rgba(255, 184, 105, 0.58);
  pointer-events: none;
  transform: rotate(var(--leader-angle, 0rad));
  transform-origin: 0 50%;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.travel-map__detail--stop .travel-map__detail-leader {
  background: rgba(40, 215, 197, 0.52);
}

.travel-map__detail-label {
  position: absolute;
  top: calc(50% + var(--label-y, -50%));
  left: calc(50% + var(--label-x, 0.95rem));
  z-index: 3;
  display: block;
  max-width: 8.5rem;
  padding: 0.2rem 0.34rem;
  border: 1px solid rgba(152, 201, 198, 0.24);
  border-radius: 0.26rem;
  background: rgba(7, 19, 21, 0.9);
  box-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-display);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.15;
  text-transform: none;
  transition: opacity 0.15s ease, visibility 0.15s ease,
    border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.travel-map__detail.is-label-offscreen .travel-map__detail-label,
.travel-map__detail.is-label-offscreen .travel-map__detail-leader {
  opacity: 0;
  visibility: hidden;
}

.travel-map__canvas[data-map-detail="area"] .travel-map__marker,
.travel-map__canvas[data-map-detail="stop"] .travel-map__marker {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.travel-map__canvas[data-map-detail="area"] .travel-map__detail--area,
.travel-map__canvas[data-map-detail="stop"] .travel-map__detail--stop {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(calc(1 / var(--map-scale, 1)));
  visibility: visible;
}

.travel-map__canvas.is-trip-selected[data-map-detail="area"] .travel-map__detail--area:not(.is-trip-active),
.travel-map__canvas.is-trip-selected[data-map-detail="stop"] .travel-map__detail--stop:not(.is-trip-active) {
  opacity: 0.08;
  pointer-events: none;
}

/* Region is the level the desktop atlas opens on, so it needs the same muting
   as area and stop. Without it a selected trip left every unrelated marker
   fully opaque and clickable while the route line ran across them, and the
   markers' tabindex said the opposite. */
.travel-map__canvas.is-trip-selected[data-map-detail="region"] .travel-map__marker:not(.is-trip-active) {
  opacity: 0.08;
  pointer-events: none;
}

.travel-map__detail.is-selected {
  z-index: 9;
}

.travel-map__detail.is-selected .travel-map__detail-dot {
  background: #fff;
  box-shadow:
    0 0 0 0.17rem rgba(255, 184, 105, 0.72),
    0 0 0 0.38rem rgba(255, 184, 105, 0.16),
    0 0.35rem 0.8rem rgba(0, 0, 0, 0.5);
}

.travel-map__detail.is-selected .travel-map__detail-label {
  border-color: rgba(255, 184, 105, 0.82);
  background: #10292c;
  color: #fff;
}

.travel-map__detail:hover,
.travel-map__detail:focus-visible {
  z-index: 8;
  outline: none;
}

.travel-map__detail:hover .travel-map__detail-dot,
.travel-map__detail:focus-visible .travel-map__detail-dot {
  background: #fff;
  box-shadow: 0 0 0 0.16rem rgba(255, 184, 105, 0.5), 0 0.35rem 0.8rem rgba(0, 0, 0, 0.5);
}

.travel-map__detail:hover .travel-map__detail-label,
.travel-map__detail:focus-visible .travel-map__detail-label {
  border-color: rgba(255, 184, 105, 0.72);
  background: #10292c;
  color: #fff;
}

.travel-map__detail:hover .travel-map__detail-leader,
.travel-map__detail:focus-visible .travel-map__detail-leader {
  background: rgba(255, 255, 255, 0.82);
}

.travel-map__marker:hover,
.travel-map__marker:focus,
.travel-map__marker:focus-within {
  z-index: 5;
}

.travel-map__marker-dot {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
  border: 0.18rem solid #071315;
  border-radius: 50%;
  background: #28d7c5;
  box-shadow:
    0 0 0 0.12rem rgba(40, 215, 197, 0.55),
    0 0.35rem 0.8rem rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.travel-map__marker-dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: #fff;
  content: "";
  transform: translate(-50%, -50%);
}

.travel-map__place {
  position: absolute;
  top: 50%;
  left: 1.2rem;
  z-index: 1;
  display: block;
  padding: 0.18rem 0.34rem;
  border: 1px solid rgba(152, 201, 198, 0.2);
  border-radius: 0.25rem;
  background: rgba(7, 19, 21, 0.88);
  box-shadow: 0 0.15rem 0.45rem rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%);
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.travel-map__marker-label {
  position: absolute;
  top: 50%;
  left: 1rem;
  display: block;
  width: 18.5rem;
  padding: 0.45rem;
  border: 1px solid rgba(152, 201, 198, 0.2);
  border-radius: 0.5rem;
  background: rgba(7, 19, 21, 0.96);
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-display);
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%) scale(0.96);
  transform-origin: left center;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  visibility: hidden;
}

.travel-map__journal-link {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  border-bottom: 0 !important;
  color: inherit !important;
  text-decoration: none;
}

.travel-map__journal-link::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  content: "";
}

.travel-map__journal-link > * {
  position: relative;
  z-index: 1;
}

.travel-map__journal-link:hover strong,
.travel-map__journal-link:focus-visible strong {
  color: #ffb869;
}

.travel-map__marker-label img {
  display: block;
  width: 4.25rem;
  height: 3.2rem;
  margin: 0;
  border-radius: 0.3rem;
  object-fit: cover;
}

.travel-map__marker-label strong,
.travel-map__marker-label small {
  display: block;
}

.travel-map__marker-copy {
  display: block;
  min-width: 0;
}

.travel-map__marker-label strong {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-transform: uppercase;
}

.travel-map__marker-label small {
  margin-top: 0.22rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.travel-map__city-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
  margin-left: 4.8rem;
}

.travel-map__city-links a {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  padding: 0.22rem 0.34rem;
  border: 1px solid rgba(152, 201, 198, 0.22) !important;
  border-radius: 0.28rem;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: var(--font-display);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.15;
  text-transform: none;
  white-space: nowrap;
}

.travel-map__city-links a:hover,
.travel-map__city-links a:focus-visible {
  border-color: rgba(255, 184, 105, 0.65) !important;
  background: rgba(255, 184, 105, 0.12);
  color: #fff !important;
}

.travel-map__marker:hover .travel-map__marker-dot,
.travel-map__marker:focus .travel-map__marker-dot,
.travel-map__marker:focus-within .travel-map__marker-dot {
  background: #ffb869;
  box-shadow:
    0 0 0 0.18rem rgba(255, 184, 105, 0.28),
    0 0.35rem 0.8rem rgba(3, 14, 30, 0.2);
  transform: scale(1.18);
}

.travel-map__marker:hover .travel-map__marker-label,
.travel-map__marker:focus .travel-map__marker-label,
.travel-map__marker:focus-within .travel-map__marker-label {
  border-color: rgba(255, 184, 105, 0.55);
  background: #10292c;
  color: #fff;
  opacity: 1;
  transform: translateY(-50%) scale(1);
  visibility: visible;
}

.travel-map__marker:hover .travel-map__place,
.travel-map__marker:focus .travel-map__place,
.travel-map__marker:focus-within .travel-map__place {
  opacity: 0;
}

.travel-map__marker:focus-visible {
  border-radius: 50%;
  outline: 0.16rem solid #fff;
  outline-offset: 0.25rem;
}

.travel-map__marker--silicon-valley { top: 44%; left: 15.9%; }
.travel-map__marker--usa { top: 43%; left: 25.8%; }
.travel-map__marker--canada { top: 30.5%; left: 23.2%; }
.travel-map__marker--europe { top: 40%; left: 49.8%; }
.travel-map__marker--germany { top: 34%; left: 52.5%; }
.travel-map__marker--japan { top: 37%; left: 87.6%; }
.travel-map__marker--guangzhou { top: 50%; left: 81.6%; }
.travel-map__marker--perth { top: 78.5%; left: 79%; }
.travel-map__marker--melbourne { top: 82.5%; left: 86.8%; }
.travel-map__marker--sydney { top: 77.5%; left: 90.3%; }

.travel-map__marker--silicon-valley .travel-map__place {
  top: 1.35rem;
  right: 0.75rem;
  left: auto;
}

.travel-map__marker--usa .travel-map__place {
  top: 1.35rem;
  left: 0.7rem;
}

.travel-map__marker--canada .travel-map__place {
  top: -0.85rem;
  left: 0.7rem;
}

.travel-map__marker--europe .travel-map__place {
  top: 1.35rem;
  right: 0.7rem;
  left: auto;
}

.travel-map__marker--germany .travel-map__place {
  top: -0.85rem;
  left: 0.7rem;
}

.travel-map__marker--japan .travel-map__place {
  /* Sit BELOW the Japan marker, not to its left: the leftward placement landed
     the label on the adjacent South Korea dot and clipped "JAPAN" to "AN" at
     world view. Right of the marker was rejected because it collides with the
     top-right zoom controls on the narrower tablet full-map width; below the dot
     pair stays clear of both the Seoul dot and the controls at every width. */
  top: 1.3rem;
  left: 0.1rem;
  right: auto;
}

.travel-map__marker--seoul .travel-map__place {
  top: 1.8rem;
  right: 0.7rem;
  left: auto;
}

.travel-map__marker--guangzhou .travel-map__place {
  top: 1.35rem;
  right: 0.75rem;
  left: auto;
}

.travel-map__marker--perth .travel-map__place {
  top: -1.1rem;
  right: 0.7rem;
  left: auto;
}

.travel-map__marker--melbourne .travel-map__place {
  top: 1.35rem;
  right: 0.7rem;
  left: auto;
}

.travel-map__marker--sydney .travel-map__place {
  top: -1.1rem;
  left: 0.7rem;
}

.travel-map__marker--europe .travel-map__marker-label,
.travel-map__marker--germany .travel-map__marker-label,
.travel-map__marker--japan .travel-map__marker-label,
.travel-map__marker--seoul .travel-map__marker-label,
.travel-map__marker--guangzhou .travel-map__marker-label,
.travel-map__marker--perth .travel-map__marker-label,
.travel-map__marker--melbourne .travel-map__marker-label,
.travel-map__marker--sydney .travel-map__marker-label {
  right: 1rem;
  left: auto;
  transform-origin: right center;
}

.travel-map__marker--europe .travel-map__marker-label {
  top: 1.55rem;
}

.travel-map__marker--germany .travel-map__marker-label {
  top: -1rem;
}

.travel-map__marker--guangzhou .travel-map__marker-label {
  top: 2rem;
}

.travel-map__marker--perth .travel-map__marker-label {
  top: -1rem;
}

.travel-map__marker--melbourne .travel-map__marker-label {
  top: 2.2rem;
}

.travel-map__marker--sydney .travel-map__marker-label {
  top: -2rem;
}

.travel-map__hint {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.3rem 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.travel-map__hint span {
  color: #28d7c5;
  font-size: 0.55rem;
}

.travel-map__status {
  position: absolute;
  top: 6.4rem;
  left: 1rem;
  z-index: 6;
  margin: 0;
  padding: 0.32rem 0.48rem;
  border: 1px solid rgba(152, 201, 198, 0.24);
  border-radius: 999px;
  background: rgba(7, 19, 21, 0.86);
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--font-display);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.travel-map__trip-picker {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 7;
  display: grid;
  width: 13.5rem;
  max-width: calc(100% - 6.5rem);
  gap: 0.22rem;
  padding: 0.42rem 0.48rem 0.48rem;
  border: 1px solid rgba(152, 201, 198, 0.28);
  border-radius: 0.48rem;
  background: rgba(7, 19, 21, 0.92);
  box-shadow: 0 0.25rem 0.7rem rgba(0, 0, 0, 0.3);
}

.travel-map__trip-picker label {
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-display);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.travel-map__trip-picker select {
  width: 100%;
  height: 1.75rem;
  margin: 0;
  padding: 0 1.8rem 0 0.55rem;
  border: 1px solid rgba(152, 201, 198, 0.24);
  border-radius: 0.3rem;
  background-color: #10292c;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.travel-map__trip-picker select:focus-visible {
  border-color: #28d7c5;
  outline: 2px solid #28d7c5;
  outline-offset: 2px;
}

.travel-map__detail-card {
  position: absolute;
  right: 1rem;
  bottom: 2.85rem;
  z-index: 8;
  display: grid;
  width: min(19rem, calc(100% - 2rem));
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.6rem 2.15rem 0.6rem 0.6rem;
  border: 1px solid rgba(152, 201, 198, 0.32);
  border-radius: 0.55rem;
  background: rgba(7, 19, 21, 0.96);
  box-shadow: 0 0.65rem 1.6rem rgba(0, 0, 0, 0.44);
  color: #fff;
  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

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

.travel-map__detail-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.travel-map__detail-card.is-left {
  right: auto;
  left: 1rem;
}

.travel-map__detail-card > img {
  display: block;
  width: 5.4rem;
  height: 5.4rem;
  margin: 0;
  border-radius: 0.38rem;
  object-fit: cover;
  opacity: 1;
  transition: opacity var(--motion-standard) ease;
}

.travel-map__detail-card.is-image-loading > img {
  background:
    linear-gradient(110deg, rgba(40, 215, 197, 0.08), rgba(255, 255, 255, 0.08), rgba(40, 215, 197, 0.08));
  opacity: 0.24;
}

.travel-map__detail-card-copy {
  min-width: 0;
  font-family: var(--font-display);
}

.travel-map__detail-card-copy > p:first-child {
  margin: 0 0 0.24rem;
  color: #28d7c5;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

#main .travel-map__detail-card h2 {
  margin: 0;
  color: #fff;
  font-size: 0.86rem;
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-transform: none;
}

.travel-map__detail-card-copy > p:not(:first-child) {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.56rem;
  letter-spacing: 0.025em;
  line-height: 1.3;
}

.travel-map__detail-card-link {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  border-bottom: 0 !important;
  color: #ffb869 !important;
  /* Quiet, sentence-case call to action: the all-caps 900-weight treatment read
     as shouty next to the calm card. Keep the amber colour for emphasis. */
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.travel-map__detail-card-link:hover,
.travel-map__detail-card-link:focus-visible {
  color: #fff !important;
}

.travel-map__detail-card-steps {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0.1rem;
}

/* Bare chevrons read as ambiguous zoom or close affordances, so each step
   button carries a visible Prev/Next word beside its arrow. */
.travel-map__detail-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 2rem;
  padding: 0 0.7rem;
  /* Quiet ghost chips: near-transparent fill and a soft teal hairline, with
     bright teal reserved for hover/focus (the old solid fill was too loud). */
  border: 1px solid rgba(152, 201, 198, 0.3);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  /* !important: main.css paints every <button> #212931 !important, which
     left this label near-invisible dark-on-dark whatever colour we set. */
  color: #d7ecea !important;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.travel-map__detail-step span {
  font-size: 1.05rem;
  line-height: 1;
}

.travel-map__detail-step:hover:not(:disabled),
.travel-map__detail-step:focus-visible {
  background: rgba(40, 215, 197, 0.12);
  border-color: rgba(40, 215, 197, 0.7);
  color: #28d7c5 !important;
}

.travel-map__detail-step:disabled {
  background: transparent;
  border-color: rgba(152, 201, 198, 0.18);
  color: rgba(215, 236, 235, 0.55) !important;
  cursor: default;
}

/* Comfortable touch targets on the phone overlay where the card is used by tap. */
@media (max-width: 600px) {
  .travel-map__detail-step {
    height: 3rem;
    padding: 0 1rem;
    font-size: 0.7rem;
  }

  .travel-map__detail-step span {
    font-size: 1.25rem;
  }
}

.travel-map__detail-card-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: flex;
  width: 1.65rem;
  height: 1.65rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.travel-map__detail-card-close:hover,
.travel-map__detail-card-close:focus-visible {
  background: rgba(40, 215, 197, 0.16);
  color: #fff;
}

.travel-map__detail-card-close:focus-visible {
  outline: 2px solid #28d7c5;
  outline-offset: 1px;
}

/* Phones never render the letterboxed world strip. The inline map is
   replaced by a teaser card that opens the same map as a full-screen
   overlay whose zoom-out floor is the fit-to-height view (travel-map.js). */
.travel-map-teaser,
.travel-map__close,
.travel-map__regions {
  display: none;
}

body.is-map-fullscreen {
  overflow: hidden;
}

/* The map overlay is modal; the theme's floating chrome sits at z-index
   10001+ inside its own stacking context and would otherwise cover the
   dialog's close control. */
body.is-map-fullscreen #header,
body.is-map-fullscreen #navPanelToggle,
body.is-map-fullscreen #return-to-top {
  visibility: hidden;
}

.travel-map.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity var(--motion-standard) ease;
}

.travel-map.is-fullscreen.is-fullscreen-visible {
  opacity: 1;
}

.travel-map.is-fullscreen .travel-map__viewport {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
}

.travel-map.is-fullscreen .travel-map__hint {
  display: none;
}

.travel-map.is-fullscreen .travel-map__status {
  top: calc(6.1rem + env(safe-area-inset-top));
  left: calc(0.85rem + env(safe-area-inset-left));
}

.travel-map.is-fullscreen .travel-map__trip-picker {
  top: calc(0.7rem + env(safe-area-inset-top));
  left: calc(0.7rem + env(safe-area-inset-left));
  width: 13rem;
  max-width: calc(100vw - 5.4rem - env(safe-area-inset-left) - env(safe-area-inset-right));
}

.travel-map.is-fullscreen .travel-map__detail-card,
.travel-map.is-fullscreen .travel-map__detail-card.is-left {
  right: calc(0.7rem + env(safe-area-inset-right));
  bottom: calc(5rem + env(safe-area-inset-bottom));
  left: calc(0.7rem + env(safe-area-inset-left));
  width: auto;
  max-width: 24rem;
  margin: 0 auto;
}

.travel-map.is-fullscreen .travel-map__close {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top));
  right: calc(0.75rem + env(safe-area-inset-right));
  z-index: 8;
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(152, 201, 198, 0.35);
  border-radius: 50%;
  background: rgba(7, 19, 21, 0.92);
  box-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.travel-map.is-fullscreen .travel-map__close:focus-visible {
  outline: 2px solid #28d7c5;
  outline-offset: 2px;
}

.travel-map.is-fullscreen .travel-map__controls {
  position: absolute;
  top: calc(4.15rem + env(safe-area-inset-top));
  right: calc(0.875rem + env(safe-area-inset-right));
  flex-direction: column;
  margin: 0;
  gap: 0.3rem;
}

.travel-map.is-fullscreen .travel-map__regions {
  position: absolute;
  bottom: calc(0.9rem + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 8;
  display: flex;
  max-width: calc(100vw - 1.25rem);
  padding: 0.3rem;
  border: 1px solid rgba(152, 201, 198, 0.28);
  border-radius: 999px;
  background: rgba(7, 19, 21, 0.9);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.4);
  gap: 0.15rem;
  transform: translateX(-50%);
}

.travel-map__region-btn {
  display: inline-flex;
  height: auto;
  /* Map controls keep a 3rem touch target at phone and tablet widths. The
     contract's exemption covers dense pins, not the region controls offered in
     their place; measured at the 11pt phone root these chips were 40px. */
  min-height: 3rem;
  align-items: center;
  padding: 0.4rem 0.85rem;
  /* Each chip carries its own pill so it reads as a button, not bare text. */
  border: 1px solid rgba(152, 201, 198, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  /* !important: main.css paints every <button> #212931 !important, which
     otherwise left these chips dark-on-dark and nearly invisible. */
  color: #fff !important;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.travel-map__region-btn:hover:not(.is-active) {
  border-color: rgba(40, 215, 197, 0.5);
  background: rgba(40, 215, 197, 0.16);
}

.travel-map__region-btn.is-active {
  /* The chosen region reads as a solid teal chip, ahead of the resting pills. */
  border-color: transparent;
  background: rgba(40, 215, 197, 0.9);
  color: #04211f !important;
}

.travel-map__region-btn:focus-visible {
  outline: 2px solid #28d7c5;
  outline-offset: 1px;
}

/* City-level dots need a comfortable thumb target in the overlay; the
   visible dot stays small while the tappable halo grows. */
.travel-map.is-fullscreen .travel-map__detail::after {
  position: absolute;
  inset: -0.75rem;
  content: "";
}

.travel-map__controls {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.travel-map__zoom-btn {
  display: flex;
  width: 2.1rem;
  height: 2.1rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(152, 201, 198, 0.35);
  border-radius: 0.4rem;
  background: rgba(7, 19, 21, 0.92);
  box-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.travel-map__zoom-btn:hover,
.travel-map__zoom-btn:focus-visible {
  background: rgba(40, 215, 197, 0.18);
  color: #fff;
}

.travel-map__zoom-btn:focus-visible {
  outline: 2px solid #28d7c5;
  outline-offset: 2px;
}

.travel-map__zoom-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .travel-map__route-layer,
  .travel-map__marker,
  .travel-map__detail,
  .travel-map__detail-card,
  .travel-map__detail-card > img,
  .travel-map.is-fullscreen {
    transition: none;
  }
}

@media screen and (max-width: 736px) {
  .travel-atlas {
    margin: 0 1rem;
    padding: 1.25rem;
  }

  .travel-atlas__header {
    display: block;
  }

  .travel-atlas__header h1 {
    font-size: 1.55rem;
  }

  .travel-atlas__summary {
    margin-top: 0.8rem !important;
  }

  .travel-atlas__layout {
    max-width: none;
  }

}

@media screen and (max-width: 520px) {
  .travel-atlas {
    padding: 1.1rem;
  }

  .travel-atlas__header {
    margin-bottom: 1rem;
  }

  .travel-map {
    display: none;
  }

  /* A tall poster card, not a list row: on phones this is the only way into the
     atlas, so the world map is a full-width hero above the copy and an explicit
     call to action. The theme's global button rules (fixed 3.5em height, nowrap,
     inset ring, uppercase) would clip the card, so each is explicitly reset. */
  .travel-map-teaser {
    --teaser-preview-cycle: 4.2s;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #24464b;
    border-radius: var(--radius-compact);
    background: linear-gradient(145deg, #071315 0%, #0a1b1f 60%, #0e2427 100%);
    box-shadow: 0 0.55rem 1.3rem rgba(0, 0, 0, 0.32);
    cursor: pointer;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    white-space: normal;
  }

  .travel-map-teaser__media {
    position: relative;
    display: block;
    width: 100%;
    height: 10rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(152, 201, 198, 0.24);
  }

  /* Match the map artwork's 1200:624 projection surface before cropping it.
     This closer Europe-to-Asia frame centres the route as the card's subject;
     pins still use real atlas coordinates and remain attached to land. */
  .travel-map-teaser__projection {
    position: absolute;
    top: 0;
    left: -78.8%;
    width: 188%;
    aspect-ratio: 1200 / 624;
    background-image: url("../../images/travel/world-map.svg");
    background-position: center;
    background-size: 100% 100%;
    transform: none;
  }

  /* JS aligns the chord between two Natural Earth projected locations; the
     elliptical border and travelling light turn that chord into a flight arc. */
  .travel-map-teaser__route {
    position: absolute;
    top: var(--y1);
    left: var(--x1);
    z-index: 1;
    height: 1.55rem;
    margin-top: -1.55rem;
    transform-origin: left bottom;
  }

  .travel-map-teaser__route-line {
    position: absolute;
    inset: 0;
    border-top: 3px solid #ffc278;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    filter: drop-shadow(0 0 0.34rem rgba(255, 184, 105, 0.92));
    opacity: 0;
  }

  .travel-map-teaser__route-line::before {
    content: "";
    position: absolute;
    top: -0.32rem;
    left: 0;
    width: 100%;
    height: 1.55rem;
    border-top: 6px solid rgba(255, 184, 105, 0.16);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }

  .travel-map-teaser__tracer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0.48rem;
    height: 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: #28d7c5;
    box-shadow: 0 0 0.28rem #28d7c5, 0 0 0.72rem rgba(40, 215, 197, 0.95);
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .travel-map-teaser__pin {
    position: absolute;
    z-index: 3;
    width: 0.68rem;
    height: 0.68rem;
    border: 2px solid #071315;
    border-radius: 50%;
    background: #28d7c5;
    box-shadow: 0 0 0 0.18rem rgba(40, 215, 197, 0.22);
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .travel-map-teaser__pin--start {
    top: var(--y1);
    left: var(--x1);
  }

  .travel-map-teaser__pin--end,
  .travel-map-teaser__tap {
    top: var(--y2);
    left: var(--x2);
  }

  .travel-map-teaser__tap {
    position: absolute;
    z-index: 2;
    width: 1.45rem;
    height: 1.45rem;
    border: 2px solid rgba(40, 215, 197, 0.9);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .travel-map-teaser.is-previewing {
    animation: travel-teaser-lift var(--teaser-preview-cycle) ease-in-out 2;
  }

  .travel-map-teaser.is-previewing .travel-map-teaser__route-line {
    animation: travel-teaser-route var(--teaser-preview-cycle) linear 2;
  }

  .travel-map-teaser.is-previewing .travel-map-teaser__tracer {
    animation: travel-teaser-tracer var(--teaser-preview-cycle) linear 2;
  }

  .travel-map-teaser.is-previewing .travel-map-teaser__pin--start {
    animation: travel-teaser-origin var(--teaser-preview-cycle) ease-out 2;
  }

  .travel-map-teaser.is-previewing .travel-map-teaser__pin--end {
    animation: travel-teaser-destination var(--teaser-preview-cycle) ease-out 2;
  }

  .travel-map-teaser.is-previewing .travel-map-teaser__tap {
    animation: travel-teaser-tap var(--teaser-preview-cycle) ease-out 2;
  }

  .travel-map-teaser__copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: 5.4rem;
    padding: 0.72rem 1rem;
    font-family: var(--font-display);
  }

  .travel-map-teaser__copy-text {
    min-width: 0;
  }

  .travel-map-teaser__copy strong {
    display: block;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.25;
  }

  .travel-map-teaser__copy small {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* The whole poster is the button; this quiet route cue echoes the map. */
  .travel-map-teaser__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.4rem;
    height: 2.35rem;
    margin-left: 1rem;
    border: 1px solid rgba(152, 201, 198, 0.3);
    border-radius: 999px;
    background: rgba(7, 19, 21, 0.28);
    color: #28d7c5;
  }

  .travel-map-teaser__cta-route {
    position: relative;
    width: 1.65rem;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 0.32rem rgba(40, 215, 197, 0.42);
  }

  .travel-map-teaser__cta-route::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.32rem;
    height: 0.32rem;
    border: 1px solid #071315;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
  }

  .travel-map-teaser__cta-route::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  @keyframes travel-teaser-route {
    0%, 20% { clip-path: inset(-0.6rem 100% -0.6rem 0); opacity: 0; }
    21% { clip-path: inset(-0.6rem 100% -0.6rem 0); opacity: 1; }
    25% { clip-path: inset(-0.6rem 87.5% -0.6rem 0); opacity: 1; }
    29% { clip-path: inset(-0.6rem 75% -0.6rem 0); opacity: 1; }
    33% { clip-path: inset(-0.6rem 62.5% -0.6rem 0); opacity: 1; }
    37% { clip-path: inset(-0.6rem 50% -0.6rem 0); opacity: 1; }
    41% { clip-path: inset(-0.6rem 37.5% -0.6rem 0); opacity: 1; }
    45% { clip-path: inset(-0.6rem 25% -0.6rem 0); opacity: 1; }
    49% { clip-path: inset(-0.6rem 12.5% -0.6rem 0); opacity: 1; }
    53%, 78% { clip-path: inset(-0.6rem 0); opacity: 1; }
    88%, 100% { clip-path: inset(-0.6rem 0); opacity: 0; }
  }

  @keyframes travel-teaser-tracer {
    0%, 18%, 56%, 100% { left: 0; top: 100%; opacity: 0; }
    21% { left: 0; top: 100%; opacity: 1; }
    25% { left: 12.5%; top: 34%; opacity: 1; }
    29% { left: 25%; top: 13.4%; opacity: 1; }
    33% { left: 37.5%; top: 3.2%; opacity: 1; }
    37% { left: 50%; top: 0; opacity: 1; }
    41% { left: 62.5%; top: 3.2%; opacity: 1; }
    45% { left: 75%; top: 13.4%; opacity: 1; }
    49% { left: 87.5%; top: 34%; opacity: 1; }
    53% { left: 100%; top: 100%; opacity: 1; }
  }

  @keyframes travel-teaser-origin {
    0%, 7%, 88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
    13%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes travel-teaser-destination {
    0%, 49%, 88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
    54% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
    62%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes travel-teaser-tap {
    0%, 58% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
    62% { opacity: 0.9; }
    76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
  }

  @keyframes travel-teaser-lift {
    0%, 48%, 72%, 100% { transform: translateY(0); }
    56% { transform: translateY(-0.18rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .travel-map-teaser.is-previewing,
    .travel-map-teaser.is-previewing .travel-map-teaser__route-line,
    .travel-map-teaser.is-previewing .travel-map-teaser__tracer,
    .travel-map-teaser.is-previewing .travel-map-teaser__pin,
    .travel-map-teaser.is-previewing .travel-map-teaser__tap {
      animation: none;
    }

    .travel-map-teaser__route {
      display: none;
    }
  }

  .travel-map {
    padding: 0.55rem 0.55rem 0.4rem;
  }

  .travel-map__marker-label {
    width: 10.5rem;
  }

  .travel-map__journal-link {
    grid-template-columns: 1fr;
  }

  .travel-map__marker-label img {
    display: none;
  }

  .travel-map__marker,
  .travel-map__marker-dot {
    width: 0.85rem;
    height: 0.85rem;
  }

  .travel-map__marker::before {
    position: absolute;
    inset: -0.55rem;
    content: "";
  }

  /* Perth/Melbourne/Sydney cluster tightly on a phone-width world map, so their
     enlarged tap halos overlapped and a tap on one opened another's journal.
     Nudge them apart and trim these three halos just enough to separate the hit
     areas; the map's zoom handles finer selection. */
  .travel-map__marker--perth { top: 81%; left: 74%; }
  .travel-map__marker--melbourne { top: 86%; left: 84%; }
  .travel-map__marker--sydney { top: 77%; left: 93%; }

  .travel-map__marker--perth::before,
  .travel-map__marker--melbourne::before,
  .travel-map__marker--sydney::before {
    inset: -0.32rem;
  }

  .travel-map__place {
    padding: 0.13rem 0.22rem;
    font-size: 0.36rem;
    letter-spacing: 0.02em;
  }

  .travel-map__city-links {
    gap: 0.18rem;
    margin-left: 0;
  }

  .travel-map__city-links a {
    min-height: 1.6rem;
    padding: 0.26rem 0.34rem;
    font-size: 0.48rem;
  }

  .travel-map__hint {
    font-size: 0.58rem;
  }

  /* On phones the map is too small for overlay controls (they'd cover the
     Australia pins) — flow them as a row between the map and the hint. */
  .travel-map__controls {
    position: static;
    flex-direction: row;
    justify-content: flex-end;
    margin: 0.45rem 0 0.1rem;
    gap: 0.35rem;
  }

  .travel-map__zoom-btn {
    width: 2.5rem;
    height: 2.5rem;
  }

  .travel-map.is-fullscreen .travel-map__detail-card {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    padding: 0.55rem 2rem 0.55rem 0.55rem;
  }

  .travel-map.is-fullscreen .travel-map__detail-card > img {
    width: 4.75rem;
    height: 4.75rem;
  }

  .travel-map.is-fullscreen .travel-map__detail-card-link,
  .travel-map.is-fullscreen .travel-map__detail-card-close {
    min-height: 3rem;
  }

  .travel-map.is-fullscreen .travel-map__detail-card-close {
    width: 3rem;
    height: 3rem;
  }

  /* Phone-overlay typography: the desktop point sizes render around 7-9px
     at the phone root, illegible at arm's length. Overlay-scoped so the
     inline map keeps its collision-tuned label sizes. */
  .travel-map.is-fullscreen .travel-map__detail-card-copy > p:first-child,
  .travel-map.is-fullscreen .travel-map__city-links a {
    font-size: 0.62rem;
  }

  #main .travel-map.is-fullscreen .travel-map__detail-card h2 {
    font-size: 1.02rem;
  }

  .travel-map.is-fullscreen .travel-map__detail-card-copy > p:not(:first-child),
  .travel-map.is-fullscreen .travel-map__hint {
    font-size: 0.72rem;
  }

  .travel-map.is-fullscreen .travel-map__detail-card-link {
    font-size: 0.82rem;
  }

  .travel-map.is-fullscreen .travel-map__status,
  .travel-map.is-fullscreen .travel-map__detail-number {
    font-size: 0.66rem;
  }

  .travel-map.is-fullscreen .travel-map__detail-label {
    font-size: 0.6rem;
  }

  .travel-map.is-fullscreen .travel-map__marker-label strong {
    font-size: 0.8rem;
  }

  .travel-map.is-fullscreen .travel-map__marker-label small {
    font-size: 0.68rem;
  }

  .travel-map.is-fullscreen .travel-map__city-links a {
    min-height: 2rem;
  }

  .travel-map.is-fullscreen .travel-map__place {
    font-size: 0.46rem;
  }
}

/* Compact travel journal archive */
#main > .travel-archive-heading {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 2rem 0;
  padding: 1rem 0 0.85rem !important;
  border-top: 0;
  border-bottom: 1px solid var(--color-border-soft);
  overflow: visible;
  text-align: left;
}

#main > .travel-archive-heading > div {
  min-width: 0;
}

#main > .travel-archive-heading span {
  display: block;
  color: var(--color-brand-600);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#main > .travel-archive-heading h2 {
  margin: 0.25rem 0 0;
  padding: 0.05rem 0 0.1rem;
  color: var(--color-ink-900);
  font-size: 1.55rem;
  line-height: 1.25;
  overflow: visible;
  text-align: left;
}

#main > .travel-archive-heading p {
  flex: 0 0 auto;
  margin: 0;
  color: var(--color-ink-500);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.travel-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#main > .travel-grid {
  padding: 1rem 2rem 2rem !important;
}

.travel-grid .travel-card {
  display: grid;
  width: 100% !important;
  min-height: 12.5rem;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  margin: 0 !important;
  min-width: 0;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.65rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  transition: border-color var(--motion-standard) ease,
    transform var(--motion-standard) var(--ease-standard),
    box-shadow var(--motion-standard) ease;
}

/* The card's hover transition is intentionally shorter than its entrance.
   Keep the reveal timing until JS marks the one-shot entrance as settled,
   then fall back to the standard card feedback above. */
.travel-grid .travel-card[data-reveal]:not(.is-reveal-settled) {
  transition: opacity var(--motion-reveal) ease,
    transform var(--motion-reveal) var(--ease-standard),
    border-color var(--motion-standard) ease,
    box-shadow var(--motion-standard) ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}

.travel-grid .travel-card:hover,
.travel-grid .travel-card:focus-within {
  border-color: rgba(18, 138, 134, 0.38);
  transform: translateY(-4px);
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.14);
}

.travel-grid .travel-card header {
  grid-column: 2;
  grid-row: 1;
  padding: 1rem 1rem 0.3rem;
  text-align: left;
}

.travel-grid .travel-card h2 {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.18rem;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
}

.travel-grid .travel-card header p {
  margin: 0;
  color: var(--color-ink-500);
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: left !important;
}

.travel-grid .travel-card .travel-card__image,
.travel-grid .travel-card > .image {
  display: block;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.travel-grid .travel-card .travel-card__image img,
.travel-grid .travel-card > .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--motion-slow) var(--ease-standard);
}

.travel-grid .travel-card .travel-card__image picture,
.travel-grid .travel-card > .image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.travel-grid .travel-card:hover .travel-card__image img,
.travel-grid .travel-card:hover > .image img,
.travel-grid .travel-card:focus-within .travel-card__image img,
.travel-grid .travel-card:focus-within > .image img {
  transform: scale(1.04);
}

.travel-grid .travel-card > p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0.3rem 1rem 0;
  color: var(--color-ink-600);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: left;
}

.travel-grid .travel-card .actions.special {
  grid-column: 2;
  grid-row: 3;
  justify-content: flex-start;
  margin: 0;
  padding: 0.75rem 1rem 1rem;
}

.travel-grid .travel-card .actions.special .button {
  height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.62rem;
  line-height: 2.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .travel-grid .travel-card,
  .travel-grid .travel-card .travel-card__image img,
  .travel-grid .travel-card > .image img {
    transition: none;
  }

  .travel-grid .travel-card:hover,
  .travel-grid .travel-card:focus-within,
  .travel-grid .travel-card:hover .travel-card__image img,
  .travel-grid .travel-card:hover > .image img,
  .travel-grid .travel-card:focus-within .travel-card__image img,
  .travel-grid .travel-card:focus-within > .image img {
    transform: none;
  }
}

@media screen and (max-width: 1100px) {
  .travel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #main > .travel-grid {
    padding: 1rem 2rem 2rem !important;
  }

  .travel-grid .travel-card h2 {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 900px) {
  .travel-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .travel-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #main > .travel-grid {
    padding: 0.85rem 1rem 1rem !important;
  }

  #main > .travel-archive-heading {
    gap: 0.1rem;
    margin: 1.5rem 1rem 0;
    padding: 0.9rem 0 0.75rem !important;
  }

  .travel-grid .travel-card {
    min-height: 11rem;
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }

  .travel-grid .travel-card .image,
  .travel-grid .travel-card > .image {
    height: 100%;
  }

  .travel-grid .travel-card h2 {
    font-size: 1.08rem;
    white-space: normal;
  }
}