/* czujka — public site.
 *
 * The map is the first screen. Not a panel inside the hero: the background of
 * it, full bleed and live, with everything else sitting over the top.
 *
 * Motion is used for arrivals and for numbers that change. It is not used to
 * decorate something that is standing still.
 *
 * The rule the visual language enforces, inherited from the product: a country
 * whose feeds are stale must never look like a quiet one. It is slate, it is
 * hatched, and its level is marked uncertain.
 *
 * Colour follows the identity rule. The logo and the furniture are achromatic.
 * Colour means a reading, and nothing else on this page may use it.
 */

@font-face { font-family: Plex; src: url("fonts/plex-400.woff2") format("woff2");
  font-weight: 400; 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: Plex; src: url("fonts/plex-400-ext.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  /* Latin Extended. Not optional on a page that writes Rządowe Centrum
     Bezpieczeństwa. */
  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: Plex; src: url("fonts/plex-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; }
@font-face { font-family: Plex; src: url("fonts/plex-600.woff2") format("woff2");
  font-weight: 600; 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: Plex; src: url("fonts/plex-600-ext.woff2") format("woff2");
  font-weight: 600; font-display: swap;
  unicode-range: U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: PlexMono; src: url("fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; }

:root {
  --void: #07090C;
  --surface: #0C1016;
  --line: #19202A;
  --line-2: #26303C;
  --text: #E6EBF0;
  --muted: #8E9AA6;
  --dim: #5E6B78;

  --l1: #27A179; --l2: #D79B32; --l3: #DF7430; --l4: #D43F49; --blind: #64748B;

  --sans: Plex, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: PlexMono, ui-monospace, SFMono-Regular, Menlo, monospace;
  --w: 1240px; --gut: 28px;
}

/* The level colour, set once as a custom property and inherited by every
 * element that needs it: the card edge, the rank bar, the label.
 *
 * These were dropped in a rewrite and every coloured thing on the page fell
 * back to slate, which is the colour this design reserves for "we cannot
 * see". A missing variable turned every reading into an unobserved one, and
 * it looked deliberate. */
.band-1 { --c: var(--l1); }
.band-2 { --c: var(--l2); }
.band-3 { --c: var(--l3); }
.band-4 { --c: var(--l4); }
.band-x { --c: var(--blind); }

/* The icon sprite. A class, not style="display:none", because the CSP
   refuses style attributes and the sprite was the last one left. */
.sprite { display: none; }

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

/* Reveal. The hidden state is applied only when JS has confirmed it is
   running, and site.js force-reveals everything after three seconds. An
   animation must never be the reason content is missing: the method section
   lost its heading that way, and the page simply looked unfinished. */
.js [data-rv] { opacity: 0; transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .55s cubic-bezier(.16,1,.3,1); }
.js [data-rv].in { opacity: 1; transform: none; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important;
    transition-duration: .001ms !important; }
}
body { margin: 0; background: var(--void); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.narrow-wrap { max-width: 760px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 18px; }
.fine { font-size: 13.5px; line-height: 1.6; color: var(--dim); max-width: 70ch; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.022em; margin: 0; }
h1 { font-size: clamp(30px, 4vw, 52px); line-height: 1.1; max-width: 19ch; }
h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.16; margin-bottom: 22px;
  max-width: 24ch; }
h3 { font-size: 18px; letter-spacing: -.01em; }
.lede { font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); margin: 22px 0 0;
  max-width: 54ch; }

/* --- the map is the background of the first screen ----------------------- */

#map { position: fixed; inset: 0; height: 100svh; width: 100%; z-index: 0;
  background: var(--void); }
/* Scrims: one horizontal so the copy has darkness under it, one vertical so
   the map resolves into the page instead of being cut off by the next
   section. */
#map::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--void) 0%,
      color-mix(in srgb, var(--void) 86%, transparent) 32%, transparent 60%),
    linear-gradient(to bottom, color-mix(in srgb, var(--void) 74%, transparent) 0%,
      transparent 16%, transparent 54%, var(--void) 97%); }
.maplibregl-ctrl-attrib, .maplibre-ctrl-attrib { display: none !important; }
.maplibregl-canvas { outline: none; }

main, header.bar, footer { position: relative; z-index: 2; }

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

header.bar { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--void) 68%, transparent);
  backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.bar-in { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut);
  height: 60px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.mark { width: 19px; height: 19px; fill: currentColor; display: block; flex: none; }
footer .mark { width: 17px; height: 17px; }
.bar nav { display: flex; gap: 24px; }
.bar nav a { font-size: 14px; color: var(--muted); text-decoration: none; }
.bar nav a:hover { color: var(--text); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--l1); flex: none; }
.dot.stale { background: var(--l2); }

/* The language switcher. Real links, so it works with no JavaScript and
   survives a middle click. It must never fall under the rule below that
   hides the section nav on narrow screens: on a Polish-primary site an
   English reader on a phone has to be able to find the way out. */
.bar .lang { display: inline-flex; gap: 0; margin-left: 20px; flex: none;
  border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.bar .lang a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  padding: 5px 9px; color: var(--dim); text-decoration: none; line-height: 1;
  background: transparent; transition: color .14s, background .14s; }
