/* The Executive SitRep — shared design system (2026-09-02)
   ESR dark theme (era-pulse tokens) + wysecarts-grade polish:
   Urbanist display type, Public Sans body, masthead layout, section rhythm. */
:root {
  --bg: #04070d; --panel: #0a101c; --panel-2: #0d1626; --line: #1e3a5f;
  --text: #e6f1ff; --muted: #8fa3bf; --accent: #6fa5e8; --signal: #30d158;
  --hairline: rgba(111, 165, 232, .18);
  --font-display: "Urbanist", "Segoe UI", sans-serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -18%, rgba(111,165,232,.10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 110%, rgba(48,209,88,.04), transparent 60%);
  background-attachment: fixed;
}
::selection { background: var(--accent); color: #04070d; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Masthead ─────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 7, 13, .78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--hairline);
}
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 66px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--text); }
.brand img { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); }
.brand .name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: .02em; line-height: 1.1; }
.brand .name span { color: var(--accent); }
.brand .name small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
nav.main { display: flex; gap: .3rem; }
nav.main a {
  padding: .5rem 1rem; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; transition: all .16s ease;
}
nav.main a:hover { color: var(--text); background: rgba(111,165,232,.07); }
nav.main a.active { color: var(--text); border-color: var(--hairline); background: rgba(111,165,232,.1); }

/* ── Kickers / headings ───────────────────────────────────── */
.kicker {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
h1 .amp { color: var(--accent); }
h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.015em; }
.lead { color: var(--muted); font-size: 1.08rem; line-height: 1.75; max-width: 46em; }
.lead strong { color: var(--signal); font-weight: 700; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .95rem 1.7rem; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; transition: all .18s ease; text-decoration: none;
}
.btn.primary { background: var(--accent); color: #04070d; box-shadow: 0 8px 28px rgba(111,165,232,.28); }
.btn.primary:hover { background: #86b8f0; transform: translateY(-1px); box-shadow: 0 12px 34px rgba(111,165,232,.4); }
.btn.ghost { border-color: var(--hairline); color: var(--text); background: rgba(10,16,28,.6); }
.btn.ghost:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ── Hero (home) ──────────────────────────────────────────── */
.hero { padding: 3.4rem 0 2.6rem; text-align: center; }
.hero .brand-img {
  width: min(680px, 100%); margin: 0 auto 2rem; display: block;
  border-radius: 14px; border: 1px solid var(--hairline);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.hero .kicker { margin-bottom: 1rem; }
.hero h1 { max-width: 18em; margin: 0 auto .9rem; }
.hero .lead { margin: 0 auto 1.8rem; }
.hero .btn-row { justify-content: center; margin-bottom: 2.2rem; }

/* ── Featured panel (podcast on home) ─────────────────────── */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--hairline); border-radius: 16px;
  padding: 1.8rem 1.9rem 1.6rem; text-align: left;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.panel .kicker { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.panel .kicker .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: p 2s infinite; }
@keyframes p { 0%,100%{opacity:1} 50%{opacity:.35} }
.podcast { margin-top: .4rem; }
.pod-head { color: var(--text); font-size: .95rem; line-height: 1.55; margin-bottom: .9rem; }
.pod-head b { font-family: var(--font-display); }
.podcast audio { width: 100%; margin-top: .2rem; height: 44px; }
.podcast audio::-webkit-media-controls-panel { background: var(--panel); }

/* ── Bio / socials ────────────────────────────────────────── */
.bio {
  color: var(--muted); font-size: .95rem; line-height: 1.75;
  border-top: 1px solid var(--hairline); padding-top: 1.4rem; margin: 2.2rem 0 1.6rem;
  text-align: left;
}
.bio b { color: var(--text); }
.socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.socials a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-size: .85rem; font-weight: 600;
  transition: all .16s ease; background: rgba(10,16,28,.5);
}
.socials a:hover { border-color: var(--accent); background: rgba(111,165,232,.08); transform: translateY(-1px); }
.socials .soon { color: var(--muted); cursor: default; }
.socials .soon:hover { border-color: var(--line); background: none; transform: none; }

/* ── Page head (news) ─────────────────────────────────────── */
.page-head { padding: 2.6rem 0 1rem; }
.page-head .kicker { margin-bottom: .7rem; }
.page-head h1 { margin-bottom: .5rem; }
.page-head .lead { font-size: 1rem; }
.page-head .lead .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: .4rem; vertical-align: 1px; animation: p 2s infinite; }
.page-head .updated { font-size: .8rem; color: #5a6f8f; margin-top: .4rem; font-family: var(--font-display); letter-spacing: .02em; }
.page-head .updated .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: .4rem; vertical-align: 1px; animation: p 2s infinite; }

