:root {
    --ink: #155a86;
    --sky: #1a7ab8;
    --accent: #1a6ea8;
    --paper: #f3f7fb;
    --rule: #c5d4e0;
    --text: #17324a;
    --quiet: #5a7388;
    --stage: #d4eaf8;
    --serif: Georgia, "Iowan Old Style", Palatino, serif;
    --sans: "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--paper);
    line-height: 1.45;
}

.wrap { width: min(820px, calc(100% - 1.6rem)); margin: 0 auto; }

.mast {
    background: var(--sky);
    color: #f4fbff;
    border-bottom: 4px solid var(--accent);
}
.mast-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0 0.7rem;
}
.mast-name {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}
.mast-date {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.92;
}

.forecast-nav {
    background: #fff;
    border-bottom: 1px solid var(--rule);
}
.forecast-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.15rem;
    padding: 0.55rem 0;
    font-size: 1rem;
}
.forecast-nav a {
    color: var(--text);
    text-decoration: none;
    padding-bottom: 0.12rem;
}
.forecast-nav a.is-here {
    color: var(--accent);
    border-bottom: 3px solid var(--accent);
    font-weight: 700;
}

.now {
    padding: 1.2rem 0 1rem;
    border-bottom: 1px solid var(--rule);
}
.now-kicker, .now-back {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--quiet);
}
.now-back a { color: var(--accent); }
.now h1 {
    margin: 0 0 0.35rem;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    line-height: 1.1;
}
.now-updated {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    color: var(--quiet);
}
.now-stage {
    background: var(--stage);
    padding: 1rem 1.05rem;
}
.now-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem 1rem;
    align-items: center;
}
.wx-mark {
    display: block;
    width: 120px;
    height: 120px;
}
.wx-mark--sm { width: 40px; height: 40px; }
.wx-mark--xs { width: 28px; height: 28px; }
.wx-when {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.wx-when .wx-mark,
.wx-when .wx-mark--xs {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
}
.deg {
    margin: 0;
    font-size: clamp(3.2rem, 10vw, 5rem);
    font-weight: 700;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.cond, .lede { margin: 0.35rem 0 0; font-size: 1.15rem; }
.now-meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0.65rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--rule);
    gap: 0.5rem;
}
.now-meta dt {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quiet);
}
.now-meta dd {
    margin: 0.15rem 0 0;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.block { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.block h2, .notes h2, .assess h2 {
    margin: 0 0 0.55rem;
    font-family: var(--serif);
    font-size: 1.25rem;
}
.table-scroll { overflow-x: auto; }
table.wx {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    background: #fff;
}
table.wx th, table.wx td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
table.wx thead th {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quiet);
    background: color-mix(in srgb, var(--paper) 70%, #fff);
}
table.wx tbody th { font-weight: 600; }
table.wx a { color: var(--accent); }
table.wx tr.is-here th { color: var(--accent); }
table.wx tr.is-now {
    background: color-mix(in srgb, var(--accent) 14%, #fff);
}
table.wx tr.is-now td {
    font-weight: 700;
    color: var(--accent);
}
table.wx td:nth-child(n+2), table.wx thead th:nth-child(n+2) { text-align: right; }
.wx-th-short { display: none; }
.wx-day {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    line-height: 1.2;
}
.wx-day-name {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--quiet);
}

.normals {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
}
.normals h2 {
    margin: 0 0 0.55rem;
    font-family: var(--serif);
    font-size: 1.25rem;
}
.normals-lead { margin: 0 0 0.75rem; }
.normals-note,
.normals-archive {
    margin: 0.55rem 0 0;
    color: var(--quiet);
    font-size: 0.9rem;
}
.normals-board tbody th {
    text-align: left;
    font-weight: 600;
}

.assess {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
}
.assess p { margin: 0 0 0.7rem; }
.assess ul { margin: 0; padding-left: 1.15rem; }
.assess li { margin: 0.3rem 0; }

.notes {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
}
.notes-split {
    display: grid;
    gap: 1.1rem;
}
.notes-split > * { min-width: 0; }
.notes-sea {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
}
.notes-sea:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.notes-sea h2 {
    margin: 0;
    flex: 0 0 auto;
    line-height: 1.2;
}
.sea-rule {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 1.15em;
    background: var(--rule);
}
.sea-line {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.45;
}
.notes p { margin: 0; }
.notes .aside { margin-top: 0.25rem; color: var(--quiet); }
.notes-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 0.55rem;
}
.notes-head h2 { margin: 0; }
.notes-aqi {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
}
.aq-copy { line-height: 1.55; }
.aq-copy strong { font-weight: 700; }
.pm-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.8rem;
}
.pm-box {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: linear-gradient(#fff, color-mix(in srgb, var(--paper) 55%, #fff));
    padding: 0.7rem 0.75rem 0.6rem;
}
.pm-box::before {
    content: "";
    display: block;
    height: 3px;
    margin: -0.7rem -0.75rem 0.55rem;
    background: color-mix(in srgb, var(--accent) 62%, #fff);
}
.notes .pm-val {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.28rem;
}
.pm-val span {
    font-weight: 700;
    color: var(--text);
}
.pm-val strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.pm-val small {
    font-size: 0.82rem;
    color: var(--quiet);
}
.pm-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--quiet);
    line-height: 1.35;
}
.near { min-width: 0; }
.near h2 {
    margin: 0 0 0.45rem;
    font-family: var(--serif);
    font-size: 1.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.near-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.near-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, #fff);
}
.near-list a {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}
.near-list a:hover { color: var(--accent); }
.near-list span {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
}