.bar .lang a + a { border-left: 1px solid var(--line-2); }
.bar .lang a:hover { color: var(--text); background: #11161D; }
.bar .lang a[aria-current] { color: var(--text); background: #151B23; }

@media (max-width: 900px) {
  .bar nav:not(.lang) { display: none; }
  .bar .lang { margin-left: auto; }
  .live + .lang { margin-left: 14px; }
}
@media (max-width: 440px) {
  /* At this width the live readout and the switcher fight for the same
     row. The switcher wins: it is the only way to change language. */
  .bar-in .live span { display: none; }
}

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

.hero { min-height: calc(100svh - 60px); display: flex; flex-direction: column;
  justify-content: space-between; padding: clamp(38px, 7vh, 84px) 0 0; }
.hero-in { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); width: 100%; }
.hero-copy { max-width: 640px; }
.acts { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }

.btn { display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 500; text-decoration: none; padding: 12px 20px;
  border-radius: 3px; border: 1px solid var(--line-2); color: var(--text);
  background: color-mix(in srgb, var(--void) 55%, transparent);
  cursor: pointer; font-family: inherit;
  transition: border-color .18s, background .18s, transform .18s; }
.btn:hover { border-color: #3a4756; transform: translateY(-1px); }
.btn.primary { background: var(--text); color: var(--void); border-color: var(--text); }
.btn.primary:hover { background: #fff; border-color: #fff; }

.warn { margin-top: 26px; padding: 14px 16px; font-size: 14px; color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--l2) 32%, var(--line));
  border-left-width: 3px; border-radius: 3px; max-width: 54ch;
  background: color-mix(in srgb, var(--void) 70%, transparent); }

/* --- the film ------------------------------------------------------------- */

/* Beside the copy, over the eastern half of the map: the one part of the
   first screen with nothing to read on it. Narrower than that, it follows
   the buttons. The play button is the site's primary button, so the only
   colour on it is the drawing's own. */
@media (min-width: 1100px) {
  .hero-in { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 72px); align-items: center; }
  .cards { grid-column: 1 / -1; }
}
.film { margin: 0; }
@media (max-width: 1099px) { .film { margin-top: 40px; max-width: 600px; } }
.film-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface);
  box-shadow: 0 28px 70px -30px #000; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 18px; margin: 0; border: 0; cursor: pointer; font: inherit;
  background: linear-gradient(to top, color-mix(in srgb, var(--void) 45%, transparent),
    transparent 40%); }
.film-play[hidden] { display: none; }
.film-btn { display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 17px 11px 14px; border-radius: 3px; background: var(--text);
  color: var(--void); font-size: 14.5px; font-weight: 500;
  transition: background .18s, transform .18s; }
