:root{
  --map-height:min(68dvh,680px);
}

.context{
  padding:8px 12px;
  border-radius:16px;
}

.headline-tag{
  margin:0 0 4px;
  color:var(--primary-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

.context h1{
  margin:0;
  font-size:clamp(28px,4.1vw,40px);
}

.headline-subtext{
  margin:4px 0 0;
  color:var(--text-2);
  font-size:14px;
}

.context-main{
  gap:8px;
}

.location-button{
  min-height:48px;
  padding:3px 6px;
}

.location-icon{
  width:36px;
  height:36px;
}

.weather{
  min-height:48px;
  padding:3px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.62);
}

.weather strong{
  font-size:20px;
}

.weather-note{
  margin-top:4px;
  padding:4px 8px;
  font-size:12px;
}

.recommendation{
  margin-top:8px;
}

.recommendation > .section-title{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.map-stage{
  display:grid;
  gap:14px;
}

.map-canvas{
  position:relative;
  min-height:var(--map-height);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.9), transparent 20%),
    linear-gradient(180deg, #f6f1df 0%, #e6efd8 40%, #d9e8d5 100%);
  box-shadow:var(--shadow);
}

.map-backdrop span{
  position:absolute;
  display:block;
}

.water{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(113,189,146,.34), rgba(76,152,194,.28));
  filter:blur(.2px);
}

.water-west{
  top:9%;
  left:7%;
  width:24%;
  height:36%;
  transform:rotate(-24deg);
}

.water-east{
  right:4%;
  bottom:8%;
  width:20%;
  height:24%;
  transform:rotate(18deg);
}

.road{
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 0 1px rgba(32,51,42,.05);
}

.road-a{
  top:20%;
  left:-8%;
  width:78%;
  height:14px;
  transform:rotate(18deg);
}

.road-b{
  top:44%;
  right:-6%;
  width:66%;
  height:12px;
  transform:rotate(-26deg);
}

.road-c{
  bottom:18%;
  left:18%;
  width:52%;
  height:10px;
  transform:rotate(8deg);
}

.district{
  border:1px dashed rgba(62,142,104,.26);
  border-radius:22px;
  background:rgba(255,255,255,.18);
}

.district-a{
  top:14%;
  right:18%;
  width:20%;
  height:18%;
}

.district-b{
  top:42%;
  left:12%;
  width:28%;
  height:22%;
}

.district-c{
  bottom:10%;
  left:48%;
  width:24%;
  height:18%;
}

.map-marker{
  position:absolute;
  min-width:48px;
  min-height:48px;
  padding:0;
  border:0;
  background:transparent;
  transform:translate(-50%,-100%);
}

.map-marker::before{
  content:"";
  position:absolute;
  inset:auto auto 0 50%;
  width:18px;
  height:18px;
  border-radius:18px 18px 18px 0;
  background:var(--accent-dark);
  box-shadow:0 10px 24px rgba(155,70,15,.22);
  transform:translate(-50%,0) rotate(-45deg);
}

.map-marker::after{
  content:"";
  position:absolute;
  left:50%;
  top:11px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  transform:translateX(-50%);
}

.map-marker span{
  position:absolute;
  left:50%;
  bottom:30px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(32,51,42,.12);
  transform:translateX(-50%);
}

.map-marker.active::before{
  background:var(--primary);
  transform:translate(-50%,-4px) rotate(-45deg) scale(1.08);
}

.map-marker.active span{
  background:var(--primary-dark);
  color:#fff;
}

.map-my-location{
  position:absolute;
  left:16%;
  top:58%;
  padding:6px 10px;
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  background:rgba(32,51,42,.84);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.map-my-location svg{
  width:16px;
  height:16px;
}

.map-focus-card{
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow);
}

.map-focus-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.map-focus-card .match{
  position:static;
  display:inline-flex;
  margin-bottom:8px;
}

.map-focus-card h3{
  margin:0;
}

.map-focus-type{
  margin-top:8px;
  color:var(--text-2);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.place-card.is-highlighted{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(62,142,104,.12),0 7px 22px rgba(32,51,42,.08);
}

@media(max-width:760px){
  :root{
    --map-height:56dvh;
  }

  main{
    padding-top:10px;
  }

  .context{
    padding:12px 14px 14px;
  }

  .headline-subtext{
    font-size:13px;
  }

  .context-main{
    flex-direction:column;
    align-items:stretch;
  }

  .weather{
    justify-content:space-between;
  }

  .map-canvas{
    border-radius:24px;
  }

  .map-marker span{
    font-size:11px;
  }

  .map-focus-head{
    flex-direction:column;
    gap:4px;
  }

  .map-focus-type{
    margin-top:0;
    white-space:normal;
  }
}

@media(prefers-color-scheme:dark){
  .weather{
    background:rgba(255,255,255,.06);
  }

  .map-canvas{
    background:
      radial-gradient(circle at 18% 16%, rgba(255,255,255,.08), transparent 20%),
      linear-gradient(180deg, #263126 0%, #1f3326 38%, #1d2923 100%);
  }

  .road{
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 1px rgba(255,255,255,.04);
  }

  .district{
    background:rgba(255,255,255,.02);
    border-color:rgba(113,189,146,.24);
  }

  .map-focus-card{
    background:rgba(23,33,27,.94);
  }

  .map-marker span{
    background:rgba(23,33,27,.94);
    color:var(--text);
  }

  .map-marker.active span{
    color:#fff;
  }
}