/* ==========================================================================
   ENC Weather V2
   Version 1.3.0 - ENC Weather branding
   ========================================================================== */

:root {
    --enc-blue: #0098dc;
    --enc-blue-dark: #0074ad;
    --enc-blue-soft: #e8f6fc;
    --enc-cyan: #48c6f1;
    --enc-electric: #00b9ff;
    --enc-silver: #d8e1e8;
    --enc-silver-bright: #f5fbff;
    --enc-danger: #ef3f37;
    --enc-navy: #0a2238;
    --enc-navy-2: #102f49;
    --enc-navy-3: #173d5b;
    --enc-bg: #f2f6f9;
    --enc-card: #ffffff;
    --enc-text: #172533;
    --enc-muted: #677b8d;
    --enc-line: #d8e3ea;
    --enc-line-strong: #bfd0db;
    --enc-shadow: 0 16px 42px rgba(10, 34, 56, 0.11);
    --enc-shadow-soft: 0 8px 24px rgba(10, 34, 56, 0.07);
    --enc-radius: 16px;
    --enc-radius-sm: 10px;
    --enc-shell: 1480px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--enc-bg);
    color: var(--enc-text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--enc-blue-dark);
}

a:hover,
a:focus {
    color: var(--enc-blue);
}

button,
input,
select,
textarea {
    font: inherit;
}

.enc-shell {
    width: min(calc(100% - 48px), var(--enc-shell));
    margin-inline: auto;
}

.enc-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    transform: translateY(-150%);
    padding: 10px 14px;
    background: #fff;
    color: #000;
    border-radius: 6px;
}

.enc-skip-link:focus {
    transform: translateY(0);
}

/* Header
   ========================================================================== */

.enc-site-header {
    position: relative;
    z-index: 100;
    overflow: visible;
    background:
        radial-gradient(
            circle at 18% -90%,
            rgba(0, 185, 255, 0.16),
            transparent 42%
        ),
        linear-gradient(
            110deg,
            #071b2d 0%,
            #0a2238 48%,
            #0b2b45 100%
        );
    color: #fff;
    border-bottom: 1px solid rgba(216, 225, 232, 0.28);
    box-shadow:
        0 9px 30px rgba(2, 18, 31, 0.16);
}

.enc-site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            rgba(216, 225, 232, 0.25) 0%,
            rgba(245, 251, 255, 0.92) 14%,
            var(--enc-electric) 34%,
            #147de4 68%,
            rgba(216, 225, 232, 0.30) 100%
        );
    box-shadow:
        0 0 11px rgba(0, 185, 255, 0.42);
    pointer-events: none;
}

.enc-header-inner {
    width: min(calc(100% - 48px), var(--enc-shell));
    min-height: 98px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 36px;
}

.enc-brand {
    flex: 0 0 auto;
}

.enc-brand-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none;
}

.enc-brand-link:hover,
.enc-brand-link:focus {
    color: #fff;
}

.enc-brand-emblem-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: grid;
    place-items: center;
}

.enc-brand-emblem-wrap::after {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: -1;
    border-radius: 50%;
    background:
        rgba(0, 185, 255, 0.22);
    filter: blur(11px);
}

.enc-brand-emblem {
    display: block;
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter:
        drop-shadow(
            0 5px 10px
            rgba(0, 0, 0, 0.28)
        );
}

.enc-brand-logo .custom-logo-link,
.enc-brand-logo .custom-logo-link img {
    display: block;
}

.enc-brand-logo .custom-logo {
    width: auto;
    max-width: 210px;
    max-height: 68px;
}

.enc-brand-copy {
    display: flex;
    flex-direction: column;
}

.enc-site-title {
    color: var(--enc-silver-bright);
    font-size: 29px;
    line-height: 1.02;
    font-weight: 860;
    letter-spacing: -0.03em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 16px rgba(0, 185, 255, 0.08);
}

.enc-site-tagline {
    margin-top: 5px;
    color: #b8cad8;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.015em;
    line-height: 1.2;
}

.enc-primary-nav {
    margin-left: auto;
}

.enc-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.enc-nav-list li {
    position: relative;
    margin: 0;
}

.enc-nav-list a {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: #eef5fa;
    text-decoration: none;
    font-size: 15px;
    font-weight: 720;
}

.enc-nav-list a:hover,
.enc-nav-list a:focus,
.enc-nav-list .current-menu-item > a,
.enc-nav-list .current_page_item > a {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.08)
        );
    color: #fff;
    box-shadow:
        inset 0 -2px 0 rgba(0, 185, 255, 0.72);
}

.enc-nav-list .sub-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 285px;
    display: none;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--enc-navy);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: var(--enc-shadow);
}

.enc-nav-list li:hover > .sub-menu,
.enc-nav-list li:focus-within > .sub-menu {
    display: block;
}

.enc-nav-list .sub-menu .sub-menu {
    top: 0;
    left: calc(100% + 4px);
}