.film-btn svg { width: 16px; height: 16px; }
.film-len { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: #4B5560; }
.film-play:hover .film-btn { background: #fff; transform: translateY(-1px); }
.film-play:focus-visible { outline: 2px solid var(--text); outline-offset: -5px; }
.film figcaption { margin-top: 11px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 620px) {
  .film-play { padding: 12px; }
  .film-btn { padding: 9px 14px 9px 12px; font-size: 14px; gap: 9px; }
}

/* --- scorecards ----------------------------------------------------------- */

.cards { display: grid; gap: 8px; margin: clamp(30px, 6vh, 60px) 0 0;
  grid-template-columns: repeat(5, 1fr); }
@media (min-width: 1140px) { .cards { grid-template-columns: repeat(10, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; overflow: hidden; border: 1px solid var(--line);
  border-radius: 4px; padding: 13px 14px 14px;
  background: color-mix(in srgb, var(--void) 70%, transparent);
  backdrop-filter: blur(10px); transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--c, var(--blind)); }
.card .cc { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--muted); }
.card .cei { display: block; font-size: 27px; font-weight: 600; letter-spacing: -.04em;
  line-height: 1.05; margin-top: 7px; font-variant-numeric: tabular-nums; }
.card .lv { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c, var(--blind)); margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .spark { display: flex; gap: 2px; margin-top: 9px; }
.card .spark i { height: 3px; flex: 1; border-radius: 1px; background: var(--line-2);
  display: block; }
.card .spark i.on { background: var(--c); }
.card.degraded { background-image: repeating-linear-gradient(-45deg, transparent 0 6px,
  color-mix(in srgb, var(--l2) 7%, transparent) 6px 12px); }
.card.degraded .lv::after { content: " ?"; color: var(--l2); }

/* --- legend, scroll cue, popup -------------------------------------------- */

.legend { max-width: var(--w); margin: 0 auto; padding: 22px var(--gut) 0;
  display: flex; flex-wrap: wrap; gap: 14px; row-gap: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--dim); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.legend i.sw-1 { background: var(--l1); } .legend i.sw-2 { background: var(--l2); }
.legend i.sw-3 { background: var(--l3); } .legend i.sw-4 { background: var(--l4); }
.legend i.sw-x { background: var(--blind); }

.scroll-cue { display: flex; justify-content: center; padding: 24px 0 28px; }
.scroll-cue span { width: 1px; height: 30px; display: block;
  background: linear-gradient(to bottom, transparent, var(--line-2)); }

.maplibregl-popup-content { background: #0C1016; border: 1px solid var(--line-2);
  border-radius: 3px; padding: 11px 13px; box-shadow: none;
  font-family: var(--sans); color: var(--text); }
.maplibregl-popup-tip { display: none; }
.pop-t { font-weight: 600; font-size: 14.5px; }
.pop-b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; margin-top: 3px; }
.pop-b.band-1 { color: var(--l1); } .pop-b.band-2 { color: var(--l2); }
.pop-b.band-3 { color: var(--l3); } .pop-b.band-4 { color: var(--l4); }
.pop-b.band-x { color: var(--blind); }
.pop-c { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 4px; }

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

section { padding: clamp(72px, 11vh, 124px) 0; }
.band { background: var(--surface); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.band.tight { padding: clamp(54px, 7vh, 84px) 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 30px; margin: 34px 0 0; }
.cols p { margin: 0; color: var(--muted); font-size: 16px; }
.plan-note { margin: 28px 0 0; color: var(--muted); font-size: 16px; }

/* --- the index ------------------------------------------------------------ */

.idx-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px; align-items: start; margin-bottom: 48px; }
.idx-weights { display: grid; gap: 7px; padding-top: 8px; }
.wrow { display: grid; grid-template-columns: 80px 1fr 34px; gap: 11px;
  align-items: center; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.wrow u { text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.wrow i { height: 3px; background: var(--line-2); border-radius: 1px; display: block;
  transform-origin: left; }
.wrow b { font-weight: 400; text-align: right; color: var(--muted); }

.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; }
.rank { background: var(--void); display: grid;
  grid-template-columns: 30px 158px 1fr 78px; gap: 18px; align-items: center;
  padding: 15px 20px; }
.rank .n { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.rank .who { font-weight: 600; font-size: 16px; }
.rank .who em { font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: var(--c, var(--blind)); display: block;
  text-transform: uppercase; margin-top: 1px; }
.rank .track { height: 8px; background: var(--line); border-radius: 2px;
  overflow: hidden; }
/* display:block and width:100% are not decoration. The fill is an <i>, which
   is inline by default and therefore zero-wide, and scaling zero gives zero.
   The transform and the colour were both correct for an element that had no
   width to show them on, so the bar looked empty and grey while the DOM said
   scaleX(1) in red. Only measuring the rendered box found it. */
.rank .fill { display: block; width: 100%; height: 100%;
  background: var(--c, var(--blind)); border-radius: 2px;
  transform-origin: left; transform: scaleX(0); }
.rank .val { font-family: var(--mono); font-size: 19px; text-align: right;
  font-variant-numeric: tabular-nums; }
.rank.degraded .track { background-image: repeating-linear-gradient(-45deg,
  transparent 0 5px, color-mix(in srgb, var(--l2) 14%, transparent) 5px 10px); }
@media (max-width: 760px) {
  .idx-head { grid-template-columns: 1fr; gap: 28px; }
  .rank { grid-template-columns: 22px 1fr 64px; gap: 10px 12px; }
  .rank .track { grid-column: 1 / -1; }
}

/* --- the three lead times ------------------------------------------------- */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; margin-top: 8px; }
.figures div { background: var(--void); padding: 30px 24px 26px; }
.figures b { display: block; font-size: clamp(42px, 5.4vw, 64px); font-weight: 600;
  letter-spacing: -.045em; line-height: .96; font-variant-numeric: tabular-nums; }
.figures span { display: block; margin-top: 12px; font-size: 14px; color: var(--muted);
  line-height: 1.45; }

/* --- the record ----------------------------------------------------------- */

.rec-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; }
.rec-rate { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 34px; margin: 4px 0 30px; }
.kpi b { display: block; font-size: clamp(25px, 3vw, 34px); font-weight: 600;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1;
  transition: color .6s; }
.kpi span { display: block; margin-top: 9px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
/* A counter that has just moved. Without it a changing number and a static one
   look identical, and the point of this section is that it is changing. */
.kpi b.bumped { color: #ffffff; transition: none; }

/* --- rules ---------------------------------------------------------------- */

.rules { list-style: none; counter-reset: r; padding: 0; margin: 0; display: grid;
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; }
/* Two grid children, not three. The previous version put the number, the
   heading and the paragraph directly in a two-column grid, so the paragraph
   wrapped onto the next row into the 46px numeral column and rendered one
   word per line down the whole page. The heading and body now share a cell. */
/* Horizontal: three columns side by side, each led by a pictogram. The
   stacked version was three wide bands of mostly empty row. */
.rules { grid-template-columns: repeat(3, 1fr); }
.rules li { background: var(--void); padding: 30px 26px 28px;
  display: block; }
.rules .r-ic { display: block; width: 26px; height: 26px; color: var(--muted);
  margin-bottom: 20px; }
.rules .r-ic svg { width: 26px; height: 26px; display: block; }
.rules .r-n { font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  letter-spacing: .14em; margin-bottom: 10px; }
.rules h3 { margin: 0 0 9px; }
.rules p { margin: 0; color: var(--muted); font-size: 14.5px; }
@media (max-width: 860px) { .rules { grid-template-columns: 1fr; } }

/* Pictograms on the source cards too. */
.src .s-ic { display: block; width: 22px; height: 22px; color: var(--dim);
  margin-bottom: 14px; }
.src .s-ic svg { width: 22px; height: 22px; display: block; }

/* --- form and footer ------------------------------------------------------ */

#waitlist { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0 14px; }
#waitlist input { flex: 1 1 250px; min-width: 0; background: var(--void);
  border: 1px solid var(--line-2); border-radius: 3px; color: var(--text);
  font-family: inherit; font-size: 15px; padding: 12px 14px; }
#waitlist input:focus { outline: none; border-color: #44535f; }
#waitlist .hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.consent { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55; color: var(--muted); cursor: pointer; }
#waitlist .consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0;
  accent-color: var(--text); }
.notice { margin-top: 8px; }
.notice summary { cursor: pointer; color: var(--muted); }
.notice p { margin-top: 10px; }

footer { border-top: 1px solid var(--line); padding: 58px 0 72px; background: var(--void); }
/* Four columns, with the brand taking one and a half. The previous two
   column version gave the brand 2fr of empty space and pushed the single
   link list to the far right, which read as a layout that had lost its
   other half. */
.foot { display: grid; gap: 40px;
  grid-template-columns: minmax(230px, 1.6fr) repeat(3, minmax(130px, 1fr)); }
.foot-col ul { margin-top: 2px; }
.colophon { margin-top: 18px; }
@media (max-width: 860px) {
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .fine { margin: 14px 0 0; }
.notice { margin: 44px 0 16px; padding: 15px 17px; font-size: 14px; color: var(--muted);
  border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: 3px; max-width: 74ch; }

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 960px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  /* On a phone the copy cannot sit beside the map, so the map goes behind it
     and the scrim becomes vertical and much heavier at the top. */
  #map::after { background: linear-gradient(to bottom,
    color-mix(in srgb, var(--void) 93%, transparent) 0%,
    color-mix(in srgb, var(--void) 70%, transparent) 42%, var(--void) 92%); }
  .hero { min-height: auto; padding-top: 32px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}

