@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root { color-scheme: dark; --bg: #070a0d; --panel: #10161b; --panel-2: #151d23; --text: #f4f1e8; --muted: #98a5ab; --signal: #d8ff45; --signal-2: #7de3ff; --danger: #ff735c; --line: #293238; --display: "Barlow Condensed", Impact, sans-serif; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.65; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
a { color: var(--signal-2); }
button, input { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shell { width: min(76rem, calc(100% - 2rem)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); background: rgb(7 10 13 / 88%); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.nav { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { color: var(--text); font-family: var(--display); font-size: 1.35rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .055em; }
.brand::before { content: "W/"; color: var(--signal); margin-right: .55rem; }
.nav-links { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.nav-links a { color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.nav-links a:hover { color: var(--text); }
main { padding-block: 2.5rem 6rem; }
.eyebrow { color: var(--signal); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; }
.status-dot { display: inline-block; width: .5rem; height: .5rem; margin-right: .55rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 .3rem rgb(216 255 69 / 10%), 0 0 1rem var(--signal); }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; }
h1 { font-size: clamp(3rem, 8vw, 6.8rem); line-height: .88; letter-spacing: -.035em; margin: .65rem 0 1.35rem; }
h2 { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1; letter-spacing: -.02em; margin: 0; }
.lead { color: #c1c9cc; font-size: 1.12rem; max-width: 45rem; }
.mission-control { min-height: 38rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; position: relative; padding: 4.5rem 0 7rem; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .lead { font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .65rem 1.1rem; border: 1px solid var(--line); color: var(--text); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.button.primary { color: #090b0c; background: var(--signal); border-color: var(--signal); }
.button.secondary:hover { border-color: var(--signal); }
.tactical-display { width: min(27rem, 90vw); aspect-ratio: 1; justify-self: end; position: relative; overflow: hidden; border: 1px solid #334048; border-radius: 50%; background: radial-gradient(circle, rgb(125 227 255 / 10%) 0 1px, transparent 2px), radial-gradient(circle, #142027, #080c0f 68%); box-shadow: inset 0 0 5rem #000, 0 0 4rem rgb(125 227 255 / 7%); }
.tactical-display::before, .tactical-display::after { content: ""; position: absolute; background: #334048; }
.tactical-display::before { width: 1px; inset-block: 0; left: 50%; }
.tactical-display::after { height: 1px; inset-inline: 0; top: 50%; }
.radar-ring { position: absolute; inset: 18%; border: 1px solid #334048; border-radius: 50%; }.radar-ring.ring-b { inset: 35%; }
.radar-sweep { position: absolute; inset: 3%; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 78%, rgb(216 255 69 / 28%) 96%, transparent 100%); animation: sweep 8s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.map-point { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--danger); box-shadow: 0 0 .8rem var(--danger); }.p1 { top: 27%; left: 58%; }.p2 { top: 61%; left: 32%; }.p3 { top: 70%; left: 70%; background: var(--signal); box-shadow: 0 0 .8rem var(--signal); }
.display-label { position: absolute; left: 12%; bottom: 11%; display: grid; padding-left: .65rem; border-left: 2px solid var(--signal); line-height: 1; }.display-label small { color: var(--muted); font-size: .65rem; letter-spacing: .16em; }.display-label strong { color: var(--signal); font-family: var(--display); font-size: 1.5rem; letter-spacing: .08em; }
.intel-stats { position: absolute; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }.intel-stats div { display: grid; gap: .1rem; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }.intel-stats div:last-child { border-right: 0; }.intel-stats strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; }.intel-stats span { color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.priority-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 3rem 0 7rem; background: var(--line); border: 1px solid var(--line); }.priority-grid a { min-height: 9rem; display: grid; grid-template-columns: 1fr auto; align-content: space-between; gap: .5rem; padding: 1.25rem; color: var(--text); background: var(--panel); text-decoration: none; }.priority-grid a:hover { background: var(--panel-2); }.priority-grid span { grid-column: 1 / -1; color: var(--danger); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.priority-grid strong { align-self: end; font-family: var(--display); font-size: 1.25rem; line-height: 1.05; text-transform: uppercase; }.priority-grid b { color: var(--signal); font-size: 1.2rem; }
.guide-hub { scroll-margin-top: 5rem; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }.section-heading .eyebrow { margin-bottom: .75rem; }.section-heading > p { max-width: 25rem; color: var(--muted); }
.guide-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-block: 1px solid var(--line); }.search-box { flex: 1; min-width: 15rem; display: flex; align-items: center; gap: .7rem; color: var(--signal); }.search-box input { width: 100%; border: 0; outline: 0; padding: .75rem 0; color: var(--text); background: transparent; }.search-box input::placeholder { color: #69777e; }
.filters { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }.filters button { border: 1px solid var(--line); padding: .45rem .7rem; color: var(--muted); background: transparent; cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.filters button:hover, .filters button.active { color: #080a0b; border-color: var(--signal); background: var(--signal); }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 1.25rem; background: var(--line); border: 1px solid var(--line); }.guide-card { min-height: 19rem; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: .7rem; padding: 1.5rem; position: relative; overflow: hidden; color: var(--text); background: var(--panel); text-decoration: none; }.guide-card::after { content: ""; position: absolute; width: 8rem; height: 8rem; right: -4rem; bottom: -4rem; border: 1px solid #334048; border-radius: 50%; transition: transform .3s ease, border-color .3s ease; }.guide-card:hover { background: linear-gradient(145deg, #172027, #10161b); }.guide-card:hover::after { border-color: var(--signal); transform: scale(1.25); }
.card-index, .card-code { color: var(--muted); font-family: var(--display); font-size: .74rem; letter-spacing: .12em; }.card-code { color: var(--signal); }.guide-card strong { grid-column: 1 / -1; max-width: 27rem; margin-top: 1.2rem; font-family: var(--display); font-size: 1.8rem; line-height: 1; text-transform: uppercase; }.guide-card p { grid-column: 1 / -1; max-width: 34rem; color: var(--muted); font-size: .9rem; }.card-meta { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); color: #75828a; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.empty-state { padding: 3rem; text-align: center; color: var(--muted); border: 1px solid var(--line); }
.breadcrumbs { display: flex; gap: .7rem; align-items: center; margin: 1rem 0 3rem; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }.breadcrumbs a { color: var(--signal); text-decoration: none; }
.article-layout { display: grid; grid-template-columns: 15rem minmax(0, 48rem); gap: 4rem; align-items: start; }.article-rail { position: sticky; top: 6.5rem; display: grid; gap: 1rem; }.rail-panel { border: 1px solid var(--line); background: var(--panel); padding: 1rem; }.rail-label { margin: 0 0 .8rem; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.rail-panel ol { list-style: none; margin: 0; padding: 0; }.rail-panel li + li { border-top: 1px solid var(--line); }.rail-panel li a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; padding: .7rem 0; color: #c5cccf; font-size: .78rem; line-height: 1.35; text-decoration: none; }.rail-panel li a:hover { color: var(--signal); }.rail-panel li span { color: #66747b; font-family: var(--display); }.source-count { display: flex; align-items: end; gap: .65rem; }.source-count strong { color: var(--signal); font-family: var(--display); font-size: 2rem; line-height: .85; }.source-count span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.article { max-width: 48rem; }.article-header { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }.article-header h1 { font-size: clamp(3rem, 7vw, 5.7rem); }.article-header .lead { font-size: 1.2rem; }.verified { display: inline-block; margin-top: 1rem; padding: .35rem .65rem; border: 1px solid rgb(216 255 69 / 30%); color: var(--signal); background: rgb(216 255 69 / 6%); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.quick-brief { margin: 2rem 0 3.5rem; padding: 1.4rem; border-left: 3px solid var(--signal); background: linear-gradient(90deg, rgb(216 255 69 / 8%), transparent); }.quick-brief > div { display: grid; gap: .15rem; }.quick-brief span { color: var(--signal); font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.quick-brief strong { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; }.quick-brief p { color: #c1c9cc; margin-bottom: 0; }
.article-section { position: relative; padding: 1rem 0 3.5rem; scroll-margin-top: 6rem; }.article-section h2 { font-size: 2.25rem; margin-bottom: 1.3rem; }.article-section p { color: #bac3c7; font-size: 1rem; }.article-section p + p { margin-top: 1.2rem; }.section-mark { position: absolute; width: 2.5rem; height: 2px; left: -3.7rem; top: 2.15rem; background: var(--signal); }
.sources { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 3rem; }.sources h2, .related h2 { margin: .4rem 0 1.4rem; }.sources ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); }.sources li { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; padding: 1rem; background: var(--panel); }.sources li + li { border-top: 1px solid var(--line); }.sources li > span { color: var(--signal); font-family: var(--display); }.sources li div { display: grid; }.sources li a { color: var(--text); font-weight: 700; text-decoration: none; }.sources li small { color: var(--muted); }
.related { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line); }.related > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }.related a { min-height: 9rem; display: grid; align-content: space-between; padding: 1rem; color: var(--text); background: var(--panel); text-decoration: none; }.related a:hover { background: var(--panel-2); }.related a span { color: var(--signal); font-size: .64rem; letter-spacing: .12em; }.related a strong { font-family: var(--display); line-height: 1.05; text-transform: uppercase; }
.content-panel { max-width: 48rem; border: 1px solid var(--line); background: var(--panel); padding: clamp(1.5rem, 4vw, 3rem); }.site-footer { border-top: 1px solid var(--line); color: var(--muted); padding-block: 2rem; }.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 58rem) { .mission-control { grid-template-columns: 1fr; padding-top: 3rem; }.tactical-display { justify-self: center; opacity: .7; }.article-layout { grid-template-columns: 1fr; gap: 2rem; }.article-rail { position: static; grid-template-columns: 1fr auto; }.section-mark { display: none; } }
@media (max-width: 42rem) { .nav { align-items: flex-start; flex-direction: column; padding-block: .9rem; }.nav-links { gap: .8rem; }.mission-control { padding-bottom: 6rem; }.tactical-display { width: 80vw; }.intel-stats div { padding: .8rem .55rem; }.priority-grid, .guide-grid, .related > div { grid-template-columns: 1fr; }.priority-grid { margin-bottom: 5rem; }.section-heading, .guide-tools { align-items: stretch; flex-direction: column; }.filters { justify-content: start; }.guide-card { min-height: 16rem; }.article-rail { grid-template-columns: 1fr; }.article-header h1 { font-size: 3rem; }.breadcrumbs { margin-bottom: 2rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.radar-sweep { animation: none; } }