.enc-nav-toggle {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.enc-nav-toggle-icon {
    width: 20px;
    display: grid;
    gap: 4px;
}

.enc-nav-toggle-icon span {
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* Operational strip
   ========================================================================== */

.enc-ops-strip {
    background:
        linear-gradient(
            90deg,
            #0d2c46,
            #123a59 56%,
            #0f314c
        );
    color: #dfeaf2;
    border-bottom:
        1px solid
        rgba(216, 225, 232, 0.13);
}

.enc-ops-inner {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    font-size: 13px;
}

.enc-ops-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.enc-ops-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3bd27d;
    box-shadow: 0 0 0 4px rgba(59, 210, 125, 0.10);
}

.enc-ops-muted {
    color: #9fb5c6;
}

.enc-ops-links {
    display: flex;
    align-items: center;
    gap: 17px;
}

.enc-ops-links a {
    color: #cfe0ec;
    text-decoration: none;
    font-weight: 650;
}

.enc-ops-links a:hover,
.enc-ops-links a:focus {
    color: #fff;
}

/* Hero
   ========================================================================== */

.enc-home {
    padding-top: 42px;
    padding-bottom: 78px;
}

.enc-hero {
    display: block;
    max-width: 1040px;
    margin-bottom: 28px;
}

.enc-eyebrow,
.enc-card-kicker,
.enc-panel-kicker {
    margin: 0 0 7px;
    color: var(--enc-blue-dark);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.enc-hero h1 {
    margin: 0;
    color: var(--enc-navy);
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.enc-lead {
    max-width: 900px;
    margin: 16px 0 0;
    color: var(--enc-muted);
    font-size: 17px;
    line-height: 1.55;
}

/* Primary dashboard
   ========================================================================== */

.enc-primary-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(330px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.enc-primary-main,
.enc-primary-rail {
    min-width: 0;
}

.enc-primary-rail {
    display: grid;
    gap: 20px;
}

.enc-panel {
    background: var(--enc-card);
    border: 1px solid var(--enc-line);
    border-radius: var(--enc-radius);
    box-shadow: var(--enc-shadow-soft);
}

.enc-map-panel {
    padding: 22px;
}

.enc-panel-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 17px;
}

.enc-panel-header h2 {
    margin: 0;
    color: var(--enc-navy);
    font-size: 29px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.enc-panel-header-note {
    color: var(--enc-muted);
    font-size: 13px;
}

.enc-panel-header-compact {
    margin-bottom: 14px;
}

.enc-panel-header-compact h2 {
    font-size: 24px;
}

/* Tabs
   ========================================================================== */

.enc-tabs {
    min-width: 0;
}

.enc-tab-list {
    display: flex;
    gap: 7px;
    margin-bottom: 15px;
    padding: 0 2px 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
}

.enc-tab-list::-webkit-scrollbar {
    display: none;
}

.enc-tab-button {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 11px 15px;
    border: 1px solid var(--enc-line);
    border-radius: 9px;
    background: #f8fafb;
    color: #40566a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 760;
}

.enc-tab-button:hover,
.enc-tab-button:focus {
    border-color: #9dcfe6;
    color: var(--enc-blue-dark);
}

.enc-tab-button.is-active {
    border-color: #009fe2;
    background:
        linear-gradient(
            180deg,
            #08a9ea,
            #008dcb
        );
    color: #fff;
    box-shadow:
        0 7px 16px rgba(0, 152, 220, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.enc-tab-panel[hidden] {
    display: none !important;
}

/* Map
   ========================================================================== */

.enc-map-card {
    overflow: hidden;
    border: 1px solid var(--enc-line);
    border-radius: 12px;
    background: #fff;
}

.enc-map-frame {
    position: relative;
    width: 100%;
    min-height: 0;
    display: block;
    background:
        linear-gradient(180deg, #eaf1f5, #dfe9ef);
    overflow: hidden;
}

.enc-map-image {
    display: block;
    width: 100%;
    height: auto;
}

.enc-map-title {
    position: absolute;
    top: 14px;
    left: 14px;
    min-width: 218px;
    max-width: calc(100% - 120px);
    padding: 6px 10px 7px;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(5px);
    color: #1a2732;
    border-left: 4px solid var(--enc-blue);
    border-radius: 6px;
    box-shadow: 0 6px 17px rgba(15, 35, 50, 0.12);
}

.enc-map-title span,
.enc-map-title small {
    display: block;
}

.enc-map-title span {
    font-size: 17px;
    font-weight: 850;
    line-height: 1.15;
}

.enc-map-title small {
    margin-top: 2px;
    color: #647483;
    font-size: 11px;
    font-weight: 650;
}

.enc-map-watermark {
    position: absolute;
    right: 18px;
    bottom: 12px;
    width: 78px;
    height: 78px;
    background:
        url("https://www.encweather.com/logo-icon-map.png")
        center / contain
        no-repeat;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.enc-map-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 13px;
    border-top: 1px solid var(--enc-line);
    color: var(--enc-muted);
    font-size: 12px;
}

.enc-map-meta a {
    white-space: nowrap;
}

/* Rail cards
   ========================================================================== */

.enc-conditions-card,
.enc-alert-card,
.enc-quick-card {
    padding: 21px;
}

.enc-condition-current {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 17px;
    padding: 18px;
    background:
        linear-gradient(145deg, var(--enc-navy), var(--enc-navy-3));
    color: #fff;
    border-radius: 12px;
}

.enc-condition-temp {
    min-width: 86px;
    font-size: 54px;
    line-height: 1;
    font-weight: 820;
    letter-spacing: -0.06em;
}

.enc-condition-summary {
    min-width: 0;
}

.enc-condition-summary strong,
.enc-condition-summary span {
    display: block;
}

.enc-condition-summary strong {
    font-size: 16px;
    line-height: 1.25;
}

.enc-condition-summary span {
    margin-top: 4px;
    color: #bbcedc;
    font-size: 12px;
    line-height: 1.3;
}

.enc-condition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 15px;
    overflow: hidden;
    background: var(--enc-line);
    border: 1px solid var(--enc-line);
    border-radius: 10px;
}

.enc-condition-grid > div {
    padding: 13px 14px;
    background: #fff;
}

.enc-condition-grid span,
.enc-condition-grid strong {
    display: block;
}

.enc-condition-grid span {
    color: var(--enc-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.enc-condition-grid strong {
    margin-top: 2px;
    color: var(--enc-navy);
    font-size: 18px;
}

.enc-condition-footer {
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    color: var(--enc-muted);
    font-size: 11px;
}

.enc-condition-footer a {
    margin-left: auto;
    white-space: nowrap;
}

.enc-conditions-card.is-stale {
    border-color: #e7c77a;
}

.enc-conditions-card.has-data-error {
    border-color: #e6a0a0;
}

.enc-ops-dot.is-error {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.enc-ops-dot.is-stale {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}

.enc-alert-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: start;
}

.enc-alert-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff2d6;
    color: #ad6900;
    font-size: 22px;
    font-weight: 900;
}

.enc-alert-card h2 {
    margin: 0;
    color: var(--enc-navy);
    font-size: 21px;
}

.enc-alert-card p:last-child {
    margin: 7px 0 0;
    color: var(--enc-muted);
    font-size: 13px;
}

.enc-alert-content {
    min-width: 0;
}

.enc-alert-card.is-quiet .enc-alert-icon {
    background: #e6f8ed;
    color: #178447;
}

.enc-alert-card.has-alerts {
    border-color: #e5bd63;
    box-shadow:
        0 10px 28px rgba(148, 95, 0, 0.10);
}

.enc-alert-card.has-alerts .enc-alert-icon {
    background: #fff0cc;
    color: #a85d00;
}

.enc-alert-card.has-data-error {
    border-color: #e6a0a0;
}

.enc-alert-card.has-data-error .enc-alert-icon {
    background: #fde7e7;
    color: #b42323;
}

.enc-alert-card.is-stale {
    border-style: dashed;
}

.enc-alert-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.enc-alert-item {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    background: #f7fafc;
    border: 1px solid var(--enc-line);
    border-radius: 7px;
}

.enc-alert-marker {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d97706;
}

.enc-alert-item strong {
    min-width: 0;
    color: var(--enc-navy);
    font-size: 11px;
    line-height: 1.25;
}

.enc-alert-item > span:last-child {
    color: var(--enc-muted);
    font-size: 10px;
    white-space: nowrap;
}

.enc-alert-source {
    margin-top: 10px;
    color: #8a9aa7;
    font-size: 10px;
}

.enc-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.enc-quick-links a {
    padding: 10px 11px;
    background: #f5f8fa;
    border: 1px solid var(--enc-line);
    border-radius: 8px;
    color: var(--enc-navy);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.enc-quick-links a:hover,
.enc-quick-links a:focus {
    background: var(--enc-blue-soft);
    border-color: #b7dced;
}

.enc-tab-panel img[data-src] {
    visibility: hidden;
}


.enc-map-alert-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
    gap: 18px;
    align-items: start;
    padding: 15px;
    border-top: 1px solid var(--enc-line);
    background: #f8fbfc;
    border-radius: 0 0 11px 11px;
}

.enc-map-alert-copy {
    min-width: 0;
}

.enc-map-alert-kicker {
    display: block;
    color: var(--enc-blue-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.10em;
}

.enc-map-alert-copy strong,
.enc-map-alert-copy > span:last-child {
    display: block;
}

.enc-map-alert-copy strong {
    margin-top: 3px;
    color: var(--enc-navy);
    font-size: 16px;
}

.enc-map-alert-copy > span:last-child {
    margin-top: 3px;
    color: var(--enc-muted);
    font-size: 12px;
}

.enc-map-alert-list {
    display: grid;
    gap: 6px;
}

.enc-map-alert-list:empty {
    display: none;
}

.enc-map-alert-list .enc-alert-item {
    padding: 7px 8px;
    background: #fff;
}


.enc-spc-legend,
.enc-drought-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 11px 13px;
    border-top: 1px solid var(--enc-line);
    background: #f8fbfc;
}

.enc-spc-item,
.enc-drought-item {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 999px;
    color: #182430;
    font-size: 10px;
    font-weight: 820;
    line-height: 1;
}

.enc-spc-tstm {
    background: #c9f2c5;
}

.enc-spc-mrgl {
    background: #73c476;
}

.enc-spc-slgt {
    background: #fff176;
}

.enc-spc-enh {
    background: #ffb74d;
}

.enc-spc-mdt {
    background: #ef6a6a;
}

.enc-spc-high {
    background: #e56ad6;
}

.enc-d0 {
    background: #fff2a6;
}

.enc-d1 {
    background: #f4c36b;
}

.enc-d2 {
    background: #e78a48;
}

.enc-d3 {
    background: #c84e42;
    color: #fff;
}

.enc-d4 {
    background: #7f2539;
    color: #fff;
}


/* Tropical status
   ========================================================================== */

.enc-tab-button.has-tropical-activity {
    position: relative;
    padding-right: 26px;
}

.enc-tab-button.has-tropical-activity::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef5d4f;
    box-shadow:
        0 0 0 3px rgba(239, 93, 79, 0.14);
}

.enc-tropical-summary {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.75fr)
        minmax(0, 1.5fr);
    gap: 18px;
    padding: 16px;
    border-top: 1px solid var(--enc-line);
    background:
        linear-gradient(
            135deg,
            #f7fbfd,
            #edf6fa
        );
    border-radius: 0 0 11px 11px;
}

.enc-tropical-kicker {
    display: block;
    color: var(--enc-blue-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.enc-tropical-summary-copy strong,
.enc-tropical-summary-copy > span:last-child {
    display: block;
}

.enc-tropical-summary-copy strong {
    margin-top: 3px;
    color: var(--enc-navy);
    font-size: 17px;
}

.enc-tropical-summary-copy > span:last-child {
    margin-top: 4px;
    color: var(--enc-muted);
    font-size: 12px;
    line-height: 1.4;
}

.enc-tropical-systems {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.enc-tropical-systems:empty {
    display: none;
}

.enc-tropical-system {
    padding: 10px 11px;
    background: #fff;
    border: 1px solid var(--enc-line);
    border-left: 4px solid #74899a;
    border-radius: 8px;
}

.enc-tropical-system.is-depression {
    border-left-color: #5daee5;
}

.enc-tropical-system.is-storm {
    border-left-color: #e6bb45;
}

.enc-tropical-system.is-hurricane {
    border-left-color: #e35c50;
}

.enc-tropical-system strong,
.enc-tropical-system span {
    display: block;
}

.enc-tropical-system strong {
    color: var(--enc-navy);
    font-size: 13px;
}

.enc-tropical-type {
    margin-top: 1px;
    color: var(--enc-muted);
    font-size: 10px;
    font-weight: 700;
}

.enc-tropical-details {
    margin-top: 5px;
    color: #4e6476;
    font-size: 10px;
}



/* ENC Weather Live
   ========================================================================== */

.enc-live-section {
    margin-top: 34px;
}

.enc-live-shell {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(315px, 0.75fr);
    gap: 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #081d31 0%,
            #0a2f4b 58%,
            #0b3b5d 100%
        );
    border: 1px solid rgba(9, 64, 98, 0.35);
    border-radius: 18px;
    box-shadow: var(--enc-shadow);
}

.enc-live-player-wrap {
    min-width: 0;
    padding: 18px;
}

.enc-live-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(36, 173, 224, 0.22),
            transparent 32%
        ),
        #061521;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.20);
}

.enc-live-iframe {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition:
        opacity 220ms ease;
}

.enc-live-iframe.is-loaded {
    opacity: 1;
}

.enc-live-player-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 9px;
    padding: 28px;
    color: #d9e9f4;
    text-align: center;
    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}

.enc-live-player-placeholder.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.enc-live-placeholder-mark {
    width: 66px;
    color: #fff;
}

.enc-live-placeholder-mark svg {
    display: block;
    width: 100%;
    height: auto;
}

.enc-live-placeholder-mark rect {
    fill: #e4332e;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 2;
}

.enc-live-placeholder-mark path {
    fill: #fff;
}

.enc-live-player-placeholder strong {
    color: #fff;
    font-size: 22px;
}

.enc-live-player-placeholder span {
    color: #91adc1;
    font-size: 12px;
}

.enc-live-copy {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 30px 30px 30px 24px;
    border-left:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.enc-live-copy::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -70px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(0, 169, 229, 0.18),
            transparent 68%
        );
    pointer-events: none;
}

.enc-live-badge-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.enc-live-badge,
.enc-live-youtube {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.enc-live-badge {
    gap: 6px;
    background:
        rgba(255, 255, 255, 0.10);
    color: #fff;
    border:
        1px solid
        rgba(255, 255, 255, 0.13);
}

.enc-live-youtube {
    background:
        rgba(228, 51, 46, 0.13);
    color: #ff9f9b;
    border:
        1px solid
        rgba(228, 51, 46, 0.20);
}

.enc-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4e48;
    box-shadow:
        0 0 0 4px
        rgba(239, 78, 72, 0.12);
}

.enc-live-copy h2 {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    color: #fff;
    font-size: 29px;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.enc-live-copy > p {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    color: #bad0df;
    font-size: 14px;
    line-height: 1.5;
}

.enc-live-copy .enc-live-note {
    color: #819caf;
    font-size: 11px;
}

.enc-live-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 19px;
}

.enc-live-actions a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 780;
}

.enc-live-primary {
    background: #e4332e;
    color: #fff;
    border: 1px solid #e4332e;
}

.enc-live-primary:hover,
.enc-live-primary:focus {
    background: #f0433d;
    color: #fff;
}

.enc-live-secondary {
    background:
        rgba(255, 255, 255, 0.07);
    color: #dceaf4;
    border:
        1px solid
        rgba(255, 255, 255, 0.13);
}

.enc-live-secondary:hover,
.enc-live-secondary:focus {
    background:
        rgba(255, 255, 255, 0.12);
    color: #fff;
}


.enc-live-noscript {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #061521;
}

.enc-live-noscript a {
    display: inline-flex;
    padding: 11px 14px;
    border-radius: 9px;
    background: #e4332e;
    color: #fff;
    text-decoration: none;
    font-weight: 780;
}

/* Latest ENC Weather posts
   ========================================================================== */

.enc-posts-section {
    margin-top: 34px;
}

.enc-posts-title-row {
    margin-bottom: 16px;
}

.enc-posts-all-link {
    color: var(--enc-blue-dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.enc-posts-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(360px, 0.85fr);
    gap: 18px;
}

.enc-featured-post {
    min-width: 0;
    overflow: hidden;
    background: var(--enc-navy);
    border-radius: 16px;
    box-shadow: var(--enc-shadow-soft);
}

.enc-featured-post-link {
    min-height: 430px;
    display: grid;
    grid-template-rows:
        minmax(210px, 1.15fr)
        auto;
    color: #fff;
    text-decoration: none;
}

.enc-featured-post-link:hover,
.enc-featured-post-link:focus {
    color: #fff;
}

.enc-featured-post-media {
    position: relative;
    min-height: 230px;
    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(72, 198, 241, 0.52),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0d456b,
            #0a2238 65%
        );
    background-position: center;
    background-size: cover;
}

.enc-featured-post-media.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(6, 24, 39, 0.05),
            rgba(6, 24, 39, 0.52)
        );
}

