.mc-weather-summary { margin:0 0 22px; overflow:hidden; border:1px solid #dce6ec; border-radius:14px; background:#fff; color:#183247; font-family:'Open Sans',Arial,sans-serif; box-shadow:0 3px 14px rgba(24,50,71,.04); }
.mc-weather-summary * { box-sizing:border-box; }
.mc-summary-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:15px 20px; background:#f5f8fa; border-bottom:1px solid #e4ebef; }
.mc-summary-counts { display:flex; align-items:center; flex-wrap:wrap; gap:10px 26px; }
.mc-summary-counts a { display:inline-flex; align-items:baseline; gap:7px; color:#526875; font-size:13px; text-decoration:none; }
.mc-summary-counts strong { color:#183247; font-size:21px; font-weight:700; }
.mc-summary-views { color:#6a7f8b; font-size:12px; }
.mc-summary-views strong { margin-left:7px; color:#354e5e; font-weight:600; }
.mc-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.mc-summary-item { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; padding:19px 20px; border-right:1px solid #e4ebef; }
.mc-summary-item:last-child { border-right:0; }
.mc-summary-label { color:#657b89; font-size:11px; font-weight:600; line-height:1.5; text-transform:uppercase; letter-spacing:.65px; text-decoration:none; }
.mc-summary-value { color:#244d67; font-size:25px; line-height:1.2; font-weight:700; }
.mc-summary-value small { font-size:13px; font-weight:400; color:#6b7e8a; }
.mc-summary-dry .mc-summary-value { color:#258267; }
.mc-summary-rain-active .mc-summary-value, .mc-summary-cold .mc-summary-value { color:#247ba5; }
.mc-summary-warm .mc-summary-value { color:#b96039; }
.mc-summary-station, .mc-summary-note { color:#526875; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.mc-summary-station { text-decoration:none; }
.mc-weather-summary a:hover { color:#127d8e; text-decoration:underline; }
.mc-weather-summary a:focus-visible { outline:3px solid #1592a6; outline-offset:3px; }
.mc-summary-news { padding:12px 20px; border-top:1px solid #e4ebef; background:#f9fbfc; color:#526875; font-size:13px; line-height:1.6; }
.mc-summary-news a { color:#176d7c; font-weight:600; }
.mc-summary-news p { margin:0; }
@media(max-width:800px) { .mc-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mc-summary-item:nth-child(2) { border-right:0; } .mc-summary-item:nth-child(-n+2) { border-bottom:1px solid #e4ebef; } }
@media(max-width:480px) { .mc-summary-top { padding:12px 14px; gap:9px; } .mc-summary-counts { gap:8px 18px; } .mc-summary-counts a { font-size:12px; } .mc-summary-counts strong { font-size:19px; } .mc-summary-item { padding:15px 14px; } .mc-summary-value { font-size:22px; } .mc-summary-label { font-size:10px; letter-spacing:.3px; } .mc-summary-news { padding:12px 14px; } }
.mc-summary-news h3 { display:inline; margin:0; font:inherit; color:inherit; }

/* Decorative weather artwork: faded toward the readings for legibility. */
.mc-summary-item { position:relative; isolation:isolate; overflow:hidden; background-color:var(--weather-tint,#f5fafb); }
.mc-summary-item::before { content:""; position:absolute; z-index:-2; inset:0; background-image:var(--weather-art); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; opacity:.68; pointer-events:none; }
.mc-summary-item::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,var(--weather-tint) 8%,var(--weather-tint) 28%,transparent 100%); pointer-events:none; }
.mc-summary-dry { --weather-tint:#f1f9f5; --weather-art:url('/images/weather-summary/dry.svg'); }
.mc-summary-rain-active { --weather-tint:#f0f7fb; --weather-art:url('/images/weather-summary/rain.svg'); }
.mc-summary-wind { --weather-tint:#f1f7f9; --weather-art:url('/images/weather-summary/windsock.svg'); }
.mc-summary-warm { --weather-tint:#fff8ef; --weather-art:url('/images/weather-summary/warm.svg'); }
.mc-summary-cold { --weather-tint:#f1f7fc; --weather-art:url('/images/weather-summary/cold.svg'); }
.mc-summary-label { color:#4c6371; }
.mc-summary-station, .mc-summary-note { color:#405968; }
@media(max-width:480px) { .mc-summary-item::before { opacity:.48; background-position:right bottom; background-size:auto 115px; } }