.places {
    padding: 1.15rem 0 0.4rem;
    border-bottom: 1px solid var(--rule);
}
.places-label {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--quiet);
}
.places-list { margin: 0; font-size: 0.95rem; line-height: 1.75; }
.places-list a {
    color: var(--text);
    text-decoration: none;
    margin-right: 0.7rem;
    white-space: nowrap;
}
.places-list a:hover { color: var(--accent); }
.places-list a.is-here {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    font-weight: 700;
}

.colophon {
    padding: 1rem 0 2rem;
    color: var(--quiet);
    font-size: 0.82rem;
}
.colophon p { margin: 0; }
.colophon .source { margin-top: 0.25rem; }
.colophon a { color: var(--accent); }
.foot-nav { margin-bottom: 0.55rem; }
.foot-nav a {
    margin-right: 0.85rem;
    text-decoration: none;
    color: var(--text);
}
.foot-nav a.is-here { color: var(--accent); font-weight: 700; }

.legal { padding: 1.25rem 0 1.8rem; }
.legal h1 {
    margin: 0 0 0.85rem;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 5vw, 2.2rem);
}
.legal h2 {
    margin: 1.45rem 0 0.55rem;
    font-family: var(--serif);
    font-size: 1.2rem;
}
.legal p,
.legal ul { margin: 0 0 0.85rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: 0 0 0.3rem; }
.legal a { color: var(--accent); }
.legal { line-height: 1.65; }