/* ══ scorecards: flags ═══════════════════════════════════════════════════ */

.card .cc { display: flex; align-items: center; gap: 7px; }
.card .flag { font-size: 15px; line-height: 1; }
.card .iso { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--muted); }

/* ══ the map's live furniture ════════════════════════════════════════════ */

.herofoot { max-width: var(--w); margin: 0 auto; padding: 20px var(--gut) 30px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; }
.legend { padding: 0; margin: 0; }
.maphint { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); }

/* ══ index ranking: narrower, expandable ═════════════════════════════════ */

.ranks { max-width: 920px; margin-top: 38px; }
/* display:block, deliberately. The row used to be the grid itself; now it is
   a button plus a drawer, and leaving the old five-column grid on the <li>
   squeezed the whole button into the 26px numeral column. The name and the
   level disappeared and the bar looked like it started at the flag. The grid
   belongs to .rank-btn now. */
.rank { display: block; padding: 0; }
.rank-btn {
  all: unset; cursor: pointer; display: grid;
  /* Name fixed, bar flexible. The other way round gave the name 586px of
     empty space and left the bar at 128px, which is the column people are
     actually comparing across rows. */
  grid-template-columns: 26px 206px minmax(0, 1fr) 72px 20px; gap: 16px;
  align-items: center; padding: 13px 18px; width: 100%; box-sizing: border-box;
}
.rank-btn:hover { background: #0B1117; }
.rank-btn:focus-visible { outline: 1px solid var(--line-2); outline-offset: -2px; }
.rank .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rank .who .flag { font-size: 16px; line-height: 1; }
.rank .who .nm { font-weight: 600; font-size: 15.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rank .who .lv { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c, var(--blind)); white-space: nowrap; }
.rank .feeds { font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--dim); text-align: right; white-space: nowrap; }
.rank .chev { font-family: var(--mono); font-size: 11px; color: var(--dim);
  text-align: right; transition: transform .22s; }
.rank.open .chev { transform: rotate(90deg); }
.rank .val { font-size: 17px; }

/* The breakdown. Height is animated by script, so the closed state is a real
   zero rather than display:none, which cannot be transitioned. */
.rank .detail { grid-column: 1 / -1; overflow: hidden; height: 0; }
.rank .detail-in { padding: 4px 18px 20px 58px; display: grid; gap: 7px; }
.crow { display: grid; grid-template-columns: 96px 1fr 42px; gap: 12px;
  align-items: center; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.crow u { text-decoration: none; letter-spacing: .07em; text-transform: uppercase; }
.crow .cbar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.crow .cbar i { display: block; width: 100%; height: 100%; border-radius: 2px;
  background: var(--c, var(--blind)); transform-origin: left; transform: scaleX(0); }
.crow b { font-weight: 400; text-align: right; color: var(--muted); }
.detail-note { font-size: 12px; color: var(--dim); margin: 8px 0 0; max-width: 60ch; }
@media (max-width: 760px) {
  .rank-btn { grid-template-columns: 20px minmax(0,1fr) 58px 16px; gap: 10px; }
  .rank-btn .track { display: none; }
  .rank .feeds { display: none; }
  .rank .detail-in { padding-left: 20px; }
}

/* ══ how the index is built ══════════════════════════════════════════════ */

.twoup { display: grid; gap: 22px; margin-top: 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(230px, .72fr); }
.expl { border: 1px solid var(--line); border-radius: 4px; padding: 26px 26px 24px;
  background: var(--surface); }
.expl p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.expl p:last-child { margin-bottom: 0; }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent, var(--dim)); margin: 0 0 14px !important; }
.weights-panel { border: 1px solid var(--line); border-radius: 4px; padding: 26px 22px;
  background: var(--void); }
.weights-panel .fine { margin-top: 16px; font-size: 11.5px; }
@media (max-width: 1040px) { .twoup { grid-template-columns: 1fr; } }

/* ══ why prepare ═════════════════════════════════════════════════════════ */

