.forecast-map-page {
  --map-page-ink: #17324a;
  --map-page-blue: #195b91;
  --map-page-teal: #178b91;
  --map-page-sand: #f6ecd3;
  color: var(--map-page-ink);
}

.forecast-map-page .map-page-site-header {
  width: min(1380px, calc(100% - 24px));
  margin: 14px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(29,61,120,.96), rgba(19,137,144,.96));
  box-shadow: 0 12px 32px rgba(20,57,91,.18);
}

.forecast-map-page .map-page-site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.forecast-map-page .map-page-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.18rem;
  font-weight: 900;
  text-decoration: none;
}

.forecast-map-page .map-page-brand img {
  width: 38px;
  height: 38px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,.93);
}

.forecast-map-page .map-page-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.forecast-map-page .map-page-nav-links a {
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: .88rem;
  font-weight: 780;
  text-decoration: none;
}

.forecast-map-page .map-page-nav-links a:hover,
.forecast-map-page .map-page-nav-links a:focus-visible {
  background: rgba(255,255,255,.16);
}

.forecast-map-page .map-page-language {
  background: #fff;
  color: #214f85 !important;
}

.forecast-map-page .forecast-map-main {
  width: min(1380px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 44px;
}

.forecast-map-page .map-page-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0 0 12px;
  color: #526b80;
  font-size: .88rem;
}

.forecast-map-page .map-page-breadcrumbs a {
  color: #1d5988;
  font-weight: 750;
  text-decoration: none;
}

.forecast-map-page .map-page-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
  gap: 22px;
  align-items: center;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 28px;
  background: linear-gradient(120deg, #173d77 0%, #176c91 55%, #138f91 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(20,59,91,.2);
}

.forecast-map-page .map-page-hero::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -90px;
  top: -130px;
  border: 42px solid rgba(255,255,255,.08);
  border-radius: 50%;
}

.forecast-map-page .map-page-eyebrow {
  margin: 0 0 9px;
  color: #d8fbff;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.forecast-map-page .map-page-hero h1 {
  max-width: 880px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.forecast-map-page .map-page-intro {
  max-width: 850px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.65;
}

.forecast-map-page .map-page-hero-facts {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 0;
}

.forecast-map-page .map-page-hero-facts div {
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px;
  background: rgba(7,39,70,.25);
  backdrop-filter: blur(5px);
}

.forecast-map-page .map-page-hero-facts dt {
  color: #c9f6f5;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.forecast-map-page .map-page-hero-facts dd {
  margin: 4px 0 0;
  color: #fff;
  font-weight: 800;
}

.forecast-map-page .map-page-live {
  margin-top: 18px;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid rgba(34,91,132,.15);
  border-radius: 26px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 16px 45px rgba(24,63,91,.13);
}

.forecast-map-page .map-page-live-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px 14px;
}

.forecast-map-page .map-page-live-heading h2 {
  margin: 0;
  color: #20396a;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.forecast-map-page .map-page-live-heading span {
  color: #5a7184;
  font-size: .88rem;
}

.forecast-map-page #forecast-map-embed {
  min-height: 580px;
}

.forecast-map-page dialog.synoptic-dialog.is-embedded {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: inherit;
  overflow: visible;
}

.forecast-map-page dialog.synoptic-dialog.is-embedded::backdrop {
  display: none;
}

.forecast-map-page dialog.synoptic-dialog.is-embedded .synoptic-map-close {
  display: none;
}

.forecast-map-page dialog.synoptic-dialog.is-embedded .synoptic-map-shell {
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}

.forecast-map-page .map-page-content {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
  gap: 18px;
  margin-top: 18px;
}

.forecast-map-page .map-page-article,
.forecast-map-page .map-page-aside,
.forecast-map-page .map-page-related {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(35,86,124,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 34px rgba(25,61,88,.09);
}

.forecast-map-page .map-page-article h2,
.forecast-map-page .map-page-aside h2,
.forecast-map-page .map-page-related h2 {
  margin: 0 0 14px;
  color: #24366d;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.forecast-map-page .map-page-article h3 {
  margin: 25px 0 8px;
  color: #176c7c;
  font-size: 1.15rem;
}

.forecast-map-page .map-page-article p,
.forecast-map-page .map-page-article li,
.forecast-map-page .map-page-aside p,
.forecast-map-page .map-page-aside li {
  color: #3f586c;
  line-height: 1.75;
}

.forecast-map-page .map-page-tip {
  margin-top: 20px;
  padding: 17px 19px;
  border-left: 5px solid #e8aa34;
  border-radius: 10px 17px 17px 10px;
  background: #fff5da;
  color: #574414;
}

.forecast-map-page .map-page-related {
  margin-top: 18px;
}

.forecast-map-page .map-page-related-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.forecast-map-page .map-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.forecast-map-page .map-hub-grid a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  align-items: center;
  min-height: 130px;
  padding: 22px;
}

.forecast-map-page .map-hub-grid a > span {
  grid-row: 1 / 3;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #27539b, #15989a);
  color: #fff;
  font-size: 1.25rem;
}

.forecast-map-page .map-hub-grid small {
  color: #5c7182;
  font-weight: 500;
  line-height: 1.45;
}

.forecast-map-page .map-page-related a {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(40,91,132,.17);
  border-radius: 15px;
  background: linear-gradient(145deg, #f8fbff, #eef8f7);
  color: #214c80;
  font-weight: 820;
  line-height: 1.25;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.forecast-map-page .map-page-related a:hover,
.forecast-map-page .map-page-related a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 9px 23px rgba(20,72,111,.14);
}

.forecast-map-page .map-page-related a[aria-current="page"] {
  border-color: transparent;
  background: linear-gradient(135deg, #245399, #168f92);
  color: #fff;
}

.forecast-map-page .map-page-footer {
  width: min(1380px, calc(100% - 24px));
  margin: 0 auto 24px;
  padding: 22px;
  border-radius: 22px;
  background: #173a60;
  color: rgba(255,255,255,.86);
  text-align: center;
}

.forecast-map-page .map-page-footer a { color: #d7fbff; }

@media (max-width: 920px) {
  .forecast-map-page .map-page-hero,
  .forecast-map-page .map-page-content { grid-template-columns: 1fr; }
  .forecast-map-page .map-page-related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .forecast-map-page .forecast-map-main { width: min(100% - 12px, 1380px); }
  .forecast-map-page .map-page-hero { padding: 24px 19px; border-radius: 21px; }
  .forecast-map-page .map-page-live { padding: 6px; border-radius: 20px; }
  .forecast-map-page #forecast-map-embed { min-height: 500px; }
  .forecast-map-page .map-page-related-grid { grid-template-columns: 1fr; }
  .forecast-map-page .map-hub-grid { grid-template-columns: 1fr; }
  .forecast-map-page .map-page-related a { min-height: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .forecast-map-page .map-page-related a { transition: none; }
}