/* czujka — public site.
 *
 * The reference is an instrument, not a game. Air-traffic control, a
 * seismograph, a NATO situational-awareness display: sober, precise, legible
 * at a glance and under stress. The toolkit's "cyberpunk" palette — matrix
 * green, glitch, scanlines at 0.1 — was rejected deliberately. This page is
 * about whether families should leave their homes, and an interface that
 * enjoys the subject would be both tasteless and, worse, less credible.
 *
 * So: one accent colour that earns its brightness, generous negative space,
 * and all the drama carried by the data and the map.
 *
 * THE ONE RULE THE VISUAL LANGUAGE MUST ENFORCE: blind is not calm. A country
 * whose feeds have gone stale must never render like a quiet one. It gets a
 * hatched fill, a dashed outline and a stated age — because the whole premise
 * of this project is that absence of signal is not absence of threat, and a
 * map that paints "no data" in the same green as "nothing happening" breaks
 * that promise more effectively than any wrong number could.
 */

@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  /* latin-ext: the Polish, Baltic and Romanian diacritics. Not optional on a
     page that names Łódź, Šiauliai, Tõrva and Timișoara. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/FiraSans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --void: #06080b;
  --surface: #0a0e13;
  --surface-2: #0f151d;
  --line: #1a232e;
  --line-2: #27333f;
  --text: #e2e9f0;
  --muted: #8a9cad;
  --dim: #5c6c7c;

  --accent: #4fd1d9;
  --accent-dim: #2a7c82;

  /* The ladder. Green for normal follows convention, because fighting a
     convention costs comprehension in exactly the moment comprehension
     matters — but it is desaturated, so it reads "measured" rather than
     "all clear". */
  --b1: #27a179;
  --b2: #d79b32;
  --b3: #df7430;
  --b4: #d43f49;
  --blind: #64748b;

  --mono: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Fira Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --w: 1240px;
  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A single very low-contrast grain layer. Enough to stop the large dark areas
   banding on cheap panels; not enough to be a "texture". */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* --- labels and small type ------------------------------------------------ */

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- top bar -------------------------------------------------------------- */

header.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--void) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.bar-in {
  max-width: var(--w); margin: 0 auto; padding: 0 24px;
  height: 58px; display: flex; align-items: center; gap: 28px;
}

.wordmark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  font-weight: 600; font-size: 19px; letter-spacing: 0.1em;
}
.wordmark svg { display: block; flex: none; }

nav.links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
nav.links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  transition: color 0.2s;
}
nav.links a:hover { color: var(--accent); }
@media (max-width: 860px) { nav.links a:not(.cta) { display: none; } }

.cta {
  border: 1px solid var(--accent-dim); color: var(--accent) !important;
  padding: 7px 14px; border-radius: var(--r);
}
.cta:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* --- live pill ------------------------------------------------------------ */

.live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--b1); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--b1) 70%, transparent);
  animation: ping 2.6s cubic-bezier(0.2, 0, 0.3, 1) infinite;
}
.dot.stale { background: var(--b2); animation: none; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--b1) 60%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--b1) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--b1) 0%, transparent); }
}

/* --- hero ----------------------------------------------------------------- */

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
#map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
/* Vignette: pulls the eye to the centre of the frame and keeps the text block
   legible over whatever the map happens to be drawing underneath it. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 38%, var(--void) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--void) 88%, transparent) 0%, transparent 22%, transparent 62%, var(--void) 100%);
}

.hero-in {
  position: relative; z-index: 2;
  max-width: var(--w); margin: 0 auto; padding: 150px 24px 0;
  width: 100%;
}
.hero h1 {
  font-size: clamp(34px, 6.4vw, 70px);
  line-height: 1.02; letter-spacing: -0.028em; font-weight: 600;
  margin: 18px 0 0; max-width: 17em;
}
.hero h1 em {
  font-style: normal; color: var(--accent);
  /* A hairline under the clause that carries the whole argument. */
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 40%, transparent);
}
.hero p.sub {
  margin: 24px 0 0; max-width: 46ch; font-size: 17.5px; color: var(--muted);
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  padding: 13px 22px; border-radius: var(--r);
  border: 1px solid var(--line-2); color: var(--text);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.btn:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.btn.primary {
  background: var(--accent); color: #04272a; border-color: var(--accent);
  font-weight: 500;
}
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); }

/* --- the ladder rail at the bottom of the hero ---------------------------- */

.rail {
  position: relative; z-index: 2; margin-top: auto;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--void) 55%, transparent);
  backdrop-filter: blur(8px);
}
.rail-in {
  max-width: var(--w); margin: 0 auto; padding: 14px 24px 18px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.rail-in::-webkit-scrollbar { display: none; }

.chip {
  flex: 1 0 auto; min-width: 104px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 9px 11px 10px;
  display: block; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color 0.2s, background 0.2s;
  position: relative; overflow: hidden;
}
.chip:hover, .chip.on { border-color: var(--line-2); background: var(--surface-2); }
.chip::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--c, var(--blind));
}
.chip .cc {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--text);
}
.chip .bn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c, var(--blind)); margin-top: 2px;
}
.chip.degraded .bn::after { content: " ·?"; color: var(--b2); }

/* --- sections ------------------------------------------------------------- */

section { padding: 96px 0; border-top: 1px solid var(--line); }
section > .wrap > .label { margin-bottom: 14px; }
h2 {
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1;
  letter-spacing: -0.02em; font-weight: 600; margin: 0 0 16px;
}
.lede { font-size: 17px; color: var(--muted); max-width: 62ch; margin: 0 0 40px; }