.enc-post-category {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    padding: 5px 9px;
    background: rgba(8, 34, 56, 0.86);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: 0.04em;
}

.enc-featured-post-copy {
    padding: 22px 23px 24px;
}

.enc-post-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8297a8;
    font-size: 10px;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.enc-featured-post .enc-post-meta {
    color: #93afc2;
}

.enc-featured-post-copy h3 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.enc-featured-post-copy p {
    margin: 11px 0 0;
    color: #bed0dd;
    font-size: 14px;
}

.enc-post-read {
    display: inline-block;
    margin-top: 15px;
    color: #7ed7fa;
    font-size: 12px;
    font-weight: 780;
}

.enc-latest-post-list {
    display: grid;
    gap: 12px;
}

.enc-latest-post-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--enc-line);
    border-radius: 13px;
    box-shadow: var(--enc-shadow-soft);
    transition:
        transform 150ms ease,
        border-color 150ms ease;
}

.enc-latest-post-card > a {
    min-height: 128px;
    display: grid;
    grid-template-columns:
        145px
        minmax(0, 1fr);
    color: inherit;
    text-decoration: none;
}

.enc-latest-post-thumb {
    min-height: 128px;
    background:
        linear-gradient(
            135deg,
            #0b3c60,
            #1296d2
        );
    background-position: center;
    background-size: cover;
}

