/* MeteoArco 1.3.5 - water balance and full-size Belchertown forecast icons. */
:root {
    --canvas: #191a1b;
    --surface: #202223;
    --surface-2: #27292b;
    --surface-3: #303235;
    --line: #44474a;
    --ink: #f1f2f3;
    --muted: #a9adb1;
    --accent: #ff7900;
    --accent-soft: #ff9a3d;
    --green: #22c874;
    --blue: #47a8e5;
    --hival-color: #ff7d6d;
    --loval-color: #66b5ff;
    --ok-color: #2bd687;
    --low-color: #ff7d6d;
    --unknown-color: #8b9095;
    --content-width: 1200px;
}

@font-face {
    font-family: 'Open Sans';
    src: url('font/OpenSans.woff2') format('woff2'), url('font/OpenSans.woff') format('woff');
    font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

.site_header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: min(calc(100% - 40px), var(--content-width));
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(25, 26, 27, .97);
    backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand_mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 2px solid var(--accent);
    border-radius: 50% 50% 45% 45%;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 800;
}
.page_title { display: block; color: var(--accent); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.brand_subtitle { display: block; margin-top: 5px; color: var(--muted); font-size: .68rem; }
.main_nav { display: flex; align-items: center; gap: 4px; }
.main_nav a { padding: 10px 12px; color: #d6d8da; font-size: .82rem; }
.main_nav a:hover { color: var(--accent); }
.language_switcher { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; }
.language_switcher a { min-width: 28px; padding: 4px 5px; color: var(--muted); font-size: .62rem; font-weight: 700; text-align: center; }
.language_switcher a:hover { color: var(--accent); }
.language_switcher a.is-active { color: #171819; background: var(--accent); }
.mobile_menu { display: none; position: relative; }
.mobile_menu summary { cursor: pointer; padding: 8px 11px; border: 1px solid var(--line); color: var(--ink); list-style: none; }
.mobile_menu summary::-webkit-details-marker { display: none; }
.mobile_menu nav { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 200px; padding: 8px; border: 1px solid var(--line); background: var(--surface-2); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.mobile_menu nav a { display: block; padding: 9px 10px; }

#contents { width: min(calc(100% - 40px), var(--content-width)); margin: 0 auto; padding: 30px 0 60px; }
.station_intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 4px 0 17px; }
.station_intro h1, .section_heading h2, .history_header h2, .rain_heading h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.05rem); font-weight: 400; letter-spacing: -.03em; }
.eyebrow { margin: 0 0 4px; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.station_powered { margin: 0; color: var(--muted); font-size: .8rem; }
.station_powered strong { color: var(--accent-soft); font-weight: 400; }
.connection_status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 0 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
}
.connection_status strong { color: var(--ink); font-weight: 600; }
.status_dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(34,200,116,.1); }
.simulator_flag { margin-left: auto; padding: 5px 9px; border: 1px solid #76502e; color: #e7b17e; font-size: .68rem; }

.console_grid { display: grid; grid-template-columns: 7fr 5fr; border-top: 1px solid #babdc0; border-bottom: 1px solid #babdc0; background: var(--surface); }
.console_grid > * { min-width: 0; }
.weather_console { display: grid; grid-template-columns: 4fr 3fr; grid-template-rows: minmax(245px, auto) minmax(185px, auto); border-right: 1px solid #babdc0; }
.current_primary, .console_observations, .wind_panel, .console_astronomy { min-width: 0; }
.current_primary, .wind_panel { border-right: 1px solid #babdc0; }
.current_primary, .console_observations { border-bottom: 1px solid #babdc0; }
.widget { background: var(--surface); }
.widget_title { padding: 9px 14px; border-bottom: 0; color: #f0f1f2; font-size: 1.05rem; font-weight: 400; }
.widget_contents { padding: 16px; }
.current_primary { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.temperature_value { color: var(--accent); font-size: clamp(4.2rem, 7.1vw, 6.5rem); font-weight: 300; line-height: .9; letter-spacing: -.07em; }
.temperature_context { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; color: #e3e4e5; font-size: .84rem; }
.temperature_context span:first-child { text-transform: capitalize; }
.temperature_meta { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 14px; }
.aqi_value { color: #77bd3b; font-size: .78rem; }
.aqi_value[data-level="moderate"] { color: #e3bd3f; }
.aqi_value[data-level="poor"] { color: #e86f5e; }
.daily_range { display: flex; justify-content: center; gap: 0; color: var(--muted); font-size: .68rem; }
.daily_range span { min-width: 62px; padding: 0 10px; }
.daily_range span + span { border-left: 1px solid #bbb; }
.daily_range b { display: block; color: var(--ink); font-size: .78rem; }
.console_observations { padding: 0 14px; display: grid; align-content: center; }
.observation_table, .widget table { width: 100%; border-collapse: collapse; }
.console_observations td { padding: 6px 0; border: 0; }
.widget td, .widget th { padding: 5px 2px; border-bottom: 1px solid #35383a; }
.widget tr:last-child td { border-bottom: 0; }
.label { color: #d7d9db; font-size: .78rem; text-align: left; }
.data { color: var(--ink); font-size: .79rem; font-weight: 400; text-align: right; }
.data small { color: var(--muted); font-weight: 400; }
.units, .timestamp { color: var(--muted); font-size: .7rem; }

.wind_panel { padding: 16px 24px; display: flex; align-items: center; justify-content: center; gap: 30px; }
.wind_compass { position: relative; width: 96px; height: 96px; flex: 0 0 auto; display: grid; place-items: center; border: 5px solid #888c8f; border-radius: 50%; color: #eef0f1; text-align: center; }
.wind_direction { font-size: .78rem; line-height: 1.1; }
.wind_direction b { font-size: .9rem; font-weight: 400; }
.wind_pointer { position: absolute; inset: -12px 43px; transform-origin: 5px 60px; }
.wind_pointer::after { content: ''; position: absolute; top: -2px; left: -3px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 18px solid #d92532; }
.wind_values { display: flex; align-items: center; }
.wind_values span { min-width: 68px; color: #d7d9db; font-size: .78rem; text-align: center; }
.wind_values span + span { border-left: 1px solid #aaa; }
.wind_values strong { display: block; color: var(--ink); font-size: 1.8rem; font-weight: 300; line-height: 1.1; }
.console_astronomy { display: flex; }
.console_astronomy .widget { width: 100%; border: 0; }
.console_astronomy .widget_title { text-align: center; }
.console_astronomy .widget_contents { padding: 5px 9px 0; text-align: center; }
.console_astronomy .celestial { width: 100%; table-layout: fixed; }
.console_astronomy .widget td, .console_astronomy .widget th { border: 0; text-align: center; vertical-align: middle; }
.console_astronomy .celestial th:nth-child(1), .console_astronomy .celestial td:nth-child(1),
.console_astronomy .celestial th:nth-child(4), .console_astronomy .celestial td:nth-child(4) { width: 21%; }
.console_astronomy .celestial th:nth-child(2), .console_astronomy .celestial td:nth-child(2),
.console_astronomy .celestial th:nth-child(5), .console_astronomy .celestial td:nth-child(5) { width: 27%; }
.console_astronomy .celestial th:nth-child(3), .console_astronomy .celestial td:nth-child(3) { width: 4%; }
.console_astronomy .celestial .label { font-size: .68rem; white-space: nowrap; }
.console_astronomy .celestial .data { font-size: .69rem; white-space: nowrap; }
.almanac_link { display: block; padding: 0 20px 13px; color: #db5249; font-size: .72rem; text-align: center; }
.webcam_panel { position: relative; width: 100%; min-height: 430px; margin: 0; padding: 0; display: block; overflow: hidden; border: 0; border-radius: 0; background: #0d0e0f; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.webcam_panel img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; filter: saturate(.82) contrast(1.05); }
.webcam_panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.72)); pointer-events: none; }
.webcam_panel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.webcam_label { position: absolute; z-index: 2; left: 15px; bottom: 14px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(20,21,22,.82); color: #fff; font-size: .7rem; }
.webcam_label i { display: inline-block; }

.webcam_lightbox[hidden] { display: none; }
.webcam_lightbox { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 48px 24px 54px; background: rgba(4,5,6,.91); backdrop-filter: blur(5px); }
.webcam_lightbox_stage { width: min(94vw, 112vh); max-width: 94vw; max-height: 84vh; aspect-ratio: 4 / 3; margin: 0; padding: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: #050606; box-shadow: 0 22px 80px rgba(0,0,0,.68); cursor: zoom-in; }
.webcam_lightbox_image { width: 100%; height: 100%; max-width: 94vw; max-height: 84vh; display: block; object-fit: contain; }
.webcam_lightbox_close { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; background: rgba(28,30,31,.9); font: 300 30px/38px Arial, sans-serif; cursor: pointer; }
.webcam_lightbox_close:hover, .webcam_lightbox_close:focus-visible { border-color: var(--accent); color: var(--accent); }
.webcam_lightbox_hint { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; padding: 6px 10px; border-radius: 4px; color: #ddd; background: rgba(15,16,17,.8); font-size: .65rem; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.webcam_lightbox[data-level="fullscreen"] { padding: 0; background: #000; }
.webcam_lightbox[data-level="fullscreen"] .webcam_lightbox_stage { width: 100vw; height: 100dvh; max-width: none; max-height: none; display: grid; place-items: center; border: 0; border-radius: 0; box-shadow: none; cursor: zoom-out; }
.webcam_lightbox[data-level="fullscreen"] .webcam_lightbox_image { max-width: 100vw; max-height: 100dvh; }
body.webcam_lightbox_open { overflow: hidden; }

.forecast_section { margin-top: 34px; border: 1px solid var(--line); background: var(--surface); }
.forecast_header { min-height: 76px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.forecast_header h2 { margin: 0; font-size: 1.55rem; font-weight: 400; }
.forecast_status { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: .7rem; }
.forecast_interval { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.forecast_interval_button { min-width: 32px; padding: 5px 8px; border: 1px solid transparent; border-radius: 4px; color: #d8dadd; background: transparent; font: inherit; font-size: .72rem; cursor: pointer; }
.forecast_interval_button:hover { border-color: #666b6f; color: #fff; }
.forecast_interval_button.is-active { border-color: #b8bbbd; color: #fff; background: #292b2d; font-weight: 700; }
.forecast_grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.forecast_grid.is-hourly { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-color: var(--accent) var(--surface-2); }
.forecast_grid.is-hourly .forecast_card { flex: 0 0 112px; scroll-snap-align: start; }
.forecast_loading, .forecast_error { grid-column: 1 / -1; padding: 38px 20px; color: var(--muted); text-align: center; }
.forecast_error { color: #efa36d; }
.forecast_card { min-width: 0; padding: 14px 10px 13px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); text-align: center; }
.forecast_card:last-child { border-right: 0; }
.forecast_day { min-height: 39px; color: #e4e5e6; font-size: .72rem; text-transform: capitalize; }
.forecast_day strong, .forecast_day small { display: block; }
.forecast_day strong { font-size: .78rem; font-weight: 600; }
.forecast_day small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.forecast_icon { width: 128px; height: 101px; margin: 0 auto 2px; object-fit: contain; }
.forecast_description { min-height: 48px; display: grid; place-items: start center; color: #e2e3e4; font-size: .76rem; line-height: 1.35; }
.forecast_temperatures { margin-top: 8px; color: var(--ink); font-size: .95rem; font-weight: 700; }
.forecast_temperatures span:last-child { color: #c9cbcd; }
.forecast_metrics { margin-top: 8px; display: grid; gap: 4px; color: #d1d3d5; font-size: .68rem; }
.forecast_metrics span { white-space: nowrap; }
.forecast_rain { color: #6bc7ee; }
.forecast_details { margin-top: 9px; padding: 0; border: 0; border-bottom: 1px solid transparent; color: #ed6f63; background: none; font: inherit; font-size: .68rem; cursor: pointer; }
.forecast_details:hover { border-color: currentColor; }
.forecast_extra { width: 100%; margin-top: 8px; padding-top: 7px; border-top: 1px solid #36393b; color: var(--muted); font-size: .65rem; }
.forecast_credit { margin: 0; padding: 9px 14px; border-top: 1px solid var(--line); color: #85898c; font-size: .62rem; text-align: right; }
.forecast_credit a { color: #b8bbbd; text-decoration: underline; text-underline-offset: 2px; }

.forecast_charts_section { margin-top: 34px; }
.forecast_charts_header { min-height: 102px; padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid var(--line); background: var(--surface); }
.forecast_charts_header h2 { margin: 0; font-size: 1.55rem; font-weight: 400; }
.forecast_charts_header p:last-child { max-width: 650px; margin: 6px 0 0; color: var(--muted); font-size: .68rem; }
.forecast_chart_ranges { display: flex; gap: 5px; }
.forecast_chart_ranges button { min-width: 62px; padding: 7px 10px; border: 1px solid #4c5053; border-radius: 7px; color: #b8bcc0; background: #292b2d; font: inherit; font-size: .65rem; cursor: pointer; }
.forecast_chart_ranges button:hover { color: #fff; border-color: #7b8084; }
.forecast_chart_ranges button.is-active { color: #fff; border-color: #f06b63; background: #db5550; }
.forecast_chart_stack { margin-top: 8px; display: grid; gap: 8px; }
.forecast_chart_card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.forecast_chart_card > header { min-height: 34px; padding: 7px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .6rem; }
.forecast_chart_card > header > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.forecast_chart_card > header i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--series); }
.chart_legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 13px; }
.chart_legend b { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; }
.chart_legend b::before { content: ''; width: 13px; height: 2px; display: inline-block; background: var(--series); }
.forecast_chart_card canvas { width: 100%; height: 225px; display: block; cursor: crosshair; touch-action: pan-y; }
.forecast_chart_tooltip { position: absolute; z-index: 8; inset: 0; color: #eef0f1; font-size: .62rem; line-height: 1.35; pointer-events: none; }
.forecast_chart_tooltip[hidden] { display: none; }
.forecast_chart_tooltip > strong { position: absolute; width: max-content; padding: 4px 7px; display: block; transform: translate(-50%, 0); border: 1px solid #555b5f; border-radius: 2px; color: #fff; background: rgba(8,9,10,.98); font-size: .62rem; font-weight: 500; white-space: nowrap; }
.forecast_chart_tooltip > span { position: absolute; min-width: 145px; max-width: 220px; padding: 4px 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(-50%); border: 1px solid var(--series); border-radius: 2px; background: rgba(8,9,10,.98); box-shadow: 0 3px 10px rgba(0,0,0,.26); }
.forecast_chart_tooltip > span > span { display: inline-flex; align-items: center; }
.forecast_chart_tooltip i { width: 7px; height: 7px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--series); }
.forecast_chart_tooltip b { font-weight: 600; white-space: nowrap; }
.forecast_charts_status { margin: 0; padding: 8px 12px; color: var(--muted); font-size: .6rem; text-align: right; }

.weather_summaries { margin-top: 34px; border-top: 1px solid #a0a3a5; border-bottom: 1px solid #a0a3a5; background: #202223; }
.weather_summaries > h2 { margin: 0; padding: 15px 18px 12px; color: #d7d9da; font-size: 1.18rem; font-weight: 300; text-align: center; }
.weather_summaries > h2 a { color: #e44d43; }
.weather_summaries > h2 a:hover { color: var(--accent); }
.weather_summaries_grid { display: grid; grid-template-columns: 1fr 1fr; }
.weather_summaries_grid article { min-width: 0; padding: 0 28px 12px; }
.weather_summaries_grid article + article { border-left: 1px solid #9a9d9f; }
.weather_summaries_grid h3 { margin: 0 0 8px; color: #e3e5e6; font-size: .93rem; font-weight: 400; text-transform: capitalize; }
.weather_summaries_grid dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 5px; }
.weather_summaries_grid dl div { min-width: 0; display: grid; grid-template-columns: minmax(max-content, 1fr) auto; align-items: baseline; gap: 10px; }
.weather_summaries_grid dt { color: #eef0f1; font-size: .72rem; font-weight: 600; }
.weather_summaries_grid dd { margin: 0; color: #d3d6d7; font-size: .72rem; white-space: nowrap; }

/* Year and all-time records page, inspired by the compact Belchertown layout. */
.records_page { padding-top: 30px !important; }
.records_body { overflow-x: hidden; }
.records_header { min-height: 92px; padding: 0 18px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; border-bottom: 1px solid #9b9d9f; }
.records_header h1 { margin: 4px 0 0; color: #f1f2f3; font-size: 1.75rem; font-weight: 400; }
.records_header > p { max-width: 470px; margin: 0 0 5px; color: #c8cbcd; font-size: .76rem; text-align: right; }
.records_status { min-height: 43px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .67rem; }
.records_table_panel { margin: 8px 18px 0; overflow: hidden; border: 1px solid #5c6063; background: #222425; }
.records_table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #e5e6e7; }
.records_table th, .records_table td { border-right: 1px solid #64686a; border-bottom: 1px solid #4b4f51; }
.records_table tr > *:last-child { border-right: 0; }
.records_group th { padding: 7px 12px; border-bottom-color: #aaaeb0; color: #202223; background: #d3d4d5; font-size: .82rem; font-weight: 600; text-align: center; }
.records_periods th { padding: 6px 10px; color: #fff; background: #315b80; font-size: .76rem; font-weight: 500; text-align: center; }
.records_periods th:first-child { width: 28%; background: #202223; }
.records_periods th:nth-child(2) { background: #2f9fe3; }
.records_row:nth-child(even) { background: #303233; }
.records_row:nth-child(odd) { background: #252728; }
.records_row > th { width: 28%; padding: 8px 12px; color: #e8e9ea; font-size: .72rem; font-weight: 400; text-align: left; }
.records_row > td { width: 36%; padding: 7px 12px; vertical-align: middle; }
.records_row strong { min-width: 31%; display: inline-block; color: #f5f6f7; font-size: .75rem; font-weight: 500; }
.records_row span { color: #d2d5d6; font-size: .68rem; }
.records_note { margin: 18px 18px 0; padding: 11px 14px; border-left: 3px solid var(--accent); color: var(--muted); background: #242627; font-size: .66rem; line-height: 1.55; }

.visually_hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rain_report_page { padding-top: 20px !important; }
.rain_report_header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.rain_report_header h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 700; line-height: 1.25; }
.rain_report_header h1 span { display: inline-block; padding: 2px 5px; border: 1px solid #b9bdc0; border-radius: 4px; color: #ef5c55; font-weight: 600; }
.rain_station_identity { text-align: right; color: var(--muted); font-size: .76rem; }
.rain_station_identity strong, .rain_station_identity span { display: block; }
.rain_station_identity strong { color: var(--ink); font-weight: 500; }
.rain_report_status { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .7rem; }
.rain_report_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.rain_totals_panel, .rain_calendar_panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.rain_totals_panel { display: grid; grid-template-columns: 1fr 1fr; padding: 20px; }
.rain_metric { min-height: 235px; padding: 30px 20px; display: flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid #46494c; }
.rain_metric:nth-of-type(even) { border-left: 0; }
.rain_metric:nth-of-type(n+3) { border-top: 0; }
.rain_metric > div { min-width: 0; }
.rain_metric strong { display: block; color: #36a8ff; font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1; }
.rain_metric strong small { color: inherit; font-size: .72rem; }
.rain_metric span:not(.rain_tube) { display: block; margin-top: 8px; color: #c7cacd; font-size: .76rem; text-transform: uppercase; }
.rain_metric div > small { display: block; max-width: 155px; margin-top: 6px; color: var(--muted); font-size: .65rem; }
.rain_tube { position: relative; width: 30px; height: 85px; flex: 0 0 auto; margin-top: -4px; border: 1px solid #70767c; background: linear-gradient(90deg, transparent 0 30%, rgba(255,255,255,.09) 30% 72%, transparent 72%); }
.rain_tube::before { content: ''; position: absolute; left: -4px; right: -4px; top: -9px; height: 8px; border: 1px solid #70767c; }
.rain_tube i { position: absolute; left: 3px; right: 3px; bottom: 2px; height: var(--rain-fill); background: linear-gradient(90deg, #248eff, #70c8ff); box-shadow: 0 0 10px rgba(54,168,255,.25); }
.rain_archive_note { grid-column: 1 / -1; margin: 16px 0 0; color: var(--muted); font-size: .66rem; text-align: center; }
.rain_calendar_panel { padding: 22px 20px 17px; }
.rain_calendar_panel h2 { margin: 0 0 18px; color: #ff6259; font-size: 1.15rem; }
.rain_calendars { display: grid; gap: 21px; }
.rain_month h3 { margin: 0 0 11px; color: #fff; font-size: .82rem; text-align: center; }
.rain_weekdays, .rain_days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.rain_weekdays { margin-bottom: 4px; color: var(--muted); font-size: .57rem; text-align: center; }
.rain_day { min-width: 0; min-height: 43px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 3px; background: #30465b; color: #f2f4f5; line-height: 1.05; }
.rain_day b { font-size: .62rem; font-weight: 500; }
.rain_day small { margin-top: 3px; font-size: .7rem; font-weight: 700; }
.rain_day.empty { background: transparent; }
.rain_day.future { color: #53575b; background: transparent; }
.rain_day.missing { color: #8b9196; background: #252a2e; }
.rain_day.dry { color: #7e8993; background: #2d4357; }
.rain_day.trace { color: #d9f3ff; background: #47748f; }
.rain_day.light { color: #102332; background: #88d8f3; }
.rain_day.moderate { color: #092436; background: #52bce8; }
.rain_day.wet { color: #fff; background: #159bda; }
.rain_day.heavy { color: #fff; background: #0876bb; }
.rain_day.extreme { color: #fff; background: #d84b4b; }
.rain_legend { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px 9px; color: var(--muted); font-size: .56rem; }
.rain_legend span { display: inline-flex; align-items: center; gap: 3px; }
.rain_level { width: 9px; height: 9px; display: inline-block; border-radius: 2px; }
.rain_level.dry { background: #2d4357; }
.rain_level.trace { background: #47748f; }
.rain_level.light { background: #88d8f3; }
.rain_level.moderate { background: #52bce8; }
.rain_level.wet { background: #159bda; }
.rain_level.heavy { background: #0876bb; }
.rain_level.extreme { background: #d84b4b; }
.rain_calendar_note { margin: 9px 0 0; color: var(--muted); font-size: .6rem; text-align: right; }
.rain_report_disclaimer { margin: 20px 0 0; padding: 13px 15px; border-left: 3px solid #8f602f; color: #c9a47d; background: #24201c; font-size: .7rem; }

.home_rain_report { margin-top: 34px; border: 1px solid var(--line); background: var(--surface); }
.home_rain_header { min-height: 84px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home_rain_header h2 { margin: 0; font-size: 1.55rem; font-weight: 400; }
.home_rain_header > div > span { display: block; margin-top: 5px; color: var(--muted); font-size: .65rem; }
.home_rain_header .rain_page_link { margin: 0; padding: 8px 11px; border: 1px solid #6e7478; color: #f0f2f3; }
.home_rain_header .rain_page_link:hover { border-color: var(--accent); color: var(--accent); }
.home_rain_content { display: grid; grid-template-columns: 4fr 7fr; border-top: 1px solid var(--line); }
.home_rain_totals { margin: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--line); gap: 1px; }
.home_rain_totals div { min-height: 125px; padding: 19px; display: flex; flex-direction: column; justify-content: center; background: var(--surface-2); }
.home_rain_totals dt { color: var(--muted); font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; }
.home_rain_totals dd { margin: 7px 0 0; color: #36a8ff; font-size: 1.55rem; font-weight: 600; }
.home_rain_calendar { padding: 18px 22px 21px; border-left: 1px solid var(--line); background: var(--surface-2); }
.home_rain_calendar .rain_month { max-width: 650px; margin: 0 auto; }
.home_rain_calendar .rain_day { min-height: 47px; }
.home_rain_note { margin: 0; padding: 8px 13px; border-top: 1px solid var(--line); color: #ad865f; font-size: .6rem; text-align: right; }

.rain_summary { margin-top: 34px; padding: 24px; display: grid; grid-template-columns: .8fr .7fr 1.4fr; gap: 24px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.rain_heading > p:not(.eyebrow) { max-width: 320px; margin: 9px 0 0; color: var(--muted); font-size: .78rem; }
.rain_page_link { display: inline-block; margin-top: 13px; color: var(--accent); font-size: .7rem; font-weight: 600; }
.rain_totals { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.rain_totals div { padding: 10px 12px; border-left: 1px solid var(--line); }
.rain_totals dt { color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.rain_totals dd { margin: 3px 0 0; color: var(--accent); font-size: 1.15rem; }
.rain_summary img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }

.editorial_section, .history_section, .details_section { margin-top: 54px; }
.section_heading { margin-bottom: 19px; }
.compact_heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.editorial_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.editorial_card { position: relative; min-height: 250px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; background: var(--surface); }
.editorial_card:hover { color: var(--ink); background: var(--surface-2); }
.editorial_card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .2s ease; }
.editorial_card:hover::before { transform: scaleY(1); }
.card_index { position: absolute; top: 22px; right: 25px; color: #55595d; font-size: 2.5rem; font-weight: 300; }
.card_kicker { margin-bottom: 16px; color: var(--accent); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.editorial_card > strong { max-width: 420px; font-size: 1.55rem; font-weight: 400; }
.editorial_card > span:not(.card_index):not(.card_kicker) { max-width: 490px; margin-top: 9px; color: var(--muted); font-size: .82rem; }
.editorial_card b { margin-top: auto; padding-top: 26px; color: #e3e5e7; font-size: .75rem; font-weight: 600; }
.editorial_card b span { color: var(--accent); }

.stay_page { padding-top: 42px !important; }
.stay_hero { min-height: 310px; padding: clamp(30px, 6vw, 70px); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); background: linear-gradient(115deg, #242627 0%, #202223 58%, #18242a 100%); }
.stay_hero::after { content: 'ALTO GARDA'; position: absolute; right: -18px; bottom: -30px; color: rgba(255,255,255,.035); font-size: clamp(4rem, 10vw, 8.5rem); font-weight: 800; line-height: 1; white-space: nowrap; pointer-events: none; }
.stay_hero > div:first-child { position: relative; z-index: 1; max-width: 790px; }
.stay_hero h1 { max-width: 760px; margin: 0; font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 300; line-height: 1.08; letter-spacing: -.045em; }
.stay_lead { max-width: 720px; margin: 22px 0 0; color: #c4c8cb; font-size: clamp(.9rem, 1.8vw, 1.08rem); }
.stay_places { position: relative; z-index: 1; margin-top: 30px; display: flex; align-items: center; gap: 11px; color: #d9dcde; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.stay_places i { width: 26px; height: 1px; background: var(--accent); }
.stay_direct_note { margin-top: 18px; padding: 22px 25px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; border: 1px solid #76502e; background: linear-gradient(90deg, #28231e, #232425); }
.stay_note_mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: .72rem; font-weight: 800; }
.stay_direct_note h2 { margin: 0; font-size: 1.2rem; font-weight: 500; }
.stay_direct_note p:last-child { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.stay_properties { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.stay_property { min-width: 0; padding: clamp(25px, 4vw, 42px); display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); }
.stay_property::before { content: ''; width: 48px; height: 3px; margin-bottom: 25px; background: var(--accent); }
.stay_property header { display: flex; align-items: center; gap: 16px; }
.stay_property_icon { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #4d5357; border-radius: 50%; color: var(--accent); background: var(--surface-2); font-size: 1.65rem; }
.stay_property header small { display: block; color: var(--accent-soft); font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.stay_property h2 { margin: 3px 0 0; font-size: clamp(1.35rem, 2.7vw, 1.9rem); font-weight: 400; line-height: 1.2; }
.stay_property > p { min-height: 112px; margin: 24px 0 0; color: #c0c4c7; font-size: .86rem; line-height: 1.75; }
.stay_property ul { margin: 15px 0 0; padding: 16px 0 0; display: grid; gap: 7px; border-top: 1px solid #3b3e40; color: var(--muted); font-size: .72rem; list-style: none; }
.stay_property li::before { content: '—'; margin-right: 8px; color: var(--accent); }
.stay_actions { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; }
.stay_button { min-height: 42px; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #5a5e61; color: #eef0f1; font-size: .7rem; font-weight: 700; }
.stay_button.primary { border-color: var(--accent); color: #151617; background: var(--accent); }
.stay_button.primary:hover { border-color: var(--accent-soft); color: #151617; background: var(--accent-soft); }
.stay_button.secondary:hover { border-color: var(--accent); color: var(--accent); }
.stay_weather_link { margin-top: 18px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.stay_weather_link h2 { margin: 0; font-size: 1.35rem; font-weight: 400; }
.stay_weather_link p:last-child { margin: 7px 0 0; color: var(--muted); font-size: .75rem; }
.stay_weather_link > a { flex: 0 0 auto; padding: 10px 14px; border: 1px solid #64686b; color: #eef0f1; font-size: .72rem; font-weight: 600; }
.stay_weather_link > a:hover { border-color: var(--accent); color: var(--accent); }

.events_page { padding-top: 42px !important; }
.events_hero { min-height: 235px; padding: clamp(28px, 5vw, 56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; border: 1px solid var(--line); background: linear-gradient(120deg, #242627 0%, #202223 62%, #2b2118 100%); }
.events_hero > div { max-width: 770px; }
.events_hero h1 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 300; line-height: 1.08; letter-spacing: -.04em; }
.events_hero p:last-child { max-width: 690px; margin: 17px 0 0; color: #c2c6c9; font-size: .92rem; }
.events_hero > a { min-width: 205px; padding: 15px 17px; border: 1px solid #686c6f; color: #eef0f1; font-size: .76rem; }
.events_hero > a span { display: block; margin-bottom: 3px; color: var(--accent); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.events_hero > a b { float: right; color: var(--accent); }
.events_hero > a:hover { border-color: var(--accent); }
.events_toolbar { margin-top: 18px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); background: var(--surface); }
.events_filters { display: flex; flex-wrap: wrap; gap: 5px; }
.events_filter { padding: 7px 11px; border: 1px solid #505458; border-radius: 99px; color: #c5c8ca; background: var(--surface-2); font: inherit; font-size: .65rem; cursor: pointer; }
.events_filter:hover { border-color: #82878b; color: #fff; }
.events_filter.is_active { border-color: var(--accent); color: #171819; background: var(--accent); font-weight: 700; }
.events_toolbar > strong { flex: 0 0 auto; color: var(--muted); font-size: .67rem; font-weight: 500; }
.events_updated { margin: 9px 2px 0; color: #7f8589; font-size: .6rem; text-align: right; }
.events_grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.event_card { min-width: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); border: 1px solid var(--line); background: var(--surface); }
.event_card.is_featured { border-color: #7a5632; background: linear-gradient(130deg, #242322, #202223 58%); }
.event_date { padding: 25px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-right: 1px solid var(--line); color: var(--accent); text-align: center; text-transform: uppercase; }
.event_date strong { font-size: 1.65rem; font-weight: 300; line-height: 1; white-space: nowrap; }
.event_date strong.range { font-size: .9rem; }
.event_date span { margin-top: 7px; color: #d8dbdd; font-size: .67rem; letter-spacing: .08em; }
.event_body { min-width: 0; padding: 24px 25px; display: flex; flex-direction: column; }
.event_category { color: var(--accent-soft); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.event_body h2 { margin: 5px 0 0; font-size: 1.2rem; font-weight: 500; line-height: 1.25; }
.event_meta { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 5px 15px; color: #c2c6c8; font-size: .68rem; }
.event_location::before { content: '●'; margin-right: 6px; color: var(--accent); font-size: .55rem; }
.event_time::before { content: '◷'; margin-right: 6px; color: var(--accent); }
.event_description { margin: 17px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.event_footer { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.event_footer p { max-width: 340px; margin: 0; color: #8d9296; font-size: .61rem; }
.event_footer p b { display: block; color: #b7bbbe; font-size: .57rem; letter-spacing: .06em; text-transform: uppercase; }
.event_footer a { flex: 0 0 auto; color: #e4e6e7; font-size: .66rem; font-weight: 600; }
.event_footer a span { color: var(--accent); }
.event_footer a:hover { color: var(--accent); }
.events_empty { grid-column: 1 / -1; min-height: 190px; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--muted); background: var(--surface); text-align: center; }
.events_empty strong { color: var(--ink); font-size: 1rem; font-weight: 500; }
.events_empty span { margin-top: 6px; font-size: .72rem; }
.events_disclaimer { margin: 13px 2px 0; color: #858b8f; font-size: .62rem; text-align: right; }

.observation_charts_section { margin-top: 54px; }
.observation_charts_header { padding: 15px 12px 20px; text-align: center; }
.observation_charts_header h2 { margin: 0; color: #d7d9da; font-size: 1.18rem; font-weight: 300; }
.observation_charts_header h2 a { color: #e44d43; }
.observation_charts_header h2 a:hover { color: var(--accent); }
.observation_charts_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.observation_chart_card { min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.observation_chart_card > header { min-height: 47px; padding: 10px 13px 3px; display: flex; align-items: center; justify-content: center; text-align: center; }
.observation_chart_card h3 { margin: 0; color: #ff4b45; font-size: 1rem; font-weight: 400; letter-spacing: .01em; }
.observation_chart_card header small { display: block; margin-top: 3px; color: #8f9599; font-size: .57rem; }
.observation_legend { min-height: 39px; padding: 7px 12px 11px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 18px; color: #d5d7d8; font-size: .61rem; }
.observation_legend b { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
.observation_legend b::before { content: ''; width: 16px; height: 2px; display: inline-block; background: var(--series); }
.observation_chart_card canvas { width: 100%; height: 320px; display: block; cursor: crosshair; touch-action: pan-y; }
.observation_et_card { grid-column: auto; }
.observation_et_content { display: block; }
.observation_et_content canvas { min-width: 0; }
.observation_et_info { min-width: 0; padding: 34px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); background: #222827; }
.observation_et_info h3 { margin: 4px 0 0; color: #72d49f; font-size: 1.18rem; font-weight: 500; }
.observation_et_info > p:not(.eyebrow) { margin: 15px 0 0; color: #bcc1c3; font-size: .76rem; line-height: 1.65; }
.observation_et_info small { margin-top: 17px; padding-top: 14px; border-top: 1px solid #3c4441; color: #808a86; font-size: .59rem; }
.observation_et_info > a { margin-top: 22px; color: #e9ebec; font-size: .7rem; font-weight: 600; }
.observation_et_info > a span { color: var(--accent); }
.observation_et_info > a:hover { color: var(--accent); }
.water_balance_inline { margin-top: 20px; padding: 14px 15px; border-left: 3px solid var(--unknown-color); background: rgba(0,0,0,.16); }
.water_balance_inline > span { display: block; color: #aab0b2; font-size: .59rem; letter-spacing: .06em; text-transform: uppercase; }
.water_balance_inline > strong { display: block; margin-top: 3px; color: #eef0f1; font-size: 1.45rem; font-weight: 500; }
.water_balance_inline > b { display: block; margin-top: 1px; color: var(--unknown-color); font-size: .67rem; font-weight: 600; }
.water_balance_inline > small { display: block; margin-top: 7px; padding: 0; border: 0; color: #858d89; }
.water_balance_inline.is_surplus { border-color: #36c77c; }
.water_balance_inline.is_surplus > b { color: #58d995; }
.water_balance_inline.is_deficit { border-color: #ee625b; }
.water_balance_inline.is_deficit > b { color: #ff7e77; }
.water_balance_inline.is_balanced { border-color: #6aaad2; }
.water_balance_inline.is_balanced > b { color: #79bce5; }
.observation_charts_status { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-top: 0; color: #7f8589; background: var(--surface); font-size: .6rem; text-align: right; }
.observation_chart_tooltip { position: absolute; z-index: 8; inset: 0; color: #eef0f1; font-size: .62rem; line-height: 1.35; pointer-events: none; }
.observation_chart_tooltip[hidden] { display: none; }
.observation_chart_tooltip > strong { position: absolute; width: max-content; padding: 4px 7px; display: block; transform: translate(-50%, 0); border: 1px solid #555b5f; border-radius: 2px; color: #fff; background: rgba(8,9,10,.98); font-size: .62rem; font-weight: 500; white-space: nowrap; }
.observation_chart_tooltip > span { position: absolute; min-width: 150px; max-width: 225px; padding: 4px 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(-50%); border: 1px solid var(--series); border-radius: 2px; background: rgba(8,9,10,.98); box-shadow: 0 3px 10px rgba(0,0,0,.26); }
.observation_chart_tooltip > span > span { display: inline-flex; align-items: center; }
.observation_chart_tooltip i { width: 7px; height: 7px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--series); }
.observation_chart_tooltip b { font-weight: 600; white-space: nowrap; }
.chart_hover_line { position: absolute; width: 1px; display: block; background: rgba(225,229,231,.42); }
.chart_hover_marker { position: absolute; width: 12px; height: 12px; display: block; transform: translate(-50%, -50%); border: 2px solid var(--series); border-radius: 50%; background: color-mix(in srgb, var(--series) 65%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--series) 20%, transparent); }
.chart_hover_label::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; transform: translateY(-50%) rotate(45deg); background: rgba(8,9,10,.98); }
.labels-left .chart_hover_label::after { right: -5px; border-top: 1px solid var(--series); border-right: 1px solid var(--series); }
.labels-right .chart_hover_label::after { left: -5px; border-bottom: 1px solid var(--series); border-left: 1px solid var(--series); }

.archive_charts_page { padding-top: 42px !important; }
.archive_charts_intro { min-height: 190px; padding: 32px 38px; display: flex; align-items: center; justify-content: space-between; gap: 35px; border: 1px solid var(--line); background: linear-gradient(120deg, #242627, #202223 65%, #251f1a); }
.archive_charts_intro > div { max-width: 760px; }
.archive_charts_intro h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 300; letter-spacing: -.035em; }
.archive_charts_intro p:last-child { margin: 12px 0 0; color: var(--muted); font-size: .78rem; }
.archive_charts_intro > a { flex: 0 0 auto; padding: 10px 14px; border: 1px solid #656a6d; color: #eef0f1; font-size: .7rem; font-weight: 600; }
.archive_charts_intro > a span { color: var(--accent); }
.archive_charts_intro > a:hover { border-color: var(--accent); color: var(--accent); }
.archive_current_values { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-top: 0; background: var(--line); gap: 1px; }
.archive_current_values article { min-width: 0; padding: 19px 17px; background: var(--surface); }
.archive_current_values span { display: block; margin-bottom: 7px; color: #90979b; font-size: .61rem; letter-spacing: .055em; text-transform: uppercase; }
.archive_current_values strong { display: block; color: #eef0f1; font-size: clamp(.92rem, 1.45vw, 1.22rem); font-weight: 400; white-space: nowrap; }
.archive_current_values strong small { margin-left: 4px; color: var(--accent); font-size: .58em; font-weight: 600; }
.archive_history { margin-top: 18px; }

.history_card { border: 1px solid var(--line); }
.history_header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); }
.history_header .eyebrow { display: block; }
.period_switcher { display: flex; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.button, .button_selected { cursor: pointer; min-width: 74px; padding: 8px 11px; background: var(--surface-2); color: var(--muted); font-size: .7rem; text-align: center; }
.button:hover { color: var(--ink); background: var(--surface-3); }
.button_selected { color: #111; background: var(--accent); }
.plot_container { padding: 18px; display: grid; grid-template-columns: 1fr; gap: 16px; background: #151617; }
#history_widget img { width: min(100%, 1100px); height: auto; margin: 0 auto; display: block; border: 1px solid var(--line); background: #292a2b; }

.archive_charts_clean { padding-top: 22px !important; }
.archive_history_clean { margin-top: 0; border-top: 1px solid #969a9c; }
.history_card_clean { border: 0; background: transparent; }
.archive_graph_controls { padding: 24px 10px 28px; display: flex; flex-direction: column; align-items: center; }
.archive_graph_controls .period_switcher { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; border: 0; background: transparent; }
.archive_graph_controls .button, .archive_graph_controls .button_selected { min-width: 0; padding: 9px 13px; border: 0; border-radius: 4px; color: #fff; background: #35658f; font-size: .67rem; font-weight: 600; text-transform: uppercase; }
.archive_graph_controls .button:hover { color: #fff; background: #4679a8; }
.archive_graph_controls .button_selected { color: #fff; background: #4b7eac; }
.archive_graph_controls h1 { margin: 17px 0 0; color: #fff; font-size: 1.45rem; font-weight: 400; }
.archive_observation_charts { display: grid; grid-template-columns: 1fr; gap: 16px; }
.archive_observation_charts .observation_chart_card { width: min(100%, 1100px); margin: 0 auto; }
.archive_observation_charts .observation_chart_card canvas { height: 365px; }
.archive_observation_charts + .observation_charts_status { width: min(100%, 1100px); margin: 0 auto; }
.water_balance_section { width: min(100%, 1100px); margin: 54px auto 0; padding-top: 24px; border-top: 1px solid #969a9c; }
.water_balance_header { padding: 0 6px 22px; text-align: center; }
.water_balance_header h2 { margin: 1px 0 0; color: #fff; font-size: 1.55rem; font-weight: 400; }
.water_balance_header > p:last-child { max-width: 720px; margin: 8px auto 0; color: #93999c; font-size: .7rem; }
.crop_et_calculator { margin: 0 0 12px; padding: 18px 20px; border: 1px solid var(--line); background: var(--surface-2); }
.crop_et_calculator > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.crop_et_calculator > header .eyebrow { margin: 0 0 3px; color: var(--accent); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.crop_et_calculator > header h3 { margin: 0; color: #f0f1f2; font-size: 1rem; font-weight: 500; }
.crop_et_calculator > header > p { margin: 0; color: #91979a; font-size: .65rem; }
.crop_et_controls { margin-top: 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.crop_et_controls label { color: #949a9d; font-size: .62rem; }
.crop_et_controls select { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid #505558; border-radius: 4px; color: #eef0f1; background: #202224; font: inherit; font-size: .72rem; }
.crop_et_results { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.crop_et_results span { padding: 10px 12px; color: #8f9598; font-size: .58rem; text-transform: uppercase; }
.crop_et_results span + span { border-left: 1px solid var(--line); }
.crop_et_results strong { display: block; margin-top: 3px; color: #f2f3f3; font-size: 1.05rem; font-weight: 500; text-transform: none; }
.crop_et_results strong.is_surplus { color: #58d995; }
.crop_et_results strong.is_deficit { color: #ff7e77; }
.crop_et_calculator > small { display: block; margin-top: 10px; color: #7f8588; font-size: .58rem; }
.water_balance_summaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.water_summary_card { padding: 23px 25px; border: 1px solid var(--line); border-top: 3px solid var(--unknown-color); background: var(--surface-2); }
.water_summary_card > span { color: #91979a; font-size: .61rem; letter-spacing: .07em; text-transform: uppercase; }
.water_summary_card h3 { margin: 4px 0 0; color: #dfe1e2; font-size: .9rem; font-weight: 400; }
.water_summary_card > strong { display: block; margin-top: 6px; color: #fff; font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 500; line-height: 1.1; }
.water_summary_card > b { display: block; margin-top: 4px; color: var(--unknown-color); font-size: .72rem; font-weight: 600; }
.water_summary_card dl { margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.water_summary_card dl div { padding-top: 11px; }
.water_summary_card dl div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.water_summary_card dt { color: #858b8e; font-size: .59rem; text-transform: uppercase; }
.water_summary_card dd { margin: 2px 0 0; color: #e7e9ea; font-size: .95rem; }
.water_summary_card.is_surplus { border-top-color: #36c77c; }
.water_summary_card.is_surplus > b { color: #58d995; }
.water_summary_card.is_deficit { border-top-color: #ee625b; }
.water_summary_card.is_deficit > b { color: #ff7e77; }
.water_summary_card.is_balanced { border-top-color: #6aaad2; }
.water_summary_card.is_balanced > b { color: #79bce5; }
.water_balance_chart_card { margin-top: 12px; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.water_balance_chart_card > header { min-height: 68px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.water_balance_chart_card > header h3 { margin: 0; color: #ff5c54; font-size: 1rem; font-weight: 400; }
.water_balance_chart_card > header small { color: #858c8f; font-size: .58rem; }
.water_period_switcher { display: flex; gap: 4px; }
.water_period_switcher button { padding: 7px 10px; border: 1px solid #4b4f52; border-radius: 4px; color: #bbc0c2; background: #2e3032; font: inherit; font-size: .61rem; cursor: pointer; }
.water_period_switcher button:hover { color: #fff; border-color: #757a7e; }
.water_period_switcher button.is-active { color: #171819; border-color: var(--accent); background: var(--accent); }
.water_balance_chart_wrap { position: relative; }
.water_balance_chart_wrap canvas { width: 100%; height: 360px; display: block; cursor: crosshair; touch-action: pan-y; }
.water_balance_tooltip { position: absolute; z-index: 6; top: 28px; min-width: 190px; padding: 9px 11px; border: 1px solid #6a7074; border-radius: 5px; color: #eef0f1; background: rgba(24,26,27,.97); box-shadow: 0 8px 24px rgba(0,0,0,.34); font-size: .63rem; pointer-events: none; transform: translateX(-50%); }
.water_balance_tooltip[hidden] { display: none; }
.water_balance_tooltip strong { display: block; margin-bottom: 5px; color: #fff; }
.water_balance_tooltip span { display: flex; justify-content: space-between; gap: 18px; }
.water_balance_tooltip b { font-weight: 600; }
.water_balance_tables { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.water_balance_tables > article { min-width: 0; border: 1px solid var(--line); background: var(--surface-2); }
.water_balance_tables > article > header { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.water_balance_tables h3 { margin: 0; color: #f0f1f2; font-size: .9rem; font-weight: 500; }
.water_balance_tables header small { color: #858b8f; font-size: .57rem; }
.water_table_scroll { max-height: 390px; overflow: auto; scrollbar-color: #555a5d #242627; }
.water_balance_tables table { width: 100%; border-collapse: collapse; font-size: .62rem; }
.water_balance_tables th, .water_balance_tables td { padding: 8px 9px; border-bottom: 1px solid #393c3e; text-align: right; white-space: nowrap; }
.water_balance_tables th:first-child, .water_balance_tables td:first-child { text-align: left; }
.water_balance_tables thead th { position: sticky; top: 0; z-index: 1; color: #9ba0a3; background: #303235; font-weight: 500; }
.water_balance_tables tbody th { color: #c7cbcd; font-weight: 400; }
.water_balance_tables tbody td { color: #afb4b6; }
.water_balance_tables tbody td strong { color: #dde0e1; font-weight: 600; }
.water_balance_tables tbody td span { padding: 2px 5px; border-radius: 3px; color: #aaa; background: #3a3d3f; }
.water_balance_tables tr.is_surplus td strong { color: #58d995; }
.water_balance_tables tr.is_surplus td span { color: #75e1a9; background: rgba(54,199,124,.12); }
.water_balance_tables tr.is_deficit td strong { color: #ff7e77; }
.water_balance_tables tr.is_deficit td span { color: #ff938d; background: rgba(238,98,91,.12); }
.water_balance_tables tr.is_balanced td strong { color: #79bce5; }
.water_balance_updated { margin: 0; padding: 8px 10px; color: #7f8589; font-size: .58rem; text-align: right; }
.archive_history_clean .plot_container { padding: 0 0 20px; gap: 16px; background: transparent; }
.archive_history_clean #history_widget img { width: 100%; border: 0; }
.plot_period_heading { grid-column: 1 / -1; margin: 9px 0 2px; color: #fff; font-size: 1.18rem; font-weight: 400; text-align: center; }
.archive_plot_card { width: min(100%, 1100px); margin: 0 auto; overflow: hidden; background: #292a2b; }
.archive_plot_card > header { min-height: 46px; padding: 10px 12px 3px; display: flex; align-items: center; justify-content: center; }
.archive_plot_card > header h3 { margin: 0; color: #ff4b45; font-size: 1rem; font-weight: 400; text-align: center; }
.archive_plot_view { position: relative; width: 100%; aspect-ratio: 1100 / 310; overflow: hidden; }
.archive_plot_view img { transform: translateY(-8.82%); }
.archive_axis_label { position: absolute; z-index: 2; left: 8px; top: 50%; color: #dfe1e2; font-size: .58rem; white-space: nowrap; transform: translate(-42%, -50%) rotate(-90deg); transform-origin: center; }
.archive_plot_legend { min-height: 42px; padding: 7px 12px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; color: #e1e3e4; font-size: .61rem; }
.archive_plot_legend b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.archive_plot_legend b::before { content: ''; width: 16px; height: 2px; display: inline-block; background: var(--series); }

.details_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.details_grid .widget { min-width: 0; }
.details_grid .widget img { width: 100%; height: auto; }
.hival { color: var(--hival-color); }
.loval { color: var(--loval-color); }
.status_ok { color: var(--ok-color); }
.status_low { color: var(--low-color); }
.status_unknown { color: var(--unknown-color); }
.new_row { border-top: 1px solid var(--line); }
.celestial_body { margin-bottom: 24px; }
#hilo_widget .data, #totals_widget .data { text-align: right; }
#map_canvas { width: 100%; min-height: 320px; }

.footnote { width: min(calc(100% - 40px), var(--content-width)); margin: 0 auto; padding: 25px 0 35px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #777c80; font-size: .7rem; }
.footnote strong, .footnote a { color: var(--accent); }
.footer_links { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.footer_links a + a { position: relative; }
.footer_links a + a::before { content: "·"; position: absolute; right: calc(100% + 7px); color: #777c80; }

/* Disclaimer and official contact page. */
.legal_body { overflow-x: hidden; }
.legal_page { max-width: 1080px; }
.legal_header { padding: 18px 4px 24px; border-bottom: 1px solid var(--line); }
.legal_header h1 { margin: 2px 0 8px; color: #f1f2f3; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 400; letter-spacing: -.025em; }
.legal_header > div > p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: .86rem; }
.legal_layout { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); align-items: start; gap: 20px; }
.legal_card { padding: 25px 27px; border: 1px solid var(--line); background: var(--surface-2); }
.legal_card h2 { margin: 0 0 17px; color: #f1f2f3; font-size: 1.25rem; font-weight: 400; }
.legal_card p { margin: 0 0 15px; color: #c7cacc; font-size: .82rem; line-height: 1.68; }
.legal_card p:last-child { margin-bottom: 0; }
.legal_disclaimer .legal_alert { margin-top: 21px; padding: 13px 15px; border-left: 3px solid var(--accent); color: #e2e4e5; background: rgba(255, 127, 0, .055); }
.legal_contact { position: sticky; top: 102px; }
.legal_contact .eyebrow { margin-bottom: 3px; }
.legal_contact h2 { margin-bottom: 12px; }
.legal_email { display: inline-block; margin: 1px 0 20px; color: var(--accent); font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.legal_email:hover { text-decoration: underline; }
.legal_contact ul { margin: 8px 0 0; padding-left: 19px; color: #c7cacc; font-size: .78rem; line-height: 1.6; }
.legal_contact li + li { margin-top: 7px; }

@media (max-width: 1050px) {
    .main_nav { display: none; }
    .mobile_menu { display: block; }
    .console_grid { grid-template-columns: 1fr; }
    .weather_console { border-right: 0; }
    .webcam_panel { min-height: 390px; border-top: 1px solid var(--line); }
    .rain_summary { grid-template-columns: 1fr 1fr; }
    .rain_summary img { grid-column: 1 / -1; }
    .forecast_grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-color: var(--accent) var(--surface-2); }
    .forecast_card { flex: 0 0 160px; scroll-snap-align: start; }
    .details_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rain_report_grid { grid-template-columns: 1fr; }
    .home_rain_content { grid-template-columns: 1fr; }
    .home_rain_calendar { border-left: 0; border-top: 1px solid var(--line); }
    .forecast_charts_header { align-items: flex-start; flex-direction: column; }
    .weather_summaries_grid dl { grid-template-columns: 1fr; }
    .archive_current_values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .site_header { gap: 8px; }
    .brand { min-width: 0; gap: 7px; }
    .brand_mark { width: 36px; height: 36px; }
    .page_title { font-size: 1.15rem; }
    .language_switcher a { min-width: 25px; padding-inline: 3px; }
    .mobile_menu summary { padding: 7px 6px; }
    .records_page { padding-top: 18px !important; }
    .records_header { padding: 0 4px 18px; align-items: flex-start; flex-direction: column; gap: 12px; }
    .records_header h1 { font-size: 1.3rem; }
    .records_header > p { max-width: none; text-align: left; }
    .records_status { padding-inline: 4px; align-items: flex-start; flex-direction: column; gap: 5px; }
    .records_table_panel { margin-inline: 0; border-inline: 0; }
    .records_table, .records_table tbody { display: block; }
    .records_group { display: block; }
    .records_group th { width: 100%; display: block; }
    .records_periods { display: grid; grid-template-columns: 1fr 1fr; }
    .records_periods th:first-child { display: none; }
    .records_periods th { width: auto; }
    .records_row { display: grid; grid-template-columns: 1fr 1fr; }
    .records_row > th { width: auto; padding: 8px 10px 6px; grid-column: 1 / -1; border-right: 0; color: #fff; background: rgba(255,255,255,.035); font-weight: 600; }
    .records_row > td { width: auto; min-width: 0; padding: 9px 10px; display: flex; align-items: flex-start; flex-direction: column; gap: 4px; }
    .records_row strong { min-width: 0; }
    .records_row span { line-height: 1.35; }
    .records_note { margin-inline: 0; }
    .legal_layout { grid-template-columns: 1fr; }
    .legal_contact { position: static; }
    .legal_card { padding: 21px 19px; }
    body { font-size: 15px; }
    .site_header, #contents, .footnote { width: min(calc(100% - 28px), var(--content-width)); }
    .site_header { min-height: 72px; }
    .brand_subtitle { display: none; }
    .station_intro { display: block; }
    .station_powered { margin-top: 7px; }
    .connection_status { flex-wrap: wrap; }
    .simulator_flag { width: 100%; margin: 5px 0 0 17px; }
    .console_grid, .weather_console, .rain_summary, .editorial_grid, .details_grid { grid-template-columns: 1fr; }
    .weather_console { grid-template-rows: auto; }
    .current_primary, .console_observations, .wind_panel, .console_astronomy { border-right: 0; border-bottom: 1px solid var(--line); }
    .temperature_value { font-size: 5.4rem; }
    .temperature_context, .temperature_meta { grid-template-columns: 1fr 1fr; }
    .webcam_panel { grid-column: auto; min-height: 230px; }
    .forecast_header { align-items: flex-start; flex-direction: column; }
    .forecast_status { width: 100%; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .forecast_status span:first-child { max-width: 190px; }
    .forecast_interval { flex-wrap: wrap; justify-content: flex-end; }
    .forecast_interval > span { width: 100%; text-align: right; }
    .forecast_card { flex-basis: 152px; }
    .forecast_credit { text-align: left; }
    .rain_summary { padding: 18px; }
    .rain_summary img { grid-column: auto; }
    .editorial_card { min-height: 230px; padding: 24px; }
    .history_header { align-items: flex-start; flex-direction: column; }
    .period_switcher { width: 100%; }
    .button, .button_selected { min-width: 0; flex: 1; padding-inline: 5px; }
    .plot_container { grid-template-columns: 1fr; padding: 10px; }
    .footnote { display: block; }
    .footnote span { display: block; margin-top: 6px; }
    .footnote .footer_links { display: flex; justify-content: flex-start; margin-top: 10px; }
    .rain_report_header { align-items: flex-start; flex-direction: column; padding: 14px 0 18px; }
    .rain_station_identity { text-align: left; }
    .rain_report_status { align-items: flex-start; flex-direction: column; padding: 12px 0; }
    .rain_report_status .simulator_flag { width: 100%; margin: 0; }
    .rain_totals_panel { grid-template-columns: 1fr; padding: 12px; }
    .rain_metric { min-height: 150px; border: 1px solid #46494c !important; }
    .rain_metric + .rain_metric { border-top: 0 !important; }
    .rain_archive_note { grid-column: auto; }
    .rain_calendar_panel { padding: 18px 10px 14px; }
    .rain_day { min-height: 39px; }
    .home_rain_header { align-items: flex-start; flex-direction: column; }
    .home_rain_header .rain_page_link { width: 100%; text-align: center; }
    .home_rain_totals div { min-height: 105px; padding: 15px; }
    .home_rain_totals dd { font-size: 1.3rem; }
    .home_rain_calendar { padding: 16px 9px 18px; }
    .home_rain_calendar .rain_day { min-height: 39px; }
    .home_rain_note { text-align: left; }
    .forecast_chart_ranges { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .forecast_chart_ranges button { min-width: 0; }
    .forecast_chart_card > header { align-items: flex-start; flex-direction: column; }
    .chart_legend { justify-content: flex-start; }
    .forecast_chart_card canvas { height: 205px; }
    .forecast_charts_status { text-align: left; }
    .weather_summaries > h2 { padding-inline: 12px; font-size: 1.05rem; }
    .weather_summaries_grid { grid-template-columns: 1fr; }
    .weather_summaries_grid article { padding: 13px 18px 16px; }
    .weather_summaries_grid article + article { border-left: 0; border-top: 1px solid var(--line); }
    .weather_summaries_grid dl { grid-template-columns: 1fr 1fr; column-gap: 15px; }
    .stay_page { padding-top: 20px !important; }
    .stay_hero { min-height: 370px; padding: 28px 22px; }
    .stay_places { flex-wrap: wrap; }
    .stay_direct_note { grid-template-columns: 1fr; padding: 21px; }
    .stay_note_mark { width: 48px; height: 48px; }
    .stay_properties { grid-template-columns: 1fr; }
    .stay_property > p { min-height: 0; }
    .stay_actions { display: grid; grid-template-columns: 1fr; }
    .stay_weather_link { align-items: flex-start; flex-direction: column; padding: 23px 20px; }
    .stay_weather_link > a { width: 100%; text-align: center; }
    .events_page { padding-top: 20px !important; }
    .events_hero { min-height: 330px; padding: 27px 22px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 25px; }
    .events_hero > a { width: 100%; min-width: 0; }
    .events_toolbar { align-items: flex-start; flex-direction: column; }
    .events_filters { width: 100%; }
    .events_filter { flex: 1 1 auto; }
    .events_updated { text-align: left; }
    .events_grid { grid-template-columns: 1fr; }
    .event_card { grid-template-columns: 68px minmax(0, 1fr); }
    .event_date { padding-inline: 6px; }
    .event_date strong { font-size: 1.25rem; }
    .event_body { padding: 21px 18px; }
    .event_footer { align-items: flex-start; flex-direction: column; }
    .events_disclaimer { text-align: left; }
    .observation_charts_header { padding-inline: 4px; }
    .observation_charts_header h2 { font-size: 1.05rem; }
    .observation_charts_grid { grid-template-columns: 1fr; }
    .observation_chart_card > header { align-items: center; justify-content: center; }
    .observation_legend { justify-content: center; }
    .observation_chart_card canvas { height: 240px; }
    .observation_et_card { grid-column: auto; }
    .observation_et_info { padding: 26px 22px; }
    .crop_et_calculator > header { align-items: flex-start; flex-direction: column; }
    .crop_et_controls { grid-template-columns: 1fr; }
    .crop_et_results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crop_et_results span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
    .crop_et_results span:nth-child(4) { border-top: 1px solid var(--line); }
    .water_balance_summaries, .water_balance_tables { grid-template-columns: 1fr; }
    .water_balance_chart_card > header { align-items: flex-start; flex-direction: column; }
    .water_period_switcher { width: 100%; }
    .water_period_switcher button { flex: 1; }
    .water_balance_chart_wrap canvas { height: 300px; }
    .water_balance_tables th, .water_balance_tables td { padding-inline: 7px; }
    .observation_charts_status { text-align: left; }
    .archive_charts_page { padding-top: 20px !important; }
    .archive_charts_intro { padding: 26px 22px; align-items: flex-start; flex-direction: column; }
    .archive_charts_intro > a { width: 100%; text-align: center; }
    .archive_charts_clean { padding-top: 14px !important; }
    .archive_graph_controls { padding: 18px 0 22px; }
    .archive_graph_controls .period_switcher { width: 100%; }
    .archive_graph_controls .button, .archive_graph_controls .button_selected { flex: 1 1 calc(33.333% - 5px); padding-inline: 6px; }
    .archive_graph_controls h1 { margin-top: 14px; font-size: 1.25rem; }
    .archive_observation_charts .observation_chart_card canvas { height: 240px; }
    .archive_plot_card > header { min-height: 40px; }
    .archive_plot_card > header h3 { font-size: .88rem; }
    .archive_axis_label { display: none; }
    .archive_plot_legend { min-height: 36px; gap: 5px 10px; font-size: .54rem; }
    .archive_current_values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .archive_current_values article { padding: 16px 14px; }
}

@media (max-width: 420px) {
    .webcam_lightbox { padding: 58px 10px 58px; }
    .webcam_lightbox_stage { width: 96vw; max-width: 96vw; max-height: 78dvh; }
    .webcam_lightbox_image { max-width: 96vw; max-height: 78dvh; }
    .webcam_lightbox_hint { max-width: calc(100vw - 20px); overflow: hidden; font-size: .56rem; text-overflow: ellipsis; }
    .weather_summaries_grid dl { grid-template-columns: 1fr; }
    .rain_totals { grid-template-columns: 1fr; }
    .rain_totals div { border-left: 0; border-top: 1px solid var(--line); }
}