/* Layout: broadcast-style — alert ticker, masthead, one featured map with a chyron title, then a map grid beside a sidebar of ad + coverage. */
:root{
  --brand:#2E6190;        /* logo steel blue */
  --brand-deep:#16324D;
  --cyan:#00B0D4;         /* secondary logo cyan */
  --alert:#ED1F25;        /* hurricane-icon red */
  --sun:#FED125;          /* sun-icon yellow */
  /* dark blue theme (Brayden's pick, 2026-10-05) */
  --bg:#0F1720;
  --surface:#16212C;
  --fg:#E7EDF3;
  --muted:#9AABBC;
  --line:#26374A;
  --chyron-dark:#1F2A36;  /* the dark tab behind "WEATHER CENTER" on every map */
  --chyron-light:#223244;
  --ad:#1B2835;
  color-scheme:dark;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* preview note */
.note{background:var(--sun);color:#1F2A36;font-size:.85rem;text-align:center;padding:6px 16px;font-weight:500}

/* ticker — echoes the "ALERTS:" bar from the 2015 graphics */
.ticker{display:flex;background:var(--chyron-dark);color:#fff;font-family:var(--display);letter-spacing:.04em;font-size:1rem;min-height:36px}
.ticker b{background:var(--alert);padding:6px 14px;display:flex;align-items:center;font-weight:700}
.ticker span{padding:6px 14px;display:flex;align-items:center;min-width:0;color:#D5DEE7}

/* masthead */
.mast{background:var(--brand);color:#fff}
.mast .wrap{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:64px;height:64px;border-radius:6px;display:block}
.brand strong{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:.95;letter-spacing:.02em;text-transform:uppercase}
.brand small{display:block;font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.14em;color:#CFE3F2;text-transform:uppercase}
nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav a{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;padding:8px 12px;border-radius:4px}
nav a:hover{background:rgba(255,255,255,.12)}
nav a.fb{background:#fff;color:var(--brand)}

/* chyron title — the signature lower-third from the maps */
.chyron{display:flex;align-items:stretch;min-width:0}
.chyron .tab{background:var(--chyron-dark);color:#fff;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.12em;padding:6px 10px;display:flex;align-items:center;text-transform:uppercase}
.chyron .bar{background:var(--chyron-light);border-right:5px solid var(--cyan);padding:6px 14px;font-family:var(--display);font-weight:600;letter-spacing:.04em;text-transform:uppercase;min-width:0;flex:1}

/* featured */
.feature{padding-block:28px 8px}
.feature .grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:start}
.feature figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.feature figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.feature .chyron .bar{font-size:1.35rem}
.feature h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:.01em;text-transform:uppercase;margin:0 0 10px;text-wrap:balance}
.kicker{font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--alert)}
.feature p{margin:0 0 12px;max-width:60ch}
.highs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:16px}
.highs div{background:var(--surface);padding:8px 12px;display:flex;justify-content:space-between;gap:8px}
.highs span{color:var(--muted);font-size:.9rem}
.highs b{font-family:var(--display);font-size:1.3rem;font-variant-numeric:tabular-nums}
.stamp{font-size:.82rem;color:var(--muted);margin-top:10px}

/* ads */
.ad{background:var(--ad);border:1px dashed var(--line);border-radius:4px;display:grid;place-items:center;color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:8px}
.ad.leader{height:90px;margin-block:24px}
.ad.box{height:250px}

/* main + sidebar */
.main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-bottom:40px}
h2.sec{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:.03em;text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:10px}
h2.sec::before{content:"";width:6px;height:1.1em;background:var(--cyan);display:inline-block}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.card .chyron .bar{font-size:1rem}
.card .body{padding:12px 14px 16px;display:grid;gap:6px}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.tag{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.tag.storm{color:var(--alert)} .tag.daily{color:var(--cyan)} .tag.tropics{color:#D96A00}
.card:hover{border-color:var(--brand)}
.card:hover .chyron .bar{border-right-color:var(--alert)}

aside{display:grid;gap:20px;align-content:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px}
.panel h3{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px}
.panel ul{margin:0;padding-left:18px;display:grid;gap:4px}
.panel p{margin:0 0 10px;font-size:.95rem}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:4px}
.big{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--cyan)}

/* storm center band */
.storm{background:var(--brand-deep);color:#fff;padding-block:32px}
.storm .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.storm h2{font-family:var(--display);font-weight:700;font-size:2rem;text-transform:uppercase;margin:0 0 8px;letter-spacing:.02em}
.storm p{margin:0;max-width:56ch;color:#D5E2EE}
.impact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.impact div{border:2px solid rgba(255,255,255,.25);border-radius:6px;padding:12px 8px;text-align:center}
.impact b{display:block;font-family:var(--display);font-size:1.8rem;line-height:1}
.impact span{font-family:var(--display);letter-spacing:.1em;font-size:.8rem;text-transform:uppercase;color:#CFE3F2}

footer{background:var(--chyron-dark);color:#C9D4DF;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;padding-block:24px;align-items:center}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fine{flex-basis:100%;color:#8A9AAB;font-size:.82rem}

@media (max-width:900px){
  .feature .grid,.main,.storm .wrap{grid-template-columns:minmax(0,1fr)}
  aside{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (max-width:560px){
  .cards{grid-template-columns:minmax(0,1fr)}
  nav{margin-left:0}
  .impact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ad.leader{height:60px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.signup{background:var(--surface);border:2px solid var(--cyan);border-radius:6px;padding:16px}
.signup h3{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px}
.signup p{margin:0 0 10px;font-size:.95rem}
.email{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:.02em;word-break:break-all}
.page{padding-block:32px 48px;max-width:760px}
.page h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);text-transform:uppercase;line-height:1;margin:0 0 16px}
.page h2{font-family:var(--display);font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.03em;margin:28px 0 8px}
.page p,.page li{max-width:65ch}

/* daily trivia */
.trivia{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;padding-block:20px 4px}
.tq{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tq .chyron .bar{font-size:1.2rem}
.tbody{padding:16px 18px 18px;display:grid;gap:10px}
.question{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.2;margin:0;text-wrap:balance}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt{font:inherit;text-align:left;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--brand)}
.opt:disabled{cursor:default}
.opt.right{border-color:#1F9D55;background:rgba(31,157,85,.14);font-weight:600}
.opt.wrong{border-color:var(--alert);background:rgba(237,31,37,.10)}
.result{margin:0;font-weight:500}
.ty{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.ty h3{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px}
.yq{margin:0 0 6px;color:var(--muted)}
.ya{margin:0 0 10px;font-weight:500}
.tnote{margin:0;font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.trivia{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.opts{grid-template-columns:minmax(0,1fr)}}

/* daily forecast: two portrait maps side by side */
.maps2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feature .maps2 figure img{aspect-ratio:auto;height:auto;object-fit:contain}
.maps2 .chyron .bar{font-size:1rem}
.lowhigh .hd{background:var(--chyron-dark)}
.lowhigh .hd span,.lowhigh .hd b{color:#fff;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--display)}
@media (max-width:420px){.maps2{grid-template-columns:minmax(0,1fr)}}

/* 7-day section */
.week{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:start;padding-block:12px 28px}
.week figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.week figure img{display:block;width:100%;height:auto}
.week .chyron .bar{font-size:1.2rem}
h2.wk{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.05;text-transform:uppercase;margin:4px 0 10px}
.week p{margin:0 0 12px;max-width:60ch}
/* products + archive */
.lede{margin:-4px 0 18px;color:var(--muted);max-width:70ch}
.lede strong{color:var(--fg)}
.card img.portrait{object-position:center 42%}
.more{margin:22px 0 0}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:34px}
figure.card{margin:0}
.archive h1.sec{font-size:2rem;margin-top:28px}
@media (max-width:900px){.week{grid-template-columns:minmax(0,1fr)}.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards.three{grid-template-columns:minmax(0,1fr)}}
/* storm center: what's included */
.includes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.includes li{border:2px solid rgba(255,255,255,.25);border-radius:6px;padding:14px 10px;text-align:center;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
/* the "storm" tag shares a name with the Storm Center band; keep tags plain */
.tag.storm{background:none;padding:0}
.main{padding-top:32px}
.page.archive{max-width:none}
.lowhigh b{white-space:nowrap}
@media (max-width:560px){.lowhigh{grid-template-columns:minmax(0,1fr)}.lowhigh .hd2{display:none}}

/* two 7-day graphics */
.weekfigs{display:grid;gap:16px}
/* product pages */
.page.product{max-width:900px}
.crumb{font-size:.9rem;color:var(--muted);margin:0 0 6px}
.crumb a{color:var(--cyan)}
.exnote{background:#3a1218;border:1px solid var(--alert);border-radius:6px;padding:10px 14px}
.pfig{margin:16px 0 24px;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pfig img{display:block;width:100%;height:auto}
.pfig.tall img{max-width:560px;margin:0 auto}
.pfig figcaption{padding:10px 14px;color:var(--muted);font-size:.9rem}
.product h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 6px}
.btn.alt{background:transparent;border:1px solid var(--cyan);color:var(--cyan);margin-left:8px}
a.card{color:inherit}