.enc-latest-post-thumb-fallback {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.90);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.enc-latest-post-copy {
    min-width: 0;
    padding: 13px 14px;
}

.enc-latest-post-copy .enc-post-meta span:first-child {
    color: var(--enc-blue-dark);
}

.enc-latest-post-copy h3 {
    margin: 5px 0 0;
    color: var(--enc-navy);
    font-size: 17px;
    line-height: 1.15;
}

.enc-latest-post-copy p {
    margin: 6px 0 0;
    color: var(--enc-muted);
    font-size: 11px;
    line-height: 1.35;
}

.enc-latest-post-card:hover {
    border-color: #b6d9e9;
    transform: translateY(-1px);
}

/* Placeholders
   ========================================================================== */

.enc-placeholder {
    min-height: 500px;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 45px;
    background:
        linear-gradient(135deg, #f7fafc, #edf5f8);
    text-align: center;
}

.enc-placeholder-badge {
    justify-self: center;
    padding: 4px 8px;
    background: var(--enc-blue-soft);
    color: var(--enc-blue-dark);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
}

.enc-placeholder strong {
    color: var(--enc-navy);
    font-size: 25px;
}

.enc-placeholder > span:last-child {
    max-width: 620px;
    color: var(--enc-muted);
}

/* Lower homepage
   ========================================================================== */

.enc-section-block {
    margin-top: 28px;
}

.enc-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 16px;
}