.case h2.big { font-size: clamp(27px, 3.6vw, 44px); max-width: 20ch; line-height: 1.12; }
.case-lede { max-width: 62ch; margin-top: 26px; }
.case-lede p { color: var(--muted); font-size: 17px; margin: 0 0 16px; }
.case-lede p:first-child { color: var(--text); }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; margin: 46px 0 0; }
.tl-item { background: var(--void); padding: 26px 22px 24px; position: relative; }
.tl-item b { display: block; font-size: clamp(36px, 4.4vw, 56px); font-weight: 600;
  letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.tl-d { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin: 10px 0 12px; }
.tl-item p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.tl-zero { background: #0E0A0C; }
.tl-zero b { color: var(--l4); }
.tl-zero .tl-d { color: var(--l4); }
@media (max-width: 860px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .timeline { grid-template-columns: 1fr; } }

.case-cols { margin-top: 44px; }
.case-tie { margin-top: 44px; padding: 26px 28px; border-radius: 4px;
  border: 1px solid var(--line-2); background: var(--void);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.case-tie p { margin: 0; flex: 1 1 380px; color: var(--text); font-size: 16px; }

/* ══ the record ══════════════════════════════════════════════════════════ */

/* The tape is the only honest way to show "this is live" between two real
   pushes: it marks each arriving push, it does not interpolate a count. */
.tape { display: flex; gap: 3px; align-items: flex-end; height: 26px;
  margin: 6px 0 0; }
.tape i { width: 3px; height: 6px; background: var(--line-2); border-radius: 1px;
  display: block; }
.tape i.hit { background: var(--l1); height: 22px; }
.rec-rate { color: var(--muted); }
.rec-rate.beat { color: var(--l1); }

/* ══ sources ═════════════════════════════════════════════════════════════ */

.src-head { margin: 64px 0 20px; }
.src-head h3 { margin-bottom: 6px; }
.sources { display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .sources { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sources { grid-template-columns: 1fr; } }
.src { background: var(--void); padding: 20px 22px 18px; }
.src .n { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--dim); }
.src h4 { margin: 8px 0 6px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.src p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.src .wt { display: inline-block; margin-top: 10px; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line-2); border-radius: 2px;
  padding: 2px 6px; }
.src .wt.zero { color: var(--l2); border-color: color-mix(in srgb, var(--l2) 36%, var(--line)); }

/* ══ the app ═════════════════════════════════════════════════════════════ */

.appwrap { display: grid; grid-template-columns: minmax(0, 1fr) 282px; gap: 46px;
  align-items: start; margin: 40px 0 50px; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; }
.ladder li { background: var(--void); padding: 20px 22px; display: grid;
  grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: baseline;
  border-left: 2px solid var(--c, var(--blind)); }
.ladder .lg b { font-size: 21px; font-weight: 600; letter-spacing: -.03em;
  color: var(--c, var(--blind)); }
.ladder .lg span { display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 3px; }
.ladder p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 620px) { .ladder li { grid-template-columns: 1fr; gap: 8px; } }

.phone { border: 1px solid var(--line-2); border-radius: 22px; padding: 10px;
  background: #05070A; }
.phone-in { border: 1px solid var(--line); border-radius: 15px; padding: 16px 15px 18px;
  background: var(--void); display: grid; gap: 11px; }
.ph-bar { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 600; color: var(--muted); }
.ph-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--l1); display: block; }
.ph-lvl { display: flex; align-items: baseline; gap: 9px; }
.ph-lvl b { font-size: 36px; font-weight: 600; letter-spacing: -.045em; color: var(--l1); }
.ph-lvl em { font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ph-meter { display: flex; gap: 3px; }
.ph-meter i { height: 4px; flex: 1; border-radius: 1px; background: var(--line-2); display: block; }
.ph-meter i.on { background: var(--l1); }
.ph-note { margin: 0; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.ph-card { border: 1px solid var(--line); border-radius: 3px; padding: 10px 11px; }
.ph-card.dim { opacity: .6; }
.ph-q { margin: 0; font-size: 12.5px; font-weight: 600; }
.ph-a { margin: 3px 0 0; font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
@media (max-width: 920px) {
  .appwrap { grid-template-columns: 1fr; gap: 32px; }
  .phone { max-width: 282px; }
}
#app .cols h3 { margin: 0 0 8px; }
#app .cols p { font-size: 15px; }

/* The map is position:fixed behind the whole document, so any section
   without its own background let it show through. In the hero that is the
   design; in the method section it looked like a rendering fault. */
main > section:not(.hero) { background: var(--void); }
main > section.band { background: var(--surface); }
footer { background: var(--void); }

/* The record has to look alive before the second push arrives. The tape is
   drawn empty at build so there is a strip to fill, and the heading carries
   the same pulse as the status dot. */
.rec-head .eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.rec-head .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--l1); display: inline-block; flex: none;
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat { 0%,100% { opacity: .35; transform: scale(.8); }
                  50% { opacity: 1; transform: scale(1); } }
.tape i { transition: background .3s, height .3s; }

/* ══ the index gets an axis ══════════════════════════════════════════════
 *
 * Ten bars in a list read as a table. The same ten under a scale read as a
 * chart, and the reader can place a value without following it to the number
 * on the right.
 */
.idx-axis { max-width: 920px; margin: 34px 0 0; position: relative; height: 18px;
  padding: 0 18px; }
.idx-axis .ax { position: absolute; top: 0; bottom: 0;
  border-left: 1px solid var(--line); }
.idx-axis .ax span { position: absolute; top: 0; left: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--dim); }
.ranks { margin-top: 0; }

/* ══ the live rail in the header ═════════════════════════════════════════
 *
 * The header was a dark strip once you scrolled past the hero. The rail
 * keeps the live reading in view for the whole page, so the thing is
 * visibly running while you read about it.
 */
.rail { border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-in { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut);
  display: flex; gap: 0; height: 34px; align-items: stretch; }
.rc { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px;
  border-right: 1px solid var(--line); white-space: nowrap; flex: none;
  text-decoration: none; }
.rc:first-child { border-left: 1px solid var(--line); }
.rc:hover { background: #0C1218; }
.rc i { width: 5px; height: 5px; border-radius: 50%; background: var(--c, var(--blind));
  display: block; flex: none; }
.rc .rf { font-size: 12px; line-height: 1; }
.rc .rn { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--dim); }
.rc .rv { font-family: var(--mono); font-size: 12px; color: var(--text);
  font-variant-numeric: tabular-nums; }
.rc.up .rv { color: #fff; }
@media (max-width: 760px) { .rail-in { padding: 0 12px; } .rc { padding: 0 10px; } }

/* ══ index: context beside the chart ═════════════════════════════════════ */

.idx-wrap { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 56px; align-items: start; }
.idx-side { position: sticky; top: 112px; }
.idx-side .lede { font-size: 16px; margin-bottom: 26px; }
.idx-facts { margin: 0 0 26px; display: grid; gap: 14px; }
.idx-facts > div { display: grid; gap: 3px; }
.idx-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }
.idx-facts dd { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.idx-main { min-width: 0; }
.ranks { max-width: none; }
.idx-axis { max-width: none; }
@media (max-width: 1000px) {
  .idx-wrap { grid-template-columns: 1fr; gap: 34px; }
  .idx-side { position: static; }
}

/* ── the field ──────────────────────────────────────────────────────────────
   assets/field.js draws a contour field of the live readings behind each band
   section. The canvas sits under the content inside the section's own stacking
   context, and fades out at the section's top and bottom so no line is ever
   cut by a section edge. */
main > section.band { position: relative; isolation: isolate; }
main > section.band > canvas.field {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 120px), transparent);
}
main > section.band > canvas.field.on { opacity: 1; }
/* The map the rings stand on. One line weight, the ink of the page, barely
   there: it says where the sources are and nothing else. It fades out toward
   its own edges as well as the section's, so it has no outline of its own. */
main > section.band > .field-map {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 120px), transparent);
}
main > section.band > .field-map.on { opacity: .16; }
.field-map img {
  position: absolute; display: block; max-width: none;
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 52% 46%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 52% 50% at 52% 46%, #000 45%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  main > section.band > canvas.field, main > section.band > .field-map { transition: none; }
}