/* --- status board --------------------------------------------------------- */

.board {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.card {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 18px;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--c, var(--blind));
}
/* Blind is not calm: a stale reading gets hatching, so it cannot be mistaken
   for a quiet one at a glance. */
.card.degraded {
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 7px,
    color-mix(in srgb, var(--b2) 7%, transparent) 7px 14px);
  border-color: color-mix(in srgb, var(--b2) 30%, var(--line));
}
.card .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card .name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.card .flag { font-size: 20px; line-height: 1; }
.card .band {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--c, var(--blind)); margin-top: 10px;
}
.card .meter { display: flex; gap: 3px; margin-top: 10px; }
.card .meter i {
  height: 3px; flex: 1; border-radius: 2px; background: var(--line-2);
}
.card .meter i.lit { background: var(--c, var(--blind)); }
.card dl {
  margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr;
  gap: 4px 12px; font-size: 12.5px;
}
.card dt { color: var(--dim); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; align-self: center; }
.card dd { margin: 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.card .why {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--b2); line-height: 1.45;
}
.card .why.limit { color: var(--dim); }

/* --- kpis ----------------------------------------------------------------- */

.kpis {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  overflow: hidden;
}
.kpi { background: var(--surface); padding: 26px 20px; }
.kpi .n {
  font-family: var(--mono); font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi .k { margin-top: 10px; }

/* --- feed ----------------------------------------------------------------- */

.feed { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ev {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ev:last-child { border-bottom: 0; }
.ev time { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.ev .h { font-size: 14.5px; }
.ev .sev {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
  border: 1px solid currentColor; white-space: nowrap;
}
.sev.high { color: var(--b4); }
.sev.warn { color: var(--b2); }
.sev.info { color: var(--dim); }
@media (max-width: 680px) {
  .ev { grid-template-columns: 1fr auto; }
  .ev time { grid-column: 1 / -1; }
}

/* --- principles ----------------------------------------------------------- */

.three { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.three article {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 26px;
}
.three h3 { margin: 14px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.three p { margin: 0; font-size: 14.5px; color: var(--muted); }
.three .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--accent-dim);
}

/* --- waitlist ------------------------------------------------------------- */

.join {
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  padding: clamp(28px, 5vw, 54px);
}
.join form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.join input {
  flex: 1 1 260px; min-width: 0;
  background: var(--void); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--text); font-family: var(--mono); font-size: 14px;
  padding: 13px 15px;
}
.join input:focus { outline: none; border-color: var(--accent-dim); }
.join .note { margin-top: 16px; font-size: 13px; color: var(--dim); }

/* --- footer --------------------------------------------------------------- */

footer { border-top: 1px solid var(--line); padding: 54px 0 70px; }
footer .cols {
  display: grid; gap: 34px;
  grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
}
footer p { font-size: 13px; color: var(--dim); margin: 12px 0 0; max-width: 46ch; }
footer a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
footer a:hover { color: var(--accent); }
footer ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }

.disclaimer {
  margin-top: 44px; padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--b2) 26%, var(--line));
  border-left-width: 3px; border-radius: var(--r);
  background: color-mix(in srgb, var(--b2) 4%, transparent);
  font-size: 13.5px; color: var(--muted);
}

/* --- map tooltip ---------------------------------------------------------- */

#tip {
  position: fixed; z-index: 50; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%) translateY(-12px);
  background: color-mix(in srgb, var(--void) 94%, transparent);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 10px 13px; min-width: 150px;
  transition: opacity 0.14s;
  backdrop-filter: blur(8px);
}
#tip.on { opacity: 1; }
#tip .t { font-size: 14px; font-weight: 600; }
#tip .b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 3px; }
#tip .c { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 5px; }

/* --- reveal on scroll ----------------------------------------------------- */

.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s, transform 0.6s; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* --- band colours as classes ---------------------------------------------
 *
 * Set here rather than inline from JavaScript, because the CSP is strict
 * (style-src 'self', no 'unsafe-inline') and a style attribute written by
 * script is refused. Worth the constraint: a page selling "we cannot read
 * your plan" should not be the page that asks the browser to lower its
 * guard.
 */
.band-1 { --c: var(--b1); }
.band-2 { --c: var(--b2); }
.band-3 { --c: var(--b3); }
.band-4 { --c: var(--b4); }
.band-x { --c: var(--blind); }
#tip .b.band-1, #tip .b.band-2, #tip .b.band-3,
#tip .b.band-4, #tip .b.band-x { color: var(--c); }

/* --- the handful of one-off layout tweaks that used to be inline ---------- */
.hero { border-top: 0; padding: 0; }
.hero #stalewarn { margin-top: 28px; max-width: 62ch; }
.join h2 { margin-top: 14px; }
.join .lede.tight { margin-bottom: 0; }
.join .lede.second { margin: 18px 0 0; }
footer .wordmark { font-size: 17px; }
footer .fineprint { margin-top: 22px; font-size: 12.5px; color: var(--dim); }

/* The headline's second clause is the argument, so it is kept on its own
   line rather than allowed to wrap mid-phrase and break the underline. */
.hero h1 { text-wrap: balance; }
.hero h1 em { white-space: nowrap; }
@media (max-width: 700px) { .hero h1 em { white-space: normal; } }

/* A structural coverage gap is a three-word tag on the card; the sentence
   explaining it is written once under the board. Seven identical paragraphs
   is how a caveat stops being read. */
.card .tag {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim);
}
.card .tag::before { content: "◇ "; color: var(--b2); }
#boardnote { margin-top: 20px; }