:root {
  --mm-ink: #12283a;
  --mm-muted: #667887;
  --mm-blue: #176b9b;
  --mm-blue-dark: #10283d;
  --mm-sky: #eaf4f8;
  --mm-line: #dce6eb;
  --mm-card: #fff;
  --mm-shadow: 0 12px 32px #10283d12;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--mm-ink);
  background-color: #dce9ee !important;
  background-image:
    linear-gradient(rgba(235,243,247,.62), rgba(216,232,239,.62)),
    radial-gradient(ellipse at 12% 18%, transparent 0 82px, rgba(23,107,155,.20) 83px 85px, transparent 86px 132px, rgba(23,107,155,.14) 133px 135px, transparent 136px 184px, rgba(23,107,155,.10) 185px 187px, transparent 188px),
    radial-gradient(ellipse at 88% 64%, transparent 0 104px, rgba(23,107,155,.18) 105px 107px, transparent 108px 160px, rgba(23,107,155,.13) 161px 163px, transparent 164px 218px, rgba(23,107,155,.09) 219px 221px, transparent 222px),
    url("sfondo.jpg") !important;
  background-size: auto, auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
#page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* Dark masthead and the existing Saratoga live gizmo. */
#header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand temp" "place gizmo";
  align-items: center;
  gap: 0 20px;
  min-height: 84px;
  padding: 12px max(24px, calc((100% - 1180px) / 2));
  color: #fff;
  background: var(--mm-blue-dark);
}
.headerTitle { grid-area: brand; margin: 0; padding: 0; }
.headerTitle a,
.headerTitle > a {
  color: #fff;
  font-size: 22px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: -.02em;
}
.headerTemp {
  grid-area: temp;
  float: none;
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.1;
}
.subHeader {
  grid-area: place;
  float: none;
  clear: none;
  position: static;
  margin: 0;
  padding: 2px 0 0;
  color: #b6cbd7;
  background: transparent;
  font-size: 12px;
}
.subHeaderRight {
  grid-area: gizmo;
  margin: 0;
  padding: 2px 0 0;
  color: #c2d5df;
  background: transparent;
  font-size: 12px;
}
.subHeaderRight .ajaxgizmo { color: #c2d5df; }
.subHeader a { color: #fff; }

/* Keep all existing section links, arranged as a horizontal menu. */
.doNotPrint { clear: both; }
.leftSideBar {
  float: none;
  clear: both;
  width: 100%;
  background: var(--mm-blue-dark);
  border-top: 1px solid #ffffff16;
  border-bottom: 0;
}
.leftSideBar .sideBarTitle { display: none; }
.leftSideBar ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 7px 0 10px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
.leftSideBar li { flex: 0 0 auto; margin: 0; padding: 0; }
.leftSideBar a,
.leftSideBar a:visited,
.leftSideBar .thisPage {
  display: block;
  width: auto;
  padding: 7px 10px;
  color: #d7e7ee;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.leftSideBar a:hover,
.leftSideBar .thisPage { color: #fff; background: #ffffff18; }
.topWeatherNav { background: var(--mm-blue-dark) !important; border-color: #ffffff16 !important; }
.topWeatherNav ul { width: min(1180px, calc(100% - 32px)) !important; margin: 0 auto !important; padding: 7px 0 10px !important; }
.topWeatherNav a,
.topWeatherNav a:visited,
.topWeatherNav .thisPage { color: #d7e7ee !important; }
.topWeatherNav a:hover,
.topWeatherNav .thisPage { color: #fff !important; background: #ffffff18 !important; }

/* Main page: live conditions, station photo, measurements and forecast. */
#main-copy.home-main {
  width: min(1180px, calc(100% - 32px));
  margin: 27px auto 0;
  padding: 0 0 28px;
  color: var(--mm-ink);
  background: transparent;
  border: 0;
  text-align: left;
  line-height: 1.45;
}
.home-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 17px;
}
.eyebrow {
  color: var(--mm-blue);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#main-copy.home-main .home-intro h1 {
  margin: 5px 0 0;
  padding: 0;
  color: var(--mm-ink);
  border: 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.updated { color: var(--mm-muted); font-size: 13px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 16px;
  margin-bottom: 16px;
}
.current-card,
.photo-card {
  min-width: 0;
  min-height: 248px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--mm-shadow);
}
.current-card {
  position: relative;
  padding: 26px 28px;
  color: #fff;
  background: linear-gradient(135deg, #176b9b, #0d486c);
}
.current-card::after {
  position: absolute;
  top: -75px;
  right: -80px;
  width: 250px;
  height: 250px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #ffffff09, 0 0 0 58px #ffffff07;
  content: "";
  pointer-events: none;
}
.current-head,
.temp-row,
.station-note { position: relative; z-index: 1; }
.current-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.current-head > span:first-child { color: #d8edf7; font-size: 14px; }
.live {
  padding: 6px 10px;
  color: #d9f4e8;
  background: #ffffff1b;
  border-radius: 999px;
  font-size: 11px;
}
.live b { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: #6ce0a6; border-radius: 50%; }
.temp-row { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.condition-symbol { display: grid; width: 82px; height: 82px; flex: 0 0 82px; place-items: center; }
.condition-symbol img { display: block; width: 74px; height: 74px; object-fit: contain; }
.temperature { font-size: 72px; font-weight: 680; line-height: 1; letter-spacing: -.07em; }
.temperature sup { margin-left: 4px; font-size: 24px; letter-spacing: 0; vertical-align: top; }
.condition { margin-top: 4px; font-size: 17px; font-weight: 600; }
.feels { margin-top: 3px; color: #cfe1eb; font-size: 13px; }
.station-note { margin-top: 22px; color: #d3e6ee; font-size: 12px; }
.photo-card {
  position: relative;
  display: flex;
  align-items: end;
  min-height: 248px;
  background-color: #82999e;
  background-position: center 52%;
  background-size: cover;
}
.photo-card::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #10283dc9); content: ""; }
.photo-label { position: relative; z-index: 1; padding: 0 19px 17px; color: #fff; }
.photo-label strong { display: block; font-size: 17px; }
.photo-label span { color: #e1edf2; font-size: 12px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.metric,
.section { min-width: 0; background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: 15px; box-shadow: var(--mm-shadow); }
.metric { min-height: 100px; padding: 16px 18px; }
.metric-top { display: flex; justify-content: space-between; color: var(--mm-muted); font-size: 12px; }
.metric-icon { font-size: 17px; }
.metric-value { margin-top: 7px; font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.metric-value small { color: var(--mm-muted); font-size: 13px; font-weight: 550; letter-spacing: 0; }
.metric-note { margin-top: 1px; color: var(--mm-muted); font-size: 11px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 16px; }
.section { margin-bottom: 16px; padding: 21px 22px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 15px; }
#main-copy.home-main .section-title h2 { margin: 0; color: var(--mm-ink); font-size: 18px; letter-spacing: -.02em; }
.section-title a { color: var(--mm-blue); font-size: 12px; font-weight: 650; white-space: nowrap; }
.section p { color: var(--mm-muted); font-size: 13px; }
.forecast-widget { width: 100%; min-width: 0; max-width: 100%; }
.forecast-frame { width: 100%; height: 420px; overflow: hidden; border-radius: 10px; background: #fff; }
.forecast-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.forecast-widget > div { padding: 7px 2px 0; text-align: right; font-size: 11px; }
.forecast-widget a { color: var(--mm-blue); }
.rain-section p { margin: 0 0 12px; }
.rain-total { display: flex; justify-content: space-between; align-items: end; padding-top: 10px; border-top: 1px solid var(--mm-line); }
.rain-total strong { font-size: 26px; letter-spacing: -.04em; }
.rain-total small,
.rain-total span { color: var(--mm-muted); font-size: 12px; font-weight: 500; }
.about { display: flex; align-items: center; gap: 13px; }
.station-icon { display: grid; width: 43px; height: 43px; flex: none; place-items: center; color: var(--mm-blue); background: var(--mm-sky); border-radius: 12px; font-size: 21px; }
.about strong { display: block; margin-bottom: 3px; color: var(--mm-ink); font-size: 13px; }
.about p { margin: 0; font-size: 12px; }
.more-links a { display: flex; justify-content: space-between; padding: 9px 0; color: var(--mm-muted) !important; border-top: 1px solid var(--mm-line); font-size: 13px; text-decoration: none; }
.more-links a span { color: var(--mm-blue); }
#footer { margin: 0; padding: 18px max(24px, calc((100% - 1180px) / 2)); color: #d4e1e8; background: var(--mm-blue-dark); font-size: 12px; line-height: 1.5; }
#footer a,
#footer a:visited { color: #fff; }

@media (max-width: 760px) {
  #header { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; min-height: 76px; padding: 9px 15px; }
  .headerTitle a, .headerTitle > a { font-size: 18px; }
  .headerTemp { font-size: 27px; }
  .subHeader, .subHeaderRight { font-size: 11px; }
  .leftSideBar ul,
  .topWeatherNav ul { width: calc(100% - 18px) !important; gap: 2px; padding: 6px 0 8px !important; }
  .leftSideBar a, .leftSideBar a:visited, .leftSideBar .thisPage { padding: 10px 11px; font-size: 16px; line-height: 1.35; }
  #main-copy.home-main { width: calc(100% - 28px); margin-top: 20px; padding-bottom: 22px; }
  .home-intro { align-items: start; flex-direction: column; gap: 5px; }
  #main-copy.home-main .home-intro h1 { font-size: 25px; }
  .hero { grid-template-columns: 1fr; }
  .current-card { min-height: 220px; padding: 22px; }
  .temperature { font-size: 64px; }
  .photo-card { min-height: 170px; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .metric { min-height: 91px; padding: 13px; }
  .metric-value { font-size: 21px; }
  .content-grid { grid-template-columns: 1fr; gap: 0; }
  .section { padding: 17px 15px; }
  #main-copy.home-main .section-title h2 { font-size: 16px; }
  .forecast-frame { height: 500px; }
  #main-copy.home-main .forecast-frame iframe { width: 167% !important; max-width: none !important; height: 835px; transform: scale(.598802); transform-origin: top left; }
  #footer { padding: 16px 14px; }
}
@media (max-width: 380px) {
  .forecast-frame { height: 500px; }
  #main-copy.home-main .forecast-frame iframe { width: 195% !important; max-width: none !important; height: 975px; transform: scale(.512821); }
  .temperature { font-size: 58px; }
  .condition-symbol { width: 62px; height: 62px; flex-basis: 62px; }
  .condition-symbol img { width: 60px; height: 60px; }
  .current-head > span:first-child { font-size: 12px; }
}