/* ══ the case section: the war and the documents on one timeline ═══════════
   assets/case-2022.js shows one day at a time. Map marks, pins and chart data
   that are not yet true on that day carry .is-later. Colour follows the bands:
   the build-up is Elevated orange, the invasion and what Russia held are
   Conflict red, and the reading takes the colour of the grade it is at. */

.story { margin: 46px 0 0; border: 1px solid var(--line); border-radius: 4px; background: var(--void); }
.st-head { padding: 22px 24px 4px; display: grid; gap: 6px; }
.rf-t { font-weight: 600; font-size: 17px; }
.rf-s { font-size: 13px; color: var(--dim); max-width: 86ch; line-height: 1.55; }

/* stages */
.st-bar { display: flex; align-items: center; gap: 14px; padding: 16px 24px 0; }
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; position: relative; }
.st-steps::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: var(--line-2); }
.st-steps li { flex: 1; min-width: 0; }
.st-steps button { position: relative; display: grid; justify-items: start; gap: 6px; width: 100%;
  padding: 0 4px 0 0; background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; text-align: left; }
.st-steps button i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--void); box-sizing: border-box; transition: background-color .3s, border-color .3s; }
.st-steps button b { font: 500 10px/1.2 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.st-steps button.done i { background: var(--muted); border-color: var(--muted); }
.st-steps button[aria-pressed="true"] { color: var(--text); }
.st-steps button[aria-pressed="true"] i { background: var(--text); border-color: var(--text); box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--text); }
.st-steps li:nth-child(8) button b { color: var(--l4); }
.st-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.st-nav button { display: grid; place-items: center; width: 38px; height: 34px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--text); cursor: pointer; }
.st-nav svg { width: 16px; height: 16px; }
.st-nav .st-next { width: 46px; border-color: var(--text); }
.st-play .i-pause, .story.playing .st-play .i-play { display: none; }
.story.playing .st-play .i-pause { display: block; }
.st-pos { display: none; font: 10.5px var(--mono); letter-spacing: .08em; color: var(--dim); min-width: 44px; text-align: center; }
.st-steps button:focus-visible, .st-nav button:focus-visible, .ukm-l:focus-visible, .rf-chart:focus-visible {
  outline: 1px solid var(--text); outline-offset: 3px; }

/* map | words */
.st-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 26px; padding: 18px 24px 0; }
.st-right { display: flex; flex-direction: column; min-width: 0; }
.st-when { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-caps { position: relative; margin: 8px 0 0; }
.st-caps p { display: none; margin: 0; font-size: 18px; line-height: 1.45; color: var(--text); font-weight: 500; }
.st-caps p.on { display: block; animation: st-in .5s ease; }
@keyframes st-in { from { opacity: 0; transform: translateY(4px); } }

.st-gauge { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1px; margin: 18px 0 0;
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--line-2); overflow: hidden; }
.st-gauge .sg { display: grid; align-content: start; gap: 6px; padding: 12px 14px; background: var(--void); --c: var(--dim); }
.st-gauge .sg[data-grade="1"] { --c: var(--l1); }
.st-gauge .sg[data-grade="2"] { --c: var(--l2); }
.st-gauge .sg[data-grade="3"] { --c: var(--l3); }
.st-gauge .sg[data-grade="4"] { --c: var(--l4); }
.st-gauge b { font: 600 40px/1 var(--mono); color: var(--c); font-variant-numeric: tabular-nums; transition: color .3s; }
#sg-pl b { font-size: 30px; }
.st-gl { font-size: 12px; color: var(--muted); line-height: 1.35; }
.st-gauge .m-docs, .st-gauge .m-war, .st-gauge .m-none { display: none; }
.st-gauge[data-mode="docs"] .m-docs, .st-gauge[data-mode="war"] .m-war, .st-gauge[data-mode="none"] .m-none { display: block; }

