.weather-banner { width:min(900px,calc(100% - 28px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; padding:0; border:1px solid #c9d7e0; border-radius:18px; background:#fff; color:#233b4a; box-shadow:0 18px 70px #102c4555; font:16px/1.55 Source Sans Pro,Arial,sans-serif; }
.weather-banner::backdrop { background:#172a406b; backdrop-filter:blur(3px); }
.weather-banner > header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px 8px 22px; background:#f1f5f8; color:#5c7181; font-size:12px; letter-spacing:.06em; }
.weather-banner .weather-banner-close { display:grid; place-items:center; flex:0 0 44px; width:44px; min-height:44px; padding:0; border:0; border-radius:10px; background:transparent; color:#3b5569; font:28px Arial,sans-serif; cursor:pointer; }
.weather-banner .weather-banner-close:hover { background:#e2ebf2; }
.weather-banner > img,.weather-banner-image img { display:block; width:100%; max-height:44vh; object-fit:contain; background:#f8fafc; }
.weather-banner-content { padding:20px 24px 24px; }
.weather-banner h2 { margin:0 0 12px; font-size:clamp(21px,4vw,28px); line-height:1.2; color:#234660; overflow-wrap:anywhere; }
.weather-banner p { margin:0 0 18px; white-space:pre-wrap; overflow-wrap:anywhere; }
.weather-banner .weather-banner-link { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 20px; border:1px solid #d27713; border-radius:10px; background:#f89a26; color:#25394a; text-decoration:none; font-weight:700; }
.weather-banner :is(button,a):focus-visible { outline:3px solid #1768ad; outline-offset:-3px; }
@media(max-width:500px) { .weather-banner-content { padding:18px; } .weather-banner > header { padding-left:18px; } }

.weather-banner-image { display:block; }

/* Finished artwork keeps its original proportions and has no duplicated copy. */
.weather-banner.weather-banner-artwork { width:min(1100px,calc(100% - 28px),calc((100dvh - 92px) * var(--banner-ratio,1.777))); border:0; border-radius:14px; overflow:hidden; }
.weather-banner-artwork > header { position:absolute; inset:0 0 auto; padding:8px; background:transparent; pointer-events:none; }
.weather-banner-artwork > header > span { padding:3px 9px; border-radius:20px; background:#ffffffed; color:#334a5c; box-shadow:0 1px 5px #152c4033; }
.weather-banner-artwork .weather-banner-close { pointer-events:auto; background:#fffffff2; box-shadow:0 2px 10px #152c4044; }
.weather-banner-artwork .weather-banner-close:hover { background:#fff; }
.weather-banner-artwork > img,.weather-banner-artwork .weather-banner-image img { width:100%; height:auto; max-height:none; background:transparent; }

.weather-banner-footer { display:flex; justify-content:flex-end; align-items:center; box-sizing:border-box; min-height:60px; padding:8px 12px; background:#f1f5f8; border-top:1px solid #dce5ec; }
.weather-banner .weather-banner-hide-today { min-height:44px; max-width:100%; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:#345d7c; text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:14px; cursor:pointer; }
.weather-banner .weather-banner-hide-today:hover { background:#e2ebf2; }