.enc-section-title-row h2 {
    margin: 0;
    color: var(--enc-navy);
    font-size: 31px;
    line-height: 1.1;
}

.enc-section-title-row > p {
    max-width: 520px;
    margin: 0;
    color: var(--enc-muted);
    text-align: right;
    font-size: 14px;
}

.enc-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.enc-feature-card {
    position: relative;
    min-height: 225px;
    padding: 23px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--enc-line);
    border-radius: 13px;
    box-shadow: var(--enc-shadow-soft);
}

.enc-feature-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--enc-navy);
    font-size: 22px;
    line-height: 1.15;
}

.enc-feature-card p:last-child {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    color: var(--enc-muted);
    font-size: 14px;
}

.enc-feature-number {
    position: absolute;
    right: 12px;
    bottom: -12px;
    color: #eef4f7;
    font-size: 92px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.09em;
}



/* Personalized forecast
   ========================================================================== */

.enc-personal-forecast {
    position: relative;
    margin-top: 28px;
    padding: 28px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            135deg,
            #09243d 0%,
            #0d3759 52%,
            #0a2c49 100%
        );
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: var(--enc-shadow);
}

.enc-personal-forecast.theme-clear {
    background:
        linear-gradient(135deg, #082943 0%, #0b4770 52%, #0a3152 100%);
}

.enc-personal-forecast.theme-cloud {
    background:
        linear-gradient(135deg, #132c40 0%, #35556d 55%, #1a3a51 100%);
}

.enc-personal-forecast.theme-rain {
    background:
        linear-gradient(135deg, #112b42 0%, #244c68 50%, #17364d 100%);
}

.enc-personal-forecast.theme-storm {
    background:
        linear-gradient(135deg, #111b2d 0%, #27364d 54%, #172235 100%);
}

.enc-personal-forecast.theme-night {
    background:
        linear-gradient(135deg, #071626 0%, #132b46 55%, #101d34 100%);
}


.enc-forecast-glow {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.enc-forecast-glow-one {
    top: -270px;
    right: -100px;
    background:
        radial-gradient(
            circle,
            rgba(0, 171, 236, 0.40),
            rgba(0, 171, 236, 0)
        );
}

.enc-forecast-glow-two {
    left: 35%;
    bottom: -330px;
    background:
        radial-gradient(
            circle,
            rgba(96, 207, 255, 0.16),
            rgba(96, 207, 255, 0)
        );
}

.enc-forecast-topline {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px;
}

.enc-forecast-eyebrow,
.enc-forecast-section-kicker {
    margin: 0 0 5px;
    color: #7ed7fa;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.enc-forecast-topline h2 {
    margin: 0;
    color: #fff;
    font-size: 31px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.enc-forecast-topline p:last-child {
    margin: 7px 0 0;
    color: #aac4d7;
    font-size: 13px;
}

.enc-location-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
}

.enc-location-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    cursor: pointer;
    font-weight: 750;
    backdrop-filter: blur(7px);
    transition:
        transform 150ms ease,
        background 150ms ease,
        border-color 150ms ease;
}

.enc-location-button:hover,
.enc-location-button:focus {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
}

.enc-location-button:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.enc-location-crosshair {
    color: #73dafd;
    font-size: 20px;
    line-height: 1;
}

.enc-location-privacy {
    max-width: 270px;
    color: #93aec2;
    font-size: 10px;
    text-align: right;
}

.enc-forecast-loading,
.enc-forecast-error {
    display: grid;
    min-height: 150px;
    place-items: center;
    padding: 25px;
    color: #c9dce9;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    text-align: center;
}

.enc-forecast-content[hidden],
.enc-forecast-loading[hidden],
.enc-forecast-error[hidden] {
    display: none !important;
}

.enc-hourly-header,
.enc-seven-day-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.enc-hourly-header h3,
.enc-seven-day-header h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    line-height: 1.15;
}

.enc-hourly-scroll-note,
.enc-seven-day-header a {
    color: #9fc4d9;
    font-size: 11px;
}

.enc-seven-day-header a:hover,
.enc-seven-day-header a:focus {
    color: #fff;
}

.enc-hourly-strip {
    display: grid;
    grid-auto-columns: minmax(108px, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    margin-top: 13px;
    padding-bottom: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
}

.enc-hourly-strip::-webkit-scrollbar {
    display: none;
}

.enc-hour-card {
    min-height: 195px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 13px 10px 12px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    scroll-snap-align: start;
    backdrop-filter: blur(5px);
}

.enc-hour-card.is-now {
    background:
        linear-gradient(
            180deg,
            rgba(0, 170, 232, 0.30),
            rgba(255, 255, 255, 0.08)
        );
    border-color: rgba(101, 218, 255, 0.44);
}

.enc-hour-time {
    color: #d8e8f2;
    font-size: 12px;
    font-weight: 750;
}

.enc-hour-temp {
    margin-top: 3px;
    color: #fff;
    font-size: 27px;
    font-weight: 820;
    letter-spacing: -0.04em;
}

.enc-hour-condition {
    min-height: 34px;
    margin-top: 4px;
    color: #c7dae7;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
}

.enc-hour-precip {
    margin-top: auto;
    color: #84dfff;
    font-size: 10px;
    font-weight: 750;
}

.enc-hour-precip span {
    margin-right: 3px;
    font-size: 8px;
}

.enc-weather-icon {
    width: 53px;
    height: 53px;
    margin-top: 6px;
}

.enc-weather-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.wx-sun {
    fill: #ffd65a;
    filter: drop-shadow(0 2px 5px rgba(255, 196, 0, 0.24));
}

.wx-rays {
    fill: none;
    stroke: #ffd65a;
    stroke-width: 3;
    stroke-linecap: round;
}

.wx-cloud {
    fill: #d8e7f0;
    stroke: rgba(255, 255, 255, 0.56);
    stroke-width: 1;
}

.wx-moon {
    fill: #d9e8ff;
}

.wx-moon-path {
    fill: #d9e8ff;
    filter: drop-shadow(0 2px 5px rgba(164, 201, 255, 0.20));
}

.wx-rain {
    fill: none;
    stroke: #61d1ff;
    stroke-width: 3.5;
    stroke-linecap: round;
}

.wx-bolt {
    fill: #ffd24c;
}

.wx-snow {
    fill: #e9f9ff;
}

.wx-fog {
    fill: none;
    stroke: #c3d6e2;
    stroke-width: 3;
    stroke-linecap: round;
}

.enc-seven-day-header {
    margin-top: 24px;
}

.enc-seven-day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

.enc-seven-day-grid {
    scrollbar-width: none;
}

.enc-seven-day-grid::-webkit-scrollbar {
    display: none;
}

.enc-day-card {
    min-width: 0;
    min-height: 208px;
    padding: 14px 11px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    text-align: center;
    backdrop-filter: blur(5px);
}

.enc-day-card.is-first {
    background:
        linear-gradient(
            180deg,
            rgba(0, 170, 232, 0.24),
            rgba(255, 255, 255, 0.07)
        );
}

.enc-day-name {
    color: #eaf5fb;
    font-size: 13px;
    font-weight: 800;
}

.enc-weather-icon-day {
    width: 58px;
    height: 58px;
    margin: 8px auto 2px;
}

.enc-day-temps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.enc-temp-high,
.enc-temp-low {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.enc-temp-high small,
.enc-temp-low small {
    font-size: 9px;
    font-weight: 850;
}

.enc-temp-high small {
    color: #ffd56a;
}

.enc-temp-low small {
    color: #85cfff;
}

.enc-temp-high strong {
    color: #fff;
    font-size: 23px;
}

.enc-temp-low strong {
    color: #adc3d1;
    font-size: 18px;
}

.enc-day-condition {
    min-height: 35px;
    margin-top: 4px;
    color: #c2d5e2;
    font-size: 10px;
    line-height: 1.25;
}

.enc-day-precip {
    margin-top: 7px;
    color: #77dafd;
    font-size: 10px;
    font-weight: 750;
}

.enc-feature-grid-three {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

/* Interior pages
   ========================================================================== */

.enc-content-shell {
    padding-top: 42px;
    padding-bottom: 70px;
}

.enc-entry {
    padding: clamp(24px, 4vw, 44px);
    background: #fff;
    border: 1px solid var(--enc-line);
    border-radius: var(--enc-radius);
    box-shadow: var(--enc-shadow);
}

.enc-entry + .enc-entry {
    margin-top: 24px;
}

.enc-entry-title {
    margin: 0 0 24px;
    color: var(--enc-navy);
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.1;
}

.enc-entry-title a {
    color: inherit;
    text-decoration: none;
}

.enc-entry-content::after {
    content: "";
    display: table;
    clear: both;
}

.enc-entry-content iframe,
.enc-entry-content table {
    max-width: 100%;
}

.enc-button {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 7px;
    background: var(--enc-blue);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.enc-button:hover,
.enc-button:focus {
    background: var(--enc-blue-dark);
    color: #fff;
}




/* Single weather posts
   ========================================================================== */

.enc-single-shell {
    max-width: 1180px;
}

.enc-single-entry {
    overflow: hidden;
    padding: 0;
}

.enc-single-header {
    padding:
        clamp(26px, 4vw, 48px)
        clamp(22px, 5vw, 58px)
        clamp(22px, 3vw, 34px);
}

.enc-single-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 11px;
    color: #718797;
    font-size: 11px;
    font-weight: 700;
}

.enc-single-category {
    color: var(--enc-blue);
    font-weight: 850;
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
}

.enc-single-category:hover,
.enc-single-category:focus {
    color: var(--enc-blue-dark);
}

.enc-single-kicker-dot {
    color: #9bb0be;
}

.enc-single-title {
    max-width: 980px;
    margin-bottom: 0;
    font-size: clamp(34px, 5.4vw, 58px);
    letter-spacing: -0.035em;
}

.enc-single-deck {
    max-width: 900px;
    margin-top: 15px;
    color: #60798b;
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.55;
}

.enc-single-featured {
    margin: 0;
    background: #09243a;
    border-top: 1px solid var(--enc-line);
    border-bottom: 1px solid var(--enc-line);
}

.enc-single-featured-image {
    display: block;
    width: 100%;
    max-height: 690px;
    object-fit: contain;
    margin-inline: auto;
    background: #09243a;
}

.enc-single-content {
    max-width: 940px;
    margin-inline: auto;
    padding:
        clamp(26px, 4vw, 48px)
        clamp(22px, 5vw, 58px)
        clamp(36px, 5vw, 58px);
    color: #243b4c;
    font-size: 17px;
    line-height: 1.72;
}

.enc-single-content > :first-child {
    margin-top: 0;
}

.enc-single-content > :last-child {
    margin-bottom: 0;
}

.enc-single-content p {
    margin: 0 0 1.25em;
}

.enc-single-content h2,
.enc-single-content h3,
.enc-single-content h4 {
    color: var(--enc-navy);
    line-height: 1.16;
}

.enc-single-content h2 {
    margin: 1.7em 0 0.65em;
    font-size: clamp(25px, 3.4vw, 34px);
}

.enc-single-content h3 {
    margin: 1.55em 0 0.6em;
    font-size: clamp(21px, 2.8vw, 27px);
}

.enc-single-content h4 {
    margin: 1.4em 0 0.55em;
    font-size: 19px;
}

.enc-single-content img {
    max-width: 100%;
    height: auto;
}

.enc-single-content figure,
.enc-single-content .wp-block-image {
    max-width: 100%;
}

.enc-single-content figure img,
.enc-single-content .wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.enc-single-content .alignwide {
    width: min(1100px, calc(100vw - 48px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.enc-single-content .alignfull {
    width: min(100vw, 1280px);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.enc-single-content iframe,
.enc-single-content video,
.enc-single-content embed,
.enc-single-content object {
    max-width: 100%;
}

.enc-single-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.enc-single-content blockquote {
    margin: 1.6em 0;
    padding: 5px 0 5px 20px;
    border-left: 4px solid var(--enc-blue);
    color: #526b7c;
}

.enc-single-content a {
    overflow-wrap: anywhere;
}

.enc-page-links {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--enc-line);
    font-size: 13px;
    font-weight: 750;
}

.enc-post-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.enc-post-navigation-item {
    min-width: 0;
    padding: 18px 20px;
    background: #fff;
    color: var(--enc-navy);
    border: 1px solid var(--enc-line);
    border-radius: var(--enc-radius);
    box-shadow: var(--enc-shadow);
    text-decoration: none;
}

.enc-post-navigation-item span,
.enc-post-navigation-item strong {
    display: block;
}

.enc-post-navigation-item span {
    color: #718797;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.enc-post-navigation-item strong {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.3;
}

.enc-post-navigation-item:hover,
.enc-post-navigation-item:focus {
    border-color: #a8d8eb;
    box-shadow: 0 12px 28px rgba(14, 43, 64, 0.10);
}

.enc-post-navigation-next {
    text-align: right;
}

.enc-post-navigation-empty {
    visibility: hidden;
}

@media (max-width: 780px) {
    .enc-single-header {
        padding: 23px 17px 20px;
    }

    .enc-single-title {
        font-size: 34px;
    }

    .enc-single-deck {
        font-size: 15px;
    }

    .enc-single-featured-image {
        max-height: none;
    }

    .enc-single-content {
        padding: 24px 17px 34px;
        font-size: 16px;
        line-height: 1.68;
    }

    .enc-single-content .alignwide,
    .enc-single-content .alignfull {
        width: calc(100vw - 28px);
    }

    .enc-post-navigation {
        grid-template-columns: 1fr;
    }

    .enc-post-navigation-next {
        text-align: left;
    }

    .enc-post-navigation-empty {
        display: none;
    }
}


/* Keyboard focus / accessibility
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(0, 152, 220, 0.48);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Footer
   ========================================================================== */

.enc-site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 16% 120%,
            rgba(0, 185, 255, 0.16),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #061827,
            #0a2238 52%,
            #0c2c46
        );
    color: #c6d4df;
    border-top:
        1px solid
        rgba(216, 225, 232, 0.28);
}

.enc-site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            rgba(216, 225, 232, 0.28),
            var(--enc-electric),
            #157de7,
            rgba(216, 225, 232, 0.24)
        );
    box-shadow:
        0 0 10px rgba(0, 185, 255, 0.28);
}

.enc-footer-inner {
    width: min(calc(100% - 48px), var(--enc-shell));
    min-height: 142px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    font-size: 13px;
}

.enc-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.enc-footer-emblem {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: contain;
    filter:
        drop-shadow(
            0 5px 10px
            rgba(0, 0, 0, 0.30)
        );
}

.enc-footer-brand-copy {
    min-width: 0;
}

.enc-footer-inner strong {
    display: block;
    color: #fff;
    font-size: 18px;
    line-height: 1.05;
}

.enc-footer-tagline {
    display: block;
    margin-top: 4px;
    color: #b8cad8;
}

.enc-footer-focus {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #8ab3cb;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.enc-footer-focus span[aria-hidden="true"] {
    color: var(--enc-electric);
}

.enc-footer-copyright {
    color: #9cb1c0;
    text-align: right;
}

/* Responsive
   ========================================================================== */


@media (max-width: 980px) {
    .enc-primary-rail {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .enc-quick-card {
        grid-column: 1 / -1;
    }

    .enc-live-shell,
    .enc-posts-layout {
        grid-template-columns: 1fr;
    }

    .enc-live-copy {
        padding: 25px 24px 26px;
        border-top:
            1px solid
            rgba(255, 255, 255, 0.08);
        border-left: 0;
    }
}



@media (max-width: 1180px) {
    .enc-header-inner {
        flex-wrap: wrap;
        padding-block: 13px;
    }

    .enc-nav-toggle {
        display: inline-flex;
    }

    .enc-primary-nav {
        display: none;
        width: 100%;
        margin-left: 0;
        padding-bottom: 8px;
    }

    .enc-primary-nav.is-open {
        display: block;
    }

    .enc-nav-list {
        display: grid;
        gap: 2px;
    }

    .enc-nav-list a {
        padding: 10px 8px;
    }

    .enc-nav-list .sub-menu,
    .enc-nav-list .sub-menu .sub-menu {
        position: static;
        width: auto;
        display: block;
        margin-left: 16px;
        padding: 0 0 0 8px;
        background: transparent;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 0;
        box-shadow: none;
    }

    .enc-primary-layout {
        grid-template-columns: 1fr;
    }

    .enc-primary-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .enc-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .enc-shell,
    .enc-header-inner,
    .enc-footer-inner {
        width: min(calc(100% - 22px), var(--enc-shell));
    }

    .enc-site-title {
        font-size: 22px;
    }

    .enc-site-tagline {
        display: none;
    }

    .enc-ops-inner {
        padding-block: 9px;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .enc-ops-links {
        display: none;
    }

    .enc-home {
        padding-top: 27px;
        padding-bottom: 48px;
    }

    .enc-hero {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 17px;
    }

    .enc-map-panel {
        padding: 14px;
    }

    .enc-panel-header {
        display: block;
    }

    .enc-panel-header-note {
        margin-top: 6px;
    }

    .enc-map-frame {
        min-height: 0;
    }

    .enc-map-image {
        width: 100%;
    }

    .enc-map-title {
        min-width: 0;
        max-width: calc(100% - 90px);
        top: 9px;
        left: 9px;
        padding: 6px 9px;
    }

    .enc-map-title span {
        font-size: 15px;
    }

    .enc-map-watermark {
        right: 7px;
        bottom: 7px;
        width: 54px;
        height: 54px;
    }

    .enc-map-meta {
        display: block;
    }

    .enc-map-meta a {
        display: block;
        margin-top: 3px;
        white-space: normal;
    }

    .enc-condition-current {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 15px;
    }

    .enc-condition-temp {
        min-width: 72px;
        font-size: 47px;
    }

    .enc-condition-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .enc-condition-footer a {
        margin-left: 0;
    }

    .enc-primary-rail {
        grid-template-columns: 1fr;
    }

    .enc-map-alert-summary {
        grid-template-columns: 1fr;
    }

    .enc-placeholder {
        min-height: 320px;
        padding: 28px 16px;
    }

    .enc-section-title-row {
        display: block;
    }

    .enc-section-title-row > p {
        margin-top: 8px;
        text-align: left;
    }

    .enc-feature-grid {
        grid-template-columns: 1fr;
    }

    .enc-personal-forecast {
        padding: 20px 14px;
        border-radius: 15px;
    }

    .enc-forecast-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .enc-location-actions {
        width: 100%;
        align-items: flex-start;
    }

    .enc-location-privacy {
        max-width: none;
        text-align: left;
    }

    .enc-hourly-scroll-note {
        display: none;
    }

    .enc-hourly-strip {
        grid-auto-columns: 112px;
    }

    .enc-seven-day-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .enc-seven-day-grid {
        grid-template-columns:
            repeat(7, 112px);
        padding-bottom: 7px;
        overflow-x: auto;
        scroll-snap-type: inline proximity;
    }

    .enc-day-card {
        scroll-snap-align: start;
    }

    .enc-feature-grid-three {
        grid-template-columns: 1fr;
    }

    .enc-tropical-summary {
        grid-template-columns: 1fr;
    }

    .enc-tropical-systems {
        grid-template-columns: 1fr;
    }

    .enc-live-shell {
        grid-template-columns: 1fr;
    }

    .enc-live-player-wrap {
        padding: 13px;
    }

    .enc-live-copy {
        padding: 23px 18px 24px;
        border-top:
            1px solid
            rgba(255, 255, 255, 0.08);
        border-left: 0;
    }

    .enc-live-copy h2 {
        font-size: 25px;
    }

    .enc-posts-layout {
        grid-template-columns: 1fr;
    }

    .enc-featured-post-link {
        min-height: 0;
    }

    .enc-latest-post-card > a {
        grid-template-columns:
            105px
            minmax(0, 1fr);
    }

    .enc-latest-post-thumb {
        min-height: 116px;
    }

    .enc-latest-post-copy p {
        display: none;
    }

    .enc-quick-card {
        grid-column: auto;
    }

    .enc-tab-button {
        padding: 10px 13px;
        font-size: 13px;
    }

    .enc-seven-day-grid {
        scrollbar-width: none;
    }

    .enc-seven-day-grid::-webkit-scrollbar {
        display: none;
    }

    .enc-posts-title-row .enc-posts-all-link {
        display: inline-block;
        margin-top: 8px;
    }

    .enc-content-shell {
        padding-top: 24px;
        padding-bottom: 45px;
    }

    .enc-entry {
        padding: 20px 15px;
    }

    .enc-footer-inner {
        min-height: 170px;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 18px;
        padding-block: 30px;
    }

    .enc-footer-brand {
        align-items: flex-start;
    }

    .enc-footer-emblem {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .enc-footer-copyright {
        text-align: left;
    }
}


@media (max-width: 520px) {
    .enc-shell,
    .enc-header-inner,
    .enc-footer-inner {
        width: min(calc(100% - 16px), var(--enc-shell));
    }

    .enc-header-inner {
        gap: 12px;
    }

    .enc-brand-link {
        gap: 9px;
    }

    .enc-brand-emblem-wrap,
    .enc-brand-emblem {
        width: 50px;
        height: 50px;
    }

    .enc-brand-emblem-wrap {
        flex-basis: 50px;
    }

    .enc-site-title {
        font-size: 20px;
    }

    .enc-nav-toggle {
        margin-left: auto;
    }

    .enc-home {
        padding-top: 22px;
    }

    .enc-hero h1 {
        font-size: 36px;
    }

    .enc-lead {
        margin-top: 12px;
        font-size: 15px;
    }

    .enc-map-panel,
    .enc-panel {
        border-radius: 13px;
    }

    .enc-map-panel {
        padding: 10px;
    }

    .enc-map-title {
        max-width: calc(100% - 72px);
    }

    .enc-map-title span {
        font-size: 14px;
    }

    .enc-map-title small {
        font-size: 9px;
    }

    .enc-map-watermark {
        width: 46px;
        height: 46px;
    }

    .enc-condition-grid strong {
        font-size: 16px;
    }

    .enc-location-button {
        width: 100%;
        justify-content: center;
    }

    .enc-live-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .enc-live-actions a {
        justify-content: center;
        width: 100%;
    }

    .enc-featured-post-copy {
        padding: 18px;
    }

    .enc-featured-post-copy h3 {
        font-size: 23px;
    }

    .enc-latest-post-card > a {
        grid-template-columns:
            88px
            minmax(0, 1fr);
    }

    .enc-latest-post-copy {
        padding: 11px 10px;
    }

    .enc-latest-post-copy h3 {
        font-size: 15px;
    }
}