.st-feed-h { margin: 18px 0 6px; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.st-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-feed li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: #0A0E13; }
.st-feed li.now { border-color: var(--line-2); background: #0F151C; }
.st-feed li.fresh { animation: st-card .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes st-card { from { opacity: 0; transform: translateY(-6px); } }
.st-feed .sf-d { white-space: nowrap; font: 10px var(--mono); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.st-feed .sf-t { flex-basis: 100%; font-size: 13px; line-height: 1.45; color: var(--muted); }
.st-feed li.now .sf-t { color: var(--text); }
.st-feed .sf-t b { color: var(--text); font-weight: 600; }
.st-feed li.more { border: 0; background: none; padding: 2px 10px; font-size: 12px; color: var(--dim); display: block; }
.st-feed li.hot { border-color: var(--l4); }
.st-feed .rf-k, .st-feed .rf-wn { white-space: nowrap; }
.rf-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.rf-k.k2 { color: var(--l2); }
.rf-k.k3 { color: var(--l3); }
.rf-k.k4 { color: var(--l4); }
.rf-wn, .rf-world b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--muted); font: 600 9px var(--mono); color: var(--text); vertical-align: 1px; }

/* the map */
.ukm-map { position: relative; width: 100%; }
.ukm-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ukmap-svg .land { fill: #0B1016; }
.ukmap-svg .land-ua { fill: #111820; }
.ukmap-svg .oblasts { fill: none; stroke: var(--text); stroke-opacity: .07; stroke-width: .7; vector-effect: non-scaling-stroke; }
.ukmap-svg .borders { fill: none; stroke: #36414D; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ukmap-svg .river { fill: none; stroke: #27313C; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.ukmap-svg .reservoir { fill: #1A222B; }
.ukmap-svg .hatch-line { stroke: var(--l4); stroke-opacity: .5; stroke-width: 1.4; }
.ukmap-svg .zone path { fill: url(#ukm-hatch); stroke: var(--l4); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ukmap-svg .massing path { fill: var(--l3); fill-opacity: .9; transform-box: fill-box; transform-origin: center;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.ukmap-svg .massing path.is-later { opacity: 0; transform: scale(.2); }
.ukmap-svg .zone { transition: opacity .6s ease; }
.ukmap-svg .zone.is-later { opacity: 0; }
.ukmap-svg .arrow .shaft { fill: none; stroke: var(--l4); stroke-opacity: .85; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.3, .1, .2, 1) var(--d, 0s); }
.ukmap-svg .arrow .tip { fill: var(--l4); transition: opacity .3s ease calc(var(--d, 0s) + 1.1s); }
/* Round caps leave a dot where a zero-length dash starts, so a shaft that
   has not been drawn yet is also hidden. */
.ukmap-svg .arrow .shaft { transition-property: stroke-dashoffset, opacity; }
.ukmap-svg .arrow.is-later .shaft { stroke-dashoffset: 1; opacity: 0; transition-delay: 0s; transition-duration: .3s; }
.ukmap-svg .arrow.is-later .tip { opacity: 0; transition-delay: 0s; }

.st-troops { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: grid; gap: 1px;
  padding: 8px 11px 9px; border: 1px solid color-mix(in srgb, var(--l3) 45%, transparent);
  border-radius: 3px; background: color-mix(in srgb, var(--void) 88%, transparent); }
.st-troops[hidden] { display: none; }
.st-tl { font: 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--l3); }
.st-troops b { font: 600 20px/1.15 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.st-ts { font-size: 11px; color: var(--dim); }

.ukm-labels { position: absolute; inset: 0; pointer-events: none; }
.ukm-l { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-4px, -50%);
  white-space: nowrap; pointer-events: none; font-size: 12px; color: var(--muted); background: none; border: 0;
  padding: 0; font-family: inherit; line-height: 1; transition: opacity .5s ease; }
.ukm-l span { text-shadow: 0 0 3px var(--void), 0 0 6px var(--void); }
.ukm-l i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); flex: none; }
.ukm-l.k-country span { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.ukm-l.k-big span { font-size: 12px; letter-spacing: .5em; color: #4A5663; }
.ukm-l.k-country, .ukm-l.k-sea, .ukm-l.k-zone { transform: translate(-50%, -50%); }
.ukm-l.k-sea span { font-style: italic; font-size: 11.5px; color: #4A5663; }
.ukm-l.k-zone span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--l4); }
.ukm-l.side-left { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); }
button.ukm-l { pointer-events: auto; cursor: pointer; }
button.ukm-l.k-city { transform: translate(-9.5px, -50%); }
button.ukm-l.k-city.side-left { transform: translate(calc(-100% + 9.5px), -50%); }
.ukm-l.is-later { opacity: 0; pointer-events: none; }
.ukm-pin { display: grid; place-items: center; width: 19px; height: 19px; flex: none; border-radius: 50%;
  background: var(--text); color: var(--void); font: 600 10.5px/1 var(--mono); box-shadow: 0 0 0 3px var(--void);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), background-color .3s, color .3s; }
.ukm-l .ukm-pin + span { color: var(--text); }
/* A city whose pin has not come yet keeps a plain dot where the pin will be,
   so the pin grows out of the dot rather than appearing from nowhere. */
button.ukm-l.k-city .ukm-pin.is-later { transform: scale(.27); background: var(--muted); color: transparent; box-shadow: none; }
button.ukm-l.k-city .ukm-pin.is-later + span { color: var(--muted); }
.ukm-l.hot .ukm-pin { background: var(--l4); color: var(--text); }
.ukm-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--text); pointer-events: none; transition: opacity .5s; }
.ukm-dot.is-later { opacity: 0; }

.st-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.st-key > span { display: inline-flex; align-items: center; gap: 7px; }
.st-key .ukm-pin { width: 16px; height: 16px; font-size: 9px; box-shadow: none; }
.ukm-sw { display: block; width: 19px; height: 15px; flex: none; }
.sw-zone { border: 1px solid color-mix(in srgb, var(--l4) 60%, transparent);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--l4) 55%, transparent) 0 1.4px, transparent 1.4px 5px); }
.sw-mass { width: 10px; height: 10px; margin: 0 4px; background: var(--l3); transform: rotate(45deg); }
.sw-arrow { height: 3px; background: var(--l4); border-radius: 2px; position: relative; width: 16px; margin-right: 4px; }
.sw-arrow::after { content: ""; position: absolute; right: -4px; top: -4px; border: 5.5px solid transparent;
  border-left: 7px solid var(--l4); border-right: 0; }

/* the chart: the shared time axis */
.st-chart { padding: 20px 24px 0; margin-top: 18px; border-top: 1px solid var(--line); }
.rf-key { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rf-key > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.rf-key i { display: block; flex: none; }
.rf-key .k2 i, .rf-key .k3 i, .rf-key .k4 i { width: 5px; height: 13px; border-radius: 1px; }
.rf-key .k2 i { background: var(--l2); }
.rf-key .k3 i { background: var(--l3); }
.rf-key .k4 i { background: var(--l4); }
.rf-key .kl i { width: 18px; height: 2px; background: var(--text); }
.rf-key .kpl i { width: 18px; height: 0; border-top: 1.5px dashed var(--muted); }
.rf-key .kw i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted);
  font: 600 9px/14px var(--mono); text-align: center; font-style: normal; color: var(--text); }