.contact-form {
    margin: 1.15rem 0 0.4rem;
    padding: 1rem 1.05rem 1.15rem;
    border: 1px solid var(--rule);
    background: #fff;
}
.contact-form label { display: block; margin: 0 0 0.8rem; }
.contact-form span {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.88rem;
    font-weight: 700;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    max-width: 34rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rule);
    font: inherit;
    color: inherit;
    background: #fff;
}
.contact-form textarea { min-height: 8.5rem; resize: vertical; }
.contact-note { font-size: 0.88rem; color: var(--quiet); }
.contact-submit {
    border: 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    padding: 0.55rem 1.15rem;
    cursor: pointer;
}
.contact-hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}
.contact-flash { padding: 0.6rem 0.7rem; margin: 0 0 0.85rem; }
.contact-flash-ok { background: #e8f6ee; }
.contact-flash-err { background: #fdecec; }
.contact-captcha { margin: 0 0 0.8rem; }
.contact-captcha-img {
    display: block;
    width: 160px;
    height: 52px;
    border: 1px solid var(--rule);
    background: #fff;
}
.contact-captcha-refresh {
    display: inline-block;
    margin: 0.3rem 0 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}
.contact-captcha input { max-width: 11rem; letter-spacing: 0.12em; }

@media (min-width: 700px) {
    .now-grid { grid-template-columns: 132px minmax(0, 1fr) auto; }
    .now-meta {
        grid-column: auto;
        border-top: 0;
        border-left: 1px solid var(--rule);
        padding: 0 0 0 1.1rem;
        margin: 0;
        min-width: 11rem;
    }
    .notes-split {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
    .notes-air,
    .near {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .pm-pair { margin-top: auto; }
    .near-list {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .near-list li {
        flex: 1;
        align-items: center;
    }
}
@media (max-width: 699px) {
    .wx-daily-wrap { overflow: visible; }
    table.wx-daily {
        width: 100%;
        table-layout: fixed;
        font-size: 0.82rem;
    }
    table.wx-daily th,
    table.wx-daily td {
        white-space: normal;
        padding: 0.45rem 0.28rem;
    }
    table.wx-daily td:nth-child(2) { overflow-wrap: break-word; }
    table.wx-daily th:nth-child(n+3),
    table.wx-daily td:nth-child(n+3) { white-space: nowrap; }
    table.wx-daily th:nth-child(1),
    table.wx-daily td:nth-child(1) { width: 30%; }
    table.wx-daily th:nth-child(2),
    table.wx-daily td:nth-child(2) { width: 24%; }
    table.wx-daily th:nth-child(3),
    table.wx-daily td:nth-child(3),
    table.wx-daily th:nth-child(4),
    table.wx-daily td:nth-child(4) { width: 13%; }
    table.wx-daily th:nth-child(5),
    table.wx-daily td:nth-child(5) { width: 20%; }
    table.wx-daily .wx-when { align-items: flex-start; }
    table.wx-daily .wx-th-long { display: none; }
    table.wx-daily .wx-th-short { display: inline; }
    .wx-hourly-wrap { overflow: visible; }
    table.wx-hourly {
        width: 100%;
        table-layout: fixed;
        font-size: 0.82rem;
    }
    table.wx-hourly th,
    table.wx-hourly td {
        padding: 0.45rem 0.28rem;
    }
    table.wx-hourly thead th { letter-spacing: 0.02em; }
    table.wx-hourly td:nth-child(2) {
        white-space: normal;
        line-height: 1.2;
    }
    table.wx-hourly th:nth-child(1),
    table.wx-hourly td:nth-child(1) { width: 22%; }
    table.wx-hourly th:nth-child(2),
    table.wx-hourly td:nth-child(2) { width: 28%; }
    table.wx-hourly th:nth-child(3),
    table.wx-hourly td:nth-child(3) { width: 14%; }
    table.wx-hourly th:nth-child(4),
    table.wx-hourly td:nth-child(4) { width: 14%; }
    table.wx-hourly th:nth-child(5),
    table.wx-hourly td:nth-child(5) { width: 22%; white-space: nowrap; }
    .notes-sea {
        display: block;
    }
    .notes-sea h2 {
        margin: 0 0 0.4rem;
    }
    .sea-rule {
        display: none;
    }
    .sea-line {
        margin: 0;
    }
}
@media (max-width: 520px) {
    .mast-row { flex-wrap: wrap; }
    .mast-date { width: 100%; }
    .now-icon .wx-mark { width: 96px; height: 96px; }
}

body.theme-deniz {
    --sky: #1a7ab8;
    --ink: #155a86;
    --accent: #1a6ea8;
    --paper: #eef6fb;
    --rule: #b9cddc;
    --text: #17324a;
    --quiet: #5a7388;
    --stage: #d4eaf8;
}
body.theme-kent {
    --sky: #2c3d52;
    --ink: #2a3f55;
    --accent: #35506b;
    --paper: #f2f4f6;
    --rule: #d0d6dc;
    --text: #1c2833;
    --quiet: #5c6b78;
    --stage: #e6ebf0;
}
body.theme-gece {
    --sky: #12283c;
    --ink: #16324a;
    --accent: #1f4a6a;
    --paper: #e8eef3;
    --rule: #b8c4d0;
    --text: #142433;
    --quiet: #516273;
    --stage: #d5dee6;
}
body.theme-kum {
    --sky: #c46a1b;
    --ink: #8a4a12;
    --accent: #c46a1b;
    --paper: #fbf4ea;
    --rule: #e0ccb0;
    --text: #3d2a16;
    --quiet: #8a6d4c;
    --stage: #f4e4c8;
}
body.theme-orman {
    --sky: #2e6b46;
    --ink: #245538;
    --accent: #2e6b46;
    --paper: #eef6ef;
    --rule: #b8d0c0;
    --text: #1a3324;
    --quiet: #4f7460;
    --stage: #d8eadc;
}

body.layout-serit .mast-row { padding: 0.62rem 0 0.52rem; }
body.layout-serit .mast-name { font-size: 1.05rem; letter-spacing: 0.01em; }
body.layout-serit .forecast-nav { background: transparent; border-bottom: 0; }
body.layout-serit .forecast-nav-row { gap: 0.4rem; padding: 0.7rem 0 0.15rem; }
body.layout-serit .forecast-nav a {
    border: 1px solid var(--rule);
    background: #fff;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    border-bottom-width: 1px;
}
body.layout-serit .forecast-nav a.is-here {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    border-bottom: 1px solid var(--accent);
}
body.layout-serit .now { padding: 0.85rem 0 0.75rem; }
body.layout-serit .now-stage { padding: 0.75rem 0.85rem; }
body.layout-serit .hours-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.45rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
body.layout-serit .hour-chip {
    flex: 0 0 5.1rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--rule);
    padding: 0.55rem 0.35rem 0.5rem;
    font-size: 0.78rem;
    color: var(--quiet);
}
body.layout-serit .hour-chip-time {
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}
body.layout-serit .hour-chip strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
body.layout-serit .hour-chip-wind {
    font-size: 0.68rem;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.layout-serit .hour-chip.is-now {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, #fff);
}

body.layout-kart .wrap { width: min(880px, calc(100% - 1.6rem)); }
body.layout-kart .mast-name { font-size: 1.28rem; }
body.layout-kart .forecast-nav { background: color-mix(in srgb, var(--paper) 55%, #fff); }
body.layout-kart .now-stage {
    border: 1px solid var(--rule);
    border-radius: max(8px, var(--skin-radius, 8px));
}
body.layout-kart .hour-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
body.layout-kart .hour-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: max(6px, var(--skin-radius, 6px));
    padding: 0.65rem 0.7rem 0.6rem;
    min-width: 0;
}
body.layout-kart .hour-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--quiet);
}
body.layout-kart .hour-card-temp {
    margin: 0.2rem 0 0;
    font-size: 1.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--accent);
}
body.layout-kart .hour-card-cond {
    margin: 0.28rem 0 0;
    font-size: 0.88rem;
}
body.layout-kart .hour-card-meta {
    margin: 0.4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    font-size: 0.78rem;
    color: var(--quiet);
}
body.layout-kart .hour-card.is-now {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, #fff);
}
@media (min-width: 700px) {
    body.layout-kart .hour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}