/* ── Category sections ────────────────────────────────────── */
.cat { margin: 1.8rem 0 2.4rem; }
.cat-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .2rem; }
.cat-head h2 { font-size: 1.3rem; display: flex; align-items: center; gap: .5rem; }
.cat-head .n {
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; color: var(--accent); border: 1px solid var(--hairline);
  border-radius: 999px; padding: .14rem .6rem; text-transform: uppercase;
}
.cat-desc { color: var(--muted); font-size: .86rem; margin-bottom: 1rem; }
.cat-head-rule { height: 1px; background: linear-gradient(90deg, var(--hairline), transparent); margin: .9rem 0 1.1rem; }

/* ── Story cards ──────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 720px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
.card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(13,22,38,.9), rgba(10,16,28,.96));
  border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem 1.25rem 1.05rem;
  color: var(--text); text-decoration: none;
  transition: all .18s ease; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0; transition: opacity .18s ease;
}
.card:hover { border-color: rgba(111,165,232,.55); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.card:hover::before { opacity: 1; }
.card .row { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; flex-wrap: wrap; }
.badge {
  font-family: var(--font-display); font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
}
.badge.hot { background: rgba(48,209,88,.12); color: var(--signal); border: 1px solid rgba(48,209,88,.35); }
.badge.multi { background: rgba(111,165,232,.1); color: var(--accent); border: 1px solid rgba(111,165,232,.35); }
.badge.cve { background: rgba(255,180,60,.1); color: #ffb43c; border: 1px solid rgba(255,180,60,.35); }
.card h3 { font-family: var(--font-display); font-size: .98rem; line-height: 1.38; font-weight: 700; margin-bottom: .45rem; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: .85rem; line-height: 1.55; margin-bottom: .8rem; flex-grow: 1; }
.meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .73rem; color: #5a6f8f; }
.meta .src { color: var(--accent); font-weight: 600; text-transform: capitalize; }
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #5a6f8f; }
.readmore {
  margin-left: auto; color: var(--accent); font-size: .78rem; font-weight: 700;
  font-family: var(--font-display); letter-spacing: .05em; transition: all .16s ease;
}
.card:hover .readmore { transform: translateX(3px); }
.empty { color: var(--muted); font-size: .85rem; font-style: italic; }

/* ── Footer ───────────────────────────────────────────────── */
footer.site { margin-top: 3rem; border-top: 1px solid var(--hairline); padding: 2.2rem 0 2.6rem; }
.foot-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot-grid .fg-brand img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); margin-bottom: .7rem; }
.foot-grid .fg-brand p { color: var(--muted); font-size: .82rem; max-width: 30em; line-height: 1.65; }
.foot-grid h4 { font-family: var(--font-display); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; font-weight: 700; }
.foot-grid ul { list-style: none; display: grid; gap: .45rem; }
.foot-grid ul a { color: var(--muted); font-size: .86rem; transition: color .15s ease; }
.foot-grid ul a:hover { color: var(--accent); }
.foot-legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .76rem; color: #5a6f8f; }
.foot-legal .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: .4rem; vertical-align: 1px; animation: p 2s infinite; }