.rf-chart { position: relative; margin: 12px 0 0; touch-action: pan-y; }
.rf-chart svg { display: block; overflow: visible; }
.rf-chart .g { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.rf-chart .g0 { stroke: var(--line-2); stroke-dasharray: none; }
.rf-chart .gl { font: 9.5px var(--mono); fill: var(--dim); text-anchor: end; }
.rf-chart .mo { stroke: var(--line); }
.rf-chart .ml { font: 10px var(--mono); letter-spacing: .08em; fill: var(--dim); text-anchor: middle; }
.rf-chart .sl { font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--dim); }
.rf-chart .wg { stroke: var(--text); stroke-opacity: .1; }
.rf-chart .wm circle { fill: var(--void); stroke: var(--muted); stroke-width: 1; }
.rf-chart .wm text { font: 600 9px var(--mono); fill: var(--text); text-anchor: middle; }
.rf-chart .wm.on circle { fill: var(--text); stroke: var(--text); }
.rf-chart .wm.on text { fill: var(--void); }
.rf-chart .zero { stroke: var(--l4); stroke-opacity: .7; }
.rf-chart .zl { font: 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--l4); text-anchor: end; }
.rf-chart .bar.k2, .rf-chart .tick.k2 { fill: var(--l2); }
.rf-chart .bar.k3, .rf-chart .tick.k3 { fill: var(--l3); }
.rf-chart .bar.k4, .rf-chart .tick.k4 { fill: var(--l4); }
.rf-chart .area { fill: var(--text); fill-opacity: .05; }
.rf-chart .lua { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linejoin: round; }
.rf-chart .lpl { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 3 3; }
/* What has not happened yet on the chosen day is an outline of what is coming. */
.rf-chart .ghost { opacity: .13; }
.rf-chart .wm, .rf-chart .wg { transition: opacity .3s; }
.rf-chart .marks .wm.later { opacity: .25; }
.rf-chart .call line { stroke: var(--line-2); }
.rf-chart .cb { font: 600 10.5px var(--mono); letter-spacing: .08em; fill: var(--text); text-anchor: middle; }
.rf-chart .cs { font-size: 10.5px; fill: var(--dim); text-anchor: middle; }
.rf-chart .cur line { stroke: var(--text); stroke-opacity: .55; }
.rf-chart .cur.off { display: none; }
.rf-chart .cu { fill: var(--text); }
.rf-chart .cp { fill: var(--void); stroke: var(--muted); stroke-width: 1.3; }
.rf-chart .hit { fill: transparent; cursor: ew-resize; }
.st-hint { margin: 4px 0 0; font-size: 12px; color: var(--dim); }

/* the reference lists, folded */
.st-more { margin: 16px 24px 0; border-top: 1px solid var(--line); }
.st-more summary { padding: 14px 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.st-more summary:hover { color: var(--text); }
.st-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.st-lh { margin: 0 0 6px; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.st-2014 { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.st-2014 li { display: grid; padding: 5px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.st-2014 time { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.st-feed .y2014 .rf-k { color: var(--dim); }
.rf-world, .ukm-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rf-world li, .ukm-legend li { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; align-content: start;
  padding: 5px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rf-world li b { grid-row: span 2; margin-top: 1px; }
.rf-world time { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ukm-legend li p { margin: 0; }
.ukm-legend .ukm-pin { width: 17px; height: 17px; font-size: 9.5px; box-shadow: none; margin-top: 1px; }
.rf-note { margin: 14px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; max-width: 92ch; }
.ukm-fine { margin: 6px 0 16px; font-size: 11.5px; color: var(--dim); line-height: 1.5; max-width: 92ch; }
.ukm-end { margin: 0; padding: 14px 24px 20px; font-size: 13.5px; color: var(--text); }

@media (max-width: 1000px) {
  .st-main { grid-template-columns: 1fr; }
  .st-steps button b { font-size: 9px; }
}
@media (max-width: 720px) {
  .st-head { padding: 18px 16px 4px; }
  .st-bar { padding: 12px 16px 0; }
  .st-steps { display: none; }
  .st-pos { display: block; }
  .st-nav { flex: 1; justify-content: space-between; }
  .st-nav .st-next { width: 64px; }
  .st-main { padding: 14px 16px 0; gap: 14px; }
  .st-caps p { font-size: 16px; }
  .st-gauge b { font-size: 30px; }
  #sg-pl b { font-size: 24px; }
  .st-chart { padding: 16px 12px 0; }
  .st-more { margin: 14px 16px 0; }
  .st-lists { grid-template-columns: 1fr; }
  .ukm-end { padding: 12px 16px 18px; }
  .ukm-l.minor { display: none; }
  .ukm-l { font-size: 10.5px; }
  .ukm-l.k-country span { font-size: 8.5px; letter-spacing: .16em; }
  .ukm-l.k-big span { letter-spacing: .3em; }
  .ukm-l.k-sea span { font-size: 10px; }
  .ukm-pin { width: 16px; height: 16px; font-size: 9px; box-shadow: 0 0 0 2px var(--void); }
  .ukm-l.k-spot .ukm-pin + span { display: none; }
  .st-troops { left: 6px; bottom: 6px; padding: 5px 8px 6px; }
  .st-troops b { font-size: 15px; }
  .st-ts { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before, .story *::after { transition: none !important; animation: none !important; }
}

/* The record's tape: the last 24 hours in half-hours, real counts. */
.tape i.hit { background: color-mix(in srgb, var(--l1) 70%, var(--line-2)); }
.tape i.now { background: var(--l1); }
.tape-l { display: flex; justify-content: space-between; width: 285px; max-width: 100%; margin: 6px 0 24px;
  font: 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

/* The field's rings on the header map: over the map, under its scrim. */
#map > canvas.hero-field { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
#map > canvas.hero-field.on { opacity: 1; }
.st-feed .sf-all { padding: 0; border: 0; background: none; color: var(--muted); font: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-feed .sf-all:hover { color: var(--text); }