:root {
  color-scheme: dark;
  --night: #061320;
  --panel: #0b2233;
  --line: #315a70;
  --white: #f4f8fa;
  --soft: #bbd0de;
  --teal: #68f6df;
  --amber: #ffc454;
  --display: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--night); color: var(--white); font: 1rem/1.5 system-ui, sans-serif; }
a { color: var(--teal); text-underline-offset: .2em; }
a:hover { color: white; }
button, select, textarea {
  font: inherit;
  color: var(--white);
  background: #0a2638;
  border: 1px solid #528097;
  border-radius: .4rem;
}
button { min-height: 2.55rem; padding: .45rem .75rem; cursor: pointer; }
button:hover { border-color: var(--teal); }
button:disabled { cursor: default; color: var(--soft); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
h1, h2, h3, p { margin: 0 0 .72rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 3vw, 2.55rem); letter-spacing: -.035em; }
h3 { font-size: 1.5rem; }
p, figcaption { color: var(--soft); }
.wrap { width: min(100% - 3rem, 1240px); margin-inline: auto; }
.skip { position: absolute; top: .5rem; left: 1rem; transform: translateY(-180%); padding: .75rem; z-index: 10; background: var(--night); }
.skip:focus { transform: none; }
.mast { background: #04111d; border-bottom: 1px solid #244556; }
.mast-inner { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: .25rem 1.4rem; }
.brand { display: flex; align-items: center; gap: .65rem; color: white; text-decoration: none; font-size: clamp(1.2rem, 2.65vw, 2rem); font-style: italic; font-weight: 950; line-height: 1.1; white-space: nowrap; }
.brand b { color: var(--teal); }
.brand img { width: 48px; height: 48px; filter: drop-shadow(0 0 7px #5fead36b); }
.brand small { display: block; margin-top: .18rem; color: var(--soft); font: 550 .72rem/1.3 system-ui, sans-serif; }
.mast nav { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem clamp(.7rem, 1.8vw, 1.55rem); }
.mast nav a { color: var(--white); font-weight: 650; font-size: .84rem; text-decoration: none; padding-block: .65rem; }
.mast nav a:hover, .mast nav a:focus-visible { color: var(--teal); }
.studio {
  background: linear-gradient(180deg, #06132000 240px, #06132092 510px, #061320 830px),
    linear-gradient(90deg, #061320f5, #061320b0 35%, #06132030 76%, #0613200a),
    url(sky.svg) top center / max(100%, 1120px) auto no-repeat, #081c2c;
  padding-bottom: 1.25rem;
}
.hero { min-height: clamp(12rem, 18vw, 16rem); padding: clamp(2rem, 4.2vw, 3.45rem) 0 1.8rem; }
.eyebrow { margin-bottom: .55rem; font-size: .72rem; letter-spacing: .15em; font-weight: 850; color: var(--teal); }
.broadcast-dateline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin-bottom: .55rem; }
.broadcast-dateline .eyebrow { margin: 0; }
#broadcast-link-wrap, #broadcast-copy-status { font-size: .8rem; }
#broadcast-copy-status:empty { margin: 0; }
#broadcast-url { width: min(100%, 36rem); margin-bottom: .55rem; padding: .4rem; font: inherit; }
.hero h1 { font-size: clamp(2.4rem, 5.7vw, 5.05rem); letter-spacing: -.062em; text-shadow: 0 3px 25px #030c16; overflow-wrap: anywhere; }
.hero h1 em { color: var(--amber); }
#tagline { color: var(--white); font-size: clamp(1rem, 1.8vw, 1.2rem); }
.on-air { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: stretch; }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.section-top h2 { margin: 0; font-size: clamp(1.2rem, 2.1vw, 1.65rem); }
.section-top h2 span, .archive h2 span { color: var(--teal); font-family: system-ui, sans-serif; font-size: .8em; }
.section-top button, .wire button { flex: none; font-size: .8rem; }
.on-air #radar { display: flex; flex-direction: column; }
.radar-shell { display: grid; place-items: center; flex: 1; }
#scope { display: block; width: min(100%, 600px); height: auto; }
.scope-base { fill: url(#scope-bg); }
.scope-edge { stroke: #49ffde; stroke-width: 2; fill: none; filter: drop-shadow(0 0 6px #36f5d3); pointer-events: none; }
.ring { stroke: #4faeaa; stroke-width: .8; fill: none; opacity: .6; }
.axis { stroke: #65d7ce; stroke-width: .6; stroke-dasharray: 1 4; opacity: .35; }
.tick { stroke: #6eebdc; stroke-width: 1.2; opacity: .8; }
.tick.major { stroke-width: 2.6; }
.sweep { fill: url(#beam); transform-origin: 300px 300px; animation: sweep 18s linear infinite paused; pointer-events: none; }
.sweeping .sweep { animation-play-state: running; }
@keyframes sweep { to { transform: rotate(360deg); } }
.wedge { cursor: pointer; }
.wedge-shape { fill: #153a50b3; stroke: #53b3b2; stroke-width: .8; }
.wedge-shape:nth-of-type(odd) { fill: #103d3a91; }
.wedge .hit-area { fill: transparent; }
.wedge:hover .hit-area, .wedge[aria-current="true"] .hit-area { fill: #79ffe321; stroke: #a0fff1; stroke-width: 2.2; }
.wedge:focus-visible .hit-area { fill: #79ffe326; stroke: var(--amber); stroke-width: 3; }
.sector-label, .sector-count, .ring-caption { text-anchor: middle; paint-order: stroke; stroke: #071924; stroke-width: 3; stroke-linejoin: round; }
.sector-label { fill: white; font-size: 18px; font-weight: 850; letter-spacing: .025em; }
.sector-count { fill: #c3e6e3; font-size: 12px; letter-spacing: .045em; font-weight: 750; }
.sector-icon { stroke: #d0fff8; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ring-caption { fill: #d3fff9; font-size: 11px; font-weight: 800; letter-spacing: .08em; pointer-events: none; }
.center-dot, .record-dot { fill: #a8ffec; filter: drop-shadow(0 0 4px #4cf4d6); }
.scope-caption { margin: .5rem 0 0; text-align: center; font-size: .78rem; }
.panel { min-width: 0; background: linear-gradient(150deg, #113147, #091c2b 65%); border: 1px solid var(--line); border-radius: .72rem; }
.forecast { display: flex; flex-direction: column; overflow: hidden; border-color: #55a2b6; box-shadow: inset 0 0 22px #3d8eaa30; }
.forecast-content { padding: clamp(1.1rem, 2.8vw, 2rem); }
.forecast-title { display: flex; gap: .7rem; align-items: center; }
.forecast-title img { flex: none; width: clamp(2.6rem, 5.5vw, 4rem); height: auto; }
.forecast-title h2 { font-size: clamp(1.95rem, 3.55vw, 3.45rem); margin: 0; }
#intro { margin-top: 1.3rem; color: var(--white); font: italic 1.26rem/1.4 var(--display); }
.text-link { display: inline-block; font-size: .9rem; font-weight: 750; }
.stats { display: grid; grid-template-columns: 1fr .82fr 1fr; margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.stats div { padding: 0 .55rem; border-left: 1px solid var(--line); }
.stats div:first-child { padding-left: 0; border-left: none; }
.stats dt { color: var(--soft); font-size: .75rem; line-height: 1.3; }
.stats dd { margin: .25rem 0 0; font: bold 1.65rem/1.15 var(--display); }
.stats .word { font: 800 .8rem/1.5 system-ui, sans-serif; color: var(--amber); }
.presenter { width: min(100%, 446px); margin: 1rem auto; overflow: hidden; border: 1px solid #3b657c;
  border-radius: .55rem; background: #0a2234; }
.presenter img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.presenter figcaption { padding: .4rem .65rem; font-size: .75rem; }
.wire { background: #0a1e30; border-block: 1px solid #a67839; }
.wire-inner { display: flex; align-items: center; gap: .7rem; padding-block: .5rem; }
.wire h2 { flex: none; background: var(--amber); color: #14212a; padding: .68rem .8rem; border-radius: .25rem; margin: 0; font: 900 .81rem/1.25 system-ui, sans-serif; letter-spacing: .08em; }
.wire h2 span { font-size: 1.15em; }
.wire-view { flex: 1; min-width: 0; overflow: hidden; }
.wire-track, .wire-unit, .wire-cycle { display: flex; width: max-content; align-items: center; }
.wire-item { white-space: nowrap; color: #f9ebce; font-size: .89rem; }
.wire-item b { color: var(--amber); text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
.wire-item::after { content: "◆"; color: var(--amber); display: inline-block; margin-inline: 1.15rem; font-size: .65em; }
.wire-item a { color: inherit; }
#wire-reader { padding: .15rem 0 .55rem; font-size: .85rem; overflow-wrap: anywhere; }
#wire-reader[open] { padding-bottom: 1rem; }
#wire-comment { margin: .7rem 0; }
#wire-facts { list-style: none; margin: 0; padding: 0; }
#wire-facts li { padding-block: .6rem; border-top: 1px solid var(--line); }
#wire-facts p { margin: .25rem 0; }
#wire-facts .wire-permalink { margin-left: .6rem; }
.lower { padding: 1.15rem 0 1.8rem; }
.sector-detail { margin-top: 1.5rem; padding: clamp(.95rem, 2vw, 1.35rem); }
.sector-detail h2 { font-size: 1.65rem; }
#sector-links { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0 .9rem; }
#sector-links a { padding: .42rem .62rem; border: 1px solid #507d92; border-radius: .28rem; background: #0b2535; font-size: .84rem; text-decoration: none; }
#sector-links [aria-current="true"] { color: #061923; background: var(--teal); border-color: var(--teal); font-weight: 800; }
.incidents, .archive-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.incidents:empty { display: none; }
.incidents li, .archive-list li { padding: .55rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.incidents small, .archive-list small { display: block; color: var(--soft); }
#coverage { color: #e6f9fa; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: .9rem 0 1.5rem; }
.card { position: relative; display: block; padding: 1rem 1rem 2.55rem; text-decoration: none; color: var(--white); overflow-wrap: anywhere;
  background: radial-gradient(ellipse at 50% -16%, var(--cloud), transparent 70%),
    linear-gradient(0deg, #0b2132 36%, #0b213227), url(sky.svg) center top / auto 180px no-repeat, #0b2132;
}
.card:hover { border-color: var(--teal); }
.fog { --cloud: #258476c2; }
.violet { --cloud: #823e77cb; }
.squall { --cloud: #0a6887c9; }
.archive-card { --cloud: #395a96c9; }
.card h3 { font-size: clamp(1.2rem, 1.95vw, 1.65rem); }
.card p { font-size: .89rem; }
.card .card-status { font-size: .88rem; color: #e3f5f7; }
.card-icon {
  display: grid; place-items: center; width: 80px; height: 54px; margin: 0 auto .85rem;
  color: #e3fff9; font-size: 1.55rem; font-weight: 900;
  background: url(cloud.svg) center / contain no-repeat; text-shadow: 0 2px 6px #04111d;
  filter: drop-shadow(0 0 10px var(--cloud));
}
.arrow { position: absolute; bottom: .65rem; right: .8rem; color: var(--teal); border: 1px solid; width: 1.62rem; text-align: center; border-radius: 50%; }
.below { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.below .panel { padding: clamp(1rem, 2vw, 1.4rem); }
.archive, .surprise { background: radial-gradient(ellipse at 30% 0, #1a4763, transparent 48%), linear-gradient(145deg, #0e293e, #091c2b); }
.archive-figure { margin: .9rem 0; padding: .75rem; border: 1px solid #365f76; border-radius: .45rem;
  background: radial-gradient(ellipse at 53% 5%, #2b687b65, transparent 72%),
    radial-gradient(ellipse at 80% 80%, #17606240, transparent 60%), linear-gradient(#0b2338, #06131f);
  box-shadow: inset 0 0 22px #020b15aa, 0 0 18px #40b4ce17; }
.archive-figure figcaption { color: var(--white); font-size: .87rem; font-weight: 750; }
.archive-figure p { margin: .4rem 0 0; font-size: .8rem; }
#archive-chart { display: block; width: 100%; max-height: 215px; margin-top: .25rem; }
.chart-grid { stroke: #365267; stroke-width: 1; }
.chart-label, .chart-value { fill: #d6e9f3; font-size: 14px; }
.chart-value { fill: #b9fff3; font-weight: 850; }
.chart-dot { stroke: #d2fff2; stroke-width: .75; filter: drop-shadow(0 0 6px #4ef7db); }
.chart-baseline { fill: #092437; stroke: var(--soft); stroke-width: 1.8; }
.archive-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .35rem .65rem; }
.archive-controls label { font-weight: 750; font-size: .82rem; }
.archive-controls select { grid-column: 1; grid-row: 2; max-width: 100%; min-height: 2.55rem; padding: .25rem; font-size: .83rem; }
.archive-controls input { grid-column: 2; min-width: 0; width: 100%; margin: 0; accent-color: var(--teal); }
#archive-reading { margin-block: .85rem; color: var(--white); font-size: .86rem; overflow-wrap: anywhere; }
.archive-list a[aria-current="true"] { color: var(--amber); }
summary { color: var(--teal); cursor: pointer; font-weight: 700; }
.surprise h2 span { color: var(--amber); }
.surprise-window { display: flex; align-items: center; gap: .85rem; margin-top: .95rem; border: 1px solid #49758c; border-radius: .52rem; padding: .85rem; background: #0a2235; }
.surprise-die { display: grid; place-items: center; flex: 0 0 3.25rem; height: 3.25rem; border-radius: .55rem; background: #4f3a22; font-size: 2.2rem; color: var(--amber); line-height: 1; }
.surprise-window p { margin: 0; }
#surprise-result { overflow-wrap: anywhere; }
#surprise-result:not(:empty) { margin-block: .9rem; padding: .9rem; border: 1px solid var(--line); border-radius: .55rem; background: #081e30; }
#surprise-result small { display: block; color: var(--soft); }
#surprise-result svg { display: block; margin-top: .7rem; max-width: 100%; }
#surprise-control { border-color: var(--teal); }
.method { border-top: 1px solid var(--line); background: linear-gradient(90deg, #0c2638, #092033e0), url(sky.svg) center 18% / cover; padding: 2rem 0; }
.method .below { gap: 1.6rem; }
.method ul { padding-left: 1.2rem; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; color: var(--soft); font-size: .84rem; padding-block: 1rem; }
.foot strong { color: var(--teal); }
.foot-brand, .foot nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.foot p { flex-basis: 100%; margin: 0; }
.privacy-policy { max-width: 74ch; margin-block: 2rem; }
.privacy-policy h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.privacy-policy h2 { margin-top: 1.4rem; font-size: clamp(1.35rem, 3vw, 1.75rem); }
@media (max-width: 900px) {
  .wrap { width: min(100% - 2rem, 1240px); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card h3 { font-size: clamp(1.25rem, 2.5vw, 1.55rem); }
  .mast-inner { flex-wrap: wrap; padding-block: .45rem .15rem; }
}
@media (max-width: 730px) {
  .on-air, .below { grid-template-columns: minmax(0, 1fr); }
  .studio { background-position: top, top, top right 18%; }
  .mast nav { width: 100%; }
  .mast nav a { font-size: .77rem; padding-block: .5rem; }
  .wire-inner { flex-wrap: wrap; }
  .wire-view { order: 2; flex-basis: 100%; }
  .wire button { margin-left: auto; }
  .sector-count { font-size: 15px; }
  .sector-label { font-size: 19px; }
  .ring-caption { font-size: 14px; }
}
@media (max-width: 370px) {
  .cards { grid-template-columns: 1fr; }
  .wire h2 { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .wire-view { display: none; }
}
.drawer-art { display: none; }
.surprise-empty .drawer-art {
  display: block; width: min(85%, 19rem); margin: clamp(.75rem, 4vw, 3rem) auto 0;
  fill: none; stroke: #32627c; stroke-width: 1; stroke-dasharray: 2 4;
}
.drawer-art .die { fill: #182e3c; stroke: #d1a863; stroke-width: 1.5; stroke-dasharray: none; }
.drawer-art .pips { fill: #e0af58; stroke: none; }
.drawer-art .spark { stroke: #d1a863; stroke-width: 1.6; stroke-dasharray: none; }
@media (max-width: 730px) {
  .mast nav { column-gap: .35rem; }
  .mast nav a { font-size: .72rem; }
  .card { padding-inline: .8rem; }
  .card h3 { font-size: clamp(1.15rem, 3.25vw, 1.5rem); }
  .surprise-empty .drawer-art { width: min(60%, 13rem); }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#dateline { text-transform: uppercase; color: #ffe1a4; letter-spacing: .18em; }
#edition-status { padding: .65rem 0; }
#forecast-state { color: #edf8fa; font: clamp(1.05rem, 1.7vw, 1.25rem)/1.42 var(--display); }
.sector-cloud { pointer-events: none; }
.sector-count { fill: #92ffdf; font-size: 17px; }
#radar-access { margin: .45rem auto 0; text-align: center; font-size: .81rem; }
#radar-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .85rem; list-style: none; padding: 0; }
#alternate-forecast { font-size: .88rem; margin: -.65rem 0 1.15rem; }
#detail-title { scroll-margin-top: 1.1rem; }
.chart-baseline-label { fill: #a3bfcc; font-size: 11px; }
#archive-revision { font-size: .83rem; margin-top: .65rem; }
.surprise:not(.surprise-empty):has(#surprise-result h3) .surprise-window { display: none; }
.story-paragraph { color: #e0edf2; margin-bottom: .75rem; }
.story-art { margin: 0 0 .9rem; }
.story-art:empty { display: none; }
.story-art img { display: block; max-width: 100%; max-height: 21rem; object-fit: contain; border-radius: .35rem; }
.story-art figcaption, .story-provenance, .story-sources { font-size: .82rem; }
.story-art figcaption { margin-top: .25rem; }
.story-sources { margin: .7rem 0 .2rem; }
.story-sources strong { text-transform: uppercase; letter-spacing: .08em; color: var(--amber); margin-right: .3rem; }
.story-provenance { margin: .3rem 0 .65rem; }
#selected-sector { text-transform: uppercase; }
body::after { content: ""; display: block; block-size: var(--readout-tail, 0px); }

.chart-trace { stroke-width: 2; fill: none; filter: drop-shadow(0 0 4px #6df0d89c); }
.chart-selection { fill: none; stroke: #d1fff4; stroke-width: 1.2; }
.chart-halo { pointer-events: none; }
.licensing { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.4rem; }
.licensing h2 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
.published-broadcast p { max-width: 72ch; }
#surprise-announcement { color: var(--soft); font-size: .86rem; margin: .4rem 0 0; }
#surprise-announcement:empty { margin: 0; }
#coverage { margin-bottom: .3rem; color: var(--white); font-weight: 700; }
.published-broadcast { padding-block: 1.6rem; overflow-wrap: anywhere; }
.published-broadcast section { margin-block: 1.3rem; }
.published-broadcast .presenter { margin-inline: 0; }
.broadcast-noscript { margin: 1rem 0 0; padding: .65rem .85rem; background: var(--panel);
  border-inline-start: 2px solid var(--teal); border-radius: .25rem; font-size: .9rem; }
.broadcast-noscript strong { color: var(--white); }

@media (max-width: 480px) {
  .archive-controls { grid-template-columns: minmax(0, 1fr); }
  .archive-controls select, .archive-controls input { grid-column: auto; grid-row: auto; }
  .archive-controls input { min-height: 1.5rem; }
  .chart-label, .chart-value { font-size: 18px; }
  .chart-baseline-label { font-size: 14px; }
}