.city-weather {
    --weather-ink: var(--bims-text, #10271f);
    --weather-muted: var(--bims-muted, #5c6f67);
    --weather-surface: var(--bims-surface, #fff);
    --weather-surface-soft: var(--bims-surface-soft, #f3f8f5);
    --weather-border: var(--bims-border, #d7e4dc);
    --weather-primary: var(--bims-primary, #087b58);
    --weather-primary-strong: var(--bims-primary-strong, #056146);
    --weather-primary-soft: var(--bims-primary-soft, #dff5e9);
    --weather-accent: var(--bims-accent, #f2b705);
    --weather-on-dark: var(--weather-ink);
    --weather-on-dark-soft: var(--weather-muted);
    --weather-glass: color-mix(in srgb, var(--weather-surface) 86%, var(--weather-surface-soft));
    --weather-glass-strong: color-mix(in srgb, var(--weather-primary-soft) 48%, var(--weather-surface));
    --weather-focus: color-mix(in srgb, var(--weather-primary) 46%, var(--weather-surface));
    --weather-glass-border: color-mix(in srgb, var(--weather-border) 82%, var(--weather-surface));
    --weather-scene-tint: color-mix(in srgb, var(--weather-primary-soft) 32%, var(--weather-surface));
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    padding: clamp(1.1rem, 2.5vw, 1.65rem);
    border: 1px solid var(--weather-border);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 96% 0, color-mix(in srgb, var(--weather-accent) 9%, transparent) 0 5rem, transparent 5.1rem),
        linear-gradient(145deg, var(--weather-surface) 0 62%, var(--weather-scene-tint));
    box-shadow: 0 .9rem 2.2rem color-mix(in srgb, var(--weather-primary) 8%, transparent);
    color: var(--weather-on-dark);
    transition: background .35s ease, border-color .35s ease;
}

.city-weather[data-weather-scene="clear"],
.city-weather[data-weather-scene="mostly-clear"] {
    --weather-scene-tint: color-mix(in srgb, var(--weather-accent) 8%, var(--weather-surface));
}

.city-weather[data-weather-scene="partly-cloudy"],
.city-weather[data-weather-scene="cloudy"],
.city-weather[data-weather-scene="fog"] {
    --weather-scene-tint: color-mix(in srgb, #d8e3e7 36%, var(--weather-surface));
}

.city-weather[data-weather-scene="drizzle"],
.city-weather[data-weather-scene="rain"],
.city-weather[data-weather-scene="showers"],
.city-weather[data-weather-scene="heavy-rain"] {
    --weather-scene-tint: color-mix(in srgb, #dfeef3 42%, var(--weather-surface));
}

.city-weather[data-weather-scene="thunderstorm"] {
    --weather-scene-tint: color-mix(in srgb, #ece9df 42%, var(--weather-surface));
}

.city-weather::before,
.city-weather::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.city-weather::before {
    top: 0;
    right: 0;
    left: 0;
    height: .28rem;
    background: linear-gradient(90deg, var(--weather-primary) 0 58%, var(--weather-accent) 58% 82%, color-mix(in srgb, var(--weather-primary) 40%, #ffffff) 82%);
}

.city-weather::after {
    width: 11rem;
    height: 11rem;
    right: -7rem;
    bottom: -7rem;
    border: 1.7rem solid color-mix(in srgb, var(--weather-primary) 4%, transparent);
    border-radius: 50%;
}

.city-weather__heading,
.city-weather__current,
.city-weather__forecast,
.city-weather__footer {
    position: relative;
    z-index: 1;
}

.city-weather__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.city-weather__eyebrow,
.city-weather__status,
.city-weather__heading h2,
.city-weather__footer {
    margin: 0;
}

.city-weather__eyebrow {
    color: var(--weather-primary-strong);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.city-weather__heading h2 {
    max-width: 18ch;
    margin-top: .3rem;
    color: var(--weather-on-dark);
    font-size: clamp(1.45rem, 2.6vw, 2.05rem);
    letter-spacing: -.04em;
    line-height: 1.06;
    text-wrap: balance;
}

.city-weather__status {
    display: inline-flex;
    max-width: 15rem;
    align-items: center;
    gap: .45rem;
    padding: .46rem .7rem;
    border: 1px solid var(--weather-glass-border);
    border-radius: 999px;
    background: var(--weather-surface);
    color: var(--weather-on-dark);
    font-size: .73rem;
    font-weight: 780;
    line-height: 1.25;
    text-align: right;
}

.city-weather__status::before {
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #72e6bb;
    box-shadow: 0 0 0 0 rgba(114, 230, 187, .45);
    content: "";
    animation: city-weather-live 2.2s ease-out infinite;
}

.city-weather.is-stale .city-weather__status::before {
    background: #f7cf5d;
}

.city-weather[data-weather-scene="unavailable"]:not(.is-ready) .city-weather__status::before {
    background: color-mix(in srgb, var(--weather-muted) 58%, var(--weather-surface));
    box-shadow: none;
    animation: none;
}

.city-weather__current {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(16rem, .95fr);
    gap: .7rem;
    padding: .72rem;
    border: 1px solid var(--weather-glass-border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--weather-primary-soft) 24%, var(--weather-surface));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.city-weather__spotlight {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    padding: .5rem;
}

.city-weather__icon-orb {
    position: relative;
    display: grid;
    width: clamp(4.35rem, 6vw, 5.35rem);
    height: clamp(4.35rem, 6vw, 5.35rem);
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--weather-glass-border);
    border-radius: 1.3rem;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .88), transparent 34%),
        color-mix(in srgb, var(--weather-primary-soft) 72%, var(--weather-surface));
    box-shadow: 0 .55rem 1.25rem color-mix(in srgb, var(--weather-primary) 10%, transparent);
}

.city-weather__icon-orb::after {
    position: absolute;
    inset: .45rem;
    border: 1px solid color-mix(in srgb, var(--weather-primary) 16%, var(--weather-surface));
    border-radius: .95rem;
    content: "";
}

.city-weather__current-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--weather-accent) 82%, #9f6500);
    filter: drop-shadow(0 .25rem .35rem rgba(7, 69, 52, .14));
    font-size: clamp(2.8rem, 4.6vw, 3.7rem);
    line-height: 1;
    transform-origin: 50% 60%;
}

.city-weather__reading {
    min-width: 0;
}

.city-weather__reading small {
    display: block;
    margin-bottom: .2rem;
    color: var(--weather-on-dark-soft);
    font-size: .7rem;
    font-weight: 750;
}

.city-weather__reading > strong,
.city-weather__reading > span {
    display: block;
}

.city-weather__reading > strong {
    color: var(--weather-on-dark);
    font-size: clamp(3rem, 6vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: .88;
    text-shadow: none;
}

.city-weather__condition {
    margin-top: .5rem;
    color: var(--weather-on-dark);
    font-size: .9rem;
    font-weight: 780;
    line-height: 1.25;
    overflow-wrap: normal !important;
    word-break: normal;
}

.city-weather__today-range {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .15rem;
    padding-top: .7rem;
    border-top: 1px solid var(--weather-glass-border);
}

.city-weather__today-range small {
    color: var(--weather-on-dark-soft);
    font-size: .7rem;
    font-weight: 720;
}

.city-weather__today-range strong {
    color: var(--weather-on-dark);
    font-size: .92rem;
}

.city-weather__today-range i {
    margin-inline: .12rem;
    color: var(--weather-muted);
    font-style: normal;
}

.city-weather__today-range strong span:last-child {
    color: var(--weather-on-dark-soft);
}

.city-weather__facts {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
}

.city-weather__facts > div {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: .55rem;
    padding: .6rem;
    border: 1px solid var(--weather-glass-border);
    border-radius: .9rem;
    background: var(--weather-surface);
}

.city-weather__facts > div > span {
    grid-row: 1 / 3;
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    align-self: center;
    border-radius: .7rem;
    background: var(--weather-glass-strong);
    color: var(--weather-primary-strong);
    font-size: .72rem;
    font-weight: 900;
}

.city-weather__facts dt,
.city-weather__facts dd {
    min-width: 0;
    margin: 0;
}

.city-weather__facts dt {
    color: var(--weather-on-dark-soft);
    font-size: .7rem;
    font-weight: 700;
}

.city-weather__facts dd {
    margin-top: .08rem;
    color: var(--weather-on-dark);
    font-size: .88rem;
    font-weight: 850;
    line-height: 1.25;
}

.city-weather__advisory {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--weather-accent) 32%, var(--weather-surface));
    border-radius: .9rem;
    background: color-mix(in srgb, var(--weather-accent) 9%, var(--weather-surface));
}

.city-weather__advisory > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: #f9d66c;
    color: #264433;
    font-family: Georgia, serif;
    font-size: .85rem;
    font-weight: 900;
}

.city-weather__advisory p {
    margin: 0;
}

.city-weather__advisory small,
.city-weather__advisory strong {
    display: block;
}

.city-weather__advisory small {
    color: var(--weather-primary-strong);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.city-weather__advisory strong {
    margin-top: .12rem;
    color: var(--weather-on-dark);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.45;
}

.city-weather__forecast {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .48rem;
    margin-top: .72rem;
}

.city-weather__day {
    position: relative;
    min-width: 0;
    min-height: 9.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .65rem .48rem .55rem;
    overflow: hidden;
    border: 1px solid var(--weather-glass-border);
    border-radius: .85rem;
    background: var(--weather-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    color: var(--weather-on-dark);
    text-align: center;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.city-weather__day::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: .18rem;
    background: transparent;
    content: "";
}

.city-weather__day.is-today {
    border-color: color-mix(in srgb, var(--weather-accent) 48%, var(--weather-surface));
    background: color-mix(in srgb, var(--weather-accent) 10%, var(--weather-surface));
}

.city-weather__day.is-today::before {
    background: #f9d66c;
}

.city-weather__day:hover {
    border-color: var(--weather-focus);
    background: var(--weather-glass-strong);
    transform: translateY(-.18rem);
}

.city-weather__day > * {
    min-width: 0;
    max-width: 100%;
}

.city-weather__day-top {
    width: 100%;
    display: grid;
    gap: .05rem;
}

.city-weather__day-top > strong {
    color: var(--weather-on-dark);
    font-size: .78rem;
    line-height: 1.2;
}

.city-weather__day-date {
    color: var(--weather-on-dark-soft);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.2;
}

.city-weather__day-icon {
    display: inline-grid;
    min-height: 2rem;
    place-items: center;
    margin-block: .26rem .12rem;
    color: color-mix(in srgb, var(--weather-accent) 82%, #9f6500);
    filter: drop-shadow(0 .18rem .25rem rgba(7, 69, 52, .12));
    font-size: 1.72rem;
    line-height: 1;
    transition: transform .18s ease;
}

.city-weather__day:hover .city-weather__day-icon {
    transform: translateY(-.1rem) scale(1.05);
}

.city-weather__temperatures {
    display: flex;
    align-items: baseline;
    gap: .28rem;
    color: var(--weather-on-dark);
}

.city-weather__temperatures > strong {
    font-size: .94rem;
}

.city-weather__temperatures > small {
    color: var(--weather-on-dark-soft);
    font-size: .72rem;
    font-weight: 750;
}

.city-weather .city-weather__day-condition {
    min-height: 1.8rem;
    display: grid;
    place-items: center;
    margin-top: .2rem;
    color: var(--weather-on-dark-soft);
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: normal;
    word-break: normal;
}

.city-weather__rain {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(1.45rem, 1fr) auto auto;
    align-items: center;
    gap: .24rem;
    margin-top: auto;
    color: var(--weather-on-dark-soft);
    font-size: .65rem;
    font-weight: 650;
    white-space: nowrap;
}

.city-weather__rain > span {
    height: .22rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--weather-primary) 14%, var(--weather-surface));
}

.city-weather__rain > span > i {
    display: block;
    width: var(--weather-rain, 0%);
    height: 100%;
    border-radius: inherit;
    background: #70d3ff;
}

.city-weather__rain > b {
    color: var(--weather-on-dark);
    font-size: .63rem;
}

.city-weather__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .68rem;
    color: var(--weather-on-dark-soft);
    font-size: .7rem;
    font-weight: 620;
}

.city-weather__footer a {
    color: var(--weather-on-dark);
    font-weight: 750;
    text-decoration-color: color-mix(in srgb, var(--weather-primary) 42%, var(--weather-surface));
    text-underline-offset: .2em;
}

.city-weather__current-icon {
    animation: city-weather-float 3.8s ease-in-out infinite;
}

.city-weather__current-icon[data-weather-icon="clear"],
.city-weather__current-icon[data-weather-icon="mostly-clear"] {
    animation-name: city-weather-sun;
    animation-duration: 5.5s;
}

.city-weather__current-icon[data-weather-icon="partly-cloudy"],
.city-weather__current-icon[data-weather-icon="cloudy"],
.city-weather__current-icon[data-weather-icon="fog"] {
    animation-name: city-weather-drift;
    animation-duration: 4.6s;
}

.city-weather__current-icon[data-weather-icon="drizzle"],
.city-weather__current-icon[data-weather-icon="rain"],
.city-weather__current-icon[data-weather-icon="showers"],
.city-weather__current-icon[data-weather-icon="heavy-rain"] {
    animation-name: city-weather-rain;
    animation-duration: 2.4s;
}

.city-weather__current-icon[data-weather-icon="thunderstorm"] {
    animation-name: city-weather-thunder;
    animation-duration: 3s;
}

.city-weather__current-icon[data-weather-icon="snow"] {
    animation-name: city-weather-snow;
    animation-duration: 4.8s;
}

.city-weather__current-icon[data-weather-icon="unavailable"] {
    animation: none;
}

@keyframes city-weather-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-.16em);
    }
}

@keyframes city-weather-sun {
    0%,
    100% {
        transform: rotate(-4deg) scale(1);
    }
    50% {
        transform: rotate(5deg) scale(1.08);
    }
}

@keyframes city-weather-drift {
    0%,
    100% {
        transform: translateX(-.1em);
    }
    50% {
        transform: translateX(.14em);
    }
}

@keyframes city-weather-rain {
    0%,
    100% {
        transform: translateY(-.08em) rotate(-2deg);
    }
    50% {
        transform: translateY(.1em) rotate(2deg);
    }
}

@keyframes city-weather-thunder {
    0%,
    42%,
    48%,
    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1) drop-shadow(0 .35rem .5rem rgba(0, 0, 0, .18));
    }
    44% {
        transform: translateY(-.06em) scale(1.12);
        filter: brightness(1.5) drop-shadow(0 .35rem .5rem rgba(0, 0, 0, .18));
    }
}

@keyframes city-weather-snow {
    0%,
    100% {
        transform: translateY(-.06em) rotate(-5deg);
    }
    50% {
        transform: translateY(.1em) rotate(7deg);
    }
}

@keyframes city-weather-live {
    0% {
        box-shadow: 0 0 0 0 rgba(114, 230, 187, .42);
    }
    70%,
    100% {
        box-shadow: 0 0 0 .45rem transparent;
    }
}

@media (max-width: 1099px) {
    .city-weather__current {
        grid-template-columns: minmax(0, 1.05fr) minmax(15rem, .95fr);
    }

    .city-weather__forecast {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .city-weather__day {
        min-height: 8.9rem;
        padding-inline: .4rem;
    }

    .city-weather .city-weather__day-condition {
        font-size: .63rem;
    }
}

@media (max-width: 719px) {
    .city-weather {
        padding: .9rem;
        border-radius: 1.05rem;
    }

    .city-weather__heading {
        align-items: center;
        margin-bottom: .72rem;
    }

    .city-weather__heading h2 {
        max-width: none;
        margin-top: .18rem;
        font-size: clamp(1.25rem, 5.5vw, 1.65rem);
    }

    .city-weather__status {
        max-width: 10rem;
        flex: 0 0 auto;
        padding: .35rem .52rem;
        font-size: .65rem;
    }

    .city-weather__current {
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
        padding: .58rem;
        border-radius: 1rem;
    }

    .city-weather__spotlight {
        grid-template-columns: 3.8rem minmax(0, 1fr);
        gap: .6rem;
        padding: .25rem;
    }

    .city-weather__icon-orb {
        width: 3.8rem;
        height: 3.8rem;
        border-radius: 1rem;
    }

    .city-weather__current-icon {
        font-size: 2.55rem;
    }

    .city-weather__reading small {
        display: none;
    }

    .city-weather__reading > strong {
        font-size: 3rem;
    }

    .city-weather__condition {
        margin-top: .25rem;
        font-size: .78rem;
    }

    .city-weather__today-range {
        margin-top: 0;
        padding-top: .5rem;
    }

    .city-weather__facts {
        gap: .4rem;
    }

    .city-weather__facts > div {
        grid-template-columns: 1.65rem minmax(0, 1fr);
        column-gap: .38rem;
        padding: .48rem;
        border-radius: .72rem;
    }

    .city-weather__facts > div > span {
        width: 1.65rem;
        height: 1.65rem;
        border-radius: .52rem;
        font-size: .62rem;
    }

    .city-weather__facts dt {
        font-size: .62rem;
    }

    .city-weather__facts dd {
        font-size: .78rem;
    }

    .city-weather__advisory {
        gap: .48rem;
        padding: .55rem .62rem;
        border-radius: .72rem;
    }

    .city-weather__advisory > span {
        width: 1.65rem;
        height: 1.65rem;
    }

    .city-weather__forecast {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: .4rem;
        margin-top: .58rem;
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }

    .city-weather__day {
        grid-column: span 2;
        min-height: 7rem;
        padding: .45rem .34rem .4rem;
    }

    .city-weather__day:nth-child(5):nth-last-child(3) {
        grid-column: 2 / span 2;
    }

    .city-weather__day:nth-child(6):nth-last-child(2) {
        grid-column: 4 / span 2;
    }

    .city-weather__day:nth-child(7):last-child {
        grid-column: 6 / span 2;
    }

    .city-weather__day-top {
        display: grid;
        gap: .04rem;
    }

    .city-weather__day-top > strong {
        font-size: .7rem;
    }

    .city-weather__day-date {
        font-size: .58rem;
    }

    .city-weather__day-icon {
        min-height: 1.45rem;
        margin-block: .08rem .04rem;
        font-size: 1.35rem;
    }

    .city-weather__temperatures > strong {
        font-size: .86rem;
    }

    .city-weather__temperatures > small {
        font-size: .64rem;
    }

    .city-weather .city-weather__day-condition {
        min-height: 1.3rem;
        margin-top: .05rem;
        font-size: .58rem;
        line-height: 1.12;
    }

    .city-weather__rain {
        grid-template-columns: minmax(.65rem, 1fr) auto auto;
        gap: .12rem;
        font-size: .58rem;
    }

    .city-weather__rain > b {
        font-size: .58rem;
    }

    .city-weather__footer {
        margin-top: .45rem;
        font-size: .62rem;
    }
}

@media (max-width: 419px) {
    .city-weather {
        padding: .78rem;
    }

    .city-weather__heading {
        display: grid;
        gap: .45rem;
    }

    .city-weather__status {
        max-width: none;
        justify-self: start;
        text-align: left;
    }

    .city-weather__facts {
        gap: .35rem;
    }

    .city-weather__forecast {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .35rem;
    }

    .city-weather__day {
        min-height: 6.9rem;
        padding: .4rem .28rem .35rem;
    }

    .city-weather__day:nth-child(5):nth-last-child(3),
    .city-weather__day:nth-child(6):nth-last-child(2) {
        grid-column: auto / span 2;
    }

    .city-weather__day:nth-child(7):last-child {
        grid-column: 3 / span 2;
    }

    .city-weather__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .city-weather,
    .city-weather *,
    .city-weather *::before,
    .city-weather *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .city-weather {
        border: 1px solid #777;
        background: #fff;
        box-shadow: none;
        color: #111;
    }

    .city-weather :where(h2, strong, span, small, dt, dd, p, a) {
        color: #111 !important;
    }
}